What is HTML ? HyperText Markup Language. The authoring language of the Web is currently HTML, which...
25
-
Upload
hannah-sharp -
Category
Documents
-
view
234 -
download
3
Transcript of What is HTML ? HyperText Markup Language. The authoring language of the Web is currently HTML, which...
What is HTML?The authoring
language of the Web is currently HTML, which stands for HHyperyperTText ext MMarkup arkup LLanguage.anguage.
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 tagsHTML 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 contentEx: the <title> 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)
http://www.w3c.org 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
http://www.ietf.org
Tools for Web AuthorsThe 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 standardsSome may not render well across different
browsersMost 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 StartHTML’s basic four tags
<html></html><head></head><title></title><body></body>
HTML Container vs empty tags
Container <p></p>; <a></a>Empty <br>
Attributes (modify HTML tags)
<img src=“my.jpg” height=“25” width=“30” alt=“My Image”>
Four attributes (src, height, width, alt)
HTML - Heading/ParagraphHeading Elements - varies font size
Levels 1 (largest) to 6 (smallest)<h1></h1>Inserts a line break before and after
Paragraph Tag
<p></p>Inserts a line break before and after
HTML -- More TagsLine Break Tag
<br>Manual line break
Text formatting
<b></b> <em></em><i></i> <strong></strong>
HTML – Align AttributesAlign Attribute
Modifies horizontal position of textleftrightcenterjustify
Enough already!Let’s get started
http://bengal.missouri.edu/~knottsb
You become the publisher
LinksLinks are created by the Anchor Tag
This is the <a> 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
file in same directoryfile in different directory; same machine
file on another websitesend email
LinksLink examples
<a href=“file2.html”>File</a><a href=“barb/file2.html”>File</a><a
href=“http://www.google.com”>Google</a>
<a href=“mailto:[email protected]”>Email</a>
HTML -- ListsLists
Ordered <ol></ol> -- numberedUnordered <ul></ul> -- bulletedDefinition <dl></dl>
Making your HTML more exciting
ImagesPut this in your file for image display<img src=“logo.gif” height=“25” width=“30” alt=“MU logo”>
Make it a link<a href=http://www.missouri.edu><img src=“logo.gif” height=“25” width=“30” align=“left” alt=“MU logo”></a>
Getting ImagesFind on the InternetMake ourselvesDigitize
Getting ImagesYou create
Software packages Photoshop, PaintShop Pro, PrintShop, your phone
You get from others Free or Fee -- be careful http://www.corbis.com http://www.barrysclipart.com http://www.thinkstockphotos.com http://google.com Others you have used???
Images for web pagesConsider 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
HTML -- ColorColor
Predefined Color NamesRGB color values (lots of charts on Web)
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.
<body bgcolor=“blue”> </body>(but which blue?)
