CS105 Lab 5

1
CS105 Lab 5 Web Pages

• Announcements
• MP2 is available and is due on Sunday, September
  23rd at 1100am. You may work in groups of up to
  3 people for this MP. You will lose 15 points if
  you do not submit MP2 properly.
• Midterm 1 is on Tuesday, September 25th at
  700pm. Request a conflict from the Conflict
  request page absolutely no later than Friday,
  September 21st.
• The review sessions for the midterm are on
  Sunday, September 23rd (300pm and 700pm in 141
  Wohlers)

2
Objectives

• Understand HyperText Markup Language (HTML)
• Create a simple webpage using NotePad
• Add images and links to a webpage
• Understand absolute and relative paths.

3
Sample Web Page

• My Web Page

Text
Welcome! I am a student at UIUC. I take
CS105. Send me an email.
Heading
Links
Image
4
HTML A Markup Language

• Document content is what the user sees on the
  page, such as headings and images.
• Tags are the HTML codes that control the
  appearance of the document content.
• ltbgt tag makes the text bold
• ltigt tag makes the text italic
• ltagt tag makes a links
• ltimggt tag makes an image
• .

5
HTML Tags

• Typical format
• lttag_namegt some text lt/tag_namegt
• Eg ltbgtbold textlt/bgt
• What is the difference between ltbgt tag and lthrgt
  tag?
• Tags are not case-sensitive, the best practice is
  to use all lower cases

lthrgt tag is one-sided, i.e you dont need a
closing tag
ltbgt tag is two-sided, i.e you must have an
opening a closing tag
6
Creating a HTML page with Notepad

• Open Notepad.
• Save the file as mypage.html
• Try typing in some text
• Try making the text bold with the tags ltbgtlt/bgt
• Try adding a horizontal line lthrgt
• Open a browser, select your new page to open
• (check your result at each step--how does it
  look?)
• Trivia Is every page on the web HTML?

7
HTML Document Structure

• Every html documents should be enclosed by lthtmlgt
  tags
• ltheadgt tags contains general information, also
  called meta-information. Meta means "information
  about.
• Content between ltheadgt tags is NOT displayed in
  browsers.
• Ex lttitlegt
• Content between ltbodygt tags IS displayed in
  browsers.
• Ex ltimggt, ltpgt

lthtmlgt ltheadgt lt/headgt
ltbodygt lt/bodygt lt/htmlgt
8
Creating some Texts

• Use ltpgt tag to create a paragraph
• Create another paragraph
• Try putting ltbrgt at the end of a line. What is
  the difference between ltbrgt and ltpgt?

9
Adding a title

• What is the title of cs105 homepage?
• lttitlegt tag is meta-information. Where should
  it be placed?
• Write the complete tag for your webpages title
  here
• lttitlegtThis is my homepage lt/titlegt

10
Adding a link

• Can you spot the link?

ltpgtI am a student at lta href"http//www.uiuc.ed
u"gtUIUClt/agt
Closing Tag
Link Address or URL.
Opening Tag
11
Adding an email link

• A web link starts with
• http//.....
• An email link starts with ???
• mailto jsmith_at_uiuc.edu

12
Adding an Image
Image file einstein.jpg

• Insert an image
• ltimg srceinstein.jpggt
• To center and make white space
• ltp aligncentergtltimg srceinstein.jpggtltpgt
• An Attribute is to provide more information
  about the tag
• E.g srceinstein.jpg in ltimggt and
  aligncenter in ltpgt

13
Upload Your Webpage

• Upload mypage.html to the www folder of your
  NetFiles account
• See part VIII of MP2 for more instructions
• Make sure the permissions for mypage.html and the
  www folder are set for public reading.

14
View Your Webpage

• Log-out of NetFiles.
• Open a web browser and view your work at
• http//netfiles.uiuc.edu/yournetid/www/mypage.html
  
• (where yournetid is YOUR NETID)
• When you test your MP make sure you are
  logged-out of NetFiles.
• Sometimes permissions problems can be masked if
  you dont logout.

15
Adding an Image

• Try adding the image in a different way. In your
  IMG tag, instead of using einstein.jpg, use the
  full path to your file, which is
• Save your webpage,
• Double click on the file and view it on your
  browser
• Next, upload mypage.html to the www folder, make
  sure that overwriting file if it already exists
  is selected
• Open your website again https//netfiles.uiuc.edu/
  yournetid/www/mypage.html
• What happened?

16
Relative Path and Absolute Path

• What is the difference between?
• ltimg srceinstein.jpg gt
• And
• ltimg srcD\My Documents\myweb\einstein.jpggt
• Relative Path is
• A path that does NOT depend on which computer or
  domain a file is located
• Absolute Path is
• A path that refers specifically to which computer
  or domain a file is located

17
Directory Structure on Local Computer
Anyone know what ".." and "20" mean? Guesses?
18
This Applies to Other Pages, too!

• If you link to a page in the same folder, the
  address is simple

www
mypage.html
myhobbies.html
lta hrefmyhobbies.htmlgtMy Hobbieslt/agt
19
What about this?

• What should be in ????

lta href???gtMy Hobbieslt/agt
20
Try this at home

• Create another HTML page, and link it from your
  mypage.html
• Change the display width and height of your
  image.
• Insert an image resided on the internet to your
  webpage.
• Learn more about HTML at
• Your course guide
• http//www.w3schools.com/html/html_intro.asp
• ?There are 3 bonus points in MP2 !!!

21
What you should know

• HTML is everywhere, watch out for it
• Some basic HTML tags ltpgt,lthrgt, ltbgt, ltigt, ltimggt,
  ltagt and how to use them to mark up a document
• How to publish your webpage on Netfiles.
• Know the difference between D\My
  Documents\myweb\einstein.jpg and einstein.jpg
• ? have fun making webpages !