Welcome to Day 1 of learning HTML
Today, we will be learning about HTML structure and elements. Let's get started!
Content of Day 1 session
- Installtion and setup of vs code editor
- What is HTML ?
- Basic structure of HTML document
- Commonly used HTML tags and their purpose
- Creating a simple webpage using HTML
1. What is HTML ?
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage by using various tags and elements.
2. Basic structure of HTML document
An HTML document typically consists of the following structure:
- <!DOCTYPE html>: Declares the document type and version of HTML being used.
- <html>: The root element that wraps the entire HTML document.
- <head>: Contains meta-information about the document, such as title, character set, and links to external resources like CSS files.
- <title>: Specifies the title of the webpage, which is displayed in the browser's title bar or tab.
- <body>: Contains the main content of the webpage, including text, images, links, and other elements that are visible to users.
3. Commonly used HTML tags and their purpose
- <h1> to <h6>: Heading tags used to define headings of different levels.
- <p>: Paragraph tag used to define a block of text.
- <a>: Anchor tag used to create hyperlinks to other webpages or resources.
- <img>: Image tag used to embed images in the webpage.
- <ul> and <ol>: Unordered and ordered list tags used to create lists of items.
- <div>: Division tag used to group and style sections of content.
types of Heading tags
- <h1>: Represents the main heading of a webpage. It is typically used for the most important title or heading on the page.
- <h2>: Represents a subheading of the main heading. It is used to divide content into sections and subsections.
- <h3>: Represents a sub-subheading of the main heading. It is used to further divide content within sections.
- <h4>: Represents a sub-sub-subheading of the main heading. It is used for further subdivision of content.
- <h5>: Represents a sub-sub-sub-subheading of the main heading. It is used for even finer subdivision of content.
- <h6>: Represents the least important heading level. It is rarely used but can be employed for very specific purposes.
Types of lists
- Unordered List (<ul>): An unordered list is used to create a list of items where the order of the items does not matter. Each item in the list is represented by the <li> (list item) tag. The items are typically displayed with bullet points.
- Ordered List (<ol>): An ordered list is used to create a list of items where the order of the items matters. Each item in the list is also represented by the <li> (list item) tag. The items are typically displayed with numbers or letters to indicate their order.
creating a unordered list
- Item 1
- Item 2
- Item 3
Code of unordered list
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
creating a ordered list
- First item
- Second item
- Third item
Code of ordered list
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
how to change orde of ordered List
By default, an ordered list starts with the number 1. However, you can change the starting number of an ordered list by using the "start" attribute in the <ol> tag.
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>
In this example, the ordered list will start with the number 5 instead of 1. The items will be numbered as 5, 6, and 7.
Creating a sample web page
Here is a simple example of a webpage using HTML:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple webpage created using HTML.</p>
<a href="https://www.youtube.com/embed/GkZN_-HMCJ8">Click here to video content</a>
</body>
</html>
This code creates a basic webpage with a heading, a paragraph, a hyperlink, and an image.