Link

Document Sample
Link Powered By Docstoc
					Fundamentals of
 Web Publishing
           HTML Basics



Telecom 4290: Fundamentals
     Of Web Publishing
                             HTML Basics   1
               HTML Basics
• Tag Anatomy 101
• Specific HTML Tags
  – Document Structure
  – Text-level Formatting
• Take notes where you need to
  – This presentation is posted online for
    future reference
  – www.arches.uga.edu/~klopfens/htmlbasics.ppt


          Telecom 4290: Fundamentals
               Of Web Publishing
                                       HTML Basics   2
HTML: HyperText Markup
       Language
• Web pages are written in HTML
• HTML is plain text containing:
  – HTML tags
  – user-defined text fields
• Hypertext = Tagged Text
  – specifically, with anchor <A> tags
    linking to other documents


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   3
      Anatomy of a Tag
• Keyword: the tag’s name
  – e.g., the keyword of the <I> tag is ‘I’
• Type: container or standalone
  – container: turn an effect on/off
    e.g. <I>italic text</I>
  – standalone: a single element
    e.g. <IMG SRC=“pic.gif”>
• Function: describe element / effect

        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   4
                  Attributes
• Define content
  <IMG SRC=“pic.gif”>
• Modify effect
  <IMG SRC=“pic.gif” ALIGN=LEFT>
  – Try out a tag to see what it does.
• User-defined values
  – character strings, integers, etc.


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   5
Document Structure Tags
• <HTML>, <HEAD>, <BODY>
• <BASE>, <META>, <LINK>,
  <SCRIPT>, <STYLE>, <TITLE>
• See Maricopa web site for a
  summary of HTML tags
• http://www.mcli.dist.maricopa.edu
  /tut/tags/index.html

       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   6
         Tag: <HTML>
• Type: container
• Function: declares document to be
  HTML; all content contained inside
• Syntax: <HTML>…</HTML>
• Attributes: none




       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   7
         Tag: <HEAD>
• Type: container
• Function: contains tags comprising
  the document head
• Syntax: <HEAD>…</HEAD>
• Attributes: none
• Related Tags: <BASE>, <LINK>,
  <META>, <SCRIPT>, <STYLE>,
  <TITLE>
       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   8
          Tag: <BASE>
• Type: standalone
• Function: set global HREF, TARGET
  – HREF used when computing relative
    URL references
  – TARGET used when computing frame
    references for linked documents
• Syntax:
  <BASE HREF=“base_URL”>
  <BASE TARGET=“frame_name”>
       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   9
           Tag: <BASE>
• Attributes
  – only one attribute per tag instance
  – two tags to set defaults for both HREF
    & TARGET




        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   10
         Tag: <BASE>
• Example
  <HEAD>
  <BASE HREF=“http://mysite/”>
  <BASE TARGET=“bigframe”>
  </HEAD>
  <BODY>
  <A HREF=“mypage.html”>
  </BODY>

      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   11
          Tag: <BASE>
• Equivalent to:
  <HEAD>
  </HEAD>
  <BODY>
  <A TARGET=“bigframe” HREF=
  “http://mysite/mypage.html”>
  </BODY>


       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   12
          Tag: <META>
• Type: standalone
• Function:
  – declares document meta-information:
    keywords, expiration date, author,
    page generator, etc.
  – also used to implement client pull
    (dynamic update after a delay)



        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   13
          Tag: <META>
• Attributes:
  – HTTP-EQUIV - specify type of HTTP
    header to send with the document;
    commonly REFRESH or EXPIRES
  – NAME - specifies the document meta-
    variable you wish to specify:
    AUTHOR, KEYWORDS, GENERATOR,
    DESCRIPTION


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   14
     Example Meta Tag
• From Maricopa Lesson 24
• http://www.mcli.dist.maricopa.edu
  /tut/tut24.html
  – <head>
  – <title>My page title</title>
  – <META HTTP-EQUIV="REFRESH"
   CONTENT="X;
   URL=newpage_or_URL.html">
  – </head>

       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   15
        Tag: <META>
• Example
  <HEAD>
  <META HTTP-EQUIV=“Refresh”
  CONTENT=“10,
  URL=http://mysite/next.html”>
  <META NAME=“KEYWORDS”
  CONTENT=“web publishng, Bruce
  Klopfenstein”>
  </HEAD>
      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   16
   Meta Refresh Example
• In class exercise
• Create a new file called test.html
  that will take the user from
  test.html to your homepage in 5
  seconds
• See
  www.des.state.mn.us/redirect/cjs/


       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   17
      Tag: <SCRIPT>
• Type: container
• Function: contains script code
  referenced in the <BODY>
• Syntax:
  <SCRIPT LANGUAGE=“name”>…
  </SCRIPT>



       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   18
       Tag: <SCRIPT>
• Attributes:
  – LANGUAGE - what scripting language
    SRC - URL of (remote) script code
  – TYPE - of script code

   text/javascript




        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   19
          Tag: <TITLE>
• Type: container
• Function: give the document a
  descriptive title (used in history
  list, title bar, bookmarks, etc.
• Syntax: <TITLE>… </TITLE>
• Attributes: none
• Example:
  <TITLE>Web Site Tips</TITLE>
        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   20
          Tag: <BODY>
• Type: container
• Function: contains all text and tags
  inside the document




        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   21
         Tag: <BODY>
• Syntax:
  <BODY BGCOLOR=“color”
  BACKGROUND=“image”
  LINK=“link_color”
  ALINK=“active_link_color”
  VLINK=“visited_link_color”
  TEXT=“text_color”> …
  </BODY>

       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   22
                         Colors
• Color attributes can be:
  – one of the 16 reserved color names:
    BLACK, WHITE, AQUA, SILVER,
    GRAY, MAROON, RED, PURPLE,
    FUSCHIA, GREEN, LIME, OLIVE,
    YELLOW, NAVY, BLUE, TEAL
  – specified by an RBG hexadecimal
    triplet: e.g., #FFFFFF (white)


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   23
          Tag: <BODY>
• Attributes:
  – ALINK - link color when clicked
  – BACKGROUND - URL of an image to
    use (will be tiled to fit)
  – BGCOLOR - background color
  – LINK - link color (unvisited)
  – TEXT - default text color
  – VLINK - link color (visited)

        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   24
 Text-Level Format Tags
• <B>, <BASEFONT>, <BIG>,
  <FONT>, <I>, <SMALL>, <SUB>,
  <SUP>, <TT>, <U>,
  <ACRONYM>, <ADDRESS>,
  <CITE>, <CODE>, <DEL>,
  <DFN>, <EM>, <INS>, <KBD>,
  <Q>, <SAMP>, <STRONG>,
  <VAR>

      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   25
  Text-Level Format Tags
• See
  http://www.mcli.dist.maricopa.edu
  /tut/tags/index.html




       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   26
     Appearance Tags
• <B>Bold Text</B>
• <BIG>Bigger Text</BIG>
• <I>Italic Text</I>
• <S>Stricken Text</S>
• <SMALL>Smaller Text</SMALL>
• <SUB>Subscript</SUB>
• <SUP>Superscript</SUB>

      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   27
     Appearance Tags
• <TT>Fixed-width Chars</TT>
• <U>Underlined Text</U>




      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   28
     Phrase Formatting
• <ACRONYM>HTML</ACRONYM>
• <ADDRESS>email</ADDRESS>
• <CITE>citation</CITE>
• <CODE>Code Sample</CODE>
• <DEL>deleted text</DEL>
• <DFN>defining instance</DFN>
• <EM>Emphasized Text</EM>

      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   29
       Phrase Formatting
• In class exercize
• Using notepad, create a file called
  examples.html
• Try out the examples from the
  previous slides
• www.arches.uga.edu/~klopfens/htmlbasics.ppt




         Telecom 4290: Fundamentals
              Of Web Publishing
                                      HTML Basics   30
     Tag: <BASEFONT>
• Type: standalone
• Function: set default size, color,
  typeface for <BODY>
• Syntax:
  <BASEFONT SIZE=“size”
  COLOR=“color”
  FACE=“list_typefaces”>


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   31
     Tag: <BASEFONT>
• Attributes:
  – COLOR - one of 16 reserved names or
    an RGB hexadecimal triplet
  – FACE - list of typefaces (uses first
    available)
  – SIZE - integer value from 1 to 7
    (default is 3); mapped to point size
    by browser according to user
    preferences

        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   32
     Tag: <BASEFONT>
• Example
  <BASEFONT SIZE=5
  COLOR=“navy”
  FACE=“Arial,Helvetica”>




       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   33
         Tag: <FONT>
• Type: container
• Function: modify font properties of
  the contained text
• Syntax:
  <FONT SIZE=“size”
  COLOR=“color”
  FACE=“list_typefaces”>…
  </FONT>
       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   34
          Tag: <FONT>
• Attributes:
  – COLOR - one of 16 reserved names or
    an RGB hexadecimal triplet
  – FACE - list of typefaces (uses first
    available)
  – SIZE - integer value from 1 to 7; or
    increment / decrement relative to
    base font


        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   35
        Tag: <FONT>
• Example
  <FONT SIZE=“+1”
  COLOR=“red”>Warning!</FONT>




      Telecom 4290: Fundamentals
           Of Web Publishing
                                   HTML Basics   36
    Other Common Tags
• Unordered (bulleted) list
  – <UL>
  – <LI> for each item in the list
  – </Ul>
• Ordered (numbered) list
  – <OL>
  – <LI>
  – </OL>

        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   37
    Other Common Tags
• <BR> Line Break
• <P> New Paragraph
  – Result is same as <BR><BR>
• <I>Italic Text</I> = Italic
• <B>Bold Text</B> = Bold
• <U>Underlined Text</U> =
  underlined

       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   38
                       Tutorial
• Go to
  http://www.mcli.dist.maricopa.edu/tut/
  and continue the tutorial
• Create a “cover page” for yourself
  including your name and any other
  public information about yourself
• Upload it to your Arches web account
• Prepare a resume
         Telecom 4290: Fundamentals
              Of Web Publishing
                                      HTML Basics   39
     Personal Web Site
• Example personal web site
• http://coverage.cnet.com/Content/
  Tv/Web/Sofie/




       Telecom 4290: Fundamentals
            Of Web Publishing
                                    HTML Basics   40
                        Tables
• http://www.mcli.dist.maricopa.edu
  /tut/tut21.html
• Eventually use tables to create
  your resume
• How to create an online resume
  – titan.iwu.edu/~ccenter/resume/



        Telecom 4290: Fundamentals
             Of Web Publishing
                                     HTML Basics   41

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:5/8/2013
language:Unknown
pages:41
gegouzhen12 gegouzhen12
About