1. 1 COMM 1213 H1 COMP 4923 X1 HTML Basics 2 (Readings: Ch. 5,6, and 7 Knuckles)

2. 2 Outline Web Hyper Links Web Hyper Links Site Design and Navigation Site Design and Navigation Named Anchors Named Anchors The mailto: Link The mailto: Link Using Images Using Images Lining to other documents Lining to other documents Lists Lists Tables and using tables to construct sites Tables and using tables to construct sites EG

3. 3 HREF Anchors (Links) Linking uses the anchor element Linking uses the anchor element … … Requires the HREF or NAME attribute-value pair Requires the HREF or NAME attribute-value pair click_text” click_text” Example: Example: To go to the ESPN SportsZone main page, click on the link for the SportsZone page at ESPN. Would appear as: To go to the ESPN SportsZone main page, click on the link for the SportsZone page at ESPN. SportsZone page at ESPN SportsZone page at ESPN

4. 4 HREF Anchors (Links) Browser will use defaults for HREF attributes Browser will use defaults for HREF attributes –color of link text (LINK, ALINK, VLINK) –where the page should appear (TARGET) A link should be as descriptive as possible A link should be as descriptive as possible http Link The HTML anchor element is used to provide hypertext links in web pages. For example, to go to the ESPN SportsZone main page, click on the link for the SportsZone page at ESPN. If you wish to go straight to the baseball section, click the baseball link.

5. 5 Absolute and Relative URLs Absolute URL: Absolute URL: http://plato.acadiau.ca/courses/comp/dsilver/4923/index.htmhttp://plato.acadiau.ca/courses/comp/dsilver/4923/index.htm creates an absolute link in an HREF The directory structure of the course website is: The directory structure of the course website is:../4923/index.htm../4923/schedule.htm../4923/Slides/Intro.ppt../4923/external.htm../4923/homework.htm../4923/Assignment/Assign3/simple.html Absolute address to simple.html: Absolute address to simple.html: http://plato.acadiau.ca/courses/comp/dsilver/4923/Assignment/Assign3/simple.html A relative address to the simple.html page from the context of http://plato.acadiau.ca/courses/comp/dsilver/4923/ http://plato.acadiau.ca/courses/comp/dsilver/4923/ is Assignment/Assign3/simple.html … This is called a local linkAssignment/Assign3/simple.html

6. 6 Absolute and Relative URLs The directory structure of the course website is:../4923/index.htm../4923/schedule.htm../4923/Slides/Intro.ppt../4923/external.htm../4923/homework.htm../4923/Assignment/Assign3/simple.html From the context of From the context of http://plato.acadiau.ca/courses/comp/dsilver/4923/Assignment/Assign3/simple.html Absolute link to the http://plato.acadiau.ca/courses/comp/dsilver/4923/Slides/Intro.ppt slides. Absolute link to the http://plato.acadiau.ca/courses/comp/dsilver/4923/Slides/Intro.ppt slides. http://plato.acadiau.ca/courses/comp/dsilver/4923/Slides/Intro.ppt Relative link to the same slides:../../Slides/Intro.ppt Relative link to the same slides:../../Slides/Intro.ppt../../Slides/Intro.ppt

7. 7 Relative URL Details../ (two periods) in a relative URL indicates the parent directory../ (two periods) in a relative URL indicates the parent directory./ (one period) refers to the current directory./ (one period) refers to the current directory / (a slash) always replaces the entire pathname of the base URL / (a slash) always replaces the entire pathname of the base URL // (two slashes) always replaces everything from the hostname onwards // (two slashes) always replaces everything from the hostname onwards Resolving relative URLs relative to http://WebReference.com/html/ http://WebReference.com/html/ Source: http://www.webreference.com/html/tutorial2/3.html http://www.webreference.com/html/tutorial2/3.html Relative URLAbsolute URL about.htmlhttp://WebReference.com/html/about.html tutorial1/http://WebReference.com/html/tutorial1/ tutorial1/2.htmlhttp://WebReference.com/html/tutorial1/2.html /http://WebReference.com/ //www.internet.com/http://www.internet.com/ /experts/http://WebReference.com/experts/../http://WebReference.com/../experts/http://WebReference.com/experts/../../../http://WebReference.com/./http://WebReference.com/html/./about.htmlhttp://WebReference.com/html/about.html

8. 8 Site Portability Websites should use local links. Why? –Its is not because it will use the same server connection! 1. There easier to build on your laptop and move to a server -- directory and links are portable 2. Local links allow../dsilver/4923/index.htm../dsilver/4923/Slides/Intro.ppt../dsilver/4923/homework.htm../dsilver/4923/Assignment/Assign3/simple.html to be easily changed to:../egould/4923/index.htm../egould/4923/Slides/Intro.ppt../egould/4923/homework.htm../egould/4923/Assignment/Assign3/simple.html

9. 9 Web Site Design Strategies So how do we link to page C? Closed Circuit!

10. 10 Web Site Design Strategies Possible Approaches: Possible Approaches: –Every page is link to all other pages (90 links) –Linear structure (36 links) Works well for sites like online books, tutorials Works well for sites like online books, tutorials

11. 11 Web Site Design Strategies Hierarchical structure Hierarchical structure –Categorical groups, subgroups, etc –Catalogs –Programs –Courses Organize! Organize!Directorystructureshouldmatchhierarchy

12. 12 Named Anchors NAME attribute acts a bookmark in the current or specified URL NAME attribute acts a bookmark in the current or specified URL Click here for Chapter 1” Click here for Chapter 1” Chapter 1 Chapter 1 My name is Sam, Sam I am … Alternatively another page can be referenced … Alternatively another page can be referenced … Johny Exuberant Man, I love chapter two of that book! Click here to go to chapter 2.. Note that this version is different from that in the book. The link still targets the named anchor "chap2" in another file named "book.html". However, since we are linking locally, the URL pointing to the file has been Changed to a relative URL. This page is sitting in the same directory as the file "book.html" which contains the named anchors.

13. 13 Named Anchors Named Anchor HTML for Fun and Profits. [Chapter 1] [Chapter 2] [Chapter 3] Chapter 1: Text Markup In the beginning, there was text............... Blagh Blagh Blagh Blagh Blagh Blagh Blagh Blagh Chapter 2: Hypertext Markup As it came to pass, the text was not sedentary, but hyper............... Blagh Blagh Blagh Blagh Blagh Blagh Blagh Blagh Chapter 3: Image Markup Let there be no other image before us (unless it's in a web page).......... Blagh Blagh Blagh Blagh Blagh Blagh Blagh Blagh

14. 14 The mailto: Link Example: Example: –If you have any questions please email Danny Silver. mailto:danny.silver@acadiau.ca Makes it easy for visitors to your website to contact you Makes it easy for visitors to your website to contact you Requires the browser to have knowledge of the users email program Requires the browser to have knowledge of the users email program

15. 15 Digital Images Web image files: *.gif and *.jpg most often used Web image files: *.gif and *.jpg most often used Compressed versions of original images – fewer bytes (1 byte = 8 bits) Compressed versions of original images – fewer bytes (1 byte = 8 bits) Image editing software: Image editing software: –MS Picture Manager  Adobe Photoshop 1.68 MB.jpg 1712 W x 2288 H pixels 97.5 KB.gif 335 W x 448 H pixels 67.8 KB.jpg 335 W x 448 H pixels

16. 16 Including Images on a Webpage Image element: Image element: Examples: Examples: Always include the width and height attributes.. Why? Always include the width and height attributes.. Why? Where do I get my images … ?? Where do I get my images … ?? –Transparent and animated *.gifs –http://www.gifanimations.com/ http://www.gifanimations.com/

17. 17 Aligning Images The ALIGN, HSPACE and VSPACE attributes can be used to position images within text The ALIGN, HSPACE and VSPACE attributes can be used to position images within text Try: Try: <IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg" width="250" height="71" HSPACE=10 VSPACE=5 ALIGN="left“ ALT="Acadia University"/> On Friday, October 13, the Tides are Turning Capital Campaign launch will take place at the K.C. Irving Environmental Science Centre. This is Acadia’s first significant capital campaign in more than 10 years with 195 volunteers throughout North America and around the world working on it.

18. 18 Image as a Link <img src="http://www.acadiau.ca/assets/images/main/logo.jpg" alt="Acadia University, Wolfville, Nova Scotia, Canada" width="250" height="71" border="0" /> </a> You may have encounter “thumbnail” image links in the past. You may have encounter “thumbnail” image links in the past. Thumbnail images are highly compressed so load fast Thumbnail images are highly compressed so load fast

19. 19 Linking to a Word or PDF doc <p> Here is a PDF doc Here is a PDF doc <p> Here is a MS Word doc Here is a MS Word doc <p> Background images:

20. 20 Organizing Your Webpage Files www/Index.htmlPublications.htmlPhotos.htmlDocs/Theory_of_Big_Bang.docImages/Clancy_the_dog.jpgShelly_and_Jim.gif

21. 21 HTML Lists Ordered Lists: Ordered Lists: Unordered List: Unordered List: Example: Apples Red Green Mangoes Green Yellow

22. 22 Text Areas The cat was playing in the garden. Suddenly a dog showed up..... </textarea>

23. 23 HTML Tables Column 1 Column 2 Cell 1 Cell 2 Cell 3 Cell 4 TH = Table Head, TR = Table Row, TD = Table Data (cell contents)

24. 24 HTML Tables TABLE element attributes: TABLE element attributes: –BGCOLOR=“white” – defines background colour –CELLPADDING=1 – defines space around cell contents –CELLSPACING=2 – defined space between cells –WIDTH=100% - will cover 100% of window width –WIDTH=100 - will cover 100 pixels window width –HEIGHT=100% - will cover 100% of window height –ALIGN=left,right,center

25. 25 TD Element Attributes Cell Background: Cell Background: –BGCOLOR=“blue” –BACKGROUND=“URL for an image” Cell Size: Cell Size: –WIDTH=100% - will cover 100% of window width –WIDTH=100 - will cover 100 pixels window width –HEIGHT=100% - will cover 100% of window height Alignment of cell content: Alignment of cell content: –ALIGN=left, right, center –VALIGN=top, bottom, middle

26. 26 TD Element Attributes – Spanning Columns and Rows Cell span control: Cell span control: –COLSPAN=2 - defines number of columns this cell should span to right –ROWSPAN=3 - defines number of rows this cell should span downward

27. 27 Spanning Columns and Rows Spanning Cols and Rows in Tables A B C D E F

28. 28 Moe’s World Moe's Homepage Acadia University CogNova Technologies Sideshow Bob's Basement Groundskeeper Willie's Workshop Welcome to Moe's World! Feel free to click on one of my favorite links to the left or stick around and see what I have to say. Blagh Blagh Blagh

29. 29 Resources Getting started with HTML from the W3C Getting started with HTML from the W3C Getting started with HTML Getting started with HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C'sHTML 4.0 W3C'sHTML 4.0 W3 Schools HTML Tutorial W3 Schools HTML TutorialHTML TutorialHTML Tutorial HTML Goodies HTML Primer HTML Goodies HTML PrimerHTML PrimerHTML Primer An HTML Code Tutorial An HTML Code TutorialHTML Code TutorialHTML Code Tutorial Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML Writing HTML

30. 30 THE END danny.silver@acadiau.ca

31. 31 Architectural of the Internet Internet Application Client 1 Server B Server C TCP/IP Application Client 2 Server X Server Y Server C Intrane t Acadia

32. 32 TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

33. 33 TCP/IP Protocol Architecture Internet Protocol (IP) – like a postcard that contains: Internet Protocol (IP) – like a postcard that contains: –Destination address (131.162.201.7) –Return address –Block of data (content) Transmission Control Protocol (TCP) Transmission Control Protocol (TCP) –Ensures the post card gets through –Ensures the order of deliver –Handles errors and control flow

34. 34 Client-Server Applications that use the Internet Physical Network TCP IP Physical Network TCP IP Internet Telnet Window Telnet Server FTP Client FTP Server eMail ClienteMail Server SMTP/POP FTP Telnet Protocol

35. 35 Major Architectural Components of the Web Internet Browser Database Server Client 1 Server A Server B Server C URL HTTP TCP/IP Browser Client 2 HTTP Server App. Server index.html

36. 36 Images Various digital image formats can be embedded with in HTML:.gif,.jpg Various digital image formats can be embedded with in HTML:.gif,.jpg Example Example See www.bellsnwhistles.com as source of images and other objects. See www.bellsnwhistles.com as source of images and other objects.www.bellsnwhistles.com Let’s down load one and try it … Let’s down load one and try it … My new baby girl.

37. 37 Hyper Links My Oldest Daughter. Natalie goes to Evangeline Middle School Which is in New Minas. Click Here to send her email.