Creating a Simple Web Page with HTML 5
To get started with web design and HTML5, the best idea is to jump into some code with a simple website design and structure. This article will present some basic HTML5 code and explain how it works. We'll also describe each basic tag and explain how you can upload your new HTML5 page to your web server.
Open Your Favorite Text Editor
There are several text editors on the market. For instance, Notepad++ is a text editor that color-codes the HTML syntax. Dreamweaver is also a popular editor that makes it easier to work with layouts. Notepad++ is free, so it's probably your best choice to get started. Make sure you have the syntax set to HTML, so the editor knows how to work with your tags and properly color-code them. Color-coding is popular with programming to help you read the content more quickly. For instance, green text is globally understood as a comments section. Brown color-coding is set for HTML tags, and HTML property names are red. Property values are blue.
Your First HTML5 Web Page
With your editor open, you can copy and paste the following HTML5 code into a new HTML page.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
</head>
<body>
The content you want to display to users.
</body>
</html>
Let's dissect this page line-by-line, so you can understand how HTML5 works. The above code is a basic, no-frills web page, but its structure is important when you want to build your own pages. The HTML tags you see in the above page are used in every page on your own site.
The first line of code is the DOCTYPE. You can technically exclude this tag and browser will attempt to decipher the HTML version within the page. However, it's best to be explicit instead of relying on parsers. This DOCTYPE is specific for HTML5. Previous versions of HTML have different DOCTYPE tags, so you can only use this DOCTYPE if you are using HTML5.
The next tag is the opening HTML tag. You'll notice that each of the HTML tags has a closing tag. The "/tagname" is always the closing tag and must have a matching open tag. In other words the "<html>" is the opening HTML tag and it must have a closing "</html>" tag to match. If you don't have proper opening and closing tags, your pages might not display properly in your visitor's browser.
Let's move on to the <head> tag. The head tag is where several settings are specified. You don't need anything within the head tag, and technically you can exclude it from your pages altogether. However, the head tag contains the title, links to CSS styles and files, and any external JS files you use in your code. In this example, the head tag only contains the title. The title is also a tag indicated with the <title> and </title> opening and closing tags. Within the opening and closing tags, you place your title text. We added "Your web page title" within the tags, and this is the content that displays in the user's browser. You should only have one title tag in your pages. More than one tag is a syntax error, and it can affect the way a user views your page as well as confuse search engine bots.
The final tag in our example is the <body> tag. The opening and closing body tags are where all of your content is added. Images, text, videos, and audio are all added within the body tags. In this example, the text "The content you want to display to users" renders in the browser. In later chapters, you'll learn how to stylize this text and add other properties to your web pages.
Basic Text Elements
There are several text tags that you can use to stylize your content. You can italicize, bold, or underline text. You can also set text sizes, colors, and font directly within the HTML or using CSS. The proper way to stylize text is using CSS, but it's good for you to know how to edit text styles using HTML. You might need to edit someone else's code, so it's good to understand how to read these HTML tags.
One of the most common text elements is the <p> or paragraph tag. The paragraph tag lets you separate styles between your content. For instance, you might want to bold a paragraph to set it apart from other content on the site. You can do this using the <b> (bold) tag or use a paragraph tag with corresponding CSS styles that bold the content. Using the same example as above, the following code wraps the text within a paragraph tag.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
</head>
<body>
<p>The content you want to display to users. </p>
</body>
</html>
Another advantage of using the paragraph tag is that browsers automatically separate paragraphs just like a regular document. When you wrap your text in paragraphs, the browser sets spacing and carriage returns in the content just like a Word processing application. With CSS, you can change the spacing and formatting.
Some other common tags for text are the <b>, <i>, and <u> tags. You can also use the <strong> tag instead of the <b> (bold) tag. Both the <strong> and <b> tags indicate that important text should be bold formatted. The <i> tag italicizes text. You can nest the <b> and <i> tag to display bold, italicized text. The following code gives you an example of nested tags.
<!DOCTYPE html>
<html>
<head>
<title>
