HTML is the major language used to code web pages. It uses ‘tags’ and ‘attributes’ to define the elements on a page.
A tag is always defined by angle brackets like this: <h1>. Most tags must have a matching closing tag like this: <h1>Heading</h1>. Attributes are additional pieces of information that are placed inside a tag. For instance, the following line of code contains the image attribute and the alternate text attribute: <img src=”mydog.jpg” alt=”A photo of my dog.”>.
Note: Alt (alternate) text describes an image for blind people and others with visual problems. A device called a screen reader will read the alt text to her.
To write HTML, all you need is a text editor. There are hundreds of products to choose from. For this unit, we will use a text editor call Sublime Text. It’s free and is available cross-platform for Mac and Windows. You can download it here: https://www.sublimetext.com/.
There are basic tags that construct your HTML document. They are:
The diagram below shows how an HTML page is structured visually. Note that the only visible part of the page happens between the <body> and </body> tags. The </body> tag ends the body section. It is known as a closing tag.
HTML Content types
All HTML content resides within the <body> tags. There are many different types of content, and we’ll go through the most common content here.
1. Headings – headings are sized from the largest <h1> to the smallest <h6>. These are used for headings, subheadings and CTAs.
2. Paragraph – paragraph text is indicated by the <p></p> tags.
3. Anchor tag – indicated by the <a></a> tags, this creates a link from the attribute inside the tag, like this: <a href=https://google.com>search</a>. It makes the word ‘search’ a link that points to google.com.
4. Images – The <img> tag contains an attribute that specifies which image to display, like this: <img src=”yourimage.png” width=”200px”>. The <img> tag is one of a few tags that does not need a matching closing tag.
5. Ordered List – this numbered list is indicated by the <ol></ol> tags. Inside these tags are the actual list items indicated by the <li></li> tags. The ordered list looks like this:
<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
6. Unordered list – better known as bullet points, it’s indicated by the <ul></ul> tags and is structured the same way with list items as the ordered list:
<ul>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ul>
7. Button – This tag <button></button> creates a button, with the button text going between the opening and closing tags. The button tag needs JavaScript to make it interactive. Here is sample code that will open up an alert when pressed:
<button type=”button” onclick=”alert(‘You pressed the button!’)”>Click me!</button>
8. Div tag – this is a generic tag that indicates a container for content. The <div></div> tag is controlled by CSS to style its visual appearance.
The final step is adding the closing tags for your document. That means the closing body tag </body> and the closing HTML tag </html>. There are hundreds of other tags that you can add to your HTML document. Great resources to find out about other tags are https://html.com/ or W3 schools at https://www.w3schools.com/html/
So, what does an html document look like? Here we put the code and content all together:
<!doctype HTML>
<HTML>
<head>
<title>My Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="navbar">
<img src="logo.png" width="150px"; alt="The Soap Company">
<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>
</div>
<div class="container">
<h1>We make natural organic soaps</h1>
<p>Soaps that are gentle enough to use on your face, <br>these chemical-free soaps make a perfect gift.</p>
<button type="button">Buy now</button><br>
<img src="soap.png"; width="50%"; alt="Soaps";><br>
</div>
</body>
</HTML>
And here is what the output looks like in a browser:
The visual look is controlled by the CSS file “styles.css”. We’ll take a look at how CSS controls the display of the HTML file next