HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003
© Richard L. Goldman 2 HTML HTML is a markup language that may include hypertext. Markup Language: A language that allows you to format a document by imbedding marks in it. Hypertext: An instruction imbedded in the text of a document that creates a links to another location.
© Richard L. Goldman 3 HTML Tags The formatting marks used in HTML documents are called “tags”. To form a tag, HTML commands are enclosed in angle brackets. Tags are used in pairs - a beginning tag and a closing tag..... A closing tags is identified with a leading slash (/).
© Richard L. Goldman 4 Web Page Sections Web Page Heading Body A web page is divided into two main sections: Heading Body
© Richard L. Goldman 5 Web Page Sections Web Page Heading Body The heading section includes the title and other objects used to describe web page properties. The body section contains the visible contents of the web page.
© Richard L. Goldman 6 Web Page with Tags <HTML> </HTML> Web Page <HEAD> </HEAD> <BODY> </BODY> Heading Body Tags are used to identify the page as HTML. Tags are used to identify each section. Tags are used to add the web page title. Tags are used to format the contents of the web page body. <TITLE>Mr. Goldman</TITLE> <H2>Welcome</H2> <P> <H3><I>Sample</I></H3> </P>
© Richard L. Goldman 7 Home Page HTML pages are saved as plain text (ASCII). The home page of a web site is saved with the name: index.htm
© Richard L. Goldman 8 HTML Tag Attributes Many HTML tags can be modified by the use of an attribute. Example: The tag will start a new paragraph. The tag can be modified with the attribute of align and the value of left, right, center, or justify. To right align a new paragraph you would enter:
© Richard L. Goldman 9 Web Page Creation Web pages can be: Coded with a text editor such a Microsoft Notepad. Coded with a word processor such as Microsoft Word – then saved as a text file. Created with a code-only web page editors such as Macromedia HomeSite. Created with a WYSIWYG web page editor such as Microsoft FrontPage or Macromedia DreamWeaver. Created with many types of applications (Word, Excel, PowerPoint, etc.) – then use “Saved as a Web Page” to create HTML code.
© Richard L. Goldman 10 Sample Web Pages Instructions: Click on a link below Click on the View menu Select Source Note the different HTML code in each Web page created in Notepad Web page created in FrontPage Web page created in Word
© Richard L. Goldman 11 List of HTML Tags ADDRESS - Address information APPLET - Java applet AREA - Hotzone in imagemap A - Anchor BASE - Document location BASEFONT - Default font size BIG - Larger text BLOCKQUOTE - Large quotation BODY - Document body BR - Line break B - Bold CAPTION - Table caption CENTER - Centered division CITE - Short citation CODE - Code fragment DD - Definition DFN - Definition of a term DIR - Directory list DIV - Logical division DL - Definition list DT - Definition term EM - Emphasized text FONT - Font modification FORM - Input form H1 - Level 1 header H2 - Level 2 header H3 - Level 3 header H4 - Level 4 header H5 - Level 5 header H6 - Level 6 header HEAD - Document head* HR - Horizontal rule HTML - HTML Document IMG - Images INPUT - Input field, button, etc. ISINDEX - Primitive search I - Italics KBD - Keyboard input LINK - Site structure* LI - List item MAP - Client-side imagemap MENU - Menu item list META - Meta-information* OL - Ordered list OPTION - Selection list option PARAM - Parameter for Java applet PRE - Preformatted text P - Paragraph SAMP - Sample text SCRIPT - Inline script* SELECT - Selection list SMALL - Smaller text STRIKE - Strikeout STRONG - Strongly emphasized STYLE - Style information* SUB - Subscript SUP - Superscript TABLE - Tables TD - Table cell TEXTAREA - Input area TH - Header cell TITLE - Document title* TR - Table row TT - Teletype UL - Unordered list U - Underline VAR - Variable * = Heading Tag