log inhelp

 | 
View
 

Basic HTML

Page history last edited by PBworks 18 years, 1 month ago

Basic HTML

  1. Basic HTML
    1. Overview
    2. Basic Elements of an HTML File
      1. Tags
      2. Basic Structure
  2. Other Useful Tags
    1. Text Formatting
  3. Heading 1 is this big
  4. Heading 1 is this big
  5. Heading 1 is this big
    1. Hyperlinks
    2. Images
  6. Example Website

Overview

HTML, or HyperText Markup Language, is a computer language designed for the creation of webpages. As a markup language, HTML combines ordinary text and attributes that specify how the text is to be formatted and structured on the webpage. Images, hyperlinks, and more dynamic structures can also be implemented using HTML, making it sufficient for a host of different website needs. To specify these attributes of the text and creates more dynamic objects, the designer of the webpage uses markup tags, which the web browser recognizes and converts into the desired features. In this introductory tutorial, we discuss the basic structure of HTML webpages as well as usage of some common tags.

 

Basic Elements of an HTML File

The document that contains the actual HTML is called the source file, and carries the ending .html. You can create and edit your .html file with Notepad or any other text editor, and simly save the file with the ending .html (be careful that the editor doesn't apply its own ending like .txt or .doc). Subsequently, the output webpage of the source .html file can be easily viewed by opening the file in any standard web browser (IE, Firefox...etc), which will interpret the HTML tags and output the webpage. This file can be hosted on a webserver so that when internet users provide the appropriate URL (web address), the file is displayed.

 

Tags

HTML tags are enclosed in the signs < and >. Some tags occur alone such a <hr>; which creates a horizontal line:

 

 

whereas other tags appear in pairs to, for example, enclose a bit of text: <center> and </center>. If we enclose the text Hello! with these tags in our source file, then we'll have:

 

.html Source File: <center> Hello! </center>

Output:

Hello!

 

Basic Structure

Now that we know about the general formatting of tags, we can outline the basic skeletal structure of an .html file. An HTML source code file generally contains the following structuring tags:

 

<html>

 

<head>

<title> </title>

</head>

 

<body>

</body>

 

</html>

 

The <html>...</html> are the basic HTML tags (start and stop of a file) and enclose all of your code. The <head>...</head> tags encloses the "header" information of the .html file, which most notably contains the title of the webpage, enclosed by the <title>...</title> tags. This title is the one that appears at the top of the browser window. The <body>...</body> tags contain the body of all text and images of the webpage, and so account for the bulk of the source file.

 

Other Useful Tags

Text Formatting

There are a lot of useful and simple tags in HTML to help format text. Heading tags of the format <h1>...</h1>, <h2>...</h2>,...,<h6>...,</h6> are an easy way to adjust the size of text. The <h1>...</h1> pair corresponds to the largest size and then sizes get smaller until <h6>...</h6>. For example, heading 1 has 24 point type:

 

.html Source File: <h1> Heading 1 is this big </h2>

Ouptut:

Heading 1 is this big

 

Text enclosed in paired heading level tags can be aligned within the same tags by using the form <h1 align="center"> TEXT </h1>, which would produce:

 

.html Source File: <h1 align="center"> Heading 1 is this big </h1>

Output:

Heading 1 is this big

 

Equivalently, the <center>...</center> tags discussed earlier could have just as well been used:

 

.html Source File: <center><h1> Heading 1 is this big </h1></center>

Output:

Heading 1 is this big

 

Hyperlinks

One of the most powerful features of HTML is its ability to embed links to other webpages and sites across the internet in very direct and simple HTML code. A website's URL is its uniform resource locator and functions as the web address used to locate the website. To link out from one's website to another website, for example the URL http://www.google.com, the .html file has the format <a href="http://www.google.com"> Take me to Google </a>. The web browser interprets these tags and displays the text "Take me to Google" as a link that redirects the user to the website provided (google.com), as seen below:

 

.html Source File: <a href="http://www.google.com"> Take me to Google </a>

Output: Take me to Google

 

Images

HTML accepts most image formats like JPEG, GIF, and PNG. To add an image, one can simply use the HTML format <img src="URL of the image">, and to align this image, we can further specify: <img src="URL of the image" align='right'>. We note here that images feature only a single tag (not a pair of tags), and also that they can be used as hyperlinks themselves simply by inserting them in the equivalent space to "Take me to Google" in the previous section. For example, to center and link the Harvard Shield available at http://www.fas.harvard.edu/~dudley/pics/harvard_shield.jpg to the website http://www.harvard.edu, we use:

 

.html Source File: <center><a href="http://www.harvard.com"> <img src="http://www.fas.harvard.edu/~dudley/pics/harvard_shield.jpg"> </a></center>

Output:

 

Example Website

Comments (0)

You don't have permission to comment on this page.

Printable version