In this HTML5 tutorial for beginners, we will create a simple, barebones webpage using HTML5.
What You’ll Need
- Some familiarity with basic HTML tags such as,, and.
- A basic knowledge of CSS.
- A text editor such as Notepad or Notepad++. You can also use a professional web editor like Adobe Dreamweaver.
Creating a Simple HTML5 Website
The best way to learn something is by actually doing it. With that in mind, we’ll jump right into this tutorial and create our very own HTML5 website.
First, create a new document in your favorite text editor. We highly recommend Notepad++, a free alternative to Notepad.
In the blank document, copy and paste the following code:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <title>Awesome HTML5 Webpage</title> <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”> <meta name=”author” content=”Udemy”> <link rel=”stylesheet” href=”style.css”> </head> <body> <div id=”wrapper”> <header class=”main_headline”> <nav> <ul> <li><a href=”#”>About</a></li> <li><a href=”#”>Services</a></li> <li><a href=”#”>Products</a></li> <li><a href=”#”>Contact</a></li> </ul> </nav> <h1>Super Duper Awesome Headline! </h1> </header> <div id=”primary_content”> <section id=”left_column”> <h3>A Hitchhiker’s Guide!</h3> <p>To the Galaxy!</p> </section> <section id=”right_column”> <article> <header> <h3>The Answer to Life?</h3> <p>Published: 30 August 2013</p> </header> <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p> <blockquote>”42”</blockquote> </article> </section> </div> <footer> <p>The Footer is where all useless info goes!</p> </footer> </div> </body> </html>
Confused? Don’t worry. We’ll look at every line of code in detail below.
0 comments:
Post a Comment