html hypertext markup language –first proposed by cern in 1989 –it is non-linear so it allows...

HTML

• Hypertext Markup Language– First proposed by CERN in 1989– It is non-linear so it allows you to jump from place to

place– Markup refers to the structure of the language so you

can identify what is going on• Source code example

• W3C – new governing body that regulates HTML coding– W3 consortium

HTML as a Markup Language

• A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and lists

• An HTML file includes text and HTML markup elements

• The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user

XML: An Open Standard

• XML is the Extensible Markup Language• XML is a meta-language; not a language

itself, but a language that lets you describe other languages

• XML describes data, not presentation• XML allows better access to data• XML lends itself to customized information

XML Syntax Rules

• Documents must be well-formed

• Elements must nest correctly

• XML is case-sensitive

• End tags are required

• Empty elements are signified by a closing slash

• Attribute values must be quoted

XHTML: The Future of HTML

• XHTML is a reformulation of HTML 4.01 in XML

• Brings data-handling benefits of XML to HTML

• Style sheets are required

• Stricter syntax rules

HTML Limitations

• HTML (HyperText Markup Language) is a very general language designed to place information on web pages. It is not a word processing or desktop publishing tool. The sooner you come to grips with this fact, the faster you will become an effective webdesigner. Here's why: – No two browsers show a page quite the same way. – Even if everyone were to use the same browser, not

everyone would have the same resolution as you. – It really never was intended to be as specific as a word

processor, and its fundamental structure reflects this. – Nobody owns the web. Therefore, standards are rather

difficult to enforce.

File Names and URLs

• Names– Front door URL– Page names

• Case Sensitivity• Character Exceptions that you CANNOT USE

– /,/,&,*, <,>, and blank spaces

• File Extensions– .htm– .html– .asp– .xls– .gif– .jpg

Complete URLs and Directory Structure

• http://isec.sandiego.edu/carl/gba576.asp

• Versus gba576.asp

• Relative versus absolute paths

Web Page Elements

• Title• Bookmarks• Body• Background• Normal text• Paragraph• Bulleted list

• Headings• Images• Horizontal Rules• Image map• Hotspot• Animated images• Hyperlinks

Web Page Elementstitle

heading

body

image

paragraph

horizontal rule

links

animated image

bulleted list

Entering HTML Tags and Text• Four tags define the overall structure of standard

Web pages:– <HTML> and </HTML>

• Indicates file is an HTML document

– <HEAD> and </HEAD>• Introduction to the rest of the file• Indicates the area where the title will be placed

– <TITLE> and </TITLE>• Indicates the title that will display in the title bar

– <BODY> and </BODY>• Indicates the boundaries of the Web page

HTML Tags and Functions

Entering Initial HTML Tags

initial tags

insertion point

It is good form to be consistentwhen you type tags, adhering

to a standard practice

Entering Initial HTML Tags

ending BODY and HTML tags

all Web page content will be placed here

If you notice an error in the text, use the BACKSPACE key to

erase all the characters back to and including the one that is

incorrect

Headings

• Used to separate text and introduce new topics

• Vary in size, from <H1> through <H6>

• Use the same sized heading for the same level of topic

Paragraphs

• Most text on Web pages is in paragraph format

• The <P> tag has an optional ending tag

• When a browser finds a <P> tag, it starts a new line and adds a paragraph break

• Try not to type large sections of text without having paragraph breaks

Creating a List• Lists structure your text in outline format

– Unordered (bulleted) lists• <UL> and </UL> marks the beginning and end of

unordered lists

– Ordered (numbered) lists• <OL> and </OL> marks the beginning and end of

ordered lists

• The <LI> and </LI> tags define list items

• The TYPE attribute defines the default bullet or number type

Unordered Lists

<H3>Unordered Lists</H3><UL TYPE=“disc”><LI>First item – type disc</LI><LI>Second item – type disc</LI></UL>

<UL TYPE=“square”><LI>First item – type square</LI><LI>Second item – type square</LI><UL>

<UL TYPE=“circle”><LI>First item – type circle</LI><LI>Second item – type circle</LI></UL>

Ordered Lists <H3>Ordered Lists</H3> <OL TYPE=“1”> <LI>First item – type 1</LI> <LI>Second item – type 1</LI> </OL>

<OL TYPE=“A”> <LI>First item – type A</LI> <LI>Second item – type A</LI> </OL>

<OL TYPE=“a”> <LI>First item – type a</LI> <LI>Second item – type a</LI> </OL>

<OL TYPE=“I”> <LI>First item – type I</LI> <LI>Second item – type I</LI> </OL>

<OL TYPE=“i”> <LI>First item – type i</LI> <LI>Second item – type i</LI> </OL>

Creating a Bulleted List

bulleted listtags and text

Saving the HTML File

• You must save the file before you can view it in your browser

• HTML files must end with an extension of .htm or .html

• .html extensions only work on Web servers running an operating system that supports long filenames

Your Browsermaximizebutton

standardbuttonstoolbar

status bar

defaultstartup page

address bar

menu bar

Internet Explorer Window

Your Web Pagetitle

body ofWeb page

main heading

H2 heading

bulleted list

paragraph

Adding Background Color

Locate the6-character codeof the color you

wish to use

Adding Background Color

Background color code goesat the end of the BODY tag

Centering the Heading

• Text can be aligned differently on the page– ALIGN = “LEFT”– ALIGN = “RIGHT”– ALIGN = “CENTER”

• The default alignment for headings is left-alignment

Centering the Heading

center-alignment code

Adding a Horizontal Rule

• Horizontal Rules are graphical images that act as dividers

• The tag used to insert a Horizontal Rule is <HR>

• Horizontal Rules are easy to insert

Adding a Horizontal Rule<HTML><HEAD><TITLE>Horizontal Rules</TITLE></HEAD><BODY BGCOLOR=#94D6E7>

<P>Default HR</P><HR>

<P>HR with size=1</P><HR SIZE=1>



<P>HR with size=10 and noshade</P><HR SIZE=10 NOSHADE>

</BODY></HTML>

Adding a Horizontal Rule

horizontalrule tag

Viewing the Modified File in Your Browser

after saving the modified file,click the Refresh button in

your browser

Viewing Your Web Page Source

• You can view the HTML code on any Web page from within your browser

• This allows you to see how others created their Web pages

Definition Lists

• Used to list information without the standard bullet or numbered list symbols

• Syntax is not as straightforward as <UL>, <OL>, or <LI>

• <DL> and </DL> start and end the list

• <DT> and <DD> are used to create the actual list elements, terms, and definitions

Definition Lists

definition list start

definition list end

definitionterm start

definitionstart

definition termsdefinitions

Summary

• Identify elements of a Web Page

• Enter the <HTML>, <HEAD>, <TITLE>, and <BODY> tags

• Enter a paragraph of text, a bulleted list, and HTML tags

• Save an HTML file