[IT] HTML 2


Here is the next session of HTML class….

    1. Text Formatting Tag
      <TAG> Fungsi
      <B>, <Strong> Bold
      <U> Underline
      <I> Italic
      <Del>, <S> Strike Trough
      <Big> * Enlarge text size
      <Small> * Minimize Text Size
      <blink> Blinking text
      <center> Center text
      <comment>, <!– … –> Giving comments
      <dfn> mark on a term
      <kbd> Identifies keystrokes
      <q> quote, non block structure
      <span> = <div> tag
      <sub> Subscript
      <sup> Superscript

      • <A> … </A>
        Used to link each object
        Attribute :

        • —  Href : [file source]
        • —  Name : used to identify an are by anchor link
        • —  Target  : [_blank, _parent, _top]

        Example :

        • —  hyperlink to connect to another web pages
          Example :

          <a href=profil.html> Profil </a>
        • —  Hyperlink to connect to another website
          Example :

          <a href=http://google.com> Google </a>
        • —  To connect to another area in a document
          example :

          <a href=#history> HISTORY </a>……….<a name=history> HISTORY </a>
    2. <IMG />
      Inline tag used to insert an image into the webpage
      Attributes :

      • —  Src = [file source]
      • —  Width = [..px /  %]
      • —  Height = [..px /  %]
      • —  Alt = [string] (alternative text)
      • —  Align = [middle|left|right|center]
      • —  Border = [number]
      • —  Usemap = [#map’sname]
      • —  Vspace / hspace = [number]

      example :

      <img src=./image/pict.jpg width=100 height=200 alt=“insert picture” hspace=10 vspace=10 usemap=#map1 />

       

    3. <MAP> <AREA> ….. </AREA> </MAP>
      as known as Hotspot. this tag make links within the image. this tag contains <are> tags..
      Attribute Map :

      • —  Name

      Attribute Area

      • —  shape= rect |circle| poly
      • —  coords= x1,y1,x2,y2 | x,y,r
      • —  Href= url
      • —  alt= Alternative string
      • —  Target = _blank | _self | _parent

      Contoh :

      <map name=map1><area shape=rect coords=0,20,10,40 href=1.html /><area shape=rect coords=20,40,30,60 href=1.html /><area shape=rect coords=30,50,40,70 href=1.html /></map>
    4. <TABLE> … </TABLE>
      To make a table, it’s obvious, with the help of another elements.
      Attribut Tabel

      • —  Align = center|left|right (it’s for table position instead of content position)
      • —  Width = ..px | ..%
      • —  Height = ..px | ..%
      • —  Cellpadding = ..px
      • —  Cellspacing = ..px
      • —  Background = file source
      • —  Bgcolor = color’s code | color’s name
      • —  Bordercolor  = color’s code | color’s name
      • —  Border  = ..px

      Components to build a table

        1. <Caption >
          it has to be declared after <table> declaration
          Attribute
          –          Align
        2. <tr>
          elements for table rows
          Attribute
          –          Align
          –          Bgcolor
        3. <td>
          To define the table column.
          Attribut
          –          Bgcolor
          –          Align
          –          Colspan  = columns merger
          –          Rowspan  = rows merger
          –          Valign =text position vertically
        4. <th>
        5. <thead>
        6. <tbody>

      Contoh :

      <TABLE BORDER=1>
      <CAPTION> COLUMNS MERGER </CAPTION>
      <TR><TD COLSPAN=3>  Subjects </CAPTION></TR><TR><TD> Indonesian </TD><TD> English </TD><TD> Math </TD></TR></TABLE>
      <TABLE BORDER=1>
      <CAPTION> ROWS MERGER</CAPTION>
      <TR>
      <TD rowspan=2> Subjects  </TD>
      <TD> Math </TD>
      <TD> English </TD><TD>Indonesian</TD></TR><TR><TD>8,5 </TD.<TD> 7,7</TD><TD> 8,0</TD></TR></TABLE>
    5. <FORM> … </FORM>
      Attribute

      1. Name
      2. Target = _blank | _self | _parent
      3. Method = POST | GET
      4. Action = [file] (destination file)

      Form’s Elements

      1. Text Field (single line input)
        <input type=”text” name=”firstname” id=“fn”  size=”20″/>
      2. Password (single line input for password)
        <input type=“password” name=“passwd” id=“pw” size=”20″/>
      3. Textarea (multi line input)
        <textarea name=“description” id=“desc“ rows=“10” cols=“30”>Default text …</textarea>
      4. Dropdown
        <select name=”town” id=”tn”><option value=”swindon”>Swindon</option><option value=”london” selected=”selected”> London </option><option value=“bristol”>Bristol</option></select>
      5. Radio Button
        <input type=”radio” name=”age” id=”u30“ checked=“checked” value=”Under30″ /><label for=”u30″>Under 30</label><br /><input type=”radio” name=”age” id=”thirty40″ value=”30to40″ /> <label for=”30u”> 30 to 40</label>
      6. Check box
        <input type=”checkbox” name=”colour[]” id=”r” checked=”checked” value=”red” /><label for=”r”>Red</label><br /><input type=”checkbox” name=”colour[]” id=”b” value=”blue” />
      7. Hidden Field
        <input type=”hidden” name=”hidden_value” value=”My Hidden Value” />
      8. Button
        <input type=”submit”  name=”submit”  value=”Submit” />

        Contoh :

        <form action=proses.php name=form1 method=post>NIM : <input type=text name=nim id=nim size=12 />Nama : <input type=text name=nama id=nama size=50 />Alamat :<textarea name=alamat id=alamat rows=5 cols=7 >Masukkan Alamat Anda</textarea></form>

To Download the Indonesian Version of the Presentation [click here]

2 thoughts on “[IT] HTML 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s