1 comm 1213 h1 comp 4923 x1 html basics 2 (readings: ch. 5,6, and 7 knuckles)
TRANSCRIPT
11
COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1
HTML Basics 2HTML Basics 2
(Readings: Ch. 5,6, and 7 Knuckles)(Readings: Ch. 5,6, and 7 Knuckles)
22
OutlineOutline
• Web Hyper LinksWeb Hyper Links• Site Design and NavigationSite Design and Navigation• Named AnchorsNamed Anchors• The mailto: LinkThe mailto: Link• Using ImagesUsing Images• Lining to other documentsLining to other documents• ListsLists• Tables and using tables to construct Tables and using tables to construct
sitessitesEG
33
HREF Anchors (Links)HREF Anchors (Links)
• Linking uses the anchor elementLinking uses the anchor element<A> … </A><A> … </A>
• Requires the HREF or NAME attribute-value Requires the HREF or NAME attribute-value pairpair<A HREF=“url">click_text”</A><A HREF=“url">click_text”</A>
• Example:Example:To go to the ESPN SportsZone main page, click on the link for To go to the ESPN SportsZone main page, click on the link for
the <A HREF="http://espn.go.com">SportsZone page at the <A HREF="http://espn.go.com">SportsZone page at ESPN</A>.ESPN</A>.
Would appear as:Would appear as:To go to the ESPN SportsZone main page, click on the link for To go to the ESPN SportsZone main page, click on the link for
the the SportsZoneSportsZone page at ESPN page at ESPN..
44
HREF Anchors (Links)HREF Anchors (Links)• Browser will use defaults for HREF Browser will use defaults for HREF
attributesattributes– color of link text (LINK, ALINK, VLINK)color of link text (LINK, ALINK, VLINK)– where the page should appear (TARGET) where the page should appear (TARGET)
• A link should be as descriptive as possibleA link should be as descriptive as possible<HTML><HEAD> <TITLE>http Link</TITLE></HEAD><BODY>
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
<A HREF="http://espn.go.com">SportsZone page at ESPN</A>.
If you wish to go straight to the baseball section, click the
<A HREF="http://espn.go.com/mlb/">baseball link</A>.
</BODY></HTML>
55
Absolute and Relative URLsAbsolute and Relative URLs
• Absolute URL: Absolute URL: http://plato.acadiau.ca/courses/comp/dsilver/4923/index.htmcreates an creates an absolute linkabsolute link in an HREF in an HREF
• The directory structure of the course website is:The directory structure of the course website is:../4923/index.htm../4923/index.htm../4923/schedule.htm../4923/schedule.htm../4923/Slides/Intro.ppt../4923/Slides/Intro.ppt../4923/external.htm../4923/external.htm../4923/homework.htm../4923/homework.htm../4923/Assignment/Assign3/simple.html../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/is Assignment/Assign3/simple.html … This is called a local link
66
Absolute and Relative URLsAbsolute and Relative URLsThe directory structure of the course website is:The directory structure of the course website is:
../4923/index.htm../4923/index.htm
../4923/schedule.htm../4923/schedule.htm
../4923/Slides/Intro.ppt../4923/Slides/Intro.ppt
../4923/external.htm../4923/external.htm
../4923/homework.htm../4923/homework.htm
../4923/Assignment/Assign3/simple.html../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 Absolute link to the http://plato.acadiau.ca/courses/comp/dsilver/4923/Slides/Intro.ppt http://plato.acadiau.ca/courses/comp/dsilver/4923/Slides/Intro.ppt slides.slides.
• Relative link to the same slides: ../../Slides/Intro.pptRelative link to the same slides: ../../Slides/Intro.ppt
77
Relative URL DetailsRelative URL Details• ../ (two periods) in a relative URL indicates the ../ (two periods) in a relative URL indicates the parent directoryparent 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 // (two slashes) always replaces everything from the hostname onwardsonwards
Resolving relative URLs relative to http://WebReference.com/html/Source: http://www.webreference.com/html/tutorial2/3.html
Relative URL Absolute URLabout.html http://WebReference.com/html/about.html
tutorial1/ http://WebReference.com/html/tutorial1/
tutorial1/2.html http://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.html http://WebReference.com/html/about.html
88
Site PortabilitySite Portability
Websites should use local links. Why?Websites should use local links. Why?– Its is not because it will use the same server connection!Its is not because it will use the same server connection!
1.1. There easier to build on your laptop and move to a There easier to build on your laptop and move to a server -- directory and links are portableserver -- directory and links are portable
2.2. Local links allowLocal links allow../dsilver/4923/index.htm../dsilver/4923/index.htm../dsilver/4923/Slides/Intro.ppt../dsilver/4923/Slides/Intro.ppt../dsilver/4923/homework.htm../dsilver/4923/homework.htm../dsilver/4923/Assignment/Assign3/simple.html../dsilver/4923/Assignment/Assign3/simple.html
to be easily changed to:to be easily changed to:../egould/4923/index.htm../egould/4923/index.htm../egould/4923/Slides/Intro.ppt../egould/4923/Slides/Intro.ppt../egould/4923/homework.htm../egould/4923/homework.htm../egould/4923/Assignment/Assign3/simple.html../egould/4923/Assignment/Assign3/simple.html
99
Web Site Design StrategiesWeb Site Design Strategies
So how do we link to page C?
ClosedCircuit!
1010
Web Site Design StrategiesWeb Site Design Strategies
• Possible Approaches:Possible Approaches:– Every page is link to all other pages (90 Every page is link to all other pages (90
links)links)– Linear structure (36 links)Linear structure (36 links)
•Works well for sites like online books, Works well for sites like online books, tutorialstutorials
1111
Web Site Design StrategiesWeb Site Design Strategies• Hierarchical structureHierarchical structure
– Categorical groups, subgroups, etcCategorical groups, subgroups, etc– CatalogsCatalogs– ProgramsPrograms– CoursesCourses
• Organize!Organize!Directory Directory structure structure shouldshouldmatch match hierarchyhierarchy
1212
Named AnchorsNamed Anchors• NAME attribute acts a bookmark in NAME attribute acts a bookmark in
the current or specified URLthe current or specified URL<A HREF=“#chap1”>Click here for Chapter 1”</A><A HREF=“#chap1”>Click here for Chapter 1”</A>
<A NAME=“chap1”>Chapter 1</A> <A NAME=“chap1”>Chapter 1</A>
My name is Sam, Sam I am …My name is Sam, Sam I am …
• Alternatively another page can be referenced …Alternatively another page can be referenced …<HTML><HEAD><TITLE>Johny Exuberant</TITLE></HEAD><BODY>Man, I love chapter two of that book! Click here to <A HREF="book.html#chap2">go to chapter 2.</A>.<P><P>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.</BODY></HTML>
1313
Named AnchorsNamed Anchors<HTML><HEAD><TITLE>Named Anchor</TITLE></HEAD><BODY><H2>HTML for Fun and Profits.</H2>
<A HREF="#chap1">[Chapter 1]</A> <A HREF="#chap2">[Chapter 2]</A> <A HREF="#chap3">[Chapter 3]</A><P>
<A NAME="chap1"></A><H3>Chapter 1: Text Markup</H3>In the beginning, there was text...............<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>
<A NAME="chap2"><H3>Chapter 2: Hypertext Markup</H3></A>As it came to pass, the text was not sedentary, but hyper...............<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>
<A NAME="chap3"></A><H3>Chapter 3: Image Markup</H3>Let there be no other image before us (unless it's in a web page)..........<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>Blagh<P>
</BODY></HTML>
1414
The mailto: LinkThe mailto: Link
• Example:Example:– If you have any questions please email <A If you have any questions please email <A
HREF=mailto:[email protected]>Danny HREF=mailto:[email protected]>Danny Silver</A>.Silver</A>.
• Makes it easy for visitors to your website Makes it easy for visitors to your website to contact youto contact you
• Requires the browser to have knowledge Requires the browser to have knowledge of the users email programof the users email program
1515
Digital ImagesDigital Images• Web image files: *.gif and *.jpg most often usedWeb image files: *.gif and *.jpg most often used
• Compressed versions of original images – fewer Compressed versions of original images – fewer bytes (1 byte = 8 bits)bytes (1 byte = 8 bits)
• Image editing software: Image editing software: – MS Picture Manager MS Picture Manager Adobe Photoshop Adobe Photoshop
1.68 MB .jpg1712 W x 2288 H pixels
97.5 KB .gif335 W x 448 H pixels
67.8 KB .jpg335 W x 448 H pixels
1616
Including Images on a Including Images on a WebpageWebpage• Image element: <IMG SRC=“URL”>Image element: <IMG SRC=“URL”>• Examples:Examples:<IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg"/><IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg"/><IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg" <IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg"
width="250" height="71“ border=“3”/>width="250" height="71“ border=“3”/>
• 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 *.gifsTransparent and animated *.gifs– http://www.gifanimations.com/http://www.gifanimations.com/
1717
Aligning ImagesAligning Images
• The ALIGN, HSPACE and VSPACE The ALIGN, HSPACE and VSPACE attributes can be used to position attributes can be used to position images within textimages within text
• Try:Try:<IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg"<IMG SRC="http://www.acadiau.ca/assets/images/main/logo.jpg"width="250" height="71"width="250" height="71"HSPACE=10 VSPACE=5 ALIGN="left“HSPACE=10 VSPACE=5 ALIGN="left“ALT="Acadia University"/>ALT="Acadia University"/>On Friday, October 13, the Tides are Turning Capital Campaign On Friday, October 13, the Tides are Turning Capital Campaign launch will take place at the K.C. Irving Environmental Science Centre. 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 This is Acadia’s first significant capital campaign in more than 10 years with 195 volunteers throughout North America and around the world with 195 volunteers throughout North America and around the world
working on it. working on it.
1818
Image as a LinkImage as a Link
<a href="http://www.acadiau.ca"><a href="http://www.acadiau.ca">
<img <img src="http://www.acadiau.ca/assets/images/main/logo.jpsrc="http://www.acadiau.ca/assets/images/main/logo.jpg" g"
alt="Acadia University, Wolfville, Nova Scotia, Canada" alt="Acadia University, Wolfville, Nova Scotia, Canada" width="250" height="71" border="0" />width="250" height="71" border="0" />
</a></a>
• You may have encounter “thumbnail” image You may have encounter “thumbnail” image links in the past.links in the past.
• Thumbnail images are highly compressed so Thumbnail images are highly compressed so load fastload fast
1919
Linking to a Word or PDF Linking to a Word or PDF docdoc<p><p><a href="http://plato.acadiau.ca/courses/comp/dsilver/ijcnn05.pdf"><a href="http://plato.acadiau.ca/courses/comp/dsilver/ijcnn05.pdf">Here is a PDF doc</a>Here is a PDF doc</a><p><p><a <a
href="http://plato.acadiau.ca/courses/comp/dsilver/KM_IP_Abstract_4.dhref="http://plato.acadiau.ca/courses/comp/dsilver/KM_IP_Abstract_4.doc"> oc">
Here is a MS Word doc</a>Here is a MS Word doc</a><p><p>
Background images:Background images:
<BODY background="map.bmp"><BODY background="map.bmp"><BODY background=“Danny.jpg"><BODY background=“Danny.jpg">
2020
Organizing Your Webpage Organizing Your Webpage FilesFileswww/www/
Index.htmlIndex.html
Publications.htmlPublications.html
Photos.htmlPhotos.html
Docs/Docs/
Theory_of_Big_Bang.docTheory_of_Big_Bang.doc
Images/Images/
Clancy_the_dog.jpgClancy_the_dog.jpg
Shelly_and_Jim.gifShelly_and_Jim.gif
2121
HTML ListsHTML Lists
Ordered Lists: <OL>Ordered Lists: <OL>
Unordered List: <UL>Unordered List: <UL>
Example:<HTML><HEAD></HEAD><BODY> Apples <OL>
<LI>Red<LI>Green
</OL> Mangoes <UL type=square>
<LI>Green<LI>Yellow
</UL></BODY></HTML>
2222
Text AreasText Areas
<textarea rows="10" cols="60"><textarea rows="10" cols="60">
The cat was playing in the garden. The cat was playing in the garden. Suddenly a dog showed up.....Suddenly a dog showed up.....
</textarea> </textarea>
2323
HTML TablesHTML Tables<HTML><HEAD></HEAD><BODY> <TABLE BORDER='2'>
<TH>Column 1</TH><TH>Column 2</TH> <TR> <TD>Cell 1</TD><TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD><TD>Cell 4</TD> </TR></TABLE>
</BODY></HTML>
TH = Table Head, TR = Table Row, TD = Table Data (cell contents)
2424
HTML TablesHTML Tables
• TABLE element attributes:TABLE element attributes:– BGCOLOR=“white” – defines background colour BGCOLOR=“white” – defines background colour – CELLPADDING=1 – defines space around cell CELLPADDING=1 – defines space around cell
contentscontents– CELLSPACING=2 – defined space between cellsCELLSPACING=2 – defined space between cells– WIDTH=100% - will cover 100% of window widthWIDTH=100% - will cover 100% of window width– WIDTH=100 - will cover 100 pixels window widthWIDTH=100 - will cover 100 pixels window width– HEIGHT=100% - will cover 100% of window HEIGHT=100% - will cover 100% of window
heightheight– ALIGN=left,right,centerALIGN=left,right,center
2525
TD Element Attributes TD Element Attributes • Cell Background:Cell Background:
– BGCOLOR=“blue”BGCOLOR=“blue”– BACKGROUND=“URL for an image”BACKGROUND=“URL for an image”
• Cell Size:Cell Size:– WIDTH=100% - will cover 100% of window widthWIDTH=100% - will cover 100% of window width– WIDTH=100 - will cover 100 pixels window widthWIDTH=100 - will cover 100 pixels window width– HEIGHT=100% - will cover 100% of window heightHEIGHT=100% - will cover 100% of window height
• Alignment of cell content:Alignment of cell content:– ALIGN=left, right, centerALIGN=left, right, center– VALIGN=top, bottom, middleVALIGN=top, bottom, middle
2626
TD Element Attributes – TD Element Attributes – Spanning Columns and RowsSpanning Columns and Rows
•Cell span control:Cell span control:– COLSPAN=2 - defines number of COLSPAN=2 - defines number of
columns this cell should span to columns this cell should span to rightright
– ROWSPAN=3 - defines number of ROWSPAN=3 - defines number of rows this cell should span rows this cell should span downwarddownward
2727
Spanning Columns and RowsSpanning Columns and Rows<HTML><HEAD><TITLE>Spanning Cols and Rows in Tables</TITLE></HEAD><BODY>
<TABLE BORDER=2 height="100%" width="800"><TR><TD colspan=3 height="80">A</TD></TR>
<TR><TD rowspan=2 width="60">B</TD><TD width="200" height="78">C</TD><TD rowspan=2 width="60">D</TD></TR>
<TR><TD width="200" height="300">E</TD></TR>
<TR><TD colspan=3 height="80">F</TD></TR></TABLE> </BODY></HTML>
2828
Moe’s WorldMoe’s World<HTML><HEAD> <TITLE>Moe's Homepage</TITLE></HEAD><BODY LINK="#FFFFFF" VLINK="#FFFF99"><P><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10
WIDTH="100%" HEIGHT="100%"> <TR> <TD VALIGN=top WIDTH=100 BGCOLOR="#99CCCC"> <P><A HREF="http://www.acadiau.ca">Acadia University</A> <HR> <A HREF="http://cognovatech.com">CogNova Technologies</A> <HR> <A HREF="http://bob.com">Sideshow Bob's Basement</A> <HR> <A HREF="http://willie.com">Groundskeeper Willie's Workshop</A> <HR> </TD> <TD VALIGN=top BGCOLOR="#FFFFFF"> <P><TABLE BORDER=1 BGCOLOR="#99CCCC" CELLPADDING=2
HEIGHT=33> <TR> <TD WIDTH=33 BGCOLOR="#FFFFFF"> <P><IMG SRC="world.gif" WIDTH=33 HEIGHT=33
ALIGN=bottom> </TD> <TD> <H4>Welcome to Moe's World!</H4> </TD> </TR> </TABLE> <P> Feel free to click on one of my favorite links to the left or stick around and see what I have to say. <P>Blagh Blagh Blagh </TD> </TR></TABLE></BODY></HTML>
2929
ResourcesResources• Getting started with HTML Getting started with HTML from the W3C from the W3C
• W3C'sW3C's Recommendation for Recommendation for HTML 4.0HTML 4.0 is the is the authoritative specification for HTML authoritative specification for HTML
• W3 Schools W3 Schools HTML TutorialHTML Tutorial
• HTML Goodies HTML Goodies HTML PrimerHTML Primer
• An An HTML Code Tutorial HTML Code Tutorial
• Writing HTMLWriting HTML a tutorial for creating web a tutorial for creating web pages (a little old but a different pages (a little old but a different perspective) perspective)
3131
Architectural of the InternetArchitectural of the Internet
InternetInternet
Application
Client 1
Server BServer C
TCP/IP
Application
Client 2
Server X
Server Y
Server C
Intranet
Intranet
Acadia
3232
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
3333
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
• Internet Protocol (IP) – like a postcard Internet Protocol (IP) – like a postcard that contains:that contains:– Destination address (131.162.201.7)Destination address (131.162.201.7)– Return addressReturn address– Block of data (content)Block of data (content)
• Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow
3434
Client-Server Applications Client-Server Applications that use the Internetthat use the Internet
Physical
Network
TCP
IP
Physical
Network
TCP
IPInternetInternet
Telnet Window Telnet Server
FTP Client FTP Server
eMail Client eMail ServerSMTP/POP
FTP
Telnet Protocol
3535
Major Architectural Major Architectural Components of the WebComponents of the Web
InternetInternet
Browser
DatabaseServer
Client 1
Server A
Server BServer C
URL
HTTPTCP/IP
Browser
Client 2 HTTPServer
App.Server
index.html
3636
ImagesImages• Various digital image formats can be embedded with in HTML: .gif, .jpgVarious digital image formats can be embedded with in HTML: .gif, .jpg• ExampleExample
• See See www.bellsnwhistles.comwww.bellsnwhistles.com as source of images and other objects. as source of images and other objects.• Let’s down load one and try it …Let’s down load one and try it …<BODY>
<H1>My new baby girl.</H1><IMG SRC=“NicoleSilver.jpg”></BODY>
3737
Hyper LinksHyper Links
<HTML><HEAD></HEAD><BODY><H1>My Oldest Daughter.</H1><IMG SRC=“Natalie.jpg”>Natalie goes to <A HREF=“http://www.ems.ednet.ns.ca”>Evangeline
Middle School</A>Which is in New Minas.Click <A HREF=“mailto:[email protected]”>Here</A>
to send her email.</BODY></HTML>