Computer Science 103 Chapter 2 HyperText Markup Language (HTML)

Introduction HyperText Markup Language, or HTML, is the building block for Web pages found throughout the Internet. A Web page is basically a HTML document which contains formatting instructions known as tags that are translated by browsers to a visual representation of the HTML Code.

Basic Tags There are four basic tags that are needed to create a HTML document. – ….

… Tags These tags tell the browser to assemble all of the other tags, text and instructions in between the … tags into a HTML document These tags start and end a HTML document Everything that is visible on a Web page falls between the and tags

… Tags These tags contain the header for the page and other information that is used by the browser Normally located after the opening tag Other tags can be placed within the … tags to manage the page content

… The tag just places the Web page ’ s title in the browsers title bar. These tags must be placed within the tags

… Tags tag consists of the body of text and information that a web page contains Everything that is placed within the tags will be visible to Web surfers

Sample HTML Skeleton

Links Allow easy navigation of the Internet and Web pages Based on the URL (Uniform Resource Locator) of a Web page, commonly known as the web address The first part of a URL is the protocol (e.g. http) and the second part is the domain (e.g.

Basic Tags for Links …, The anchor tags are used to create the link The tag has its own attributes as well: – - – mailto: – TARGET

Absolute vs. Relative Links Absolute links tell the browser the protocol, domain name, and the file to find. Absolute links are necessary when linking to pages with a different domain than your own. Relative Links are used to link to pages within your own domain.

Other Tags, Attributes & Comments The Font Tag - …. The Underline Tag - … The Boldface Tag - … The Line Break Tag - The Header Tag - … through …

Tags, Attributes & Comment Cont ’ d The Horizontal Rule Tag - The Comment Tag -

Images and Image Maps To understand images we must understand two terms first: pixels and resolution Computer monitor screens are made up of small visible squares called pixels. The resolution is how many pixels a computer monitor can hold, the default size is normally 800 x 600

Images and Image Maps Cont ’ d To place images on a web page we need to use some tags. The Image Tag – SRC – NAME – BORDER

Images and Image Maps Cont ’ d An image map can place an image on a web page and manipulate it to do certain actions when the mouse clicks on or runs over a certain part of the image There are specific tags needed to create an image map.

Images and Image Maps Cont ’ d The Map Tag - … – NAME The Area Tag - … – SHAPE – COORDS – HREF – ALT – TARGET

Tables Tables are very useful for displaying tabular data or formatting the space dimensions of images and texts on a web page. Like any other topic we have discussed in HTML, there are special tags that are used to form tables

Tables Cont ’ d The Table Tag - … – BORDER The Table Row Tag - … The Table Data Tag - … The Table Header Tag - … The Caption Tag - …