1 / 22

HyperText Markup Language

HyperText Markup Language. Web Hosting. Creating a web site (on a site like iPage) Buy domain name (www.mybiz.com) iPage has registrar (e.g., FastDomain Inc.) register domain name Must provide ANSs for domain (e.g., ns1.ipage.com) Upload content into your home directory

marcel
Download Presentation

HyperText Markup Language

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. HyperText Markup Language

  2. Web Hosting • Creating a web site (on a site like iPage) • Buy domain name (www.mybiz.com) • iPage has registrar (e.g., FastDomain Inc.) register domain name • Must provide ANSs for domain (e.g., ns1.ipage.com) • Upload content into your home directory • E.g., /home/users/jdoe • Point domain name to your home directory

  3. Marking Up with HTML HTML is Hypertext Markup Language Notation for specifying Web page content and formatting Hidden tags (mark up) describe how words on a page should look Formatting with Tags Words or abbreviations enclosed in angle brackets < > Come in pairs (beginning and end): <title> </title> Tags are not case-sensitive

  4. Tags for Bold, Italic, and Underline Bold: <b> </b> Italic: <i> </i> Underline: <u> </u> <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici! Note nesting Some tags do not surround anything, so they don't have an ending form <hr /> inserts a horizontal rule (line) <br /> inserts a line break

  5. A Basic HTML Web Page Begins with <html> and ends with </html> <html> <head> <!-- Preliminaries go here, including title--> <title> Starter Page </title> </head> <body> <!-- Main visible content of the page goes here--> <p> Hello, World! </p> </body> </html>

  6. Gather Your Tools For making Web pages you need two tools Web browser (like FireFox) Simple text editor (like NotePad) HTML is plain text Create file with contents from last slide

  7. Displaying the HTML Source File Save text in a file like “myPage.html” Open your web browser and use “Open File…” to display “myPage.html” Can also double-click file Use this page as a template

  8. Structuring Documents Markup language describes how a document's parts fit together Headings Eight levels of heading tags Headings display material in large font on a new line <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3> produces: Pope Cardinal Archbishop

  9. HTML Format vs. Display Format Browser ignores how we format the HTML source We usually use an indented form though <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>

  10. White Space We use white space in HTML for readability spaces, tabs, new lines Browser turns any white space sequence in the HTML source into a single space Exception: Preformatted information between <pre> and </pre> tags is displayed as it appears

  11. Brackets in HTML: The Escape Symbol What if our web page needed to show a math relationship like 0 < p > r Browser would interpret< p >as a paragraph tag Need an escape symbol ( & ) &lt; displays as< &gt; displays as> &amp; displays as& So the HTML would be <i> 0 &lt; p &gt; r </i>

  12. Accent Marks in HTML Letters with accent marks use the escape symbol &eactue; displays as é &ntilde; displays as ñ Other useful special symbols &nbsp; (non-breaking space) &mdash – (em dash) Lists on sites like http://www.w3schools.com/tags/ref_entities.asp

  13. Putting it All Together With just these few tags we can make an interesting Web page Title is shown in the browser title bar Russell’s paradox is in bold face In HTML source, the paragraphs are indented more than the <h2> headers to make them readable Horizontal line between the two paragraphs spans the width of the browser window An acute accent appears in Magritte’s first name French phrase is in italics, as is the word picture

  14. Marking Links With Anchor Tags There are two sides of a hyperlink Anchor text(highlighted, clickable text in the current document) Hyperlink reference(the target URL address) <ahref=“URL”>Anchor Text</a>

  15. Examples of Anchor Tags Bertrand <a href=“http://www.bioz.com/bios/sci/russell.html”> Russell</a> displays as Bertrand Russell See <a href=“http://help.bigCo.com/manual.html”> the manual</a> please. displays as See the manual please.

  16. Anchor Tags (cont'd) Absolute pathnames: Reference pages at other web sites using complete URLs http://server/directory_path/filename <a href="http://cs.millersville.edu/~zoppetti/101/index.html">101 Course Page</a> Full URL is needed because the page is remote and the web server needs to be told where to find it in the file system

  17. Anchor Tags (cont'd) Relative pathnames: Reference pages stored in directory relative to current directory Read <a href="./filename">this file</a>. Relative pathnames are more flexible Can move web files around as a group Relative pathnames can also specify a path deeper or higher in the directory structure ./subdir/filename ../subdir/filename .Current directory .. Parent directory

  18. If we are at file bios/sci/russell.html then the source file for Magritte can be designated with relative path ../../art/magritte.html The “../../” part say to go up two levels

More Related