What is HTML? zThe authoring language of the Web is currently HTML, which stands for HyperText Markup Language. zFuture versions of the Web are likely to be based on XML which stands for eXtensible Markup Language

HTML: What is it? zHTML is a document layout and hyperlink specification language zHTML defines the syntax and placement of special, embedded directions (called “tags”) that are not displayed by the client browser zHTML is concerned with the STRUCTURE of a document, not so much the APPEARANCE of that document

HTML files and tags zHTML files are simple ASCII files (aka “text files”) containing “embedded tags” describing the document layout of content authored by you zHTML “embedded tags” are directions to the browser (e.g. Firefox, Safari, or Internet Explorer) The browser uses the information inside the HTML tags to decide how to display or treat that content yEx: the tag specifies the title you choose to use for the document

What HTML is not zNot a word processing tool zNot a desktop publishing solution zNot a programming language Its fundamental purpose is to “mark up” the structure and appearance of documents and document families so that they may be delivered efficiently and effectively over a distributed network.

HTML does not support things like  Sound, motion, video  User interactions  Counters and market information But these applications can be accomplished through external programming tools that run “under” HTML. (plugins)—heard of Flash?

Who Governs HTML Development? zBegan as informal specification- Now used by millions zNeeded formal organizational blessing of -- yWorld Wide Web Consortium (W3C) xW3C manages the HTTP (HyperText Transfer Protocol) standard and markup languages that address that standard yIETF (Internet Engineering Task Force)— xdefines the technology behind the Internet and WWW

Tools for Web Authors zThe minimum: an editor, a browser and if possible an Internet connection zHTML editor or word processor? Your decision (both have advantages): xEditors (pure ASCII) support “raw HTML coding” (aka “markup”) xWP supports content development – (esp. spell check, thesaurus lookup, outlining)

Why not use a Web Authoring Toolkit? FrontPage, DreamWeaver, even MS-Word automatically translate your text into HTML. Why not take the easy road? yNot all adhere to latest W3C standards ySome may not render well across different browsers yMost WYSIWYG HTML editors don’t have up-to-date built in browsers (so they may give misleading displays) yYou can lose control over your document space…

HTML -- Let’s Start zHTML’s basic four tags z

HTML zContainer vs empty tags zContainer ; zEmpty zAttributes (modify HTML tags) z zFour attributes (src, height, width, alt)

HTML - Heading/Paragraph zHeading Elements - varies font size zLevels 1 (largest) to 6 (smallest) z zInserts a line break before and after zParagraph Tag z zInserts a line break before and after

HTML -- More Tags zLine Break Tag z zManual line break zText formatting z

HTML – Align Attributes zAlign Attribute zModifies horizontal position of text zleft zright zcenter zjustify

Enough already! Let’s get started You become the publisher

Links zLinks are created by the Anchor Tag yThis is the tag also known as a href for Hypertext Reference yAnchor tag is the HTML feature that defines both the source and destination of a hyperlink

Links (continued) zLinks/Hyperlinks zfile in same directory zfile in different directory; same machine zfile on another website zsend

Links zLink examples z File z Google z

HTML -- Lists zLists zOrdered -- numbered zUnordered -- bulleted zDefinition

Add Images Making your HTML more exciting

Images zPut this in your file for image display z zMake it a link z

Getting Images zFind on the Internet zMake ourselves zDigitize

Getting Images zFree or Fee -- be careful zhttp://webcom.missouri.edu/ilibrary/ zhttp:// zhttp:// zhttp:// zOthers you have used???

Getting Images zYou create ySoftware packages xPhotoshop, PaintShop Pro, PrintShop yCheck out products on Amazon.com xBig Box of Art

Images for web pages zConsider format y.tif – large, bitmap y.jpg – smaller, photographs, many colors y.gif – usually small, drawings/logos/icons, –Animated gifs, fewer colors than jpgs yOthers– example.png but some image formats don’t work with all browsers

zHTML -- Color zColor zPredefined Color Names zRGB color values (lots of charts on Web)charts