Lesson 1: Introduction to HTML
HTML, or HyperText Markup Language, is the standard markup
language used to create web pages. It defines the structure and layout of a web document by
using a variety of tags and attributes. Let's dive into the basics:
HTML documents are plain text files with a ".html" extension. They consist of elements enclosed in
tags. An element typically has an opening tag, content, and a closing tag. For example:
Here, <p> is the opening tag, This is a paragraph. is the content, and </p> is the closing tag. This creates a paragraph element.
Lesson 2: Basic HTML Boilerplate
Every HTML document follows a basic structure, often referred to as the boilerplate.
This structure includes the necessary tags to define the document type, the head section,
and the body section. Here is a typical HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<!-- Your content goes here --> <!-- PS: This is a comment -->
</body>
</html>
Explanation:
- <!DOCTYPE html>: This declaration defines the document type and version of HTML (HTML5 in this case).
- <html lang="en">: The <html> tag is the root element of the document. The lang attribute specifies the language of the document.
- <head>: The head section contains meta-information about the document, such as character encoding and the title.
- <meta charset="UTF-8">: This sets the character encoding to UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This ensures proper scaling on different devices.
- <title>Your Page Title</title>: The title of the document, which appears in the browser tab.
Lesson 3: HTML Elements
HTML elements are the building blocks of web pages. They represent different types of
content such as text, images, links, and more. Let's explore some common elements:
- <h1> to <h6>: Headings from the most important (h1) to the least important (h6).
- <p>: Defines a paragraph.
- <a>: Creates hyperlinks to other web pages.
- <img>: Inserts images into the document. Please note that the <img> is self closing
so you don't need an </img>
Each element may have attributes that provide additional information. For example, the <a>
element requires the href attribute to specify the URL of the link:
<a href="https://www.example.com">Visit Example</a>
Lesson 4: Text Formatting
HTML provides several tags to format text. Here are some commonly used ones:
- <strong>: Makes text bold.
- <em>: Emphasizes text (usually italicized).
- <u>: Underlines text.
- <br>: Inserts a line break.
- <hr>: Creates a horizontal line.
Lesson 5: Links and Images
Links and images are essential for navigating web pages
and displaying visual content. Here's how to use them:
- Links: Use the <a> tag with the href attribute to create clickable links.
- Images: Utilize the <img> tag with the src attribute to embed images.
Example of a link and an image:
<a href="https://www.example.com">Visit Example</a><img src="image.jpg" alt="Description of the image">
Lesson 6: Lists
HTML supports both ordered and unordered lists. Here's how to create them:
- Unordered lists: Use the <ul> tag with <li> tags for list items.
- Ordered lists: Use the <ol> tag with <li> tags for list items.
Example of both types of lists:
<ul><li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Lesson 7: Buttons in HTML
Buttons are interactive elements that allow users to perform actions,
such as submitting forms or triggering JavaScript functions. The <button> element is used to create clickable buttons.
Here is an example of the code to create a button:
<button>Click Me</button>Lesson 8: Containers
Containers are very useful for creating websites. There are used
to style websites better.
in HTML they are called a "div". Here is an example to use a div:
<div>Your content here!</div>Congrats!
Now you understand the super important foundamentals for building websites!