HTML: Hyptertext Markup Language

Document Sample
HTML: Hyptertext Markup Language Powered By Docstoc
					                                             HTML:
                                             HYPTERTEXT
                                             MARKUP
                                             LANGUAGE
                                             PART II
                                            Doman’s Sections



Information in this presentation includes text and images from www.w3schools.com
IMAGES

   Add images to webpage by using a
    single HTML tag, the image source
    tag
          <img src=“location” />

   Key is getting the location correct
FINDING YOUR IMAGES

In the folder where your html is saved…
 Create another folder named ‘images’

Save your images in that folder

Specify :
<img src=“images/name.filetype” />
IMAGE ATTRIBUTES - ALT


    Alternate attribute – This provides text for
     browsers that don’t have graphic
     capabilities.
    It also provides the text shown when the
     input pointer hovers over the image.

   <img src=“location” alt=“text to be shown”
   />
IMAGE ATTRIBUTES - SIZE


      Secure the size of the image displayed – height
       and width attributes
      These can be specified in units of
          Percentage of the page real estate
          Actual pixels

   <img src=“location” height=“60” width=“50” />

   <img src=“location” height=“6%” width=“10%” />
USING IMAGES AS LINKS


   Use the anchor tag to surround the image
    tag. This makes the image the hyperlink text:

 <a href=“http://www.google.com”>
    <img src=“http://www.google.gif” />

    </a>
ADDING STYLE AND FLAVOR



       TUTORIAL
WHAT IS CSS?


      CSS stands for Cascading Style Sheets
      Set of rules that determine how the styles
       are applied to the HTML tags in the
       document (1).
      Syntax of CSS Rules consist of:
       1.      Selectors
       2.      Declarations



            [1] Sam’s Teach Yourself HTML in 10 Minutes, SAMS Publishing; Indianapolis
            IN, 2007
STYLE SHEETS


      Selectors
          HTML tags that receive the style
      Declarations
           The style sheet properties and their
       values
METHODS OF IMPLEMENTING
STYLE SHEETS

1.    Inline
     <body style=“background:blue:”> …
     </body>

2.    Linked
     <head>
     <link rel=“stylesheet” href=“location” type=“text/css” />
     <head

3.    Embedded
           <style> tags are placed in the <head> section and   affect the
entire file.
EMBEDDED STYLE SHEETS


     All styles are defined a the top of
      the HTML document within the
      <head> tag.



     They contain information about the
      entire document!
EMBEDDED STYLE SHEET

   <head>
   <style type=“text/css”>
      body { background : blue ; }
   </style>

   </head>
APPLYING PROPERTIES TO HTML TAGS

 h1 { color:”red”; }
 This causes all text surround by an <h1> tag to be
 red.

 What if I want only one or some <h1> tags to be
 red?

 CSS allows selectors "class".
 These selectors provide the ability to differentiate
 which tags are associated with the format
STYLING ATTRIBUTES
    STYLING BACKGROUNDS

CSS properties used for background effects:
 background-color : Sets the background color of an element

   background-image: Sets the background image for an element

   background-repeat : Sets if/how a background image will be repeated

   background-position: Sets the starting position of a background image

   background-attachment :Sets whether a background image is fixed
    or scrolls with the rest of the page

                                     Tutorial Link
    STYLING TEXT
 color : Sets the color of a text
 text-align: Aligns the text in an element
 vertical-align: Sets the vertical alignment of
  an element
 text-decoration: Adds decoration to text
 text-transform: Controls the letters in an
  element
 text-indent: Indents the first line of text in an
  element
                   Tutorial Link
STYLING FONTS


    font-family: Specifies the font family for text

    font-size: Specifies the font size of text

    font-style: Specifies the font style for text

    font-weight: Specifies the weight of a font

                    Tutorial Link
THE CLASS SELECTOR

   Specifies a style for any HTML
    elements with the same class.

   Defined by a “.”

   Referenced in the class attribute of
    the HTML element
USING THE CLASS ATTRIBUTE
   Classes can affect all HTML elements that associate
    with the class
   Classes can be attached to specific HTML elements.

<style type="text/css">
.yellowClass {color:yellow;}

h1.redClass { color:red; }
h1.blueClass{color:blue;}
h1 {color:green; }

</style>
    USING THE CLASS ATTRIBUTE

Indicate class name as an attribute of the tag:

<h1 class=redClass> Red Heading </h1>
<h1 class=blueClass> Blue Heading </h1>
<h1 class=yellowClass>Yellow Heading</h1>
<h1> Other headings </h1>        Red Heading
                                 Blue Heading
         Tutorial                Yellow Heading
                                 Other headings
THE :FIRST-LETTER PSEUDO-ELEMENT



    The "first-letter" pseudo-element is
     used to add a special style to the first
     letter of a text:
  p:first-letter
  {
  color:#ff0000;
                              Y   ou can use the :first-
                              letter pseudo-element to add
  font-size:xx-large;         a special effect to the first
  }                           character of a text!
  </style>

              Tutorial Link
    STYLING LISTS

   Set different list item markers for ordered lists
   Set different list item markers for unordered lists
   Set an image as the list item marker


   list-style-type: Specifies the type of list-item marker
   list-style-image: Specifies an image as the list-item
    marker
                        Tutorial Link
STYLING TABLES

 border: specify table borders
 border-collapse: sets whether the table borders
  are collapsed into a single border or separated
 width and height: specifies the width/height of
  the element

                  Tutorial Link
FLOATING ELEMENTS
   An element can be pushed to the left
    or right, allowing other elements to
    wrap around it.

   Float is useful for both images and
    layouts

         img
         {
         float:right;
         }
HOW ELEMENTS FLOAT
 Elements are floated horizontally, this means that
  an element can only be floated left or right, not up
  or down.
 A floated element will move as far to the left or
  right as it can. Usually this means all the way to
  the left or right of the containing element.
 The elements after the floating element will flow
  around it.
 The elements before the floating element will not
  be affected.
                   Tutorial Link
NAVIGATION

 Allows the user to navigate the website
 Must be clear in purpose and easy to find

 Navigation menus are usually on all pages

 Normally along the top or left side of the page
      NAVIGATION BAR
   List of links.

   Use the anchor tag <a href=“location”> to link
    to your 2nd and 3rd page.

   Link each page to the other two.

   You can use text or an image to link the pages.
  NAVIGATION BAR
<ul>
<li> <a href=“location/page1.html”>
     First page </a> </li>

<li> <a href=“location/page2.html”>
     First page </a> </li>

<li> <a href=“location/page2.html”>
     First page </a> </li>
</ul>
NAVIGATION BAR



   Key is getting the location correct

      Remember to use the complete URL
      with http prefix
   …. OR…..
 FINDING YOUR PAGES


Save all html document files in the same
  folder.

Specify :
<a href=“name.filetype” > text </a>
STYLING NAVIGATION BAR

 Navigation bar can be a list of links.
 So, add style characteristics to the list to
 make it look more like what we want

 1.   Remove bullets or numbers
 2.   Make the whole area around the
      word ‘clickable’
 3.   Display vertical or horizontal
      navigation bar
STYLING NAVIGATION BAR

Remove bullets or numbers
-> tag the list selector
             ul
             {
             list-style-type:none;
             margin:0;
             padding:0;
             }


   list-style-type:none - Removes the bullets. A
    navigation bar does not need list markers
   Setting margins and padding to 0 to
    remove browser default settings
STYLING NAVIGATION BAR

Make the whole area around the word ‘clickable’
-> style the anchor selector
               a
               {
               display:block;
               width:60px;
               }


   display:block - Displaying the links as block elements
    makes the whole link area clickable (not just the text), and
    it allows us to specify the width
   width:60px - Block elements take up the full width
    available by default. We want to specify a 60 px width
  STYLING NAVIGATION BAR
Display vertical or horizontal navigation bar
-> style the list item selector
Use either display or float attributes

    li                                   li
    {                                    {
    display:inline;                      float:left;
    …                                    }
    }
• display:inline; - By default, <li> elements are block elements. Removing
  the line breaks before and after each list item, displays them on one line
• float:left - use float to get block elements to slide next to each other


                          Tutorial Link
  STYLING LINKS
Links are styled differently depending on what state they are
in.
The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the mouse sits over it
 a:active - a link the moment it is clicked


These are called CSS pseudo-classes
Links can be style with any CSS property (e.g. color, font-family,
background-color).
                         Tutorial Link
STYLING LINKS - EXAMPLE
<head>
<style type="text/css">
a:link {color: pink;} /* unvisited link */
a:visited {color: red;} /* visited link */
a:hover {color: blue;} /* mouse over link */
a:active {color: green;} /* selected link */
</style>
</head>
                             www.w3.schools.com
CREATING MULTIPLE PAGES

 Create 2 more pages by copying the one
  created.
 Change the title tag on the page.

 Save as .html files with a new name
CSS EXAMPLES


   Feel free to look at the examples
   provided by w3schools.com .

   Use these techniques to format your
   own pages:

           CSS EXAMPLES Tutorial
NEXT WEEK

 Ethics and Privacy
 Midterm in 2 weeks

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:7
posted:7/4/2012
language:
pages:39