1 / 20

CSCI-235 Micro-Computers in Science

Learn the fundamentals of HTML, such as tags, elements, and structural components, required to create captivating web pages effectively.

dempseyl
Télécharger la présentation

CSCI-235 Micro-Computers in Science

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSCI-235Micro-Computers in Science HTML

  2. 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)

  3. 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

  4. 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" >

  5. 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

  6. 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>

  7. Opening and Closing Tags • Start all pages with these tags: • <html> • <head> • <title> </title> • </head> • <body> • End all pages with these tags: • </body> • </html>

  8. <html> • <head> • <title>Text here appears in browser title bar</title> • </head> • <body> Text to form the body of the message • </body> • </html>

  9. 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>

  10. 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

  11. 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

  12. Justified Text in Paragraphs • Use the <p align=“justify”>Text </p> tags (SEE SAMPLE HTML PAGE #1)

  13. Listing Items on a Web Page • Adding lists to your Web page • Bulletscalled Unordered Lists <ul> • Numbered listscalled Ordered Lists <ol>

  14. 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>

  15. 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>

  16. 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, andTeal) • If you want red try <font color=red>This is red</font>

  17. Style • This is how you ask for a <b>bold font</b> • This is how you ask for an <i>italic font</i> • This is how you ask for an <u>underlined font</u>

  18. 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)

  19. Adding Links <a href="location">Text that is underlined to indicate a link</a> (SEE SAMPLE HTML PAGE#3)

  20. 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

More Related