Basic HTML Part II

1
Basic HTML Part II
2
Some useful HTML tags
Character Formatting Bold Italics i Underline Example This
text contains the word Barcelona in bold
format. Paragraph Formatting Paragraph Newl
ine
Horizontal line Block
quote Preformatted
text
3
Other HTML details

• You can change font size the following way
• This text will have this size
  
• The default value of 3 is used by the Browser
  (usually Times 12)
• To create a link to another page type
• Label text
• where page.html is the url of the destination Web
  page, and
• Label text is the text you click on to get there
• Examples y/page.html
• Please click here
• or Clic
  k here to download your assignments

4

• Example from my web page excerpt from the code
• Lecture Notes
• Lecture 1 -
  Introduction
• Lecture 2
  Information Systems
• (note the files listed are contained in the
  same directory as the file containing the HTML
  code if they were not I would have had to give
  their full pathname e.g. /home/www/mluna/lecture1
  -1010.html)
• On the browser you will see
• Lecture Notes
• Lecture 1 Introduction
• Lecture 2 Information Systems
• If you click on these then you go to the
  appropriate file

5

• To add an image
• To add an image on a page type SRCimage.ext where image.ext indicates the
  location of the image file on the server (and the
  ext refers to its extension, eg. gif,jpeg. Etc.)
• Example
• (note if you see an image on the web that you
  like then right click on it and you can save it,
  and then call it up from your own HTML page later
  on)
• Also note you can align the image with top,
  middle, bottom
• To Add a link to your email address
• e.g. Email me at rku.ca
• mluna_at_mathstat.yorku.ca

6
Lists

• Ordered Lists
• Cleaning your bedroom
• 2. Dirty clothes go to laundry basket.
  4. Get clean sheets.
  6. Vacuum bedroom.
  8. Big bag for garbage accumulated during Fall
     term.
• Output
• Cleaning your bedroom
• Dirty clothes go to the laundry basket.
• Get clean sheets.
• Vacuum bedroom.
• Big bag for garbage accumulated during Fall term.

7

• Unordered Lists
• The hotel offers the following entertainment
  choices
• • Live music and dancing in the Starlight
    Lounge
  • Open Bar
  • Moonlight swim in the rooftop pool
  • Sauna and massage
• Output in the Browser
• The hotel offers the following entertainment
  choices
• Live music and dancing in the Starlight Lounge
• Open Bar
• Moonlight swim in the rooftop pool
• Sauna and massage

8
Table

• Total Table Items
• Lunch Dinner
  
• Kitchen 23 30
  
• Dining Room 31 45
  
• Total Table Items
• Lunch Dinner
• Kitchen 23 30
• Dining Room 31 45

9

• If you want nice borders around the table you
  could add
• For more details on specific HTML tags and
  options see the resources listed at the bottom of
  my class webpage

10
Odds and Ends

• To ensure the font you want use the following at
  the top of the body
• Example of using an anchor to go to another part
  of the same page
• Apple Growing Areas
• This will highlight the words Apple Growing
  Areas which you can then click on to go to the
  part of the same page with the heading apple

11
Designing Good Web Pages

• The design of the content and organization of a
  web page requires some thought (too many web
  pages are poorly organized!)
• Principles
• Meet the needs of the user for whatever the page
  is designed for
• E.g. if for posting a c.v. it should be
• Clear
• Easy to read
• Organized logically
• No typos
• Similar to what you would hand in to an employer
• Efficiently use resources
• Select HTML features that are useful (like ones
  listed)
• Create a consistent, pleasing and efficient Look
  and Feel
• Try to strike a nice balance between simplicity
  and completeness
• Tip to get ideas about how you want to organize
  and design your page, look at other pages and
  identify what you like about them and what you
  dont style is very important (look for
  effective layouts)

12
Things to Avoid When Designing Page Content

• Making pages from Outer space
• Should indicate who wrote the page, why? Etc.
• Some pages leave you wondering about all these
  things
• The Monster Page
• Access time should be reasonable
• Avoid information overload
• Multimedia Overload
• Nice to have nice multimedia but dont overdo it!
• The Uneven page
• Page is not organized top-down but has varied
  levels of detail
• Not everything is at the same level of importance
  and your page should be designed so that this is
  clear (e.g. keep top level stuff in level 1
  headings, lesser information in level 2 etc.)
• Simple, clear and well-organized pages are often
  the best!