Embed Size (px)
Citation preview
Review session for Web Review session for Web developmentdevelopment
Time line of the internet historyTime line of the internet history
When was the ARPANET first When was the ARPANET first demostrated?demostrated?
When did the NFSNet replace it?When did the NFSNet replace it?
When did the email(ftp, www…) appear?When did the email(ftp, www…) appear?
Exact year not required, but you need to Exact year not required, but you need to know the era.know the era.
Basics of InternetBasics of Internet
What are domain names?What are domain names?– www.lib.msu.eduwww.lib.msu.edu
Domain namesDomain names
What are first level, second level domain What are first level, second level domain names?names?
.com .org .edu are top level domains, which .com .org .edu are top level domains, which specify the category of the domain name user.specify the category of the domain name user.
Second level domain name gives the entity’s Second level domain name gives the entity’s name. This must be unique in the top level name. This must be unique in the top level domain.domain.
Low level domain gives the server’s name. Low level domain gives the server’s name.
What is the difference between a domain name What is the difference between a domain name and a URLand a URL
Universal Resource LocatorUniversal Resource Locator: Static: Static
http://www.msu.edu/~urquhar5/tour/active.html
www.msu.eduDomain Name - name of remote computer
http://identifies type of transfer
/~urquhar5/tour/active.htmlFile Location on Remote ComputerThis part is CasE SenSiTiVe.
Universal Resource LocatorUniversal Resource Locator: : DynamicDynamic
http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web
www.msu.eduDomain Name - name of remote computer
http://identifies type of transfer
Folder name /cgi-bin/
Server program name: redirect.cgi
Argument of the server program: ?q=LBS&site=Web
Web Page Development CycleWeb Page Development Cycle
EDIT and SAVE the file in your AFS
p:\web\test.html
TEST by BROWSING to the page
http://www.msu.edu/~msunetid/test.html
HTML File StructureHTML File Structure
<HTML><HTML>
<HEAD><HEAD>
</HEAD></HEAD>
<BODY><BODY>
</BODY></BODY>
</HTML></HTML>
EssentialEssential HTML tags HTML tags
<HTML> </HTML><HTML> </HTML>
<head> </head><head> </head>
<body> </body><body> </body>
<p> </p><p> </p>
<a href=“http://www.msu.edu/”> MSU </a><a href=“http://www.msu.edu/”> MSU </a>
<img src=“filename.jpg”><img src=“filename.jpg”>
H1, H2, u, em.H1, H2, u, em.
Separation of Content and Separation of Content and PresentationPresentation
ContentContent– Use tags like Use tags like <h1>, <h2>, <p>, <em><h1>, <h2>, <p>, <em>
or or <li><li> to indicate the to indicate the structurestructure of your of your pages pages
Hyperlinks in HTML CodeHyperlinks in HTML Code
<a href=“URL”><a href=“URL”>Text for linkText for link</a></a>
Opening Tag
Tag Attribute: URL Closing Tag
Link text
href = “Hyper Text Reference ”
Types of linkTypes of link
AAbsolutebsolute link link – <a href=“<a href=“http://http://www.msu.eduwww.msu.edu”> </a>”> </a>
Relative LinkRelative Link– <a href=“resume.html”> </a><a href=“resume.html”> </a>
Email LinkEmail Link– <a href=“mailto:[email protected]”> </a><a href=“mailto:[email protected]”> </a>
Anchor LinkAnchor Link– <a href=“#AnchorName”> </a><a href=“#AnchorName”> </a>
Color Control CodesColor Control Codes
Computer monitors combine Red, Green and Computer monitors combine Red, Green and Blue (RGB) in various amountsBlue (RGB) in various amountsHexadecimal codes tell the computer how much Hexadecimal codes tell the computer how much Red, Green and Blue to display Red, Green and Blue to display – Red:Red: FF0000FF0000– GreenGreen:: 00FF0000FF00– BlueBlue: : 0000FF0000FF– Other colors? Combinations! Other colors? Combinations! YellowYellow = FFFF00 = FFFF00– White:White: FFFFFFFFFFFF– Black:Black: 000000000000
Approximately 17 million combinations.Approximately 17 million combinations.
GraphicsGraphics
Types of graphics that can be insert into Types of graphics that can be insert into HTMLHTML– JpegJpeg– GifGif
What are they good for?What are they good for?
Graphics in HTMLGraphics in HTML
First step: Copy the graphics into your web First step: Copy the graphics into your web folder, because graphics is NOT embedded in folder, because graphics is NOT embedded in HTML.HTML.
<img src=“URL”> <img src=“URL”>
oror <img src=“file.name”> <img src=“file.name”>
Can include size parametersCan include size parameters– <img src=“URL” height=80 width=240><img src=“URL” height=80 width=240>– <img src=“<img src=“dru.gifdru.gif” height=25 width=100>” height=25 width=100>
Note: No closing tag!Note: No closing tag!
Additional graphics featuresAdditional graphics features
Graphics as linkGraphics as link– How?How?
General steps of web site designGeneral steps of web site design
SurveySurvey– Who’s my audience Who’s my audience – Decide the general styleDecide the general style
Organize informationOrganize informationLayout designLayout designTemplate designTemplate designImplementationImplementation– Generating content page from template.Generating content page from template.
Testing the web siteTesting the web sitePublishingPublishing
Layout designLayout design
Two methodsTwo methods– Using tableUsing table– Using layout view to draw layout cells.Using layout view to draw layout cells.
Dreamweaver automatically translate the Dreamweaver automatically translate the layout table and cell to standard tables.layout table and cell to standard tables.
