CSCI-235 Micro-Computers in Science HTML
HTML is a Markup Language HyperText Markup Language (HTML) Hypertext refers to the fact that Web pages are more than just text (e.g., can contain multimedia, provide links for jumping within & without) Markup refers to the fact that it works by augmenting text with special symbols (tags) that control formatting when the document is viewed by a special application (e.g., a Web browser interprets HTML)
HTML Editors HTML documents are basically ASCII text documents Any Word Processor, preferably Window’s Notepad can be used to create the necessary text Many high-level tools exist for creating Web pages (e.g., Microsoft FrontPage, Netscape Composer, etc…) Machine language vs. high-level language analogy
HTML Tags HTML specifies a set of tags that identify structure and content type Tags are enclosed in < > Most tags come in pairs, marking a beginning and an ending <b>Tags</b> Single Tags have a single tag and all the information required is contained within the single tag <IMG SRC="picture.gif" ALIGN="Left" >
HTML Elements An HTML element is an object enclosed by a pair of tags <title> My Home Page</title> is a TITLE element <b> This text appears bold.</b> is a BOLD element An HTML document is a collection of elements
Structural Elements An HTML document has two main structural elements HEAD contains setup information for the browser & the Web page (e.g., the title for the browser window, etc…) BODY contains the actual content to be displayed in the Web page HTML documents begin and end with <html> and </html> tags Comments appear between <!-- and --> HEAD section enclosed between <head> and </head> BODY section enclosed between <body> and </body> <html> <!–- Version information -- -- File: sample1.html -- --> <head> <title>My first HTML document</title> </head> <body> Hello world! </body> </html>
Opening and Closing Tags Start all pages with these tags: <html> <head> <title> </title> </head> <body> End all pages with these tags: </body> </html>
Text to form the body of the message <html> <head> <title> Text here appears in browser title bar </title> </head> <body> Text to form the body of the message </body> </html>
Headings Headings serve as headlines for a document There are six (6) levels of header tags. Level 1 is the largest and boldest, Level 6 is the smallest Headings can also include placement information inside the tag For Example: <h1 align="center"> text here </h1> Or: <h1 align="right"> text here </h1>
Paragraphs HTML does not recognize carriage returns or enters, you will need to add a Paragraph tag The paragraph tag is <p> and the closing tag is a </p> NOTE: To get the look of a <p> paragraph tag without really using one, you may choose to use two (2) break tags <br> together
Line Breaks & Paragraphs The <br> tag leaves normal spacing between lines, whereas the <p> tag leaves 2 to 3 times the space This sentence represents the spacing between <br> lines with the break tag This sentence represents the spacing between <p> lines with the paragraph tag
Justified Text in Paragraphs Use the <p align=“justify”>Text </p> tags (SEE SAMPLE HTML PAGE #1)
Listing Items on a Web Page Adding lists to your Web page Bullets called Unordered Lists <ul> Numbered lists called Ordered Lists <ol>
Unordered Lists <ul> When you want to make a bulleted list do the following: Use the <ul> tag as in the following example: <ul> <li> How </li> = l How <li> Now </li> = l Now <li> Brown </li> = l Brown <li> Cow </li> = l Cow </ul>
Ordered Lists <ol> When you want to make a numbered list to drive your point home, do the following: Use the <ol> tag as in the following example: <ol> <li> How </li> = 1. How <li> Now </li> = 2. Now <li> Brown </li> = 3. Brown <li> Cow </li> = 4. Cow </ol>
Colors The color of the background and text of a document can be defined using tags Colors can either be defined with their values in hex (e.g. #FF0000 for red) or by the use of one of the sixteen predefined colors (Black, White, Silver, Gray, Red, Maroon, Lime, Green, Blue, Navy, Magenta, Purple, Yellow, Olive, Cyan, and Teal) If you want red try <font color=red>This is red</font>
Style This is how you ask for a <b>bold font</b> This is how you ask for an <i>italic font</i> <u>underlined font</u>
Using Images <IMG SRC="image.location"> <IMG SRC="image.location" WIDTH=135 HEIGHT=200> <IMG SRC="image.location" ALIGN=Right> <BODY BACKGROUND="image.location"> (SEE SAMPLE HTML PAGE #2)
Adding Links <a href="location">Text that is underlined to indicate a link</a> (SEE SAMPLE HTML PAGE #3)
Writing Your Own Page Start Notepad by clicking on the Start button, Programs, Accessories, then Notepad Anything you save on your W: disk is accessible to the outside world by the StFx Web server. But what is your URL? If your login id is, for example, x2005abc, your URL is http://www.stfx.ca/people/x2005/x2005abc Name your HTML file index.html