1 / 18

Programming the Web: HTML Basics

Programming the Web: HTML Basics. Computing Science @ Capilano College. HTML. Short for H yper T ext M arkup L anguage, the language used to create documents on the World Wide Web.

vaughan-england
Télécharger la présentation

Programming the Web: HTML Basics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming the Web:HTML Basics Computing Science @ Capilano College

  2. HTML • Short for HyperText Markup Language, the language used to create documents on the World Wide Web. • HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

  3. HTML • HTML is a collection of styles (indicated by markup tags) that define the various elements of a World Wide Web document. • HTML document can be read and displayed by many different browsers running on different types of computers – platform independent!

  4. HTML: What do you need? • Editor (Notepad) • Browser to view results • Place to put your web sit (store the files that contain the HTML code, images, music, etc.), preferably on the internet • URL for your page (domain name, or folder within a domain)  if your page is on the Internet • (Links to your page!)

  5. HTML • An Web page is best thought of as a set of visual elements(words, paragraphs, lists, tables, images, etc.) • HTML defines the structure and layout of the elements on a Web page with a variety of tags. • Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag.

  6. HTML Tags • Container Tags • <Begin formatting>some text</End formatting> • For example: <B>some bold text</B> <H1>some heading </H1> • Empty Element Tags • For example <HR> <BR> • Comment Tag • <!-- Hi, I'm a comment. --> • Use them document complicated layouts!

  7. HTML tags • Case insensitive • Unrecognised tags are simply ignored by browser!! • Container tags must be nested!!

  8. Structure of HTML document • Basic structure:

  9. BODY tag and attributes • E.g., the BGCOLOURattribute of BODY tag specifies the colour of the whole document. • E.g., the TEXTattribute of BODY tag specifies the default colour of the text in the whole document . • <BODY BGCOLOUR = “yellow” TEXT = “purple”>

  10. Headings and Paragraphs • Supplies default formatting information: <H1>A Top-Level Heading 1</H1> <P> A paragraph of text </P> <H6>A 6th-level Heading</H6> • Alignment Attribute: • ALIGN = position (LEFT, CENTER, or RIGHT) • <P ALIGN = CENTER>A centred paragraph</P> • <BLOCKQUOTE>, <CAPTION>, <PRE> • Special paragraph formatting tags

  11. Text Formatting tags • Always container tags!! Always use closing tag! • Logical Styles: • <EM>, <STRONG>  add emphasis to text • <BIG>, <SMALL>  increase or decrease text size • <SUB>, <SUP>  subscript or superscript • Physical styles: • <B>, <I>, <U>  Bold, Italics, and Underline text • <FONT SIZE=# FACE= “name” COLOR=“colorName or #rgb” > • E.g., <FONT SIZE=+2 FACE = “arial” COLOR = “darkblue”>

  12. HTML Lists • Ordered List <OL TYPE = A> <LI>list item A <LI>list item B </OL> • Unordered List <UL TYPE = SQUARE> <LI>bulleted list item <LI>another list item </UL>

  13. Hyperlinks • <A> … </A> is an anchor container tag • HREF is an attribute of the anchor tag • <A HREF = “http://www.pws.com/aeonline.html”> AE Home </A> • Absolute (off-site) vs. Relative (within site) URL’s • Naming locations within a document: • <A NAME=“top”>Text to link to</A> • Linking to a named location within a document: • <A HREF=“#top”>Click here to go to Top.</A> • <A HREF=“index.htm#top”>Go to Top of Home page</A>

  14. Multi-media: Images • < IMG SRC = “cclogo.jpg” WIDTH = 300 HEIGHT=100 ALT=“Cap College logo” > • Creating an image link: <A HREF=www.capcollege.bc.ca> <IMG SRC = “cclogo.jpg WIDTH=150 HEIGHT=50 ALT = “Click here to go to Cap College” > </A> • Other IMG tag attributes: • ALIGN, BORDER, HSPACE, VSPACE • USEMAP = “map url”  creates a “hyperlink map” for image • To including other Multi-media elements: • just link to .wav, .mpeg, .mp3 files with an anchor tag.

  15. HTML Tables • In HTML, tables are described by a set of rows. • Each row has a set of data, which form columns. <TABLE> <TR> <TH>Heading for first column <TH>Heading for second column </TR> <TR> <TD>Data for first column, row 1 <TD>Data for second column, row 1 </TR> … </TABLE>

  16. More on Tables • Common <TABLE> attributes: • BORDER, CELLSPACING, CELLPADING, WIDTH • e.g., <TABLE BORDER=4, WIDTH=50%> • Use BORDER = 0 for no border (e.g., fancy layouts) • Common <TD> attributes (most apply to <TR> also): • BGCOLOR  set the colour of the cell • ALIGN, CHAR, VALIGN  alignment within cell • COLSPAN, ROWSPAN  to create “merged cells” • e.g., <TD VALIGN=MIDDLE CHAR=“.”>

  17. Using table to do complex layouts • 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. • Need to get good at using COLSPAN and ROWSPAN attributes. • 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. • Warning: if you don’t design complex tables first, you will get confused and frustrated – guaranteed!

  18. More Info • HTML guide in your text • Web terms: http://www.imaginarylandscape.com/helpweb/www/www.html • HTML intro and tutorials:http://www.w3schools.com/html/default.asp • Official HTML tags: http://www.w3.org/TR/html4/http://www.cwru.edu/help/webglossary.html

More Related