Pages

  • Home
  • Contact

Mel's Stories

    • Home
    • Travel
    • Review & Recommendation
    • _Beauty
    • Mind
    • Knowledge Sharing
    • Miscellaneous

    HTML
    HTML adalah bahasa untuk mendeskripsikan halaman web yang berisi tag-tag .HTML singkatan dari Hyper Text Markup Bahasa.  HTML adalah bahasa markup.Sebuah bahasa markup adalah seperangkat tag markup. Tag menjelaskan isi dokumen.Dokumen HTML berisi tag HTML dan teks biasa. Dokumen HTML juga disebut halaman web. HTML markup tag biasanya disebut tag HTML
    Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
     Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut seperti <html> . Tag HTML biasanya datang berpasangan seperti <b> dan </ b>  .Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir.Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag. Mulai dan tag akhir juga disebut tag pembuka
     Struktur HTML
    <!DOCTYPE html>

    <html>
    <head>
    <title> judul</title>
    </head><body>

    ISI

    </body>
    </html>




    1.Editor HTML
    Menulis HTML menggunakan Notepad
    Kemudian simpan dengan ekstensi .htm atau .html
    Lalu jalankan!




    2.Atribut HTML
    • Element HTML mempunyai atribut
    • Atribut selalu disertai dengan tag yang spesifik
    Contoh:
    <a href="http://www.w3schools.com">This is a link</a>



    3.HTML Heading
    Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.
    Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web.
    HTML menyediakan enam tingkat headingheading. <h6> defines the least important heading.
    <HTML>
    <HEAD>
    <TITLE>Heading</TITLE>
    </HEAD>
    <BODY>
    <H1>Heading level1</H1>
    <H2>Heading level2</H2>
    <H3>Heading level3</H3>
    <H4>Heading level4</H4>
    <H5>Heading level5</H5>
    <H6>Heading level6</H6>
    </BODY>

    </HTML>

     


    4.HTML Paragraph
    Paragraf <p>…</p>
    Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri
    dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut
    ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata
    tengah, dan RIGHT untuk rata kanan
    5.HTML Hyperlink
    Link <a>…</a>
    Perintah anchor <A> digunakan untuk membuat link. Dan digunakan tag <A HREF =
    “nama_dokumen”> teks pada browser </A>. Untuk membuat link dalam sebuah dokumen
    HTML perlu disiapkan nama anchor lokasi tujuan link tersebut. Nama anchor dibuat dengan
    menambahkan atribut NAME pada tag <A>




    Syntax:

    <HTML>
    <HEAD>
    <TITTLE>Link</TITTLE>
    </HEAD>
    <BODY>
    9
    <A NAME="lengkap">pemain Milan</A>
    <BLOCKQUOTE>
    <P>DIDA, <A HREF="#DIDA">info selengkapnya</A>
    <P>MALDINI
    <P>SHEVA
    <P>REDONDO
    <P>RIVALDO
    <P>
    <A HREF="tujuan.html">info selengkapnya</A>
    </BLOCKQUOTE>
    <A NAME="DIDA">KLIK AJA !!!!</A>
    <BLOCKQUOTE>
    <P>KIPER UTAMA TIMNAS BRAZIL
    </BLOCKQUOTE>
    <A HREF="#lengkap">UP</A>
    </BODY>
    </HTML>

    6. HTML Colors

    Color Values

    Warna pada HTML ditetapkan menggunakan hexadecimal, dan tersusun dari kombinasi warna Merah, Hijau, Biru.Nilai HEX dispesifikasikan sebagai 3 pasangvdari 2 digit nomor, dimulai dengan tanda #



    7.HTML List
    Daftar HTML yang paling umum yang digunakan adalah ordered dan unordered list

    An ordered list:

    1. The first list item
    2. The second list item
    3. The third list item
    Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka, cth:
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    Kode HTML diatas akan terlihat sbb pada browser:
    1. Coffee
    2. Milk

     

     

    An unordered list:

    • List item
    • List item
    • List item
    Unordered list dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan peluru (lingkaran hitam biasanya). Cth:
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    HTML akan terlihat sbb pada browser:
    • Coffee
    • Milk

    8 .Kumpulan Tag HTML
    <!--    -->
    Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
    <a href>
    Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
    <a name>
    Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
    <applet>
    Sebagai awal dari Java applets
    <area>
    Mendefinisikan daerah yang dapat diklik (link) pada image map
    <b>
    Membuat teks tebal
    <basefont>
    Membuat atribut teks default seperti jenis, ukuran dan warna font
    <bgsound>
    Memberi (suara latar) background sound pada halaman web
    <big>
    Memperbesar ukuran teks sebesar satu point dari defaultnya
    <blink>
    Membuat teks berkedip
    <body>
    Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
    <br>
    Pindah baris
    <caption>
    Membuat caption pada tabel
    <center>
    Untuk perataan tengah terhadap teks atau gambar
    <comment>
    Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
    <dd>
    Indents teks
    <div>
    Represents different sections of text.
    <embed>
    Menambahkan sound or file avi ke halaman web
    <fn>
    Seperti tag <a name>
    <font>
    Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
    <form>
    Mendefinisikan input form
    <frame>
    Mendefinisikan frame
    <frameset>
    Mendefinisikan attribut halaman yang akan menggunakan frame
    <h1> ... <h6>
    Ukuran font
    <head>
    Mendefinisikan head document.
    <hr>
    Membuat garis horizontal
    <html>
    Bararti dokumen html
    <i>
    Membuat teks miring
    <img>
    Image, imagemap atau an animation
    <input>
    Mendefinisikan input field pada form
    <li>
    Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
    <map>
    Mendefinisikan client-side map
    <marquee>
    Membuat scrolling teks (teks berjalan) - hanya pada MS IE
    <nobr>
    Mencegah ganti baris pada teks atau images
    <noframes>
    Jika browser user tidak mendukung frame
    <ol>
    Mendefinisikan awal dan akhir list
    <p>
    Ganti paragraf
    <pre>
    Membuat teks dengan ukuran huruf yg sama
    <script>
    Mendefinisikan awal script
    <table>
    Membuat tabel
    <td>
    Kolom pada tabel
    <title>
    Mendefinisikan title
    <tr>
    Baris pada tabel
    <u>
    Membuat teks bergaris bawah







    Continue Reading
      HTML Tables

    Attribute HTML pada pada Tag Tabel
    Attribute
    Value
    Penjelasan
    align
    left
    center
    right
    Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text
    bgcolor
    rgb(x,x,x)
    #xxxxxx
    colorname
    Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table
    border
    1
    ""
    Specifies whether the table cells should have borders or not
    cellpadding
    pixels
    Not supported in HTML5. Specifies the space between the cell wall and the cell content
    cellspacing
    pixels
    Not supported in HTML5. Specifies the space between cells
    frame
    void
    above
    below
    hsides
    lhs
    rhs
    vsides
    box
    border
    Not supported in HTML5. Specifies which parts of the outside borders that should be visible
    rules
    none
    groups
    rows
    cols
    all
    Not supported in HTML5. Specifies which parts of the inside borders that should be visible
    summary
    text
    Not supported in HTML5. Specifies a summary of the content of a table
    width
    pixels
    %
    Not supported in HTML5. Specifies the width of a table



    Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan
    mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>
    Tag <TABLE> mewakili beberapa bagian penting :
    •        </CAPTION> digunakan untuk membentuk judul table. Judul table
    akan terletak di luar table di bagian atas atau di bagian bawah.
    •        <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau
    bagian paling kiri dari table.
    •       <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.


    Table COLSPAN dan ROWSPAN
    Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.
    ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu baris.

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    Tampilan HTML dalam browser sbb:
    row 1, cell 1
    row 1, cell 2
    row 2, cell 1
    row 2, cell 2
    Menggunakan Colspan & Rowspan
    <table border="1">
    <tr>
    <td colspan=”2”>Row 1 cell 1</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>


    Tampilan HTML dalam browser sbb:
    row 1, cell 1
    row 2, cell 1
    row 2, cell 2

    HTML Table Headers
    <table border="1">
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    Hasil kode diatas dalam tampilan browser sbb:
    Header 1
    Header 2
    row 1, cell 1
    row 1, cell 2
    row 2, cell 1
    row 2, cell 2


    Menggunakan Tag <TD> pada HTML


    Flowchart: Alternate Process: <table border="1">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>
     





    Atribut yang digunakan pada tag TD adalah:
    Attribute
    Value
    Description
    abbr
    text
    Not supported in HTML5. Specifies an abbreviated version of the content in a cell
    align
    left
    right
    center
    justify
    char
    Not supported in HTML5. Aligns the content in a cell
    axis
    category_name
    Not supported in HTML5. Categorizes cells
    bgcolor
    rgb(x,x,x)
    #xxxxxx
    colorname
    Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color of a cell
    char
    character
    Not supported in HTML5. Aligns the content in a cell to a character
    charoff
    number 
    Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
    colspan
    number
    Specifies the number of columns a cell should span
    headers
    header_id
    Specifies one or more header cells a cell is related to
    height
    pixels
    %
    Not supported in HTML5. Deprecated in HTML 4.01.
    Sets the height of a cell
    nowrap
    nowrap
    Not supported in HTML5. Deprecated in HTML 4.01.
    Specifies that the content inside a cell should not wrap
    rowspan
    number
    Sets the number of rows a cell should span
    scope
    col
    colgroup
    row
    rowgroup
    Not supported in HTML5. Defines a way to associate header cells and data cells in a table
    valign
    top
    middle
    bottom
    baseline
    Not supported in HTML5. Vertical aligns the content in a cell
    width
    pixels
    %
    Not supported in HTML5. Deprecated in HTML 4.01. Specifies the width of a cell









    HTML TR Tag


    Flowchart: Alternate Process: <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
     








    Attribute yang digunakan pada tag <TR>
    Attribute
    Value
    Description
    align
    right
    left
    center
    justify
    char
    Not supported in HTML5. Aligns the content in a table row
    bgcolor
    rgb(x,x,x)
    #xxxxxx
    colorname
    Not supported in HTML5. Deprecated in HTML 4.01. Specifies a background color for a table row
    char
    Character
    Not supported in HTML5. Aligns the content in a table row to a character
    charoff
    Number
    Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
    valign
    top
    middle
    bottom
    baseline
    Not supported in HTML5. Vertical aligns the content in a table row







    HTML Thead Tag
    tag <thead> digunakan untuk konten grup header di tabel HTML.

    Unsur <thead> digunakan dalam hubungannya dengan unsur-unsur <tbody> dan <tfoot> untuk menentukan setiap bagian dari tabel (header, body, footer).

    Browser dapat menggunakan elemen-elemen untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.

    Tag <thead> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, dan elemen <colgroup>, dan sebelum <tbody>, <tfoot>, dan <tr>
    elemen.

    Contoh penggunaan Thead:


    Rounded Rectangle: <table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
     
















    Continue Reading
    Newer
    Stories
    Older
    Stories

    About me

    Photo Profile
    Melyana Sari Fransisca You can call me Mels.

    Im Bataknese, Catholic, Ugly, Sarcasm is my language, Meme is my life. Read More

    Instagram

    @melyanandp

    Twittwit

    Tweets by @melyanasarii

    recent posts

    Labels

    Beauty Competition Knowledge Mind Recommendation Review Sharing Travel

    Blog Archive

    • Agustus 2020 (1)
    • Mei 2020 (1)
    • Juli 2019 (1)
    • Maret 2019 (2)
    • Agustus 2018 (2)
    • Mei 2018 (1)
    • April 2018 (1)
    • Maret 2018 (7)
    • Februari 2018 (1)
    • Desember 2016 (2)
    • Juli 2016 (1)
    • Januari 2016 (1)
    • November 2015 (1)
    • Oktober 2015 (1)
    • Agustus 2015 (1)
    • September 2013 (2)
    • Juni 2013 (1)
    • April 2013 (3)
    • Maret 2013 (1)
    • Februari 2013 (8)
    • Januari 2013 (1)
    • Desember 2012 (17)
    • November 2012 (12)

    Popular Posts

    • Cetaphil Gentle Skin Cleanser [Review]
    • Apa itu Resting Bitch Face?
    facebook Twitter instagram google plus

    Created with by BeautyTemplates | Modified By Me :)

    Back to top