Overview of HTML
Java is a programming language which needs to be compiled before it could be used. JavaScript, on the other hand, is a scripting language which is interpreted by the browser. It allows the end-user to embed Java-like codes into HTML pages. A subsequent course in the design of client-side platform incorporates JavaScript into HyperText Markup Language (HTML).
World Wide Web (WWW) is normally called the Web or 3W. It is one of the major applications or services of the Internet. It is a collection of resources available on a network of global computers. These resources are usually in the form of text, images, videos, and other multimedia which are linked by hyperlinks and Uniform Resource Locators (URLs) and can be accessed by browsers from web servers.
The main function of a browser is to display HTML scripts or codes in a human readable form in the pattern of web pages. The Internet is then used to broadcast the information around the world.
The HTML is the standard hypertext language being used by the World Wide Web for sharing of information globally. Some of the main benefits of the HTML are that it enables web designers to:
- place online documents with headings, text, tables, photos in the public domain via the Internet,
- use hypertext links to access online information,
- design interactive forms for conducting transactions, making reservations and searching for information from remote services.
Structure of an HTML Document
There are several versions of HTML. The focus of this course is therefore not on a particular version, but on what extends HTML with methods for scripting, links, images, tables and improvement to forms.
HTML tags contain special formatting commands which are defined within angle brackets (< > ). The first line is always <html> and the last line is </html>. An HTML document is divided into a head section and a body section. The head section is defined between <head> and </head tags. The title of the document appears in the head section (along with other information about the document). The body section is defined between <body> and </body> tags. The content of the HTML document appears in the body section.
Example
<html> <head> <title>Internet_Programming with HTML</title> </head> <body> </body> </html>
In example 1, there is nothing between <body> and </body> tags. This explains why the output in Figure 1 is empty of any contents.
Output
HTML Elements
HTML elements are the fundamental building structures of HTML document and, for that matter a web page. HTML documents are normally coded in the form of elements. The elements consist of opening tag and ends with a closing tag. Any characters that is enclosed by both the opening and closing tags including the tags is referred to as HTML element. The elements, generally have three parts:
- a tag or a pair of tags like <html> and </html>;
- may have some attributes within the start tag; and
- a content (in the form of text and graphics) and this very often, is placed between the start and end tags.
The general syntax of an HTML element may be written as:
<tag attribute1="value1">content</tag>
Example
<font face=”arial”> My Daughter</font>
In this example,
- the pair of tags are <font> and </font>
- the attribute within the start tag is face=”arial”
- the content for this element is My Daughter placed before the closing tag </font>
HTML Empty Elements
Some HTML elements are not paired and may enclose no content. They are simply referred to as empty elements or void elements. XHTML however, insist on a closing tag. An empty element takes the form of the following:
<tag attribute1="value1"/>
Example
<img src=”abc.jpg”/>
Note how the forward slash is used for an empty element in the img tag. The following example uses the <p> element and an empty <br> element to display an address. For example, the address of Adam would be coded as in example 2 and then displayed in a browser as in figure 2.
Example
<p>Adam Mahama<br>20 Abia Street Larter’shie<br>Accra</p>
Output
HTML Attributes
HTML attributes are part of the HTML tags and elements. These attributes specify some additional style or special information about the HTML tags.
Attributes are always specified within a start tag. First, we need to specify the name of the attribute and then, we assign a value to it.
Example
<font face=”arial”> My Daughter</font>
where
- <font> is the opening tag
- face is the attribute with arial as its value
- My Daughter as contents of the two tags
- </font> as the closing tag
The Title Attribute
Each HTML Tag allows some specific attributes. However, the title attribute can be used in almost every HTML element.
HTML title attribute is used to display titles to users when they move mouse over that element.
Example
<h1 title="My Title"> My Heading </h1>
In this example, when you take the mouse to "My Heading"
text, a title like tooltip"My Title"
will be visible to you, see Figure.
The Lang Attribute
HTML lang attribute is used to declare the language of the html page content. This attribute is very helpful for screen readers and search engines.
Example
<html lang="en-US"></h1>
HTML Width and Height Attributes
You can set HTML images height and width by using the width and height attributes. Images are defined using HTML images are defined with the tag. There is another attribute called “src” in this tag. It is used to specify the path of the image.
Example
<img src="tutorialsclass-logo.jpg" width="200" height="300">
The Align Attributes
HTML align attribute can be used in paragraphs, images and few other tags in horizontal alignment. This align attribute can have three main values – left, right and centre.
Example
<p align="left">This content is left aligned</p>
<p align="center">This content is aligned center</p
<p align="right">This text is right aligned</p>