HTML Introduction

HTML is the standard markup language for creating web pages.

HTML stands for Hyper Text Markup Language. This language describes the structure of a web page.

HTML consists of a series of elements which tell the browser how to display the content of the web page. These elements are represented by tags. These tags label different parts of the content such as "heading", "paragraph", "table", etc. The browsers don't display tags, but use them to render the content of the web page

An example of the HTML page structure:

 <!DOCTYPE html> This declaration defines that the document is HTML5 file, and helps browsers to display web pages correctly.
	<html> This  element is the root element of the HTML web page
	 <head> This element contains meta information about the web page
	  <title>Web page Title</title>
	 </head>
	 <body> The main element that contains the visible web page content

	  <h1>Heading</h1>
	  <p>Text paragraph.</p>

	 </body>
	</html> 

As you can see, HTML tags are names surrounded by angle brackets, and usually come in pairs - opening and closing tags. The name of the closing tag is preceded by a forward slash "/".

The web browser reads the content of the HTML document and displays it.

How to edit HTML

For editing HTML pages I recommend to use Notepad++ which is free. Go to https://notepad-plus-plus.org/downloads/ and download the latest release.

Type the example HTML page above in the editor Notepad++. Save the file somewhere on your computer. To do so select File > Save As in the Notepad++ menu. Against the File name type the name of the html file say sample.html and click Save. The extension must be htm or html, on your choice.

HTML Basic

Headings

To define HTML heading you have to apply the <h1> (the most important heading) to <h6> (the least important heading) tags.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

HTML elements with no content called empty elements do not have closing tag. Such is the <br> element which causes a line break.

Links

The links are defined by the <a>...</a> tag couple and the destination is specified in the href attribute. For example:

<a href="http://dimarini.net" target="_blank">http://dimarini.net</a>

The target attribute specifies how to open the linked document. The most used are:

  • _blank - Opens the linked document in a new window or tab
  • framename - Opens the linked document in a named frame

Images

The images in HTML site are defined with the <img> tag. It does not have a closing tag, but is not an empty element and contains the whole information how the image that should be presented in the browser.

<img src="/nj001.jpg" alt="Nick Jr" width="50%" height="50%">

The src attribute specifies the URL (web address) of the image to be shown. In this case, the image is in the same folder the html file is. The alt attribute provides a text describing the image if for some reason the image cannot be displayed. You can specify the width and height of the image using width and height attributes in pixels or percentage.

The HTML Style Attribute

The style of an HTML element can be set using the attribute style. Here are some of the styling properties.

Styling of paragraphs

<p>This is normal text!</p>

This is normal text!

<p style="color:red;">This text is colored in red</p>

This text is colored in red

<p style="font-size:25px;">The font size of this text is defined to be 25 pixels.</p>

The font size of this text is defined to be 25 pixels.

Background Color

Applying the background-color property changes the background color of an HTML element. Let us position the image above on a background of some light blue color. The <div> tag is used as a container for different HTML elements to style them and/or the background.

<div style="background-color:LightBlue;" >

<img src="/nj001.jpg" alt="Nick Jr" width="50%" height="50%">

</div>