HTML HYPERTEXT MARKUP LANGUAGE The HTLM History HMTL Basics
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTMLHYPERTEXT
MARKUP LANGUAGE
The HTLM History
HMTL 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
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 PAGE
Title
Paragraph
Background
Text Links
Heading 2
Image Links
Image
Heading 1
Body
Navigation Bar
NOTEPAD TEXT EDITOR Click Start button on Taskbar Type> Notepad in the search bar –
choose 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 tagsFramseset: 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): clipart
JPG (Joint Photographic Experts Group): photos
PNG (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 Computer
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 icon (take a screen snipping)
Print HTML code in NotepadFile > Print (take a screen snipping)
Related Documents
