If you want to become a web developer, you need to learn HTML and CSS very well. These two tools in web development are frequently referred to as the foundation of the Web.
Any typical website or web page is built using lines of HTML(Hypertext Markup Language) and CSS(Cascading Style Sheets) code which are two essential technologies for building websites. CSS styles the content and HTML is the language used for creating the structure and content of web pages.
ABOUT HTML
HTML (HyperText Markup Language) is a markup language the web browser reads to generate textual content on the browsers. Html is a language made up of components called tags. Tags define particular Elements in the document examples of Tags in HTML are opening Tag: "<p>", closing Tag: "</p>", and self Closing Tag: <img />.
HTML files are saved with a .html file extension.
Intro to Tags:
HTML uses tags to define the various Elements, such as headings, paragraphs, images, links, lists, etc. These tags are enclosed in angle brackets "<>" and can have attributes that define additional properties of the element (<p class="nav"/>).
Every content on the webpage must be inside a TAG. there are three types of Tag
1. Opening Tags.
2. Closing Tags.
3. Self-Closing Tags.
Opening Tags: opening tags are tags in an Html element that marks the beginning or the starting point of an Html Element. examples of opening tags <p>, <div>, <ul>, <table>, etc.
Closing Tags: closing tags are tags in an HTML element that serves as the ending part of the html element or that ends the html element. examples of closing tags </p>, </div>, </ul>, </table>, etc.
Self-Closing Tags: self-closing tags are tags that serve as the opening and closing tags of that HTML element. they neither have an opening nor closing tag of their own they serve as the opening tags and closing tag of that element. Examples of a self-closing tag are: <img />, <br />, <input />, etc.
Intro to Element:
In HTML (HyperText Markup Language), an Element is a piece of content that is surrounded by tags and defines the structure and content of a webpage. An HTML element is made up of an opening tag, content, and a closing tag. and also in some cases, self-closing tags are used.
Here is an example of an HTML element for a paragraph denoted as <p></p>:<p>This is a paragraph.</p>
Here is an example of an HTML element for a div container denoted as <div></div>:<div> <p>This is a paragraph.</p> </div>
Here is an example of an HTML element for an image denoted as <img />:<img src={./bird.png} alt="bird pic" />
Here is an example of an HTML element for an input denoted as <input />:<input type="text" />
Intro to Html Component:
Html components are HTML elements on a web page. examples of HTML components.
Here is an example of an HTML component for a paragraph:on my HTML file, this is called a paragraph element: <p>This is a paragraph:</p> on the web, this is called an HTML component. which is been display as show below: This is a paragraph
Intro to HTML Structure:
The Html5 starts with the <! Doctype html> which is the start line of your HTML code.
Our HTML code is divided into two parts the header and the body part the header part embed inside the HTML open and closing tag or inside of the html element.
<!DOCTYPE html><html> <head> <title>An Intro to HTML<title> </head><body><p>This is a paragraph</p></body></html>
The Header:
In HTML (HyperText Markup Language), the <head> tag is used to contain information about the document that is not visible on the webpage itself. The <head> tag is located before the <body> tag and is typically used to include metadata, links to external resources, and other types of information that are important for the functionality and accessibility of the webpage.
The <head> tag is an essential part of an HTML document and is included in every webpage. By using the elements in the <head> tag, developers can provide important information about the webpage and ensure that it is accessible, functional, and optimized for search engines.
The Body:
In HTML (HyperText Markup Language), the <body> tag is used to contain the visible content of a webpage, such as text, images, videos, and other media. The <body> tag is located after the <head> tag and is the primary container for the content that users see and interact with when viewing the webpage.
The <body> tag is an essential part of an HTML document and should be used to structure and organize the content of the webpage. By using the appropriate HTML elements within the <body> tag, developers can create webpages that are easy to read, navigate, and interact with.
ABOUT CSS
While HTML is a markup language used to format/structure a web page, CSS is a design language that you use to make your web page look nice and presentable.
Cascading Style Sheets, or CSS, is a tool you can use to enhance the visual appeal of a website. By thoughtfully incorporating CSS styles, you may improve the appearance and usability of your page.
There are two types of CSS selectors that are important to understand, id and class. When either one of these two selectors is used, it makes specific styling of certain tags much easier than styling by calling HTML tags. For example, there may be a case where you may want to style one item in a list a certain way while styling the rest of the items or a few other items another way.
1. class: The class attribute does not need to be unique for HTML tags. You can have the same class attributes for multiple HTML tags. Class attributes are defined within HTML tags by typing: class= “…” (In between the parenthesis, type the class name). The syntax in CSS to refer to a class is the dot character (.).
in HTML<p class="paragraph">this is a paragraph</p>
in CSS.paragraph{color: "#000"}
2. id: The id attribute must be unique for a particular HTML element. The id attribute is defined within a particular HTML tag by typing: id= “…” (In between the parenthesis, type the id name). The syntax in CSS to refer to an id is the hash character (#).
in HTML<p id="paragraph">this is a paragraph</p>
in CSS#paragraph{color: "#000"}
3. element name: In CSS (Cascading Style Sheets), styling by element name refers to the process of applying styles to HTML elements based on their tag name. This is one of the most common ways to apply styling to elements in a webpage.
To apply styling by element name, you can use the element name followed by a set of curly braces {} containing one or more CSS properties and their corresponding values. For example, to apply a red text color to all <h1> elements, you could use the following CSS code:
in CSSh1 { color: red; }
in HTML<h1>this is a header</h1>
To illustrate how CSS works, I will be sharing the code which sets the background color of the three levels of headers to red, blue, and green respectively:
h1 { background-color: #ff0000; } h2 { background-color: #0000FF; }
Summary
We see that HTML and CSS are the foundation of web development.