Website Hosting Guides - Using HTML

Hyper Text Markup Language (HTML):

On this page:

• HTML
• Elements, Tags, and Attributes
• Document Structure - Head and Body
• Start with a Title
• Meta Information
• Add Headings and Paragraphs
• Style Sheet - How It Helps
• Make Your Page Interesting with Images
• Anchor (Links)
• Using Lists for Designing Web Page
  • First Step
  • Second Step
• HTML Version Information

 

HTML

HTML stands for HyperText Markup Language. It is a language used for publishing hypertext on the World Wide Web. The HTML pages can be created and processed by a wide range of tools – from simple, plain text editors (E.g. Notepad) to sophisticated WYSIWUG authoring tools (E.g. FrontPage).

When you try to access HTML pages, the browser retrieves web pages from web server and displays the pages on your screen. Thanks to the Internet. Wherever you are, you can access HTML pages or web pages whenever you wish.

Elements, Tags and Attributes

An HTML page is a special kind of text document that is used by web browsers to present text and graphics. The text includes various tags called markup tags, which specify structural elements in a document. These tags usually begin with a left-angle bracket < and end with a right-angle bracket >.

HTML commands usually begin with start tags and end with end tags. For example, if you want to provide a heading “This is my page” on your page, you should use heading tag <h> to start the heading and </h> to end the heading. These tags will structure text into headings. The code on the text document looks like this:

<h>This is my page</h>

The first word between the angle brackets is the tag’s name (here h); any further words and characters are the attributes. Therefore, a tag is the basic item, and an attribute is some extra detail.

An element comprises of three parts – a start tag, content, and an end tag. Most tags have closing tags, which mark the place where the effect of the opening tag should stop.

Though according to common convention tags should be written in capital letters, you can write them in small letters, capitals letters or any mixture. Tags are case insensitive. 

Document Structure – Head and Body

The two main parts of an HTML document is – the Head and the Body. The Head element contains information about the current document such as links to pages that could be preloaded, keywords that may be used for search engines and other data, which are not considered as the content of the page. The Body contains the content to be displayed on the web page.

Start with a title:

Title is the main Head element and every HTML document must have a title. It appears as the label on the browser window. When a user bookmarks the page or looks in their history list of visited pages, this is the text that is displayed. Therefore, you have to provide a meaningful and good title for your page.

For example, to add a title “ Jimmy’s Shop” you need to type:

You can change the title text as per your requirement. The title text should be placed between the <title> tag and </title> tag.

To try this out, type the above into a text editor and save the file as mypage.html and then view the file in a web browser. You will see that the browser shows the title in the Windows caption bar. 

Meta information:

If you want to optimize your web page for search engines, <Meta> tag is a useful head tag.

Example:

Here, the meta description tag allows you to influence the description of your page to the crawlers that support these tags. The meta keywords tag allows you to provide additional text for crawler-based search engines to index your page along with body text.

Add headings and paragraphs:

In HTML, you can use six levels of headings. While H1 signifies most important heading, H2 signifies less important heading and so on down to H6, the least important. Here is how you can add headings on your page.

To incorporate content of your web page in paragraphs you have to use <p> tag into the HTML text document. For example:

However, </p> is optional tag.

Text formatting can be done in HTML with formatting tags. You can define font style, size, color and much more using these formatting tags.

Style sheet – how it helps

Style sheets allow you to control all aspects of styles like fonts, colors, headings, margins, and typefaces. If you use cascading style sheets, you can attach new styles or format the style of web pages without modifying the content of the page. While HTML will structure your page, CSS will style the content of the document.

The concept of CSS is quite simple. You take an element, apply attributes to it in the style sheet and then just use the element in the HTML document.

Make your page interesting with images:

Images can make a profound difference in the way your page looks on the web. Since images are of great help to get messages across, you can add images to make the web pages interesting and attractive. The simple way to add image is to use <img> tag in the HTML text document.

Let’s assume that you have a picture file called flower.jpg in the same folder/directory where you have your HTML file. It is 250 pixels wide by 150 pixels high. Now, to incorporate this image into the page type -

 

If you are calling the same image from any directory (example: images dir), then write like this:

The src attribute names the image file. The width and height are not strictly necessary but it’s a good idea to specify the image dimensions, as they help browsers to display your web pages sooner.

Remember, large image files should be avoided for long delays while image is downloaded over the network. It is recommended to use JPEG and GIF image formats since most browsers understand these formats.

Anchors (Links):

Links or hypertext links – is the fundamental feature of the World Wide Web, and the tag that creates these links is called anchor tag or <a> tag. It has a commonly used attribute: href, which specifies the URL of the target document or page.

For example, if you define a link to the page defined in the file “page2.html”, you have to write

 

The text between the <a> and </a> is used as the caption for the link. When you access the page using the browser, the linked captions come in blue and with underlined text. 

If you are calling the page from any other directory (example: content dir), then write like this:

 

However, if you want to link your page to another website, you need to provide the complete web address or URL of that site. For example, to link to www.google.com you need to write:

 

The page will display only Google. When you click on this link, you will be taken to the particular page of Google’s website.

Using Lists for designing web page:

Lists are quite useful for organizing web page content and you can easily create and organize these lists in HTML.

HTML supports three types of lists – the unordered lists, the ordered lists and the definition lists.

The first type of list i.e. the unordered list is also called the bulleted list. It uses <ul> and <li> tags. For instance,

The list starts with <ul> tag and ends with </ul> tag. But the </li> tag is optional and can be left off.

This unordered list will look like this:

• The first list item
• The second list item
• The third list item

The second type of list i.e. ordered list is also called numbered list. It uses the <ol> tag and <li> tag. For instance, 

Like unordered list, you have to end the list with </ol> tag. But </li> tag is optional and can be left off.

This ordered list will look like this:

1. The first list item
2. The second list item
3. The third list item

The third type of list i.e. the definition list allows you to list terms and their definitions. It starts with <dl> tag and ends with </dl> tag. Each term starts with <dt> tag and each definition starts with <dd> tag. For instance,

This definition list will look like this:

First Step

            Mix the ingredients thoroughly

Second Step

            Pour in wet ingredients and mix for 10 minutes

The bold words are made bold with the use of <strong> tag. The end tags </dt> and </dd> are optional and can be left off. You can also make the lists nested i.e. you can incorporate unordered list or bulleted list into the definition list. You can also make use of paragraphs and headings for longer list items.

HTML Version Information

A valid HTML document always provides the version information. This means the version of HTML used in the current document. The document type declaration names the document type definition (DTD) in use for the document.