Scribd Logo
Unggah

Selamat datang di Scribd!

  • Elemen Dasar

    Diunggah oleh

    Al Hur Husain
    14 tayangan7 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan7 halaman

    Elemen Dasar

    Diunggah oleh

    Al Hur Husain

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    ELEMEN DASAR

    Jenis Dokumen <HTML></HTML> (terdapat pada awal dan akhir dari


    file HTML)
    Judul <TITLE></TITLE> (harus selalu terdapat pada
    mukadimah)
    Mukadimah <HEAD></HEAD> (keterangan umum, seperti judul
    (Header) dsb.)
    Batang Tubuh <BODY></BODY> (isi dari halaman HTML)
    FORMAT TAMPILAN
    Huruf Tebal <B></B> (Bold)
    Huruf Miring <I></I> (Italic)
    Garis Bawah <U></U> (Underline – jarang
    digunakan)
    Rata Tengah <CENTER></CENTER> (Center – berlaku untuk teks
    maupun gambar)
    Huruf Kedip <BLINK></BLINK> (Blinking – tag terlucu sampai
    kini)
    Ukuran Huruf <FONT SIZE=?></FONT> (Font Size – boleh diisi dari 1
    sampai 7)
    Warna Huruf <FONT COLOR=”#$$$$$
    $”></FONT>
    Pilih Jenis Huruf <FONT FACE=”***”></FONT>
    PEMISAH
    Paragraf <P></P> (tag penutup seringkali
    tak diperlukan)
    Align Text <P ALIGN=LEFT|CENTER|
    RIGHT></P>
    Pndah Baris <BR> (pindah ke baris berikut)
    Garis Datar <HR> (Horizontal Rule)
    Penataan Letak <HR ALIGN=LEFT|RIGHT|
    Garis CENTER>
    Tebal Garis <HR SIZE=?> (dalam satuan pixel)
    Lebar Garis <HR WIDTH=?> (dalam satuan pixel)
    Lebar Garis <HR WIDTH=”%”> (dalam persentasi
    Persentasi terhadap lebar halaman)
    LATAR BELAKANG DAN WARNA
    Latar Belakang <BODY (Tiled Background)
    Gambar BACKGROUND=”URL”>
    Warna Latar <BODY BGCOLOR=”#$$$$$ (Background Color – urutan:
    Belakang $” merah/hijau/biru)
    Warna Huruf Teks <BODY TEXT=”#$$$$$$”>
    TABEL
    Rancangan Tabel <TABLE></TABLE>
    Garis Batas Tabel <TABLE BORDER=?></TABLE>
    Lebar Tabel <TABLE WIDTH=?> (dalam satuan pixel)
    Lebar Tabel <TABLE WIDTH=”%”> (dalam satuan persen
    Persentasi terhadap lebar halaman)
    Baris dalam Tabel <TR></TR>
    Penataan Letak <TR ALIGN=LEFT|RIGHT|
    Baris CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>
    Sel dalam Tabel <TD></TD> (harus ada dalam setiap
    baris tabel)
    Penataan Letak <TD ALIGN=LEFT|RIGHT|
    Sel CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>
    Kepala Tabel <TH></TH> (Table Header – seperti
    data dengan Bold dan
    Center)
    Penataan Letak <TH ALIGN=LEFT|RIGHT|
    Kepala Tabel CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>
    Warna Kepala <TH BGCOLOR=”#$$$$$$”>
    Tabel
    1. Dasar dasar HTML
    1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:
    <html>
    <head>

    <title> My First HTML Project </title>

    </head>

    <body BGCOLOR=“Green” TEXT=“Red”>

    WELCOME TO MY WEBSITE

    </body>

    <body bgcolor=”#00ff00”>

    </html>

    Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya
    akan seperti pada gambar 1 berikut:

    Gambar 1.  Judul Tab Halaman

    2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
    <html>

    <head>

    <title> Tag P, Br dan Hr </title>

    </head>

    <body>

    <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>

    <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

    <hr> Ini adalah garis horizontal.

    </body>

    <body bgcolor=”#00ff00”>

    </html>

    Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya
    akan seperti pada gambar 2 berikut:
    Gambar 2. Mengatur Paragraf

    3. Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:
    <html>

    <head>

    <title> Tag Heading </title>

    </head>

    <body>

    <h1> Heading 1 </h1>

    <h2> Heading 2 </h2>

    <h3> Heading 3 </h3>

    <h4> Heading 4 </h4>

    <h5> Heading 5 </h5>

    <h6> Heading 6 </h6>

    </body>

    <body bgcolor=”#00ff00”>

    </html>

    Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya
    akan seperti pada gambar 3 berikut:
    Gambar 3.  Ukuran Huruf

    4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:
    <html>

    <head>

    <title>format tulisan</titele>

    </head>

    <body>

    teks normal <br>

    <small> teks small </small><br>

    <big> teks big</big><br>

    <b> teks tebal </b><br>

    <i> teks miring </i><br>

    <u> teks bergaris bawah </u><br>

    Contoh superscript : x <sup>2</sup><br>

    Contoh subscript : H<sub>2</sub>O<br>

    <strike> Ini teks tercoret </strike><br>

    <font size = 5 face = verdana>

    menggunakan tag font

    </font>

    </body>

    <body BGCOLOR =”#00FF00″>

    </html>

    Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya
    akan seperti pada gambar 4 berikut:

    Gambar 4. Format tulisan


    5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:
    <html>

    <head>

    <title> From komentar </title>

    </head>

    <body>

    <table>

    <tr>

    <tdcolspan=”3″>&nbsp;</td></tr><tr>
    <td colspan=”3″><h3>Silahkan Berkomentar : </h3></td>

    </tr>

    <tr>

    <td>Nama</td>

    <td>:</td>

    <td><input type=text name=”nama”></td>

    </tr>

    <tr>

    <td>Email</td>

    <td>:</td>

    <td><input type=text name=”email”></td>

    </tr>

    <tr>

    <td valign=top>Komentar</td>

    <td valign=top>:</td>

    <td><textarea name=”komentar” rows=6 width=200></textarea></td>

    </tr>

    <tr>

    <td colspan=”3″><input type=submit name=”submit”

    value=submit></td>

    </tr>
    </table>

    </body>

    <body BGCOLOR =”#00FF00″>


    </html>

    Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya
    akan seperti pada gambar 5 berikut:

    Gambar 5. From komentar

    6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:


    <html>

    <head>

    <title>warna-warna</title>

    </head>

    <body>

    <table width=”300″ border=”1″>

    <tr>

    <td colspan=”3″ align=”center”>warna-warna </td>

    </tr>

    <tr>

    <td bgcolor=”#00FF00″>Hijau</td>

    <td bgcolor=”#FFFF00″>Kuning</td>

    <td bgcolor=”#FF0000″>Merah </td>

    </tr>

    <tr>

    <td bgcolor=”#999999″>Abu-abu</td>

    <td bgcolor=”#0000FF”>Biru</td>

    <td bgcolor=”#FF9900″>Orange</td>

    </tr>

    <tr>
    <td bgcolor=”#663300″>Cokelat</td>

    <td bgcolor=”#3399CC”>Biru muda</td>

    <td bgcolor=”#FF00FF”>Merah muda</td>

    </tr>

    </table>

    </body>

    <body BGCOLOR =”#00FF00″>

    </html>

    Anda mungkin juga menyukai