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

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

HTML did 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? With new HTML5 this is changing (but not in this course)

HTML files and tags HTML files are simple ASCII files (aka “text files”) containing “embedded tags” describing the document layout of content authored by you HTML “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 Ex: the tag specifies the title you choose to use for the document

Who Governs HTML Development? Began as informal specification- Now used by millions Needed formal organizational blessing of -- World Wide Web Consortium (W3C) W3C manages the HTTP (HyperText Transfer Protocol) standard and markup languages that address that standard IETF (Internet Engineering Task Force)— defines the technology behind the Internet and WWW

Tools for Web Authors The minimum: an editor, a browser and if possible an Internet connection HTML editor or word processor? Your decision (both have advantages): Editors (pure ASCII) support “raw HTML coding” (aka “markup”) WP 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? Not all adhere to latest W3C standards Some may not render well across different browsers Most WYSIWYG HTML editors don’t have up-to-date built in browsers (so they may give misleading displays) You can lose control over your document space…

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

HTML Container vs empty tags z Container ; z Empty Attributes (modify HTML tags) z z Four attributes (src, height, width, alt)

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

HTML -- More Tags Line Break Tag z z Manual line break Text formatting z

HTML – Align Attributes Align Attribute z Modifies horizontal position of text z left z right z center z justify

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

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

Links (continued) Links/Hyperlinks z file in same directory z file in different directory; same machine z file on another website z send

Links Link examples z File z Google z

HTML -- Lists Lists z Ordered -- numbered z Unordered -- bulleted z Definition

Making your HTML more exciting

Images Put this in your file for image display z Make it a link z

Getting Images Find on the Internet Make ourselves Digitize

Getting Images You create Software packages Photoshop, PaintShop Pro, PrintShop, your phone You get from others Free or Fee -- be careful Others you have used???

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

zHTML -- Color Color z Predefined Color Names z RGB color values (lots of charts on Web)charts

Predefined color names: The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. (but which blue?)