Mempelajari Tentang HTML
A. Struktur Dasar Text HTML
1) Elemen Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dsb. Elemen html ditandai dg simbol “tag”. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri “>” sebagai tanda akhir penulisan sebuah elemen.
2) Bagian Head
bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik judul halaman, konten, jenis halaman, dan jenis karakter penulisan. Bagian head selalu diawali dengan tag awal <head> dan diakhiri dengan tag akhir </head>.
contoh :
<head>
<totle>ini halaman we baru</title>
</head>
penjelasan :
· <head>
Digunakan sebagi awal penanda script bagian head HTML.
· <title>
sebagai awal tanda judul sebuah halaman web
· Ini halaman web baru
judul halaman yang akan ditampilkan pada web browser
· </title>
tag akhir title
· </head>
tag akhir head
3) Bagian body
pada bagian body, semua script html akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halam web html selalu diawali tag <body> dan diakhiri tag </body>.
4) Mengganti baris
script program html yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris oleh karenea itu diperlukan script tamabahan untuk mencetak pada baris selanjutnya dengan tag <br>
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 dapat menggunakan tag <hr>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah.
</body>
</html>
7) Membuat komentar
untuk menambahkan komentar diawali dengan tanda “<!—“ diikuiti komentar kemudian diakhiri dengan tanda “-->”
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah. <!—konten halaman web-->
</body>
</html>
B. FORMAT TEXT HTML
teks adalah informasi yang ditampilkan dalam halaman web yang terdiri atas gabungan karakter alfabet, numerik dan simbol-simbol khusus yang terdapat dalam kode ASCII
1) Memanipulasi tampilan teks pada halaman web
· Mencetak tebal teks
format: <b>teks dicetak tebal</b>
· Mencetak tebal teks dengan tag strong
format: <strong>teks dicetak tebal strong</strong>
· Mecetak miring teks
format: <i>teks dicetak miring</i>
· Mencetak teks bergaris bawah
format: <u>teks dicetak dengan garis bawah</u>
· Memberi tekanan teks
format: <em>teks tekanan</em>
· Membesarkan huruf
format: <big>hsjgshakj</big>
· Mengecilkan huruf
<small>hakjgkhdgkha</small>
· Mencetak superscript teks
format: <sup>hgsiafif</sup>
· Mencetak subscript teks
format: <sub>jajhdkhfkj</sub>
· Mencetak teks berkedip
format: <blink>jhwougfougwg</blink>
· Mencetak teks berjalan
format: <marquee>jjewgvgohwoho</marquee>
· Mencetak teks dengan coretan
format: <s>jwhkeg3wgih</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 sampai dengan 6 ukuran.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>heading</title>
</head>
<body>
<h1>teks dengan heading berkuran1</h1>
<h2>teks dengan heading berkuran2</h2>
<h3>teks dengan heading berkuran3</h3>
<h4>teks dengan heading berkuran4</h4>
<h5>teks dengan heading berkuran5</h5>
<h6>teks dengan heading berkuran6</h6>
</body>
</html>
3) Bentuk preformat teks
dalam html terdapat fungsi preformat teks yang berguna untuk mencetak teks dalam web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program html bagian body dengan menambahkan tag awal <pre> dan tag akhir <pre>
4) Format Address
tag <address> merupakan standar kode html yang digunakan untuk penulisan sebuah alamat intuisi yang berfungsi sebagai informasi kontak sebuah intuisi. Hasil output yang ditampilkan akan dicetak miring dan ketika penulisan alamat lebih dari satu baris maka harus disertakan tag ganti baris.
5) Format keluaran program komputer
beberapa script html yang dapat digunakan untuk mendefinisikan proses secara komputerisasi :
· <code>.....</code>
digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
· <var>.....</var>
digunakan untuk mendefinisikan variabel dalam program
· <samp>.....</samp>
digunakan 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.
contoh penggunaan Abbr dan Acronym :
<!—file apasaja.html-->
<html>
<head>
<title>mempersingkat istilah</title>
</head>
<body>
<abbr title=”palang merah indonesia”>PMI</abbr><br>
<acronym title=”SMK Negeri 2 Kediri”>smekda</acronym>
</body>
</html>
7) Mengubah Arah Tampilan Teks
Bdo merupakan singkatan dari budirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membalikkan arah teks</title>
</head>
<body>
<bdo dir=”rtl”>pemrograman web dengan hypertext markup language</bdo><br>
<bdo dir=”ltr”>teknologi informasi dan komunikasi</bdo>
</body>
</html>
8) Membuat Kutipan Teks
Tag <q> untuk membuat kutipan pendek
Tag <blockquote>, untuk menyatakan kutipan panjang
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>kutipan teks</title>
</head>
<body>
dibawah ini adalah cara mengutip kalimat yang panjang.
<blockquote>
baris kalimat ke 1 dalam blockquote<br>
baris kalimat ke 2 dalam blockquote<br>
baris kalimat ke 3 dalam blockquote<br>
baris kalimat ke 4 dalam blockquote<br>
baris kalimat ke 5 dalam blockquote<br>
</blockquote>
sementara itu, dibawah ini adalah kutioan pendek.<br><q>
baris kalimat ke 1 dengan kutipan pendek<br>
baris kalimat ke 2 dengan kutipan pendek<br>
</q>
</body>
</html>
9) Penyisipan dan penghapusan teks
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>=” “>
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>hapus dan sisip teks</title>
</head>
<body>
nilai grosir 1 kodi adalah sama dengan ....<br>
jawaban :<br>
a.<del>12 pcs</del> jawaban yang salah<br>
b.<ins>20 pcs</ins> jawaban yang sudah dikoreksi
</body>
</html>
C. LIST PADA HTML
List merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1) List Bernomor Urut (ordered list)
Teknik menampilkan daftar tertentu dalam halaman web menggunakan otem penomoran. Untuk menggunakan list bernomor, digunakan tag <ol> dan diakhiri dengan tag </ol>
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list bernomor</title>
</head>
<body>
menu restoran
<ol>
<li>ayam bakar</li>
<li>ayam goreng</li>
<li>ayam penyet</li>
</ol>
</body>
</html>
Adapun untuk menampilakn nomor urut dengan model tertentu, dapat digunakan argumen berikut:
Argumen Dan Fungsinya
l = 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, anda dapat menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda unordered list seperti berikut.
Argument dan Fungsinya
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
suatu subdaftar baru didalam sebuah daftar.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>hapus dan sisip teks</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>
</ol>
</body>
</html>
4) List Terdefinisi
adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list terdefinisi</title>
</head>
<body>
contoh list yang terdefinisi
<dl>
<dt>PMI</dt>
<dd>palang merah indonesia</dd>
<dt>PMR</dt>
<dd>palang merah remaja</dd>
</dl>
</body>
</html>
SEKIAN
