HTML Hyper Text Markup Language

What is HTML HTML stands for the Hyper Text Markup Language. HTML stands for the Hyper Text Markup Language. HTML is the major language of the Internet's World Wide Web. HTML is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML. Web sites and web pages are written in HTML.

What is HTML cont… With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever. HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.

HTML Code Intro. HTML is composed of tags. HTML is composed of tags. HTML tags are always enclosed in angle-brackets ( ) and are case- insensitive; that is, it doesn't matter whether you type them in upper or lower case. HTML tags are always enclosed in angle-brackets ( ) and are case- insensitive; that is, it doesn't matter whether you type them in upper or lower case. Tags typically occur in begin-end pairs. These pairs are in the form Tags typically occur in begin-end pairs. These pairs are in the form......

Terms Content Content The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. We use this term to mean "whatever you put in the document." The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. We use this term to mean "whatever you put in the document." Hyperlink Hyperlink A link from one document to another, or to any resource, or within a document. The default is usually blue, underlined text for unviewed links. However, you may choose the colour for active, viewed and unviewed links. A link from one document to another, or to any resource, or within a document. The default is usually blue, underlined text for unviewed links. However, you may choose the colour for active, viewed and unviewed links.

Terms cont… In-line "in-line" refers to the placement of resources where they are placed one after the other directly into a document. "in-line" refers to the placement of resources where they are placed one after the other directly into a document.URL The Uniform Resource Locator is a "standard" way of expressing the location and data type of a resource. URLs in general take the form "protocol://address“ – the protocol maybe an HTTP, FTP or telnet site …and so on. The address is merely the server and pathname (if any) of a given resource or page. The Uniform Resource Locator is a "standard" way of expressing the location and data type of a resource. URLs in general take the form "protocol://address“ – the protocol maybe an HTTP, FTP or telnet site …and so on. The address is merely the server and pathname (if any) of a given resource or page.

TAGS HTML HTML The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is: The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is:

TAGS Cont… TITLE TITLE This container is placed after the opening HTML tag. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. This container is placed after the opening HTML tag. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list.

TAGS Cont… BODY BODY BODY comes after the TITLE tag. Between the BODY tags, you find the content that is displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. BODY comes after the TITLE tag. Between the BODY tags, you find the content that is displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags.

HTML Strucuture <HTML> Document Title Document Title Insert Text, Graphics and.. here Insert Text, Graphics and.. here </HTML>

HTML Structure Cont…

TAG ATTRIBUTES With HTML, the web developer has the ability to change the appearance and ‘look-and feel’ of certain tags. With HTML, the web developer has the ability to change the appearance and ‘look-and feel’ of certain tags. For example, with the BODY tag, one may modify the background colour or place an image as the background. For example, with the BODY tag, one may modify the background colour or place an image as the background. The modification to these attributes are placed after the actual tag and within the brackets. The modification to these attributes are placed after the actual tag and within the brackets.

BODY ATTRIBUTES The attributes in the BODY tag allow you to control the overall appearance of the document by specifying a background color or background image (BGCOLOR, BACKGROUND), and the color of text, links, visited and activated links. The attributes in the BODY tag allow you to control the overall appearance of the document by specifying a background color or background image (BGCOLOR, BACKGROUND), and the color of text, links, visited and activated links.

TAG ATTRIBUTES CONT… The structure of the attribute is as follows. The structure of the attribute is as follows. Note: The attribute change is placed in quotes and an equal sign is placed between the attribute and the value to change

TAG ATTRIBUTES CONT… Example 1. To change the colour of the background Example 1. To change the colour of the background Note: You can change more than one attribute per tag.

P Tag The tag defines a paragraph Ex. Insert Text Ex. Insert Text Align attribute specifies the alignment of the text within the paragraph.

FONT Formatting TEXT - Bolding TEXT - Bolding TEXT - Italics TEXT - Italics TEXT - Underline TEXT - Underline Hello World! Hello World!

LINK COLOURS Link Colour Link Colour Active Link Active Link Visited Link Visited Link

ALIGNMENT OF TEXT and OBJECTS To Centre To Centre

INSERTING IMAGES HTML and Webpages work with the following image types: HTML and Webpages work with the following image types: JPG JPG GIF GIF PNG PNG

INSERTING IMAGES In HTML, images are defined with the tag. To correctly insert an image we need to also specify the source. In HTML, images are defined with the tag. To correctly insert an image we need to also specify the source. The source can be a file specified on the same webserver and folder The source can be a file specified on the same webserver and folder Ex: Ex: The source may also point to an URL that contains the specified address of the image The source may also point to an URL that contains the specified address of the image Ex:

IMAGE ATTRIBUTES ALT ALT The ALT attribute provides specific text to display when the image is not available. The ALT attribute provides specific text to display when the image is not available. It is also useful to visually impaired users who can not see the image but can obtain a verbal description of that image. It is also useful to visually impaired users who can not see the image but can obtain a verbal description of that image. Ex: Ex:

IMAGE ATTRIBUTES WIDTH AND HEIGHT WIDTH AND HEIGHT In HTML, we can adjust the absolute and relative size of an image. Absolute is provided in pixels while relative is provided in percentages.

IMAGE ATTRIBUTES WIDTH AND HEIGHT WIDTH AND HEIGHT Ex 1. Ex 1. In this example the width is set to 20 pixels and the height 30 pixels. Ex 2. Ex 2. In this example, the width and height are both set to 50% of the original size of the image.

ANCHOR TAG (LINKS) Hyperlinks, are active text or images that when clicked on bring the web browser to a new page or item. Hyperlinks, are active text or images that when clicked on bring the web browser to a new page or item. HTML uses the anchor tag to create hyperlinks. HTML uses the anchor tag to create hyperlinks. An anchor can point to any resource on the web; another webpage, an image, an URL or a sound or movie clip. An anchor can point to any resource on the web; another webpage, an image, an URL or a sound or movie clip.

ANCHOR TAG (LINKS) Ex 1: Click Here! Ex 1: Click Here! In this example, when the user clicks on the words ‘Click Here’ the web browser will open a webpage called page2.html

ANCHOR TAG (LINKS) Ex 2: Click to go! Ex 2: Click to go! In this example, when the user clicks on the words ‘Click to go!’ the web browser go to the site

ANCHOR TAG ATTRIBUTES One popular attribute with the tag is the target, which specifies where the link will open – a new or current browser window. Current window is the default One popular attribute with the tag is the target, which specifies where the link will open – a new or current browser window. Current window is the default Ex. Click to go! Ex. Click to go! In the example above, the google website will be opened in a new window.

ANCHOR TAG - Mailto Ex 3. Me Me In this example, when the user clicks on the words Me the web browser will open the default program with an addressed to

LISTS HTML can provide web developers with an ordered list (numbered) an unordered list (bulleted) or a definition list (tabbed and un-bulleted). HTML can provide web developers with an ordered list (numbered) an unordered list (bulleted) or a definition list (tabbed and un-bulleted). Lists are useful when arranging text so that it appears neat and clean. Lists are useful when arranging text so that it appears neat and clean. Ordered List tag Ordered List tag Unordered List tag Unordered List tag Definition List tag Definition List tag

ORDERED LISTS <ol><li>Car</li><li>Bus</li></ol> The example above will appear: 1. Car 2. Bus

UNORDERED LISTS <ul> Sault Ste. Marie Sault Ste. Marie <li>Sudbury</li></ul> The example above will appear: Sault Ste. Marie Sault Ste. Marie Sudbury Sudbury

DEFINITION LIST <dl><dt>Canada</dt><dd>Ontario</dd><dd>Quebec</dd></dl> The example above will appear: CanadaOntarioQuebec

TABLE Tables in HTML Code, can be as a traditional table to place text and graphics like a spreadsheet. Tables in HTML Code, can be as a traditional table to place text and graphics like a spreadsheet. But the power of a table is to use it as a container to arrange all of your contents with one or several tables But the power of a table is to use it as a container to arrange all of your contents with one or several tables The entire web page can be coded within one or several tables! The entire web page can be coded within one or several tables!

TABLES CONT… Tables use three basic tags, which all tables must have: Tables use three basic tags, which all tables must have: (Table Create) creates the table. (Table Create) creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color. (Table Row) defines each row within a table. (Table Row) defines each row within a table. (Table Data) defines each cell within a row. (Table Data) defines each cell within a row.

TABLES CONT… (Ex 1.) Jane 19 Jane 19 John 18 John 18 Anne 16 Anne 16 Bob 17 Bob 17

TABLES CONT… (Ex 1.) This is what the example will look like! This is what the example will look like!

TABLES CONT… CELLPADDING and CELLSPACING By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use CELLPADDING and CELLSPACING. CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.

TABLE CONT… COLSPAN and ROWSPAN Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

TABLES CONT… To add headings, you add the tag, which stands for Table Heading. The code is: To add headings, you add the tag, which stands for Table Heading. The code is: Production

TABLES CONT… Example of Colspan Example of Colspan Production Ray 1493 Sal 3829 Mel 0283 Sales Hal 4827 Kel 7246 Dan 5689

WHERE TO FIND MORE TAGS