Beginning HTML: Introduction to Web Publishing

1
Beginning HTMLIntroduction to Web Publishing
Dates for this Class Instructors Name
1 Name 2 Conference Call Number Phone No.
Presented by
2
Hyper Text Markup Language

• What is HTML?
• HyperText refers to text that can link to other
  documents
• Tag based formatting language Example
  Welcome to My World!Appears as
  Welcome to My World!

• Why use it?
• Easy to learn
• Can be written in plain text file and saved
  with .html
• Overseen by W3C (World Wide Web Consortium)
• Describes the document logically rather than
  physically, so documents are reformatted to
  fit monitor sizes.

3
Class Files

• If you have not previously done so, please do so
  now
• On the left hand menu choose Student Resources
• From the submenu, choose Download Class Files
• Under the Web Fundamentals Group, choose
  Beginning HTML Introduction to Web Publishing
• Run this file or save it to a disk?
• Choose Save to a Disk and make sure your DESKTOP
  is selected
• When the files have finished downloading you will
  have a zip file located on your desktop (it will
  say web101 or web101.exe)
• Double click on that icon this will start the
  unzipping process and ask you where to unzip the
  folder to Make sure you choose your DESKTOP
  again, then choose UNZIP.
• When it has finished unzipping the file, close
  that window.
• You should now see a folder on your desktop
  called Beginning HTMLThis folder contains the
  files to be used for this class.

4
Basic Structure of an HTML Document
Basic Structure of an HTML Document
Two sections - Portion of document that
contains information not seen on the
screen - Portion of document that
contains all contents to be viewed on
the screen. May contain text, images,
tables, etc.
NOTE Most tags will have an opening tag and a
matching closing tag.
5
To Create Your First Webpage

• Open up NOTEPAD on your computer
• You may have to go to
• Start 4 Programs 4 Accessories 4 Notepad
• Type the following code into your Notepad
  document.

6



My First Web Page. (This is displayed at the top
of the browser window.)



   Type some text here (This content will be
displayed on the screen )


7
Saving and Viewing Your Web Page

• To Save Your File In Notepad go to
• File Save Choose your
  Beginning HTML folder
• Type a name for your file --
  mypage.html NOTE Be sure to save the file with
  .html at the end (so it will not be saved as a
  text file).
• To View Your File
• Open your Beginning HTML folder
• Find the page you just created and
  double-click on it
• (This will automatically bring it up in Internet
  Explorer)
• Congratulations! You have just created your first
  web page!

4
4
4
4
8
Formatting Text Heading Tags

• Largest Heading Size
• Heading Size
• Heading Size
• Heading Size
• Heading Size
• Smallest Heading Size
• --------------------------------------------------
  ---------
• Any text entered between a pair or heading tags
  is
• Automatically bolded
• It is sized according to the number in the tag,
  with denoting the largest and denoting
  the smallest.
• A line break is automatically inserted before the
  open heading tag and after the close heading
  tag .

9
The ,
and comment tags.

• 
  - Break tag
• The line break tag is
  and has the same
  effect as a carriage return, taking you to the
  very next line.
• - Paragraph tag
• Since HTML does not recognize multiple carriage
  returns, it is necessary to enter a paragraph tag
  . This tag will insert the equivalent of two
  break
  tags.
• Comment Tag

10
Tag Attributes

• Bold
• Italics
• Underline
• Strikethrough
• Center Text
• Text is displayed in a monospaced font
• Tabs and any multiple spaces are displayed
• Carriage returns may be used in place of or
  
  tags

Indents the contents from both the
left and right margins.
11
Unordered List

• starts an unordered list (bulleted)
  • The items in a list are automatically indented
    from the left margin and separated by a line
    break.
  • Each item in a list must be preceded by the
  • 
    tag.
  • A closing tag
  is optional.
  • You must close your unordered list with a
  
  tag.
• --------------

Sample Code
Favorite Colors
• Red
  
• Green
• Blue

• Favorite Colors
• Red
• Green
• Blue

Looks like
12
Ordered List

• starts an ordered list (numbered)
  1. The items in a list are automatically indented
     from the left margin and separated by a line
     break.
  2. Each item in a list must be preceded by the
  3. 
     tag.
  4. A closing tag
  is optional.
  5. You must close your unordered list with a
  
  tag.
• --------------

Sample Code
Favorite Colors
1. Red
   
2. Green
3. Blue
• Favorite Colors
• Red
• Green
• Blue

Looks like
13
Nested Lists
• To insert an ordered list (
  ) inside of an
  unordered list (
  )
  • You first create the opening
    tag for your
    bulleted list
    • Insert your list items using
    • and
    tags
    • Inside one of the
    • tag sets, insert the
      opening
      tag for your ordered list,
      1. Now insert all of the
      2. and
      tags for
      that nested list
      3. Then insert a closing
         tag BEFORE closing the
         
         1. tag containing the nested list
         2. Then insert your closing
    tag
  • See the sample code
  • --------------

14
Nested List Code
• Sample Code
• Favorite Colors
  • Red
  • 2. Pink
    4. Scarlet
  • Green
  • Blue
• Favorite Colors
• Red 1. Pink 2. Scarlet
• Green
• Blue

Looks like
15
- Horizontal Rule Tag Attributes
• Default is two pixels thick, 100 wide and
  centered.
• To change the size (or thickness) of a horizontal
  rule (ten pixels thick).
• To change the width using either or
  pixels or
• To change the alignment
• To get a solid, gray rule, add the noshade
  attribute to your tag.
• You may put more than one attribute inside of the
  tagnoshade

16
Exercise 1
• Please turn to Exercise 1 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

17
Betty Beaches Chef Extraordinaire Betty_at_beaches.
com
Renowned international chef with broad experience
in American and International Cuisines seeking to
found and develop the kitchen in a new
international restaurant in a major city in the
United States.
• Education
• The Great Chef School of America, 1995, New York,
  New York.Baking and Pastry Arts544 West 23rd
  Street, New York City
• Employment
• Café on the Lake, 1998-2000, West 67th Street,
  New York, New York.Position Sous-Chef
• Food management
• Menu planning
• Recipe development
• Hors d'oeuvres and amuses bouches
• Soups and tureens
• Appetizers
• Entrees
• Desserts
• Joes International Cafe, 1995-1998, 23West 5th
  Street, New York, New York.Position
  ChefManaging chef for the design and preparation
  of
• Moroccan cuisine
• Northern Italian cuisine

18
Controlling the Styles of
Lists
• To change the style of an Ordered List - insert
  TYPE code in the
  tag.
  1. displays A. Apples
     1. B. Bananas
     2. C. Grapes
     3. displays a. Apples
        1. b. Bananas
        2. c. Grapes
        3. displays I. Apples
           1. II. Bananas
           2. III. Grapes
           3. displays i. Apples
              1. ii. Bananas
              2. iii. Grapes

19
Controlling the Styles of
Lists
• To change the style of an Unordered List -
  insert TYPE code in the
  tag.
  • displays
    • displays
      • displays
        • Blue
        • Green
        • Yellow
        • Blue
        • Green
        • Yellow
        • Blue
        • Green
        • Yellow
        
        20
        The ... tag and its attributes
        • The following attributes may be included inside a
          tag
        • sizeThe default is 3, and values can range
          from 1-7, 7 being the largest.
        • colorvalueThis value controls the color of
          the text within the tags.
        • face"font, alternate_font1, alternate_font2"Spec
          ifies the font to display the text. It is
          important to note that the specified font must be
          present on the user's machine in order to be
          displayed. It is for this reason that alternate
          fonts should be specified.
        • NOTE  You may include all attributes in one
          tag
        • Examplecolorred" Welcome to the world wide web!
          displays Welcome to the world wide
          web!
        
        21
        Exercise 2
        • Please turn to Exercise 2 in your workbook
        • Read and follow the instructions carefully
        • Your finished exercise should looklike the
          following
      
      22
      Betty Beaches Chef Extraordinaire Betty_at_beaches.co
      m
    
    Renowned international chef with broad experience
    in American and International Cuisines seeking to
    found and develop the kitchen in a new
    international restaurant in a major city in the
    United States.
• Education
• The Great Chef School of America, 1995, New York,
  New York.Baking and Pastry Arts544 West 23rd
  Street, New York City
• Employment
• Café on the Lake, 1998-2000, West 67th Street,
  New York, New York.Position Sous-Chef
• Food management
• Menu planning
• Recipe development
• Hors d'oeuvres and amuses bouches
• Soups and tureens
• Appetizers
• Entrees
• Desserts
• Joes International Cafe, 1995-1998, 23 West 5th
  Street, New York, New York. Position
  ChefManaging chef for the design and preparation
  of

23
File Locations and Relative Paths
24
Absolute and Relative Paths
• Absolute Paths Specify the file location
  according to their absolute location in your file
  system, starting at the top level
• Relative Paths Specify the file location
  relative to the current file

25
Image Attributes
Aligns the top of the image with the topmost
part of the line (whether it is a line of text
or another image)

Aligns the center of the image with the center
of a paragraph of text, or the center of
another image

Aligns the bottom of the image with the bottom
of the line (whether it is a line of text or
another image).This is the default.

26
Wrapping Text Around an Image
If you have text here and then enter an image
and then enter
it causes
the text to search for a clear right margin
(where there are no images) and it can again
flow freely.

If you have text here and then enter an image
and then enter
it causes
the text to search for a clear left margin (where
there are no images) and it can again flow
freely.

If you have two images and you want some
text in between, after the last image
enter
it will cause the text
to search until both the left and right margins
are clear of any images. Then it will continue
with the text content.

27
Height and Width Tagsheight200 width300 srcpicture.gif height150 width150
• Using the height and width attributes to specify
  the exact size of a graphic
• tells the browser how much space the item will
  take up on your webpage.
• This allows the browser to save that space on the
  page and continue downloading the rest of the
  page thereby speeding up your download time.
• Resizing a graphic
• Shrinking a graphic using the height and width
  attributes forces the browser toload the larger
  graphic and resize it
• Enlarging a graphic using the height and width
  attributes causes distortion of graphic
• Resizing of a graphic should be done in a
  graphics program and the resized graphic should
  be added to your page

28
alt Attribute height64 altPicture description
• The alt attribute of the tag gives a brief
  description of the image and is used for three
  purposes
• In version 3.0 browsers (and later) the text
  description will appear at the point on the page
  where the image will appear.
• If the user has image loading option turned off
  in their browser, or is using a non-graphical
  browser such as Lynx, the text description will
  be displayed in place of the image.
• Browsers that read web page content aloud, such
  as those for the visually impaired, will use the
  alt attribute to read a brief description of the
  image.

29
Background Patterns
• To insert an image for the background of your
  page, insert thebackgroundpicture.gif
  attribute inside your body tag.
• Tips for background images
• The image will tile as many times as necessary
  to fill the page, so choose an image that
  repeats well.
• Make sure the text on your page is not drowned
  out.
• Keep the images simple
• Test your background images on a 256 color
  monitor

30
Exercise 3
• Please turn to Exercise 3 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

31
(No Transcript)
32
Web Images GIFs and JPEGs
33
Graphic Size and Download Time
34
Creating Links
• External link links to a site on the webhrefhttp//www.southbeach.comSouth Beach
• Local link links to a file in our directoryhrefaboutus.htmlAbout Us
• Mailto link triggers an email window to the
  addressInfo_at_sbea
  ch.com

35
Links appear blue and underlined on the browser
36
Tips for Links
• If you use an image as a link, a blue border 2
  pixels wide will appear around the image. To
  remove the border, use the following codesrcpicture.gif border0.
• Be careful where you place the tags spaces,
  punctuation marks,etc., will be blue and
  underlined if they are inside the tags
• Always include opening and closing quotes in the
  href attribute
• It is possible to link to other types of file
  formats
• Sound files Song
• Video files Movie

37
Exercise 4
• Please turn to Exercise 4 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

38
(No Transcript)
39
Named Anchor Links
• Named Anchor link to another location on the
  same page
• Add the name tag at the
  location on the page where you want the link to
  take you
• We do not wrap the tags around any text,
  since it is going to a specific location on
  the page
• When creating the anchor tag around the text
  that will take you to that location, insert a
  sign and the name of the anchorhrefwheretogoWhere is your office?
• The tells it to stay on the same page and look
  for this name

40
Accessing Named Anchor Linksfrom Another Page
• To get to a named anchor link from another page
• If you were on the home page (or any other page
  in our site) and you wanted to get to the named
  anchor wheretogo on the offices.html page, your
  code would look like thiswheretogoour office

41
Exercise 5
• Please turn to Exercise 5 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

42
(No Transcript)
43
Adding Color to Your Pages
By using the body tag, color can be added to the
following elements of your web page
44
How Colors are Specified
• Colors can be specified by
• Name IE 4 and Netscape Navigator 2.0 and later
  support 140 reserved color names (IE 2.1
  and 3 only support 16 of these names)
• By hexadecimal RGB triplets -- 006699
• Specifies how much Red, Green, and Blue they
  contain
• Levels from 0 255, but expressed as a
  two-digit hexadecimal number (base 16) ,
  values range from 00 99
• This method is preferred since it is supported
  by more browsers
• Base 10 colors can be converted to hexadecimal
  numbers by using a calculator

45
Web Safe Colors
00 33 66 99 cc ff
Any combination of these pairswill give you a
web safe color
Note Be sure to insert the sign, or
some browsers will ignore
the color definition
000000 Black
For example
ff0000 Red
00ff00 Green
0000ff Blue
ffffff White
46
To Change the Color of a Piece of Text
• To change the color of a specific piece of text,
  you can add a color attribute to your
  tag
• Check this
  out! or
• Check this
  out!
• Would appear on the screen like this Check
  this out!
• This will override whatever color attribute was
  specified in the tag.

47
Exercise 6
• Please turn to Exercise 6 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

48
(No Transcript)
49
HTML Tables
50
Movie
Table Movie Act
or Character
Casablanca Humphrey
Bogart Rick Blaine
Casablanca Ingrid
Bergman Ilsa Laszlo

51
Looks like this in the browser
52
Table Attributes
width95 alignright
bgcolor330000
53
Row Attributes

54
Cell Attributes
lorblue rowspan2 colspan3
These can be applied to either a tag or a
tag
55
A More Complex Table
56
Exercise 7
• Please turn to Exercise 7 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

57
(No Transcript)
58
Back to Sample Site Page