HTML Hypertext Markup Language

HTMLHYPERTEXT

MARKUP LANGUAGE

The HTLM HistoryHMTL Basics

TERMS TO KNOW World Wide Web (Web):The part of the

Internet that supports multimedia and consists of a collection of link documents

HTTP (Hypertext Transfer Protocol): set of rules for exchanging text, graphic, sound, video, and other multimedia files

Web Site: a related collection of web pages that is created and maintained by someone

TERMS TO KNOW Web server (Host): a computer that

stores web pages and sends (serves) requested web pages

Publishing: copying web pages to a Web server so anyone who has Internet access can view it.

WEB SITE TYPES

Internet• Public Access

• Share Information (personal, product, classroom, etc) with the public

Intranet• Private• Share

Information with employees or members of a group

Extranet• Select business

partners or customers

• Share information with partners or select customers with password

WEB BROWSER Program that interprets and displays

web pages and enables you to view and interact with a web page

Flock

Safari (Mac)

Internet Explorer

Firefox

Google

Opera

TERMS TO KNOW URL (Uniform Resource Locator): the

address of a document or other file accessible on the Internethttp://www.scite.com/html3e/index.htm

Hyperlink (link): an element used to connect one web page to another web page on same or different server

HTMLHYPERTEXT MARKUP LANGUAGE The authoring language used to create

documents on the World Wide Web. Tags or Markups: use of special

instructions to define the structure and layout of the web document

Platform independent: you can create an HTML files on one type of computer and then use a browser on another type of computer to view that file

HTML HISTORY Tim Berners-Lee & Robert Calliau 1989

Developed a collection of tags that described how a document should look when viewed in a browser

Made it possible to create hyperlink s Tim Berners-Lee founded World Wide Web

Consortium 1994 Encourages universality of HTML Promotes an open forum for discussion among

Web Designers Seeks to promote standards for the evolution of

the Web to help make web accessible to everyone Regarded as the de facto organization to govern

HTML

HTML VERSIONS DHTML: combination HTML, cascading style

sheets, and scripting language. Creates interactive, animated web pages

XML: uses tags to describe the structure and content of a document, not the format

XHTML: reformation of HTML so it conforms to XML rules. Combines the benefits of the display features of HTML and the stricter coding standards required by XML. Handheld devices and mobile phones can only

display XHTML code

HTML VS. XHTML

CREATING HTML DOCUMENTS Need an HTML Text Editor

Type the code directly in the documentNotepad or WordSave document with an extension .htm

or .html Software Application Software:

Dreamweaver, Front Page, Sausage Software HotDog

WYSIWYG (What You See Is What You Get)

ELEMENTS OF A WEB PAGETitle

Paragraph

Background

Text Links

Heading 2

Image Links

Image

Heading 1

Body

Navigation Bar

NOTEPAD TEXT EDITOR Click Start button on Taskbar Click Programs > Accessories > Notepad Save files with an .html extension

index .html Filenames: can contain letters, numbers,

and underscoresCannot contain: : * ? Or spaces

To open an html file laterFile > Open > click arrow to the right of

Type > choose All > click the file you want to open

HTML TAGS<DOCTYPE>: begins the web page in XHTML Indicates the version and type of HTML used;

includes a URL reference to a DTD at the W3C site. Strict: prohibits use of depreciated tags

Deprecated tags: tags that the W3C has earmarked for eventual removal; replaced with newer, more function tags.

Transitional: allows the use of deprecated tags Framseset: used to support frames on the Web page;

allows use of deprecated tags

HTML TAGS<html> </html> Indicates the start and end of an HTML

document<head> </head> Indicates the start and end of a section

of the document used for the title, keywords, metatags and other document header information.

HTML TAGS<body> </body> Indicates the start and end of the Web

page body<h#> </h#> Indicates the start and end of the text

section called a heading; sizes range from the largest <h1> through smallest <h6>.

HTML TAGS<p> </p> Indicates the start of a new paragraph;

inserts a blank line above the new paragraph.

HTML TAGS FOR LISTS<ul> </ul>

Indicates the start and end of an unordered list (bulleted list). There are three types of unordered lists: Type=“square”• Type=“disc” (default)o Type=“circle”

<ol> </ol> Indicates the start and end of an ordered list

(numbered list)

<li> </li> Indicates that the item that follows the tag is an item

within a list

HTML TAGS FOR LISTS CONTINUED<dl> </dl>

Indicates the start and end of a definition list First line or term <dt> </dt> at the left edge; Next set tags are for the definition <dd> </dd>

are indented from the left edge

HTML TAGS<hr /> Inserts a horizontal rule (line)

<hr /> default: line from left margin to right margin

<hr / size=“5”>: Increases the width of the line

<hr / size=“10” noshade>: line width increases and it doesn’t appear shaded (shaded is default)

HTML TAGS<br /> Inserts a line break at the point where

the tag appears. Appears as single spacing between lines.

HTML IMAGE TAGSImages can be used as the background, to

organize, or to clarify information Types of files used on the Web

GIF (Graphics Interchange Format): clipartJPG (Joint Photographic Experts Group): photosPNG (Portable Network Graphics): Fireworks

file Image Tag syntax<img scr = “file name and type” any

attributes />

IMAGE ATTRIBUTES TAGS Align: controls alignment (bottom, middle, top,

left, or right) align=“top” Alt: allows text to be associated with image

alt=“flower pot” Border: defines the border width border=“5” Height: defines the height of the image

height=“2.5” Hspace: defines the horizontal space that

separates the image from the other text hspace=“15”

vspace: defines the vertical space that separates the image from the other text vspace=“1”

Width: defines the width of the image width=“3”

COLORS IN HEXADECIMAL Predefined colors choices that can reference by

name: Silver, gray, maroon, green, navy, purple, olive, teal,

white, black, red, lime, blue, magenta, yellow, cyan Other colors use a Hexadecimal number

combination Hexadecimal is a base of 16 digits

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f Hexadecimal colors use six digits White = ffffff (all colors) Black = 000000 (no color)

Background image tag: bgcolor=“red” bgcolor=“#fffbc6”

VIEW WEB PAGEOption #1

Open the browserFile > Open > browse to file > OK

Option #2Browse to file using My Computer > Open

Multitask: Use Taskbar to switch between text editor and browser

After making changes in the text editor, click Refresh in the browser

PRINTINGPrint Web page from the Browser

Click the Print iconPrint HTML code in Notepad

File > Print

HTML Hypertext Markup Language

Documents

Transcript of HTML Hypertext Markup Language