HTML (Hypertext Markup Language) is the foundational code that is used to structure a web page and its content. Similar to written and printed documents, HTML structures the web page layout with paragraphs, page titles, bullet lists, numbered lists, images, and tables.
This Beginner’s Guide to Easy HTML is simple and can ultimately join with CSS (Cascading Style Sheets) to add an infinite number of creative design aspects. For this tutorial however, you will examine what it takes to do a simple layout so that you feel comfortable working with the HTML code on its own. All you need to start with is a simple code editor such as Notepad++, which is free.
Getting Started
HTML is simply text in a text editor made to talk with a web browser. Create a web page by opening the text editor and saving the file as mywebpage.html. Saving the page with a “.html” extension will save the page as a file that a browser can open.
Important: You do not want to save the file with a “.txt” extension. Your web browser will not recognize this.
Now it is time to examine tags, attributes, and elements to see what these things are and why they are needed to add items to your web page.
Tags, Attributes, and Elements
You must have a clear understanding of the naming conventions in the world of HTML. This section of the tutorial will make it easy to understand tags, attributes, and elements. In addition to this, you will see why elements are wrapped in the greater than or less than symbols (<>). Now It’s time to examine what all of this means in the context of a web page.
Tags
The basic structure of an HTML document includes tags which surround content and apply meaning to it. These tags are normally paired in an opening and closing set to contain their element. In the sample section below, you will see these basic tags to begin setting up your web page structure.
Here is what they mean:
- <!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.
Attributes
Tags can also have attributes which are extra pieces of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute=”value”>text</tag>.
In the following, both src and alt are attributes to the img tag. An img tag is for an image such as a photograph or illustration.
The attribute src defines where the image file is stored The alt attribute defines what the image is. An important note about the alt attribute is that it is used for adding greater accessibility to your web page including sight-impaired viewers that have a voice reader installed. The alt tag lets the sight impaired viewer understand what the image is even though they may not be able to actually see it.
<img src=”img_wave.jpg” alt=”ocean wave”>
Elements/Element Content
All content that is in between (and including) the <body> and </body> tags is the body element. Similarly, all content in between and including the <title> and </title> tags is a title element.
Important Notes to Remember to Assure Success
- When adding an element, you will need to make sure you close the element as well. For body content, you start with <body> and then add </body> to close the element. It will look like this: <body> content here </body>.
- Make sure that when you are adding Alt text for image information, that you add closing quotation marks so that the browser knows it is done and does not show it on the page.
- Be careful to watch your uppercase and lowercase use of named elements.
- To track what your code means, you can add what we call “comments” into the code which gives you information on each block of code as you wish to label it for future reference. The <! — comment –> is an HTML comment tag.
Starting Your First HTML Page
In Notepad, open the HTML document you started with. Add the following code to get things started:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Paragraphs
Add the <p> element to let the browser know that this is basic paragraph text. Now add in some text so that you can test this out in a web browser. Add in “Udacity will help you to explore new areas of HTML web development.”
<!DOCTYPE html>
<html>
<body>
<p>Udacity will help you to explore new areas of HTML web development.</p>
</body>
</html>
If you save and double click your mywebpage.html file, it should open in your default browser and should look something like this:
 |
Page Titles
A page title is important because it names your page and when placed appropriately, the web browser will show this title in the browser tab. This is a nice feature.
Notice the <head> tags now placed at the top of your document before the <body> text. This title will now show up in a browser tab. There are other items beyond the scope of this guide that are also added into this <head> section such as favicons or site metadata.
<!DOCTYPE html>
<html>
<head>
<title>My Home Business</title>
</head>
<body>
<p>some text here</p>
</body>
</html>
Bullet & Numbered Lists
Bullet and numbered lists are always essential. To start creating a bullet list, add in the following. Note that <ul> indicates an “unordered list.”
<!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>
The result is in your browser is the following:
As you are in the world of HTML for beginners and have just created your first bullet list, you will now want to create a numbered list, also known as an “ordered list” in the world of HTML. An ordered list is when you have steps to follow as in a specific procedure. For example, consider if you are writing a manual that has ordered steps to follow such as a repair guide.
Instead of this Unordered List (UL),
<ul>
<li>first line</li>
<li>second line</li>
<li>third line</li>
</ul>You will simply replace the <ul> with <ol> for an ordered list:
<ol>
<li>first line</li>
<li>second line</li>
<li>third line</li>
</ol>
You will see the following layout:
Tables
Now if you want to add a table, you will need to define table rows and columns. You can also define the border of the table that outlines the table itself using <table border=”1”>. The <tr> tag is a table row with <td> tags for the table columns. The <td> letters refer to “table data.”
<!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>
<table border=”1”>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
</body>
</html>
Take a look at the result from the table code above.
You can see the difference in headings as well. Headings that browsers recognize go from heading 1 all the way to heading level 6. For this example, the first three levels are shown.
This solid foundation allows you to establish a web page with meaningful content. Remember that this is just the beginning as you will definitely want to pursue the next level in this very creative world. There are many places available for further insight. Be sure to check out Font Weight, Font Families, and Background Image Size. These tutorials will help you to understand the wide range of possibilities for creative layout and design.
Where to Next?
This Beginners Guide to Easy HTML should provide a starting point for further inquiry into the design, layout, and practical applications of HTML. As you can see, there are virtually unlimited creative aspects that HTML offers.
In the next tutorial, other levels of HTML design will be explored. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.
Be sure to check out more tutorials on our HTML Hub page as well as tutorials on the CSS Hub page.
“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!
