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. 4-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): –Tags are not case-sensitive

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

5. 4-5

6. 4-6 A Basic HTML Web Page Begins with and ends with Starter Page Hello, World!

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

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

9. 4-9 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 Pope Cardinal Archbishop produces: Pope Cardinal Archbishop

10. 4-10

11. 4-11 HTML Format vs. Display Format Browser ignores how we format the HTML source We usually use an indented form though Pope Cardinal Archbishop

12. 4-12 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 and tags is displayed as it appears

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

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

15. 4-15

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

17. 4-17

18. 4-18 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) Anchor Text

19. 4-19 Examples of Anchor Tags Bertrand Russell displays as Bertrand Russell See the manual please. displays as See the manual please.

20. 4-20 Anchor Tags (cont'd) Absolute pathnames: Reference pages at other web sites using complete URLs http://server/directory_path/filename 101 Course Page 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

21. 4-21 Anchor Tags (cont'd) Relative pathnames: Reference pages stored in directory relative to current directory Read this file. 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

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