Lecture 4


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture 4

  1. 1. HTML Basics Ryan Dinwiddie UCC Spring 2010
  2. 2. HTML <ul><li>Short for H yper T ext M arkup L anguage, the language used to create documents on the World Wide Web. </li></ul><ul><li>HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva. </li></ul>
  3. 3. HTML <ul><ul><li>HTML is a collection of styles (indicated by markup tags ) that define the various elements of a World Wide Web document. </li></ul></ul><ul><ul><li>HTML document can be read and displayed by many different browsers running on different types of computers – platform independent! </li></ul></ul>
  4. 4. HTML: What do you need? <ul><li>Editor (Notepad) </li></ul><ul><li>Browser to view results </li></ul><ul><li>Place to put your web site (store the files that contain the HTML code, images, music, etc.), preferably on the internet </li></ul><ul><li>URL for your page (domain name, or folder within a domain)  if your page is on the Internet </li></ul><ul><li>(Links to your page!) </li></ul>
  5. 5. HTML <ul><li>A web page is best thought of as a set of visual elements (words, paragraphs, lists, tables, images, etc.) </li></ul><ul><li>HTML defines the structure and layout of the elements on a web page with a variety of tags. </li></ul><ul><li>Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag. </li></ul>
  6. 6. HTML Tags <ul><li>Container Tags </li></ul><ul><ul><li><Begin formatting>some text</End formatting> </li></ul></ul><ul><ul><li>For example: <B>some bold text</B> </li></ul></ul><ul><ul><li> <H1>some heading </H1> </li></ul></ul><ul><li>Empty Element Tags </li></ul><ul><ul><li>For example <HR> <BR> </li></ul></ul><ul><li>Comment Tag </li></ul><ul><ul><li><!-- Hi, I'm a comment. --> </li></ul></ul><ul><ul><li>Use them document complicated layouts! </li></ul></ul>
  7. 7. HTML tags <ul><li>Case insensitive </li></ul><ul><li>Unrecognised tags are simply ignored by browser!! </li></ul><ul><li>Container tags must be nested!! </li></ul>
  8. 8. Structure of HTML document <ul><li>Basic structure: </li></ul>
  9. 9. BODY tag and attributes <ul><li>E.g., the BGCOLOR attribute of BODY tag specifies the color of the whole document. </li></ul><ul><li>E.g., the TEXT attribute of BODY tag specifies the default color of the text in the whole document . </li></ul><ul><li><BODY BGCOLOR = “yellow” TEXT = “purple”> </li></ul>
  10. 10. Headings and Paragraphs <ul><li>Supplies default formatting information: </li></ul><ul><ul><li><H1>A Top-Level Heading 1</H1> </li></ul></ul><ul><ul><li><P> A paragraph of text </P> </li></ul></ul><ul><ul><li><H6>A 6 th -level Heading</H6> </li></ul></ul><ul><li>Alignment Attribute: </li></ul><ul><ul><li>ALIGN = position (LEFT, CENTER, or RIGHT) </li></ul></ul><ul><ul><li><P ALIGN = CENTER>A centred paragraph</P> </li></ul></ul><ul><li><BLOCKQUOTE>, <CAPTION>, <PRE> </li></ul><ul><ul><li>Special paragraph formatting tags </li></ul></ul>
  11. 11. Text Formatting tags <ul><li>Always container tags!! Always use closing tag! </li></ul><ul><li>Logical Styles: </li></ul><ul><ul><li><EM>, <STRONG>  add emphasis to text </li></ul></ul><ul><ul><li><BIG>, <SMALL>  increase or decrease text size </li></ul></ul><ul><ul><li><SUB>, <SUP>  subscript or superscript </li></ul></ul><ul><li>Physical styles: </li></ul><ul><ul><li><B>, <I>, <U>  Bold, Italics, and Underline text </li></ul></ul><ul><ul><li><FONT SIZE=# FACE= “name” COLOR=“colorName or #rgb” > </li></ul></ul><ul><ul><li>E.g., <FONT SIZE=+2 FACE = “arial” COLOR = “darkblue”> </li></ul></ul>
  12. 12. HTML Lists <ul><li>Ordered List </li></ul><ul><ul><li><OL TYPE = A> </li></ul></ul><ul><ul><li><LI>list item A </li></ul></ul><ul><ul><li><LI>list item B </li></ul></ul><ul><ul><li></OL> </li></ul></ul><ul><li>Unordered List </li></ul><ul><ul><li><UL TYPE = SQUARE> </li></ul></ul><ul><ul><li><LI>bulleted list item </li></ul></ul><ul><ul><li><LI>another list item </li></ul></ul><ul><ul><li></UL> </li></ul></ul>
  13. 13. Hyperlinks <ul><li><A> … </A> is an anchor container tag </li></ul><ul><li>HREF is an attribute of the anchor tag </li></ul><ul><li><A HREF = “http://www.umpqua.edu”> UCC </A> </li></ul><ul><li>Absolute (off-site) vs. Relative (within site) URL’s </li></ul><ul><li>Naming locations within a document: </li></ul><ul><ul><li><A NAME=“top”>Text to link to</A> </li></ul></ul><ul><li>Linking to a named location within a document: </li></ul><ul><ul><li><A HREF=“#top”>Click here to go to Top.</A> </li></ul></ul><ul><ul><li><A HREF=“index.htm#top”>Go to Top of Home page</A> </li></ul></ul>
  14. 14. Multi-media: Images <ul><li>< IMG SRC = “logo.jpg” WIDTH = 300 </li></ul><ul><li>HEIGHT=100 ALT=“Logo” > </li></ul><ul><li>Creating an image link: </li></ul><ul><ul><li><A HREF= www.u mpqua.edu> </li></ul></ul><ul><ul><li><IMG SRC = “Logo.jpg WIDTH=150 HEIGHT=50 </li></ul></ul><ul><ul><li>ALT = “Click here to go to UCC” > </li></ul></ul><ul><ul><li></A> </li></ul></ul><ul><li>Other IMG tag attributes: </li></ul><ul><ul><li>ALIGN, BORDER, HSPACE, VSPACE </li></ul></ul><ul><ul><li>USEMAP = “map url”  creates a “hyperlink map” for image </li></ul></ul><ul><li>To including other Multi-media elements: </li></ul><ul><ul><li>just link to .wav, .mpeg, .mp3 files with an anchor tag. </li></ul></ul>
  15. 15. HTML Tables <ul><li>In HTML, tables are described by a set of rows . </li></ul><ul><li>Each row has a set of data , which form columns. </li></ul><ul><ul><ul><li><TABLE> </li></ul></ul></ul><ul><ul><ul><li><TR> </li></ul></ul></ul><ul><ul><ul><li><TH>Heading for first column </li></ul></ul></ul><ul><ul><ul><li><TH>Heading for second column </li></ul></ul></ul><ul><ul><ul><li></TR> </li></ul></ul></ul><ul><ul><ul><li><TR> </li></ul></ul></ul><ul><ul><ul><li><TD>Data for first column, row 1 </li></ul></ul></ul><ul><ul><ul><li><TD>Data for second column, row 1 </li></ul></ul></ul><ul><ul><ul><li></TR> </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li></TABLE> </li></ul></ul></ul>
  16. 16. More on Tables <ul><li>Common <TABLE> attributes: </li></ul><ul><ul><li>BORDER, CELLSPACING, CELLPADING, WIDTH </li></ul></ul><ul><ul><li>e.g., <TABLE BORDER=4, WIDTH=50%> </li></ul></ul><ul><ul><li>Use BORDER = 0 for no border (e.g., fancy layouts) </li></ul></ul><ul><li>Common <TD> attributes (most apply to <TR> also): </li></ul><ul><ul><li>BGCOLOR  set the colour of the cell </li></ul></ul><ul><ul><li>ALIGN, CHAR, VALIGN  alignment within cell </li></ul></ul><ul><ul><li>COLSPAN, ROWSPAN  to create “merged cells” </li></ul></ul><ul><ul><li>e.g., <TD VALIGN=MIDDLE CHAR=“.”> </li></ul></ul>
  17. 17. Using table to do complex layouts <ul><li>Since a <TD> element may contain text, images, lists, links, etc., tables are often used to create complex page layouts! E.g. look at source for Joseph’s home page. </li></ul><ul><li>Need to get good at using COLSPAN and ROWSPAN attributes. </li></ul>
  18. 18. Using table to do complex layouts <ul><li>Best to layout table on paper or using Word first, then jot down COLSPAN and ROWSPAN values for any “merged cells” – write down sequence of <TR> & <TD> tags required. </li></ul><ul><li>Warning : if you don’t design complex tables first, you will get confused and frustrated – guaranteed! </li></ul>