CSCU9B2: Web Tech Lecture 1

Size: px

Start display at page:

Download "CSCU9B2: Web Tech Lecture 1"

Andrew Shields
5 years ago
Views:

1 CSCU9B2: Web Tech Lecture 1 Prof. Bruce Graham b.graham@cs.stir.ac.uk Room 4B76 1

2 What to Expect 5 lectures covering the programming aspect of the web: HTML5, CSS, JavaScript, HTML5 canvas 8 practicals One hour per week and in your own time Checkpoints worth 20%: one per worksheet; can be completed in your own time Solid foundation for web development and programming 2

3 Three Aspects of Web Development Content (HTML) Presentation (CSS) Interactivity (JavaScript) 3

4 Resources Lab worksheets + lecture notes Book: Creating a Website: the Missing Manual (MacDonald 2011), available at: W3Schools Online Web Tutorials at: 4

5 5

6 Your First Web Page... <!DOCTYPE html> <html> <head> <title>my First Web Page</title> </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, today! </p> </body> </html> 6

7 HTML5 + Character Encoding <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my First Web Page</title> </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, today! </p> </body> </html> Meta tags provide housekeeping information One is the character encoding used utf-8 is Unicode guarantees correct rendering by the browser 7

8 XHTML Version <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>my First Web Page</title> </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, today! </p> </body> </html> 8

9 HTML Validation: 9

10 Use a text editor Creating a Web Page e.g. Notepad, TextPad 10

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

12 Anatomy of a Web Page Document Header Body <html> <head> <title>my First Web Page</title> </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, today! </p> </body> </html> 12

13 Formatting Text Document structure: 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 13

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

15 HTML Tags (2) Most tags are containers: <em>wonderful</em> There are also standalone tags, e.g. <img> <br> <hr> - inline image - linebreak - horizontal rule Most elements have attributes these extend or modify the tag s actions e.g. <p class="important"> </p> In XHTML: <br /> 15

16 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, such as It s a <b><i>really, really</b></i> nice day! 16

17 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!) 17

18 Deprecated Tags & Attributes Specifying fonts with the <font> tag e.g. <font face="arial" size="+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! 18

19 Comments in HTML You can add comments to your HTML files:   Browsers will not display comments 19

20 <html> </html> HTML Structural Tags 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 20

21 <title> </title> Header Tags 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 21

22 Example Header <!DOCTYPE html> <html> <head> <base href= " <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> 22

23 Inside the Body: Headings Heading levels <h1> to <h6> <hn> </hn> e.g. <h1>heading One</h1> 23

24 Paragraphs Paragraphs delimited by <p> </p> Browser determines lines use <br> to force a break 24

25 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 25

26 Logical styles Text Styles specific rendering left to browser <strong> </strong> emphasis (usually bold) <em> </em> emphasis (usually italic) <mark> </mark> highlight (HTML5 only) <code> </code> computer code (monospaced) Physical styles specific display instructions <i> </i> italic <b> </b> bold <sub> </sub> subscript <sup> </sup> superscript 26

27 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) 27

28 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 (see later) alt (required) specifies alternative textual description width and height of image in pixels Image formats are GIF, JPEG and PNG 28

29 29

30 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 30

31 Hypertext Links This is what the Web is all about! You can create to links to: other documents HTML or otherwise (e.g. PDF) parts of the same document images Links can be local or to any web-accessible address 31

32 The Anchor Tag Links are created using the anchor tag: <a> e.g. <a href= page2.html >next page</a> results in the text next page being a link to the local HTML file, page2.html relative URL: page2.html is in the same folder as linking web page (or relative to a specified <base>) next page will be displayed by the browser in a different colour and usually underlined 32

33 Links with Absolute URLs Remote pages are linked with absolute URLs the complete URL, e.g. Here s a link to Bruce s <a href= > research page</a>. A URL with no HTML file finds a default page defined by server either index.html or default.html (default.htm) Here s a link to Bruce s <a href= > home page</a>. 33

34 Links with Relative URLs Local pages are linked with relative URLs relative to location of current document or relative to location specified by <base> tag e.g. Here s a link to Bruce s <a href= research.html >research page</a>. research.html in same folder e.g. Here s a link to Bruce s <a href= Research/research.html > research page</a>. research.html in subfolder Research Never use absolute file paths!! e.g. <a href= H:/Research/research.html > 34

35 Linking Within a Document Parts of a document can be named (given an identifier): e.g. <h1 id= stocks >Daily Stock Quotes</h1> Elsewhere in the same document we may place a link: e.g. Check out the <a href= #stocks >stock quotes</a> And in another document we may include Go to today s <a href= dailynews.html#stocks >stock quotes</a> 35

36 Table of Contents Links to parts of a document are very useful for tables of contents within a long document 36

37 Links to images: Links to Other Media e.g. Here is <a href= alan.jpg >me</a>. Links to addresses: e.g. <a href= >Mail me</a> Links to other types of document: e.g. <a href= mydoc.pdf >my document</a> requires non-browser software to view it, either stand-alone or browser plugin 37

38 Thumbnail Images Images are usually big and can take a long time to download Often use a thumbnail-sized image as a link to the full image, using <a> the target attribute tells the browser to open a new window: <a href= bruce.jpg target= myimage > it helps to indicate size of full image near thumbnail user has choice as to whether to download or not More details... 38

39 <p> <a href="bruce.jpg" target="myimage"> <img src="bruce65x75.jpg" alt= me"></a> Click the thumbnail to see a larger image (6.2kb) of me! </p> 39

40 Lists in HTML Unordered (bulleted) lists Numbered lists Definition lists We have limited control over appearance, such as bullet styles, using CSS 40

41 <ul> </ul> Unordered (Bulleted) Lists List entries with <li> </li> Bullet style can be set with style sheets <p><b>shopping List</b></p> <ul> <li>avocados</li> <li>tomatoes</li> <li>scallions</li> <li>black beans</li> </ul> 41

42 <ol> </ol> Ordered (Numbered) Lists first number and numbering style can be set with style sheets List entries with <li> </li> <p><b>the Morning</b></p> <ol> <li>wake up</li> <li>get up</li> </ol> 42

43 <dl> </dl> Definition Lists Term with <dt> </dt> Definition with <dd> </dd> <p><b>some Definitions</b></p> <dl> <dt>internet</dt> <dd>network of networks.</dd> <dt></dt> <dd>distributed system of hypertext documents known as web pages.</dd> <dt>html</dt> <dd>hypertext markup language.</dd> </dl> 43

44 Nested Lists Lists can be nested Browser automatically changes bullet style for unordered lists (Ordered lists can also be nested but change numbering style with style sheets) <ul> <li>breakfast <ul> <li>cereal</li> <li>toast</li> <li>coffee</li> </ul></li> <li>lunch</li> <li>dinner</li> </ul> 44

Style in Lists with CSS <head> <meta charset="utf-8"> <style type="text/css"> ul.cir { list-style-type: circle; } ul.squ { list-style-type: square; } ol.upa { list-style-type: upper-alpha; } ol.

45 Style in Lists with CSS <head> <meta charset="utf-8"> <style type="text/css"> ul.cir { list-style-type: circle; } ul.squ { list-style-type: square; } ol.upa { list-style-type: upper-alpha; } ol.lor { list-style-type: lower-roman; } </style> <title>examples of Lists</title> </head> <body> <h3>shopping List</h3> <ul class="squ"> <li>avocados</li> <li>tomatoes</li> <li>scallions</li> <li>black beans</li> </ul> 45

46 Tables Rows and columns of tabular data 46

47 A Very Simple Table As basic as it gets <table> <tr> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <td>cell 1</td><td>Cell 2</td> </tr> </table> <tr> </tr> defines each row <td> </td> defines each entry (cell) 47

48 Headers and Borders <table border= 1 > <tr> <th>row 1:</th> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <th>row 2:</th> <td>cell 1</td><td>Cell 2</td> </tr> </table> Note: <th> </th> 48

49 Spanning Columns <table border= 1 > <caption>a Complicated Table</caption> <tr> <td rowspan= 3 >Cell 1</td> <td colspan= 2 >Cell 2</td> </tr> <tr> <td>cell 3</td><td>Cell 4</td> </tr> <tr> <td>cell 5</td><td>Cell 6</td> </tr> </table> Note: caption 49

50 Table Sizing Table and cell widths can be specified using style sheets Relative sizing Table relative to size of browser window Cell relative to table size Absolute sizing in pixels <table border= 1 > <tr> <td class= narrow >Left-hand</td> <td>right-hand</td> </tr> </table> 50

51 <HTML> <HEAD> <TITLE>A Two Column Table Layout</TITLE> <STYLE type="text/css">.whole {width: 100%}.narrow {width: 20%}.narfix {width: 40px} </STYLE> </HEAD> <TABLE BORDER=1> <TR> <TD>Left-hand column for links</td> <TD>Right-hand column for content</td> </TR> </TABLE> <TABLE BORDER=1 class="whole"> <TR> <TD CLASS="narrow">Left-hand column for links</td> <TD>Right-hand column for content</td> </TR> </TABLE> Sizing (contd) <TABLE BORDER=1> <TR> <TD CLASS="narrow">Left-hand column for links</td> <TD>Right-hand column for content</td> </TR> </TABLE> <TABLE BORDER=1> <TR> <TD CLASS="narfix">Left-hand column for links</td> <TD>Right-hand column for content</td> </TR> </TABLE> </BODY> </HTML> 51

52 Table Sizing (contd) 52

53 End of Lecture Next Web Tech lecture: Cascading Style Sheets 53

ITNP43: HTML Lecture 3

ITNP43: HTML Lecture 3 Niederst, Chapts 10, 11, 13 (3rd edn) 1 HTML So Far... Structural tags , , Text formatting , etc Element attributes e.g. Inline images