Webpages and HTML 2

1
Webpages and HTML 2
2
lttagsgt

• All formatting information is contained in tags.
• Tags are bracketed by lt and gt

3
Ok, Lets do it.

• Login to eniac
• Type this command
• cp cse100/sample.htm sample.htm
• Open Notepad
• Open e\sample.htm

4
Hyperlinks

• lta hrefweb_addressgtLink Namelt/agt
• mailtouser_at_email.com

5
More Hyperlinks

• ltA HREF"http//www.seas.upenn.edu"gtClick Here
  lt/Agt
• A stands for Anchor. It begins the link to
  another page.
• HREF stands for Hypertext REFerence. That's a
  nice, short way of saying to the browser, "This
  is where the link is going to go."
• http//www.htmlgoodies.com is the FULL ADDRESS of
  the link. Also notice that the address has an
  equal sign in front of it and is enclosed in
  quotes. Why? Because it's an attribute of the
  Anchor flag, a command inside of a command.
• Where it reads "Click Here" is where you write
  the text you want to appear on the page. What is
  in that space will appear on the page for the
  viewer to click. So, write something that denotes
  the link.
• /A ends the entire link command.
• Source www.htmlgoodies.com

6
E-mail Links

• ltA HREF"mailtooshelef_at_wharton.upenn.edu"gt Click
  Here To Write Melt/Agt
• Notice it's the same format as a link except in a
  link you write "mailto" in place of the http//
  and your e-mail address in place of the page
  address. Yes, you still need the lt/Agt flag at the
  end. Please notice there is NO SPACE between the
  colon and the e-mail address.

7
Images

• ltIMG SRC"image.gif"gt
• IMG stands for "image." It announces to the
  browser that an image will go here on the page.
• SRC stands for "source." This is an attribute
  telling the browser where to go to find the
  image. image.gif is the name of the image. Notice
  it's following the same type of format as your
  HTML documents. There is a name (image) then a
  dot and then there is a suffix (gif).
• Note Images are considered property, so make
  sure you have permission to use an image, etc.

8
An image that works

• http//www.upenn.edu/computing/web/webdev/style/re
  sources/penn_fulllogo.gif

9
Tables

• ltTABLEgtltCAPTIONgtThe Bradyslt/CAPTIONgtltTRgtltTDgt
  Marcia lt/TDgtltTDgt Carol lt/TDgtltTDgt Greg
  lt/TDgtlt/TRgt ltTRgtltTDgt Jan lt/TDgt ltTDgt Alice
  lt/TDgtltTDgt Peter lt/TDgtlt/TRgtltTRgtltTDgt Cindy
  lt/TDgtltTDgt Mike lt/TDgtltTDgtBobby
  lt/TDgtlt/TRgtlt/TABLEgt

10
Tables 2

• ltTABLEgt starts and ends the entire thing.
• ltCAPTIONgt and lt/CAPTIONgt places a caption over
  your table. The caption will be bolded and
  centered.
• ltTRgt is used when you want a new Table Row to
  begin.      Notice that you need to end every
  table row with an lt/TRgt. See that above?
• ltTDgt denotes Table Data. You put this in front of
  every piece of information you want in a cell.
       You need to end every one that you open
  with an lt/TDgt. See how I have that above?
• lt/TABLEgt ends the whole deal.

11
Links, Images, and Tables

• The Content of a cell can be a almost anything,
  images, links, other tables.
• Links can make images clickable
• ltA HREF"http//www.seas.upenn.edu"gtltIMG
  SRC"homepage.gif"gtlt/Agt

12
Making it visible to the world

• Log in to eniac
• Run the command mkweb
• This actually runs these commands for you
• mkdir /html
• chmod ax / /html
• Put your files in the new html directory
• cp sample.html html/index.html
• chmod -R 755 html
• View it at http//www.seas.upenn.edu/username/