Hopefully you’ve understood so far what we have done.
Let’s advance what we created in our previous tutorial. As a reminder here is our code from Part 2:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is my first webpage created using HTML.</p>
</body>
</html>
That is our basic HTML from Part 2, here’s an example of a slightly more advanced HTML document structure that includes some additional elements:
<!DOCTYPE html>
<html>
<head>
<title>My Advanced Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Welcome to my advanced webpage</h1>
<p>This is my first webpage created using HTML.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our company and what we do.</p>
</section>
</body>
</html>
In this example, we’ve added a few new elements and attributes to the basic HTML document structure.
<link rel="stylesheet" href="styles.css">: This line is used to link an external CSS stylesheet to the HTML document. The link element is used to link an external resource to the document, and the rel attribute specifies the relationship between the current document and the linked resource. The href attribute specifies the location of the resource to be linked. In this case, it is linking to a file called “styles.css” which will be used to style the web page.<header>: This element is used to create a header section on the webpage. It is a semantic element introduced in HTML5 and it is used to group together introductory content or a set of navigation links. It can be used to contain items like the logo, site title, and main navigation.<nav>: This element is used to create a navigation menu on the webpage. It is also a semantic element introduced in HTML5, and it is used to group together a set of navigation links. Typically, it would be used to create a menu of links that allow users to navigate the website.<ul> and <li>: These elements are used to create an unordered list. The ul element represents an unordered list, and the li element represents a list item. In this example, we’ve used them to create a list of links that will be used in the navigation menu.<a href="#home">Home</a>: This is an anchor element, which is used to create a link to another webpage or a specific location on the same webpage. The href attribute specifies the destination of the link and the content between the opening and closing <a> tags, in this case “Home”, is displayed as the link text. In this example, the #home is a fragment identifier, which is used to create a link to a specific location on the same webpage. The id attribute is used to identify the section on the page that the link is supposed to navigate to, in this case the section with the id=”home”.In our next tutorial we will learn about CSS or Cascading Style Sheets to give our basic HTML some style.
This marks the end of our introduction into HTML and starts our introduction into CSS.
You must be logged in to post a comment.
