HTML Tingkat Dasar
Latihan Membuat Web Untuk Pemula
Pengenalan Internet
Internet atau International Networking merupakan dua komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia (internasional) yang saling berinteraksi dan bertukar informasi.Pengenalan WEB
World Wide Web (WWW) atau lebih dikenal dengan Web, merupakan salah satu layanan internet yang didapatkan oleh pemakai komputer yang terhubung ke internet.Web saat ini memiliki beberapa fungsi pelayanan seperti penyedia informasi, penyedia layanan komunikasi (email, chatting) sampai dengan penyedia layanan transaksi bisnis (commerce).
WWW bekerja berdasarkan tiga mekanisme, yaitu:
- Protokol : Aturan standar yang digunakan untuk berkomunikasi pada jaringan komputer. Misalnya HTTP (Hypertext Transfer Protokol) adalah protokol untuk WWW.
- Address : WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) sebagai standar alamat internet.
- HTML : Digunakan untuk membuat dokumen yang bisa diakses melalui internet.
Aplikasi Web sendiri dibagi menjadi dua, yaitu :
- Web Statis : Web yang dibentuk menggunakan HTML saja. Perubahan data dalam Web dilakukan secara manual dan membutuhkan manusia (human taste). Untuk perubahan data dalam Web, maka Script yang lama harus selalu disalin dan tetap disimpan dalam server yang berakibat menumpuknya file dan dapat memenuhi space harddisk.
- Web Dinamis : Web yang dibentuk dengan menggunakan perangkat lunak tambahan, misalnya Oracle sebagai database-nya, PHP, CSS, dan lain lain. Sehingga perubahan data dalam Web dapat dilakukan tanpa harus merubah script.
- Server Side Scripting adalah sekumpulan script yang diproses pada sisi server. Contoh penggunaannya yaitu pada PHP dan ASP.
- Client Side Scripting adalah sekumpulan script yang pemrosesannya dilakukan pada sisi client. Contoh: JavaScript, CSS, HTML, dan lain-lain.
Hypertext Markup Language (HTML)
Hypertext Markup Language (HTML) merupakan standar bahasa yang digunakan untuk menampilkan sebuah halaman Web. Beberapa hal yang bisa kita lakukan dengan menggunakan HTML:- Mengontrol tampilan sebuah halaman Web dan content-nya.
- Menambahkan object-object seperti image, video, atau audio dalam halaman Web.
- Membuat online form yang bisa digunakan untuk menangani pendaftaran atau transaksi secara online.
Ciri ciri HTML
Sebuah HTML memiliki beberapa ciri-ciri sebagai berikut:- Tersusun oleh tag-tag sebagai penanda (karena ini maka disebut markup language) misal <html>...</html>.
- Pada umumnya tag selalu mempunyai tag pembuka seperti di atas <html> dan tag penutup </html>, namun beberapa tag yang tidak mempunyai penutup dapat menggunakan tanda slash ( / ), misal <br />, <hr />.
- Tidak case sensitive (huruf kapital dan kecil dianggap sama), akan tetapi untuk hasil yang lebih baik menggunakan lowercase (huruf kecil) karena berorientasi ke XHTML.
- Ekstensi file berupa *.html atau *.htm
Struktur HTML
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
Isi Dokumen
</body>
</html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
Isi Dokumen
</body>
</html>
- <html></html> : Menandai awal dan akhir dokumen HTML
- <head></head> : Sebagai informasi page header, di dalam tag ini kita dapat meletakkan:
- <title></title>
Untuk membuat judul sebuah halaman web - <script></script>
Untuk menyertakan beberapa (client-side) script, semisal JavaScript - <style></style>
Untuk mengatur bagaimana tata letak sebuah halaman web
- <title></title>
- <body></body> : Bagian dari dokumen HTML yang akan ditampilkan ke dalam sebuah browser. Bagian ini dapat memuat teks, gambar, link, multimedia, table, atau Server Side Script.
Bentuk tag HTML
<element attributte = "value">Keterangan :
Element = nama tagContoh :
Attribute = atribut dari tag
Value = nilai dari atribut
| <body | bgcolor | = | "value"> |
| ↓ | ↓ | ↓ | |
| Element | attribute | value | |
Sedangkan program yang berfungsi untuk menerjemahkan dokumen HTML menjadi sebuah halaman web dinamakan browser. Contoh browser yang sering digunakan adalah Internet Explorer, Mozilla Firefox, Opera, Google Chrome, dan sebagainya.
Elemen HTML Dasar
► Heading
Untuk mengatur ukuran teks yang dijadikan sebagai judul atau sub judul. HTML menyediakan enam tingkat heading, yaitu dari <h1> sampai <h6>.Untuk latihan ketikkan script berikut dan simpan dengan nama "heading.html"
<html>
<head>
<title>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>
</html>
<head>
<title>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>
</html>
Hasil dari script di atas :
heading.html
► Paragraph
Untuk membuat text berada dalam sebuah paragraf. Antara paragraf satu dan lainnya akan ada pembatas baris kosong sebelum dan sesudahnya. Untuk mengatur posisi paragraf menggunakan atribut ALIGN.Untuk latihan ketikkan script berikut dan simpan dengan nama "paragraph.html"
<html>
<head>
<title>paragraph</title>
</head>
<body>
<p>Paragraph pertama</p>
<p>Paragraph kedua</p>
<p>Paragraph ketiga</p>
</body>
</html>
<head>
<title>paragraph</title>
</head>
<body>
<p>Paragraph pertama</p>
<p>Paragraph kedua</p>
<p>Paragraph ketiga</p>
</body>
</html>
Hasil dari script di atas :
paragraph.html
► Format teks
Untuk menampilkan teks dalam bentuk yang kita inginkan, seperti cetak tebal, miring, bergaris bawah atau kombinasi diantaranya. HTML menyediakan banyak elemen untuk memformat teks. Elemen-elemen tersebut dikelompokkan dalam dua bagian, yaitu Physical Formatting untuk memformat teks secara karakteristik fisik teks, dan Logical Formating untuk memformat teks menurut isi atau kandungan teks, biasanya digunakan untuk memberikan penekanan pada suatu kata atau kalimat.tabel Physical Formatting
| Tag awal | Kegunaan | Hasil |
| <b> | Menampilkan teks ditebalkan | teks |
| <i> | Menampilkan teks yang miring | teks |
| <u> | Menampilkan teks bergaris bawah | teks |
| <big> | Menampilkan teks yang lebih besar ukurannya satu tingkat | teks |
| <small> | Menampilkan teks yang lebih kecil ukurannya satu tingkat | teks |
| <strike> | Menampilkan teks yang dicoret | |
| <sub> | Menampilkan teks yang jadi subscript | ...teks |
| <sup> | Menampilkan teks yang jadi superscript | ...teks |
tabel Logical Formatting
| Tag awal | Kegunaan | Hasil |
| <em> | Menampilkan teks dalam bentuk miring | teks |
| <strong> | Menampilkan teks yang ditebalkan | teks |
| <del> | Menampilkan teks yang dicoret | |
| <ins> | Menampilkan teks bergaris bawah | teks |
Untuk latihan ketikkan script berikut dan simpan dengan nama "formatting_teks.html"
<html>
<head>
<title>Formatting Teks</title>
</head>
<body>
<p>Teks ini
<b> tebal </b>,
<i> miring </i>,
<u> bergaris bawah </u>,
<u><i> kombinasinya </i></u>,
<sub> subscript </sub>, dan
<sup> superscript </sup>
</p>
</body>
</html>
<head>
<title>Formatting Teks</title>
</head>
<body>
<p>Teks ini
<b> tebal </b>,
<i> miring </i>,
<u> bergaris bawah </u>,
<u><i> kombinasinya </i></u>,
<sub> subscript </sub>, dan
<sup> superscript </sup>
</p>
</body>
</html>
Hasil dari script di atas :
formatting_teks.html
► Style
Untuk memberikan style ke dalam elemen-elemen HTML. Beberapa atribut yang dapat digunakan dalam style antara lain jenis huruf (font-family), warna (color), ukuran (size), atau align.Untuk latihan ketikkan script berikut dan simpan dengan nama "style.html"
<html>
<head>
<title>Style</title>
</head>
<body>
<h3 style="text-align:center">
Judul Di Tengah
</h3>
<p style="font-family:verdana; color:red; font-size:20px">
Tulisan ini Verdana berwarna merah dan berukuran 20 pixel
</p>
</body>
</html>
<head>
<title>Style</title>
</head>
<body>
<h3 style="text-align:center">
Judul Di Tengah
</h3>
<p style="font-family:verdana; color:red; font-size:20px">
Tulisan ini Verdana berwarna merah dan berukuran 20 pixel
</p>
</body>
</html>
Hasil dari script di atas :
style.html
Visit Wahyudi Blog !
Tidak ada komentar:
Posting Komentar
Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...
Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^