HTML: A standard HTML5 page

This entry is part 1 of 34 in the series HTML

HTML stands for Hyper Text Markup Language.  It’s purpose is to use tags or markups to formulate a web page.

I have been using WebStorm from jetBrains and each time I create a new HTML page, it gives the following template.

You can use it likewise to create a HTML5 page.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>
Try The HTML

The doctype declaration will tell the browser that this is for HTML5.

HTML: Heading and paragraph

This entry is part 2 of 34 in the series HTML

Using the template, we build our first example.

In the example, we have used two tags <h1> and <p> to format the content.

<!DOCTYPE html>
<html>
<head>
        <title>First Example</title>
</head>
<body>
<h1>First Heading</h1>

<p>The paragraph after the heading</p>
</body>
</html>
Try The HTML

The HTML standards defines 6 levels of headings, <h1> through <h6>, each one progressively smaller in font size.

Here we are using <h1>, you can try modifying <h1> into <h2> in Try The HTML page.  This will reduce the font size of the heading.

HTML: Applying bold and italic formatting

This entry is part 3 of 34 in the series HTML

Applying bold and italic styles are two ways of making text stand out and attract attention.

For simple boldface and italics, use the <b> tag and the <i> tag.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bold & Italic</title>
</head>
<body>

<p>I have like to go to <b>Thailand</b> for fun.</p>
<p>And to have some <i>great times</i> there.</p>

</body>
</html>

Here I have used lang=’en’ to state that the page is using English language as its default language.

Here I have also used <meta charset=”UTF-8″> for character encoding.  This is recommended by W3C for use in HTML and XML.

UTF-8 has basically become the dominant character encoding for the World Wide Web.

 

HTML: Images

This entry is part 4 of 34 in the series HTML

To specify a image, we use the <img> tag.

<!DOCTYPE html>
<html>
<head>
        <title>First Example</title>
</head>
<body>
<h1>An Image</h1>
<img src='http://upwhere.com/code/images/flappy.png'>
</body>
</html>
Try The HTML

We can also specify the the size of the image by using width and heights attributes.

<!DOCTYPE html>
<html>
<head>
    <title>First Example</title>
</head>
<body>
<h1>An Image with a smaller size</h1>
<img src='http://upwhere.com/code/images/flappy.PNG' width='100' height='150'>
</body>
</html>
Try The HTML

HTML: Applying superscript formatting

This entry is part 5 of 34 in the series HTML

Superscript formatting makes text smaller and raises it off the baseline.

We have typically used superscript to format exponents in math equations such as x2 +1.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Superscript Formatting</title>
</head>
<body>

<H3>Pub Happy Hours: 5pm to 9pm<sup>1</sup></H3>
<br>
<p><sup>1</sup>Closed on Monday.</p>

</body>
</html>

As you can see in the example, superscript is formatted by using <sup> tag.