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

2. CS48709-2/13 How Web Pages Work

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

4. CS48709-4/13 Example of A Simple HTML Document http://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp1.html

5. CS48709-5/13 Typical TAGS within the... u Only tags specify how document is formatted – Extra new lines and spaces are ignored u... Starts new paragraph u Causes a new line in document (See example next page)

6. CS48709-6/13 Another HTML Example http://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp2.html

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

8. CS48709-8/13 Lots of Different Types of Tags u Headers - Creates a special header section on document – Introduction – http://www.depaul.edu/~dlash/examples/HTMLhdrs.html u Anchor Tag for creating links to relative and absolute files – My Home Page – http://www.depaul.edu/~dlash/examples/HTMLlink1.html u Setting the Body Background Color – BODY BACKGROUND="image.jpg"> – – http://www.depaul.edu/~dlash/website/ColorfulExample.html

9. CS48709-9/13 Lots of Different Types of Tags - II u Lists - –... - a way to group text into logical groups – - A way to create ordered or numbered lists – - A way to create bullet lists – - A way to create lists without any header or order – E.g., http://www.depaul.edu/~dlash/website/ListWithUL.html u Font Control - The tags to do this are simple are straightforward: –... – or...

10. CS48709-10/13 Lots of Different Types of Tags - III u More Font control – This text will be big and blue. – http://www.depaul.edu/~dlash/website/fonts.html u http://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLbigandpurple.htmlT ables, u Frames and lots more – See http://www.24hourhtmlcafe.com/htmltags.htm#hou r6

11. CS48709-11/13 Publishing On The Web u Use FTP to copy files from your PC to the Web server

12. CS48709-12/13 Publishing On The Web - II u Place the copied files into the public_html directory

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