Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Html
Document related concepts
Transcript
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 • E.g., /home/users/jdoe – Point domain name to your home directory 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-3 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 4-4 4-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> 4-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 4-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 4-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 4-9 4-10 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> 4-11 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 4-12 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 ( & ) < > & displays as displays as displays as < > & • So the HTML would be <i> 0 < p > r </i> 4-13 Accent Marks in HTML • Letters with accent marks use the escape symbol &eactue; ñ displays as é displays as ñ • Other useful special symbols &mdash (non-breaking space) – (em dash) • Lists on sites like http://www.w3schools.com/tags/ref_entities.asp 4-14 4-15 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 4-16 4-17 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) <a href=“URL”>Anchor Text</a> 4-18 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. 4-19 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.h tml">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 4-20 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 4-21 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 4-22
