In this tutorial we will be looking at the basic HTML elements and the coding style and formatting that is used with HTML. This tutorial will use Textpad to create a base HTML page and display this on the chosen Internet browser, although any text editor or coding application can be used to create HTML.
First we need to understand some of the basics around coding HTML so we can properly code our first web page. HTML code consists of elements and attributes. An element starts with an opening tag, ends with a closing tag and everything in between is the element content. Ex. <element>element content</element>. Elements that don’t have element content are closed in the open tag. Ex. <element />. Most elements can have attributes which provide additional information about the element. Attributes are always specified in the open tag and are declared by a name and a value. Ex. <element name=”value”>
Now that we understand the basics of elements and attributes we need to know the elements available for us to use. Check out the list of elements for HTML 4.01 here and the list of elements for HTML5 here.
The first element that should be included in an HTML document, even before any HTML tag, is the doctype declaration. The doctype is an instruction for the browser about the version of the markup language that the page is written in so the browser can render the content correctly. The HTML 4.01 doctype is required to reference to a DTD because HTML 4.01 was based on SGML. The three types of HTML 4.01 doctypes are Strict, Transitional, and Frameset. The Strict doctype contains all HTML elements and attributes, but does not include presentational or deprecated elements and framesets. The Strict doctype element looks like this: “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>“. The Transitional doctype contains all HTML elements and attributes, including presentational and deprecated elements but framesets are not included. The Transitional element looks like this: “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>“. The Frameset doctype is equal to HTML 4.01 Transitional, but allows the use of frameset content. The Frameset element looks like this: “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>“. HTML5 does not require a reference to a DTD because it is not based on SGML, but it is still needed for the browser to behave as it should. The HTML5 doctype element is: “<!DOCTYPE HTML>“.
The next element is the html tag, also known as the root element of any HTML page. All other elements are placed inside the opening and closing html tags for a web page. For HTML5, the html tag has a new attribute called manifest. Manifest specifies the URL of the document’s cache manifest.
The head and body tags are the child elements to the html tag. The head element is the container for the information about and for the html web page to use. Elements inside the head element can include scripts, styles or the location of style sheets, provide meta information, etc. Only the base, link, meta, script, style, and title elements are allowed in the head elements. The title element defines the title of the document, and is the only required element in the head. The body element is the content that is displayed on the browser page such as text, tables, forms, images, etc.
With the basic elements we can now create the HTML document that will create the web page. Open Textpad, or whatever program you have chosen to program in. The below code is the basic elements, learned previously, put together to make a page.
Add the code to Textpad and click on File and then Save As. In the dialog box, choose the path you would like to save the html document to. Choose a file name and save the document as a “.htm” or “.html” file or in the “Save as type” dropdown box choose HTML. Example of Save as:
Now to view the page that was created. First open the browser that you have chosen to use. In the url box input the path that you saved the html document to and the documents name and extension. Ex. “D:\HTML\Hello World.html“. Also, if you are using Textpad there is a button that looks like a Globe and if you press that it will automatically open the html document in your default browser. The page should look blank.
Now that we have the page working we need some text to go on that page. We will start with the title of the page, which will be called Hello World. To have a title for the page we need to put the text in between the opening and closing title tags in the head section. With that text now entered, save the document and refresh the browser. The browser tab now display the Hello World text.
To have text displayed on the actual page, we need to add the text into the element content of the body tag. The body tag allows for text to be placed right into the tag without the use of other tags. So inputting “Hello World” into the body tag element content will display the text directly on the page with the default formatting and style of the browser.
Lastly for this tutorial, we will add some metadata to the page by using the meta tag that gets placed in the head element. Metadata is typically used to specify page descriptions, keywords, author(s) of the document, last modified, etc. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. The meta tag does not include element content like other elements. It uses attributes to define the metadata. The meta tag uses the attribute called name that provides a name for the content of the metadata and the meta uses the attribute called content that specifies the content of the metadata. The meta tag also includes an attribute called http-equiv that provides an HTTP header for the information in the content attribute. If the http-equiv tag is declared then the name does not need to be. To view the metadata, right click on the browser page and select View Page Info.
With this tutorial now complete you should be able to create, save, and display a basic web page with some text and metadata, and a basic knowledge of the coding style used in HTML. In the next tutorial we will learn how to format and style the text on the page and create forms and tables to make the page look appealing to the eyes with large amounts of text and other objects.