Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download ITNP43: HTML Lecture 2 Your First Web Page
Transcript
ITNP43: HTML Lecture 2 Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 1 Your First Web Page... <!DOCTYPE html> <html> <head> <titl >M Fi <title>My Firstt W Web bP Page</title> </titl > </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, y, today! y </p> </body> </html> Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 2 1 HTML5 + Character Encoding <!DOCTYPE html> <html> <head> < t charset="utf-8" <meta h t " tf 8" /> <title>My First Web Page</title> </head> <body> <p> Hello world. </p> <p> p It is a <em>wonderful</em> day, today! </p> </body> </html> Autumn 2014 © University of Stirling • Meta tags provide housekeeping information • One O is i the th character h t encoding used • utf-8 is Unicode • guarantees correct rendering by the browser ITNP43: Interface Design and the World Wide Web 3 XHTML Version <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ht l xmlns="http://www.w3.org/1999/xhtml" <html l "htt // 3 /1999/ ht l" xml:lang="en" ll " " llang="en"> " "> <head> <title>My First Web Page</title> </head> <body> <p> Hello world. </p> p <p> It is a <em>wonderful</em> day, today! </p> </body> </html> Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 4 2 HTML Validation: http://validator.w3.org/ Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 5 Creating a Web Page • Use a text editor – e.g. Notepad, TextPad Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 6 3 Web Pages the WYSIWYG Way • There are WYSIWYG editors for HTML – – – – What You See Is What You Get we do not type in actual HTML the HTML is created for us behind the scenes e.g. • Adobe Dreamweaver • Microsoft FrontPage • All such editors have limitations – Know your HTML first! • Example ... Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 7 Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 8 4 Anatomy of a Web Page Document Header Body Autumn 2014 © University of Stirling <html> <h d> <head> <title>My First Web Page</title> </head> <body> <p> Hello world. </p> <p> p It is a <em>wonderful</em> day, today! </p> </body> </html> ITNP43: Interface Design and the World Wide Web 9 Formatting Text • Document structure: e.g. e g a paragraph of text <p> Hello world. </p> • Style and layout: e.g. text style It is a <em>wonderful</em> day, today! – This is normally done with Cascading Style Sheets Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 10 5 HTML Tags • HTML is a markup language • You markup a document by adding tags specifying elements and their attributes <element>…content…</element> • Tags specify the structure and formatting • They are interpreted by a web browser to produce the screen presentation Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 11 HTML Tags (2) • Most tags are containers: <em>wonderful</em> • There are also standalone tags, e.g. - inline image <img> <br> - linebreak <hr> - horizontal rule • Most elements have ha e attributes attrib tes – these extend or modify the tag’s actions – e.g. <p class="important"> … </p> Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 12 6 Nesting HTML Tags • Some tags can be nested to apply multiple effects to a single element – e.g. It’s a <b><i>really, really</i></b> nice day! – Gives: It’s a really, really nice day! • The <i>…</i> is contained within <b>…</b> • Do not overlap tags, tags such as – It’s a <b><i>really, really</b></i> nice day! Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 13 Things to Note • Some things are ignored by browsers: – Line breaks are ignored • text is wrapped continuously until <p> or <br> – Tabs and white space are ignored – Multiple <p> tags are ignored (one will do) – Unrecognised tags are ignored • (this can have unfortunate effects!) Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 14 7 Comments in HTML • You can add comments to your HTML files: <!-- This is a comment --> <!-- Here is a multiple line comment --> • Browsers will not display comments Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 15 HTML Structural Tags • <html>…</html> – defines the document as being HTML • <head>…</head> – information describing the document • <body>…</body> – contains the contents of the document to be displayed by the browser • Should only be ONE instance of each of these in a web page Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 16 8 Header Tags • <title>…</title> – description of page’s contents – usually displayed in browser’s header bar – used in bookmarks and by search engines • <base> – document’s base location for relative URLs • <meta> – provide information about document e.g. author – used by search engines Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 17 Example Header <!DOCTYPE html> <html> <head> <base href= "http://www http://www.cs.stir.ac.uk/courses/ITNP43 cs stir ac uk/courses/ITNP43"> > <meta http-equiv="content-type" content=“text/html; charset=UTF-8"> <meta name="Author" content="B.P.Graham"> <title>My First Web Page</title> </head> <body> : : </body> </html> Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 18 9 Inside the Body: Headings • Heading levels – <h1> to <h6> – <hn>…</hn> – e.g. <h1>Heading One</h1> Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 19 Paragraphs • Paragraphs delimited by <p>…</p> • Browser determines lines – use <br> to force a break Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 20 10 Preformatted Paragraphs • Use <pre>…</pre> to create a paragraph with line breaks and spacing as you specified – usually displayed in a monospace font e.g. Courier Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 21 Text Styles • Logical styles – specific rendering left to browser <strong>…</strong> <em>…</em> <mark>…</mark> <code>…</code> emphasis emphasis highlight computer code (usually bold) (usually italic) (HTML5 only) (monospaced) • Physical styles – specific p display p y instructions <i>…</i> <b>…</b> <sub>…</sub> <sup>…</sup> Autumn 2014 © University of Stirling italic bold subscript superscript ITNP43: Interface Design and the World Wide Web 22 11 Special Characters • Characters not found in the normal alphanumeric character set are specified using character entities • These may be defined by name: &name; – e.g. È - grave accent on capital E (È) – these are case-sensitive! (e.g. è for è) • Or by a number: &#nnn; – e.g. > - greater than sign (>) • (In both cases, note the semicolon) Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 23 Including Images • Images can be included in-line anywhere in your document using <img> – e.g. <img src="mypicture.gif" alt="Picture of me" width="50" height="50"> – src (required) specifies the location of the image • relative or full URL – alt (required) specifies alternative textual description p – width and height of image in pixels • Image formats are GIF, JPEG and PNG Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 24 12 Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 25 Other Media • <object> is a way of including a variety of media elements in a web page – Audio, video, Java applets, PDF, Flash – e.g. <object width="400" height="400" data="helloworld.swf">Hello world!</object> – data specifies the location of media – type specifies type of media – Alternative text is content of tag • Alternatively in HTML5 use: – <audio> for sound clips – <video> for video clips Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 26 13 Deprecated Tags & Attributes • Specifying fonts with the <font> tag – e.g. <font font face="Arial" face Arial size size="+1">This 1 This text will be displayed in Arial</font> • Specifying alignment with the align attribute – E.g. <p align="center">….</p> • And many others… • We will avoid the use of deprecated elements! Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 27 End of Lecture Next HTML lecture: Links, Lists & Tables Autumn 2014 © University of Stirling ITNP43: Interface Design and the World Wide Web 28 14
