DePaul University

DePaul University SNL 262 Advanced Web Page Design Review & Introduction - I Instructor: David A. Lash

How Web Pages Work

HTML Overview • Web Pages are written in HTML or HyperText Markup Language. • HTML is a • “TAG” based language with TAGs defining how the document should be displayed. • <TABLE> ... </TABLE>, <BODY> ... </BODY> • TAGs are • container based that each each TAG has a beginning form and ending form. • E.g., <HTML> .... </HTML> • A set of TAGs are required of all documents • <HTML> ... </HTML>, <HEAD> ... </HEAD>, <BODY> ... </BODY>, • Text is displayed within the Body tags

Example of A Simple HTML Documenthttp://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp1.html

Typical TAGS within the <BODY> ... </BODY> • Only tags specify how document is formatted • Extra new lines and spaces are ignored • <P> ... </P> Starts new paragraph • <BR> Causes a new line in document (See example next page)

Another HTML Examplehttp://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp2.html

Most Tags Have Arguments • Tags Can Use Arguments To Do Different Things • For example, the <HR> tag has various arguments • size= • width= • align= • noshade= • <HR size=10> - says make the horizontal rule 10 pixels wide or thickness. For example • <HR width=100> or <HR width=50%> • Can specify the absolute length (or width) of rule, • http://www.depaul.edu/~dlash/website/HRSize.html • Specify length relative percent of screen. http://www.depaul.edu/~dlash/website/HRWidth.html • Can combine various arguments to get creative • http://www.depaul.edu/~dlash/website/HRCombo.html

Lots of Different Types of Tags • Headers - Creates a special header section on document • <H1> Introduction </H1> • http://www.depaul.edu/~dlash/examples/HTMLhdrs.html • Anchor Tag for creating links to relative and absolute files • <AHREF="http://www.depaul.edu/~dlash/examples/examples.html">My Home Page</A> • http://www.depaul.edu/~dlash/examples/HTMLlink1.html • Setting the Body Background Color • BODY BACKGROUND="image.jpg"> • <BODY BGCOLOR="TEAL" LINK="BLUE" VLINKS="RED" ALINK="Pink"> • http://www.depaul.edu/~dlash/website/ColorfulExample.html

Lots of Different Types of Tags - II • Lists - • <DIV> ... </DIV> - a way to group text into logical groups • <OL> <LI> </OL> - A way to create ordered or numbered lists • <UL> <LI> </UL> - A way to create bullet lists • <DL> <LI> </DL> - A way to create lists without any header or order • E.g., http://www.depaul.edu/~dlash/website/ListWithUL.html • Font Control - The tags to do this are simple are straightforward: • <small>...</small> • <BIG> ... </BIG> • <SUP> ...</SUP> • <Strike> ... </strike> • <U> ... </U> • <EM> or <I>...</I>

Lots of Different Types of Tags - III • More Font control • <FONT SIZE="5" COLOR="blue"> This text will be big and blue.</FONT> • http://www.depaul.edu/~dlash/website/fonts.html • http://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLbigandpurple.htmlTables, • Frames and lots more • See http://www.24hourhtmlcafe.com/htmltags.htm#hour6

Publishing On The Web • Use FTP to copy files from your PC to the Web server

Publishing On The Web - II • Place the copied files into the public_html directory

Publishing On The Web - III • Destination Directory - put file in public_html • Homepage - must be calledindex.html • WebServer - student.depaul.edu or shrike.depaul.edu • Space Available - 2 MB • Your URL - shrike.depaul.edu/~yourlogin • Use FTP - Copy using FTP. • Here is a link on how to use FTP • http://www.depaul.edu/~dlash/frequent/newftp.html • http://www.depaul.edu/~dlash/frequent/Tips.html

DePaul University