Basic HTML Part I

1
Basic HTML Part I
2
Creating a New Web Page

• Open a text editor (e.g. notepad, which can be
  found under the programs and accessories menu
  in Windows)
• Choose File gt New to create a blank new document
• Create the HTML content as explained on the next
  few slides

3
Starting your Web Page

• To start your Web page
• Type ltHTMLgt
• Leave a few spaces for creating the rest of your
  page
• Type lt/HTMLgt
• ltHTMLgt
• lt/HTMLgt

4

• To create the HEAD section
• Directly after the HTML tag type ltHEADgt
• Leave a few spaces for the contents of the HEAD
  section
• Type lt/HEADgt
• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• lt/HTMLgt

5

• To create the BODY section
• After the final lt/HEADgt tag, type ltBODYgt
• Leave a few spaces for the contents of your Web
  page
• Type lt/BODYgt
• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

6

• To create the title
• Place the cursor between the opening and closing
  HEAD tags
• Type ltTITLEgt
• Enter the title of your web page
• Type lt/TITLEgt
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Bareclona a city of many charms
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

7

• To organize your Web page with headers
• In the BODY section of your HTML document, type
  ltHn, where n is a number from 1 to 6
• If desired, to align the header, type
  ALIGNdirection, where directions is left, right
  or center
• Type gt
• Type the contents of the header
• Type lt/Hngt where n is the same number
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Bareclona a city of many charms
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtHome of the 1992 Summer Olympicslt/H1gt
• lt/BODYgt
• lt/HTMLgt

8

• To begin a new paragraph
• Type ltPgt
• Type the contents of the new paragraph
• If desired you may type lt/Pgt to end the paragraph
  but it is not required
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Bareclona a city of many charms
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtHome of the 1992 Summer Olympicslt/H1gt
• The city of Barcelona has been transformed by the
  1992 Summer Olympics but has maintained its
• Charm and enchanted visitors for more than one
  thousand years
• ltPgtMayor Pasqual Maragaqll gave the inaugural
  address of the Opening Cerimonies by offering a
  welcome in four official languages

9

• Saving your Web page
• Once youve created your Web page, choose File gt
  Save As from your text editor
• In the dialog box that appears, choose Text Only
  for the format
• Give the document the .htm or .html extension
  (This is very important)
• Choose the folder in which to save the Web page
• Click save

10

• Viewing your page in a Browser
• Open your browser software (Netscape
  Communicator, Explorer, etc.)
• Choose File gt Open, Open File or Open Page,
  depending on the browser
• In the dialog box that appears, either type the
  location of the page on your hard disk, or click
  Browse (IE) or Choose File (Netscape) to find it
• If youve clicked Browse or Choose File in the
  last step, navigate to the folder on your hard
  disk that contains the desired Web page and click
  Open
• Click Open in the Open Page dialog box. The page
  is displayed in the browser just as it will
  appear when you actually publish it on a server

11
Some useful HTML tags

• Character Formatting
• Bold ltbgt lt/bgt
• Italics ltigt lt/igt
• Underline ltugt lt/ugt
• Exampe This text contains the word
  ltbgtBarcelonalt/bgt in bold format.
• Paragraph Formatting
• Paragraph ltpgt
• Newline ltbrgt
• Horizontal line lthrgt
• Block quote ltblockquotegt lt/blockquotegt
• Preformatted text ltpregt lt/pregt

12
Other HTML details

• You can change font size the following way
• ltFONT SIZE 6gt This text will have this size
  lt/FONTgt
• The default value of 3 is used by the Browser
  (usually Times 12)
• To create a link to anther page type
• ltA HREF page.htmlgtLabel textlt/Agt
• where page.html is the url of the destination Web
  page, and
• Label text is the text you click on to get there
• Examples ltA HREF http//www.site.com/director
  y/page.htmlgt
• Please click herelt/Agt
• or ltA HREF assignments-1010.htmlgtClic
  k here to download your assignmentslt/Agt

13

• To add an image on a page type ltIMG
  SRCimage.extgt 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 ltIMG SRCmoonshot.gifgt
• Adding a link to your email address
• e.g. Email me at ltA HREFmailtoandrek_at_mathstat.yo
  rku.ca
• gtandrek_at_mathstat.yorku.ca lt/Agt