HTML + CSS step by step (2014)

Chapter 2: How To Use HTML To Make Your Own Web Page

“Truth can only be found in one place: the code.”- Robert C. Martin

In this chapter, you will learn about how to use HTML to make your own web page, including:

• How to setup our own HTML document

• Nested elements

• Block-level elements

• Self-closing tags

• Errors and solutions

• Applying what you have learned

How To Setup Our Own HTML Document

You’ve learned the basics of HTML. This section will teach you how to make your own HTML document.

First of all, open up a text editor. Since I use the Windows 7 platform, I will utilize Notepad. Mac users can go for TextWrangler or such like.

Note: Do not use Microsoft Word or other text editors.

<!DOCTYPE html>

<head>

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

<p>This your first web page.</p>

</body>

</html>

The Hello World app will help you learn how you can apply the basics of HTML to create your very first HTML document. <!DOCTYPE html>informs the web browser (this can be Internet Explorer, Safari, Mozilla Firefox and/or Google Chrome) about what version of the HTML markup language you will be utilizing. This is always inserted in the very first line of a document. The<html> is used to tell the browser “this is where my text starts”.

When programmers want to insert a header, the insert the <head> opening tag. No user can see the tag itself. You might see the document’s title or heading instead. The <h>Hello World</h1> anchor text is used to give the HTML document the Hello World header.

The<meta charset="utf-8"> tag is used to tell the web browser how the characters should be encoded or read. The <p>This your first web page.</p> anchor text is used to signify the beginning of a new paragraph.

Here’s what you will see:

Hello World

This is your first web page.

Nested Elements

Elements can be embedded within one another to organize an HTML document and to make it more eligible. The <head> and <body> elements were nested into the document.

These elements are indented into the elements.

Block-Level Elements

These are also referred to as inline elements and they tend to fill up the space of the parent element thus creating a block. This is why these are referred to as “blocks” too. These appear in the <body> element. All block-level elements will begin on new lines.

Go through the following website to learn more about block-level elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements. You need to know about these to understand the Box Model.

Self-Closing Tags

These tags do not have closing tags. If you look at the previous example, the <meta> tag had no closing tag. These are known as self-closing tags.

Errors And Solutions

At the end of the day, all programmers are humans and so, we are bound to make mistake in our codes. While it is good practice to go through these and to find them on your own, you need not worry because built-in validators will help you detect and fix mistakes.

Applying What You Have Learned

You will, now, learn to apply what you have learned, to make a web page of your own. Follow these instructions to do so:

1. Open up the text editor and create a file entitled index.html. Save this in a folder on your desktop entitled HTML and CSS.

2. Save this document structure into the file:

1. <!DOCTYPE html>

2. <html lang="en">

3. <head>

4. </head>

5. <body>

6. </body>

7. </html>

3. Next, add the following into the head, meta and title elements:

1. <head>

2. <meta charset="utf-8">

3. <title>My Page</title>

4. </head>

4. Now, let’s make things a little more interesting by adding in a few more elements:

1. <body>

2. <h1>My Page</h1>

3. <p>This is my first attempt to make a webpage using CSS and HTML. I am so excited about doing this on my own!</p>

4. </body>

5. Save the file and go look for it in the file entitled HTML and CSS. Drag this to any web browser.

Try doing this exercise on your own to get a grasp of how to go about doing this on your own. You can include any text between the tags shown above.

Summary

This chapter familiarizes you with the process of making your own web page by using basic HTML tools like elements, tags and you have learned how to make the Hello World app by utilizing these tools, too.

Questions

1. What are nested elements?

2. What are anchored tags?