Seorang programmer yang handal anda harus mengetahui dasar-dasar pembuatan website sederhana. salah satunya yaitu belajar membuat web dengan HTML karena bahasa markupnya sangat mudah untuk dipahami. Membuat web statis dapat dijadikan pilihan untuk belajar sebagai pemula. Hal tersebut karena web statis memiliki konten yang tidak dapat diubah dengan cara yang instan dipelajari materi pada modul berikut dengan saksama.
A. A.STRUKTUR HTML
1. Elemen Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dan sebagainya. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri tanda “>” sebagai tanda akhir penulisan sebuah elemen. Format penulisan sebuah elemen adalah sebagai berikut.
<tag_awal_nama_elemen>
“isi script program html”
</tag_akhir_nama_elemen>
Tidak semua elemen dalam dokumen HTML dalam penulisannya harus menggunakan tag awal dan akhir secara berpasangan. Contohnya adalah sebagai berikut:
~ untuk mencetak garis horizontal menggunakan tag <hr>
~ untuk mencetak kalimat pada baris selanjutnya menggunakan tag <br>
~ penomoran sebuah daftar teks menggunakan list item dengan tag <li>
~ pembuatan format teks dalam bentuk paragraph menggunakan tag <p>
Kelebihan dokumen web berbasis HTML adalah kemampuan untuk mendukung penulisan script bahasa pemrograman web lainnya dalam badan HTML seperti Vbscript, JavaScript, PHP, ASP, dan Ajax.
2. Bagian Head
Bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik judul halaman, konten, jenis halaman, dan jenis karatket penulisan. Diawali dengan <head> diakhiri dengan </head>. Contoh:
<head>
<title>ini adalah halaman web</title>
</head>
Penjelasan:
~ <head> = sebagai awal penanda script bagian head HTML
~ <title> = sebagai awal tanda judul sebuah halaman web
~ ini adalah halaman web = judul halaman web yang akan ditampilkan
~ </title> = tag akhir title
~ </head> = tag akhir head
3. Bagian Body
Diawali dengan <body> diakhiri dengan </body>. Perhatikan contoh script berikut:
<body>
Isi halaman web
</body>
<!—file studikasus2-1.html-->
<html>
<head>
<title>ini biodataku</title>
</head>
<body>
Ini adalah web pertama saya dengan html
</body>
<html>
4. Mengganti Baris
Untuk mencetak baris selanjutnya menggunakan tag <br>.
~ mencetak kalimat tanpa tag <br>
<!—file studikasus2-2.html-->
<html>
<head>
<title>mencetak halaman web tanpa tag br</title>
</head>
<body>
NIS : 110211178
Nama : Farah Dea Fanny
Kelas : XII TKJC
</body>
</html>
~ mencetak kalimat dengan tag <br>
<!—file studikasus2-3.html-->
<html>
<head>
<title>mencetak halaman web dengan br</title>
</head>
<body>
NIS : 110211178 <br>
Nama : Farah Dea Fanny <br>
Kelas : XII TKJC
</body>
</html>
5. Membentuk Paragraf
Dengan memberikan tanda tag awal paragraf <p> diikuti teks yang akan ditampilkan pada web browser dan diakhiri tag akhir paragraf </p>, maka informasi teks akan disusun menyerupai model paragraf.
6. Garis Horizontal
Untuk membuat garis horizontal menggunakan tag <hr>.
<!—file studikasus2-6.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar.
</body>
</html>
7. Membuat Komentar
Untuk menambahkan komentar diawali dengan tanda “<!—“ diikuti komentar kemudian diakhiri dengan tanda “-->”
<!—file studikasus2-7.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar. <!—konten halaman web-->
</body>
</html>
B. B.FORMAT TEKS
1. Memanipulasi Tampilan Teks pada Halaman Web
a. Mencetak tebal teks : <b>teks</b>
b. Mencetak tebal teks dengan strong : <strong>teks</strong>
c. Mencetak miring teks : <i>teks</i>
d. Mencetak teks bergaris bawah : <u>teks</u>
e. Memberi tekanan teks : <em>teks</em>
f. Membesarkan huruf : <big>teks</big>
g. Mengecilkan huruf : <small>teks</small>
h. Mencetak superscript teks : <sup>teks</sup>
i. Mencetak subscript teks : <sub>teks</sub>
j. Mencetak teks berkedip : <blink>teks</blink>
k. Mencetak teks berjalan : <marquee>teks</marquee>
l. Mencetak teks dengan coretan : <s>teks</s>
2. Format Heading
Fungsi utama heading adalah untuk mengatur besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul atau tema informasi yang terdapat pada halaman web. Penulisan heading diawali dengan tag <h1> dan diakhiri dengan tag </h1> ,dengan formasi heading yang memiliki 6 ukuran dari 1 sampai 6.
3. Bentuk Preformat teks
Seperti telah dijelaskan sebelumnya bahwa untuk mencetak teks pada baris selanjutnya digunakan tag <br>, sementara untuk format paragraf menggunakan tag <p>. Besar jarak spasi antarbaris dalam halaman web adalah 1 spasi, sehingga ketika ingin menambahkan jaraknya menjadi 2 spasi, perlu ditambahkan tag <br>. Dalam HTML fungsi preformat teks yang berguna untuk mencetak teks pada web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program HTML bagian body dengan menambahkan tag awal <pre> dan diakhiri tag </pre>.
4. Format Address
Tag <address> merupakan standar kode HTML yang digunakan untuk penulisan sebuah alamat institusi yang berfungsi sebagai informasi kontak sebuah institusi. Hasil output yang ditampilkan akan dicetak miring, dan ketika penulisan alamat lebih dari satu baris, maka harus diserakan tag ganti baris.
5. Format Keluaran Program Komputer
Bebrapa script HTML yang dapat digunakan untuk mendefinisikan proses secara komputerisasi adalah sebagai berikut.
~ <code>...</code> = untuk mendefinisikan kode pogram tertentu yang ditampilkan pada web page
~ <var>...</var> = untuk mendefinisikan variabel dalam program
~ <samp>...</samp> = untuk mendefinisikan contoh keluaran program
~ <tt>...</tt> = untuk mendefinisikan teletype text
6. Format Abbr dan Acronym
Tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Ini sering digunakan untuk mempersingkat sebuah istilah dengan tujuan mempermudah pengguna ketika menjelajah internet dalam mencari keyword tertentu.
7. Mengubah Arah Tampilan Teks
Untuk mengubah arah tampilan penulisan teks dari kanan ke kiri menggunakan <bdo>. Secara default web browser akan mencetak teks dari arah kiri menuju ke kanan, sebagai contoh “selamat datang”. Dengan tag <bdo dir=”rtl”>, maka hasil penulisannya menjadi terbalik. Argument rtl digunakan untuk menulis teks dari arah kanan ke kiri (right to left), sedangkan argument ltr digunakan untuk menulis teks dari arah kiri ke kanan (left to right).
8. Membuat Kutipan Teks
a. Tag <q> digunakan untuk membuat kutipan pendek. Kutipan menggunakan tag <q> akan ditulis tanpa menjorok ke dalam halaman web. Selain itu kutipan diawali dengan tanda petik dua (“) dan diakhiri dengan tanda petik dua (“)
b. Tag <blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali dengan penulisan teks secara menjorok kedalam.
9. Penyisipan dan Penghapusan Teks
Untuk menghapus data salah, dapat digunakan tag <del> yang memiliki efek teks dicoret tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag <s> seperti yang telah dijelaskan pada subbab sebelumnya. Untuk melakukan koreksi informasi yang salah pada web, dapat digunakan tag <ins> yang memiliki efek tulisan bergaris bawah seperti efek tulisan dengan tag <a href=” “>
C. C.LIST HTML
List berarti daftar, ukuran, rangkaian, atau menu. List HTML merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1. List Bernomor Urut (Ordered List)
List bernomor adalah teknik menampilkan daftar tertentu dalam halaman web menggunakan item penomoran, seperti 1,2,3 hingga seterusnya. Untuk menggunakan List bernomor, digunakan tag <ol> dan diakhiri dengan </ol>.
Argumen | Fungsi |
I | Untuk menampilkan nomor urut dengan angka dalam romawi besar (I,II,III, dan seterusnya) |
i | Untuk menampilkan nomor urut dengan angka dalam romawi kecil (i,ii,iii, dan seterusnya |
a | Untuk menampilkan nomor urut dengan menggunakan abjad kecil (a,b,c,d, dan seterusnya) |
A | Untuk menampilkan nomor urut dengan menggunakan abjad besar (A,B,C,D, dan seterusnya) |
2. List Tanpa Urutan Nomor (Unordered List)
Untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran dapat menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda unordered list seperti berikut
Argumen | Fungsi |
Disc | Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) tanpa warna pada sisi tengahnya |
Square | Untuk menampilkan pengurutan dengan tanda kotak hitam penuh |
Circle | Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) hitam penuh |
3. List Bersarang
<!—file studikasus2-20.html-->
<html>
<head>
<title>list bersarang</title>
</head>
<body>
Menu bersarang
<ol>
<li>daging</li>
<ul>menu ayam
<li>ayam bakar</li>
<li>bebek panggang</li>
</ul>
<li>sayur</li>
<ol>menu sayur
<li>sayur sup</li>
<li>sayur sup</li>
</ol>
</body>
</html>
4. List Terdefinisi
List terdefinisi (definition list) adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>. Untuk menyatakan terminasi sub list digunakan tag <dt> dan diakhiri dengan </dt>, sedangkan untuk menjelaskan pengertian dari sub list yang telah dijelaskan sebelumnya digunakan tag <dd> dan diakhiri dengan </dd> yang memiliki efek penulisan teks agak menjorok kedalam.
Tidak ada komentar:
Posting Komentar