How to expand upon your first HTML Webpage (pt. 2)

Hello everyone and welcome back to another blog post! Today I will be expounding upon the information that I published in my last blog post where I detailed the process of creating your very own HTML page. Now we are going to add more information to your page and get it looking professional in no time. On that note, let’s get started!

Step 1: Add some content Now it’s time to add some content to your HTML page. Let’s start with a basic navigation menu. Replace the <h1>My HTML Page</h1> line with the following code:

phpCopy code<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

This code adds a navigation menu to your HTML page. The <nav> element is used to define a section of the page that contains navigation links. The <ul> element is an unordered list of links, and each link is represented by an <li> element. The href attribute in the <a> tag tells the browser where to go when the link is clicked. In this case, we’re using the “#” character to indicate that the links don’t actually go anywhere.

Next, let’s add a section that contains some text and an image. Add the following code after the <nav> section:

cssCopy code<section>
	<h2>About Me</h2>
	<p>Hi, my name is Shrey and I'm a web developer based out of California. I have experience with HTML and JavaScript, and I'm always learning more!</p>
	<img src="https://via.placeholder.com/400x200" alt="Placeholder image">
</section>

This code adds a section that contains a heading, a paragraph of text, and an image. The <section> element is used to define a section of the page that contains related content. The <h2> element is a second-level heading, and the <p> element is a paragraph of text. The src attribute in the <img> tag tells the browser where to find the image.

Step 2: Add some more advanced HTML features Now that we’ve covered the basics, let’s add some more advanced HTML features to our page. First, let’s add a form that allows users to submit their contact information. Add the following code after the <section> section:

phpCopy code<section>
	<h2>Contact Me</h2>
	<form>
		<label for="name">Name:</label>
		<input type="text" id="name" name="name"><br>

		<label for="email">Email:</label>
		<input type="email" id="email" name="email"><br>

		<label for="message">Message:</label>
		<textarea id="message" name="message

Step 3: Add a footer A footer is an important part of any website. It provides a place to include additional information, such as copyright notices, links to social media profiles, and contact information. Add the following code after the closing </section> tag:

phpCopy code<footer>
	<p>&copy; Shrey 2023</p>
	<ul>
		<li><a href="#">Facebook</a></li>
		<li><a href="#">Twitter</a></li>
		<li><a href="#">LinkedIn</a></li>
	</ul>
	<p>Email: [email protected]</p>
</footer>

This code adds a footer to your HTML page. The <footer> element is used to define a section of the page that contains footer content. The <p> elements contain the copyright notice and email address, and the <ul> element is an unordered list of links to social media profiles.

In the next post, we will go over stylizing and adding lots of unique colors to your webpage, I’ll see you all next time!