Lesson 1 by yurtgc548

VIEWS: 0 PAGES: 19

									Lesson 1



   Quick HTML
   Know-How
       Communicating on the Web

          Web pages are viewed
           in Web browsers

          Two browsers dominate
           –   Internet Explorer
           –   Netscape Navigator




Step-by-Step 1.1
Communicating on the Web

• HTML (Hypertext Markup Language) –
  organizes documents, tells Web browsers how
  pages look
       Communicating on the Web
          To view the tags behind
           Web pages, click:
           –   View, Source
                   or
           –   View, Page Source
          Web pages are made up
           of pairs of HTML tags:
           –   <CENTER></CENTER>
                   or
           –   <H1></H1>



Step-by-Step 1.1
The Tags Behind a Web Page
       Enter Your Mystery Tags the Old-
       Fashioned Way
          These tags create a Web      <HTML>
           page backbone.               <TITLE></TITLE>
                                        <BODY>
           –   Starts an HTML page      <CENTER></CENTER>
           –   Inserts title bar text
                                        <P></P>
           –   Begins Web display
                                        <P></P>
           –   Centers any text
                                        <P></P>
           –   Creates paragraphs
           –   Ends Web display         <P></P>
           –   Ends an HTML page        </BODY>
                                        </HTML>


Step-by-Step 1.2
       Enter Your Mystery Tags…
                                           <HTML>
                                           <TITLE>Text</TITLE>
          Insert text between the pairs   <BODY>
           of tags.                        <CENTER>Text</CENTER>
                                           <P>Text</P>
          Anything entered between the    <P>Text</P>
           <BODY> </BODY> tags will        <P>Text</P>
           be displayed in the browser
           window                          <P>Text</P>
                                           </BODY>
                                           </HTML>


Step-by-Step 1.2
     How It Works


     • Tags – work everywhere on the web
        –   Appear between angle brackets
        –   <Center>HTML and JavaScript</CENTER>



 Starting Tag
                                                   Ending Tag




Step-by-Step 1.2
       How it works

          There are lots of tags
          Instructions for the Web Browser
           –   Tell how to display information




Step-by-Step 1.2
Vocab for Pages


• Web page – also web document, page created in
    HTML that can be placed on the world wide web
•   Home page – main or primary page
•   Welcome page – designed for new visitors of the site
•   HTML page - also HTML document, any page created
    in HTML that can be displayed on the WWW
•   Web site – collection of interconnected Web pages,
    they are stored on web servers
What to Use


 •   Notepad
 •   SimpleText
 •   Microsoft Word
 •   AppleWorks
Save and View!

• HTML documents are text files – saved the simplest way
  possible
• Text files only store letters you see on keyboard
• Saving text files
• Need extensions –
   – .doc (Microsoft Word document)
   – .rtf (Microsoft’s Rich Text Format)
   – .wpd (Corel WordPerfect document)
   – .txt (text file)
   – .html (HTML file)
   – .htm (HTML file on some computer systems
       Save Your HTML Page


          Name your file one.htm
           or one.html

          Save as type must be
           TEXT

          Click Save


Step-by-Step 1.3
       View Your HTML Page




           Browse to your file…



Step-by-Step 1.3
Using Headings


• Most documents use heading to help reader find
  information
• HTML gives 6 headings (title sizes)
• Use H with number from 1-6
   – Numbered by importance (#1 would be the largest)
        •   <H1></H1>
        •   <H2></H2>
        •   <H3></H3>
Using Heading Continued



• Anything inside the tags will be made larger or
  smaller
• <H1>VERY BIG</H1>
• <H3>In the Middle</H3>
•   <H6>Very Small</H6>
       Using Headings

       Very Large       <H1></ H1>
       Large            <H2></H2>
                        <H3></ H3>
       Medium Large     <H4></H4>
       Medium Small     <H5></ H5>
       Small            <H6></H6>
       Very Small



Step-by-Step 1.4
       Bulleted Lists
       Create the following bulleted list   <HTML>
          using the tags to the right.      <TITLE>Text</TITLE>
                                            <BODY>
                                            <UL>
          First Item                       <LI>First Item
          Second Item                      <LI>Second Item
          Third Item                       <LI>Third Item
          Fourth Item                      <LI>Fourth Item
                                            </UL>
                                            </BODY>
                                            </HTML>



Step-by-Step 1.5
       Numbered Lists
       Create the following numbered list   <HTML>
          by replacing the <UL> tags with   <TITLE>Text</TITLE>
          the <OL> tags shown to the
                                            <BODY>
          right.
                                            <OL>
                                            <LI>First Item
       1.   First Item
                                            <LI>Second Item
       2.   Second Item
                                            <LI>Third Item
       3.   Third Item
                                            <LI>Fourth Item
       4.   Fourth Item
                                            </OL>
                                            </BODY>
                                            </HTML>


Step-by-Step 1.5

								
To top