When building an HTML page, the options available to you are almost limitless. There is an entire world of HTML tags waiting to be used to build your perfect website. For this tutorial, you will learn a wide variety of HTML tags that create wonderful enhancements to your website.
This tutorial will explore the creative effects of HTML (Hypertext Markup Language). All you need to start with is a simple code editor such as Notepad ++. The HTML will be supplied for you.
The Essentials of HTML
The Basic Structure
The basic structure of an HTML document includes tags which surround content and apply meaning to it. You will see these in the sample section below.
Note: Remember that all tags begin and end, and to end the tag, you have to close it by using the forward slash as in <p>text</p>.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The following breaks down the structure:
- <!DOCTYPE html>: The first line on the top is a document type declaration and it lets the browser know this is an HTML page.
- <html>: This is the opening tag that kicks things off and tells the browser that everything between that and the </html > closing tag is an HTML document.
- Everything between <body> and </body> is the main content of the document that will appear in the browser window.
HTML Tags
There is a huge world of HTML tags and they are broken down into many categories including:
- Page Titles
- Paragraphs
- Headings
- Lists
- Links
- Images
- Tables
Within these categories are a multitude of tags that define the page layout and structure of your content. Now it is time to dig in and cover some basics for all of these items.
Page Titles
Adding a Page Title is important because this is what will appear in the tab of the web browser when a viewer clicks on your page. Choose a short title and choose a name wisely as this reflects your web content.
The title goes inside the <head> tag and does NOT go inside the <body> tag because this does not appear in your document for readers to see.
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
This is the landing page
</body>
</html>
Paragraphs
Your web page will need text and using the <p> tag is the best way to keep your text clean and organized.
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<p>This is the landing page</p>
</body>
</html>
The <p> tag will keep your text grouped together. If you want to add a line break for some reason, simply use <br> to do so.
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<p>This is the landing page.<br>Once I learn more, I can really make this page look nice.</p>
</body>
</html>
Note: By learning the basics of CSS, you can learn how to customize the font of the <p> tag.
Headings
Headings can be listed from <h1> to <h6> and all web browsers will understand that these are heading level 1-6. From top to bottom, the heading font gets smaller to show that the next layer is a sub-heading.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Type text for Heading level 1</h1>
<h2>Type text for Heading level 2</h2>
<p>This is the paragraph area of text you want to enter</p>
</body>
</html>
Lists
We naturally need lists at some point to keep things organized and to make content readable and easy to follow.
To create a bullet list you will use <ul> which stands for unordered list,” and <li> which creates the list of items.
<!DOCTYPE html>
<html>
<body>
<p>Udacity will help you to explore new areas of HTML web development.</p>
<ul>
<li>first line</li>
<li>second line</li>
<li>third line</li>
</ul>
</body>
</html>
Links
Adding links allows you to place areas in your page that link (open) other web destinations.
Use the <p> tag so that you can place paragraph text. Then you will need to add the a href tag to tell the browser that this is a link. Inside the quotation marks you will add the URL.
Note: The HREF is an attribute of the anchor tag, which is also used to identify sections within a document.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>Here is where you will find the main Udacity page.</h2>
<p><a href=”https://www.udacity.com/”>Udacity</a></p>
</body>
</html>
Images
Where would the world be without images for a web site? You will want to spice up your site by adding images.
To add an image you will use the img tag. You must designate the source of the image so that your web site knows where to pull the image from. Note that the source can be local to the machine, local server, or external from another site.
<!DOCTYPE html>
<html>
<body>
<img src=”wave.jpg” alt=”blue ocean wave”>
</body>
</html>
Side Note: The alt tag shown in this illustration helps you as you code, to remember what this image is, and it also becomes apparent for the visually impared in case they are listening to the web page. The image description will be called out.
You can add specific dimensions to the image to control the image size as well.
<!DOCTYPE html>
<html>
<body>
<img src=”wave.jpg” alt=”blue ocean wave” width=”200px” height=”150px”>
</body>
</html>
See the blog on working with images for a deeper look into this creative world.
Tables
See the blog on Creating Intermediate Tables for a deeper look into table design.
Tables use the following tags:
- table: designates a table layout
- th: used for the top heading row of the table
- tr: used for the table row
- td: used for the table columns
For the tags in the Tables category, you will see the table, th, tr, and td tags. These tags simply allow you to define and create a table in your web page.
<!DOCTYPE html>
<html>
<body>
<table border=”1″ width=”400px”>
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
</tr>
<tr>
<td>second row – column 1</td>
<td>second row – column 2</td>
</tr>
</table>
</body>
</html>
Final Note
To combine all of these items that were reviewed into one HTML page, you would see the following:
There are so many HTML tags to choose from and only you will know which tags will become necessary to use as you build your custom web page. As you dig deeper into the design of the page, you will find that exploring more of these tags will assist you in ways you never thought possible.
Where to Next?
The Essential HTML Beginner Tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
