Struktur Dasar HTML
Dari pada nganggur, mau ngerjain tugas juga masih males mendingan ngebuat postingan sambil mengingat-ingat matkul semester lalu hehe :-)
Di postingan sebelumnya kita sudah membahas tentang Pengertian HTML sekarang kita lanjutkan dengan postingan Struktur - Struktur HTML, dari pada kebanyaka ngomong mendingan langsung saja ke materi ya.
Struktur Dasar HTML
Secara umum document WEB dibagi menjadi dua bagian yaitu head dan body, sehingga setiap document HTML harus mempunyai head dan body seperti contoh dibawah ini :
<html>
<head>
// Di isi dengan informasi documen
</head>
<body>
// Di isi dengan informasi yang akan ditampilkan dalam web //
</body>
</html>
Keterangan :
Elemen head diisi dengan informasi tentang document misalkan judul dari web kita, yang akan di tampilkan dengan tag berikut <title> ... </title> adapun cara penggunaanya dan peletakkanya dapat dilihat pada contoh berikut ini :
<html>
<head>
<title> Judul HTML </title>
</head>
<body>
</body>
</html>
Elemen body diisi dengan informasi yang akan ditampilkan pada web browser, Contoh seperti berikut:
<html>
<head>
<title> Judul HTML </title>
</head>
<body>
Selamat Datang Di Program HTML pertamaku
</body>
</html>
Sintak-Sintak Dasar HTML
Sintak-sintak dasar yang dimiliki oleh HTML diantaranya yaitu :
Paragraf
Paragraf berfungsi untuk mengganti paragraf, membuat paragraf baru atau untuk mengatur antar paragraph pada halaman web anda. Untuk menggunakan paragraf dapat dilakukan dengan cara menuliskan tag <p> dan di akhiri dengan tag </p> .
Adapun dalam elemen paragraf ini memiliki atribut-atribut: align = (left | right | center ) yang berfungsi untuk mengatur perataan paragraf, jika paragraf anda ingin rata kiri maka anda memilih align=”left” dan seterunya, jadi anda cukup memilih satu atribut dari ketiga atribut diatas. Contohnya seperti berikut :
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<p align=”left”>Selamat Datang Di Program HTML pertamaku </p>
<p align=”right”>Selamat Datang Di Program HTML pertamaku </p>
<p align=”center”>Selamat Datang Di Program HTML pertamaku </p>
</body>
</html>
Break
Break ini berfungsi untuk mengganti baris dalam paragraf, Untuk menggunakan break dapat dilakukan dengan cara menuliskan tag <br> atau dengan <br />. Contohnya seperti berikut :
<html>
<head>
<title> Sintak Break </title>
</head>
<body bgcolor="Green" >
<p align=”left”>Selamat Datang Di Program HTML Pertamaku <br /> Belajar HTML Itu Ternyata Menyenangkan <br /> dan Tidak Membosankan</p>
</body>
</html>
Heading
Heading ini berfungsi untuk memformat heading (judul dan subjudul) dari suatu halaman web, heading ini memiliki enam jenis yang yang berukuran beda dan tercetak tebal, yaitu (h1) sampai dengan (h6). Untuk menggunakan heading dapat dilakukan dengan cara menuliskan tag <h1> atau dengan </h1>. Contohnya seperti berikut :
<html>
<head>
<title> Sintak Heading </title>
</head>
<body bgcolor="Green" >
<h1> Heading Pertama </h1>
<h2> Heading Kedua </h2>
<h3> Heading Ketiga </h3>
<h4> Heading Keempat </h4>
<h5> Heading Kelima </h5>
<h6> Heading Keenam </h6>
</body>
</html>
Hasilnya seperti ini :
Gambar : contoh heading
List
List ini berfungsi untuk mengelompokkan kata atau untuk membuat suatu daftar tertentu. List ini ada dua jenis yaitu ordered list dan unordered list.
Adapun ordered list digunakan untuk membuat daftar yang setiap bagiannya memiliki nomor secara terurut. Untuk menggunakan ordered list dapat dilakukan dengan cara menuliskan tag <ol> dan diakhiri dengan tag </ol> dan untuk menuliskan tiap-tiap bagianya dilakukan dengan cara menuliskan tag <li> dan diakhiri dengan tag </li>, tetapi tanpa diakhiri dengan tag </li> juga bisa. Ordered list ini memiliki atribut-atribut elemen list yaitu : TYPE = (1 | I | i | A | a |) defaultnya adalah 1. Contohnya seperti berikut :
<html>
<head>
<title> Sintak Ordered List </title>
</head>
<body bgcolor="Green" >
<ol type="I">
<li>Jadwal Kuliah</li>
<ol type="1" start="1">
<li>Tecnopreunersip</li>
<li>Pemrograman Berorientasi Obyek</li>
<li>Pemrograman WEB</li>
<li>Etika Profesi</li>
<li>Rised Operasi</li>
</ol>
</ol>
</body>
</html>
Hasilnya seperti ini :
Gambar : contoh ordered list
Sedangkan unordered list (bulet) digunakan untuk membuat daftar yang tidak memiliki urutan. Untuk menggunakan unordered list dapat dilakukan dengan cara menuliskan tag <ul> dan diakhiri dengan tag </ul> dan untuk menuliskan tiap-tiap bagianya dilakukan dengan cara menuliskan tag <li> dan diakhiri dengan tag </li>, tetapi tanpa diakhiri dengan tag </li> juga bisa. Unordered list ini memiliki atribut-atribut elemen list yaitu : TYPE = (disc | squre | circle) defaultnya adalah disc. Contohnya seperti berikut :
<html>
<head>
<title> Sintak Unordered List </title>
</head>
<body bgcolor="Green" >
<ul type="disc">
<li>Jadwal Kuliah</li>
<ul type="circle">
<li>Tecnopreunersip</li>
<li>Pemrograman Berorientasi Obyek</li>
<li>Pemrograman WEB</li>
<li>Etika Profesi</li>
<li>Rised Operasi</li>
</ul>
</ul>
</body>
</html>
Hasilnya seperti ini :
Gambar : contoh unordered list
Bentuk Format-Format Karakter HTML
Karakter-karakter didalam halaman web dapat kita buat yang menarik dan sesuai denga kesukaan kita, adapun format-format karakter tersebut yang sering digunakan sebagai berikut :
Physical Format
Adalah format-format karakter yang digunakan untuk membentuk suatu font, adapun tag-tagnya sebagai berikut :
1. <b> berfungsi untuk menampilkan huruf tebal (bold).
2. <i> berfungsi untuk menampilkan huruf miring (italic).
3. <u> berfungsi untuk menampilkan huruf bergaris bawah (underline).
4. <strike> atau <del> berfungsi untuk menampilkan huruf bergaris tengah.
5. <tt> berfungsi untuk menampilkan huruf seperti huruf mesin ketik.
6. <small> berfungsi untuk menampilkan ukuran huruf lebih kecil dari ukuran aslinya.
7. <big> berfungsi untuk menampilkan ukuran huruf lebih besar dari ukuran aslinya.
8. <sup> berfungsi untuk menampilkan superscript.
9. <sub> berfungsi untuk menampilkan subscript.
Contohnya seperti berikut :
<html>
<head>
<title> Phisical Format </title>
</head>
<body bgcolor="Green" >
<b>Ini Tulisan Yang Tercetak Tebal</b><br />
<i>Ini Tulisan Yang Tercetak Miring</i> <br />
<u>Ini Tulisan Yang Tercetak Bergaris Bawah</u> <br />
<del>Ini Tulisan Yang Tercetak Bergaris Tengah</del> <br />
<tt>Ini Tulisan Yang Tercetak Seperti Tampilan Huruf Mesin</tt> <br />
<small>Ini Tulisan Yang Tercetak Lebih Kecil</small> <br />
<big>Ini Tulisan Yang Tercetak Lebih Besar</big> <br />
<sup>Ini Tulisan Yang Tercetak Sebagai Superscript</sup> <br />
<sub>Ini Tulisan Yang Tercetak Sebagai Subscript</sub> <br />
</body>
</html>
Hasilnya seperti ini :
Gambar : physical format
Itulah tadi struktur-struktur dasar HTML yang perlu diketahui sebelum memperdalam Pemrograman WEB, sekian dulu yah di postingan ini, kapan2 insa'allah kita lanjutkan di postingan yang berbeda.
Terimakasih atas kunjungannya, semoga bermanfaat amin amin amin ya Robbal'alamin.
Terimakasih atas kunjungannya, semoga bermanfaat amin amin amin ya Robbal'alamin.
0 komentar:
Posting Komentar