depaul university n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
DePaul University PowerPoint Presentation
Download Presentation
DePaul University

Loading in 2 Seconds...

play fullscreen
1 / 13

DePaul University - PowerPoint PPT Presentation


  • 67 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

DePaul University


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
depaul university
DePaul University

SNL 262

Advanced Web Page Design

Review & Introduction - I

Instructor: David A. Lash

html overview
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
slide4
Example of A Simple HTML Documenthttp://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp1.html
typical tags within the body body
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 example http www depaul edu dlash extra advwebpage examples htmlsimp2 html
Another HTML Examplehttp://www.depaul.edu/~dlash/extra/Advwebpage/examples/HTMLsimp2.html
most tags have arguments
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
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
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
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
Publishing On The Web
  • Use FTP to copy files from your PC to the Web server
publishing on the web ii
Publishing On The Web - II
  • Place the copied files into the public_html directory
publishing on the web iii
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