BELAJAR HTML PART 2 MENAMBAHKAN FORMAT, LINKS, TABLES
Assalamualaikum Wr. Wb.
Selamat malam kawan. Pada kesempatan kali ini kita akan melanjutkan belajar HTML. Pada postingan sebelumnya kita sudah belajar tentang Attributes, Heading, Paragrah. Sekarang kita akan belajar tentang Formatting, Links dan Tables.
PENGERTIAN
- Formatting di dalam HTML yaitu mengubah tampilan teks menjadi tebal, miring, garis bawah, berwarna, dll.
- Links di dalam HTML yaitu mengaitkan sebuah tulisan ke dalam link yang bisa di klik dan dapat berpindah tempat ke link yang telah diklik tersebut.
- Tables di dalam HTML yaitu memberikan informasi dalam bentuk baris dan kolom.
LATAR BELAKANG
Belajar mendalami dan mempelajari isi dari HTML tersebut.
MAKSUD & TUJUAN
Mempermudahkan kita dalam membuat sebuah web design dengan menggunakan beberapa bagian dari HTML.
ALAT & BAHAN
- PC/Laptop
- Text Editor
LANGKAH KERJA
- Formatting
Dalam penulisan HTML kita sering menggunakan format text didalamanya. Baik itu
dalam penulisan judul, ataupun isi dari halaman tersebut. Berikut beberapa contoh penggunaan format teks pada HTML.
- Membuat huruf menjadi tebal (bold) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag
<b>. Berikut contoh syntax HTML untuk membuat format text tebal :
<b>ini adalah teks tebal</b>
- Membuat huruf miring (italic) pada HTML
Untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>. contohnya:
<i>ini adalah teks miring</i>
- Membuat huruf bergaris bawah (underline) pada HTML
Untuk membuat teks underline/garis bawah pada HTML kita bisa menggunakan tag <u>. Contohnya :
<u>ini adalah teks garis bawah</u>
Tag Description
<b> Format text bold/tebal
<i> Format text italic/miring
<u> Format text underline/garis bawah
<small> Format text kecil
<strong> Format text yang hampir sama dengan format bold/penting
<sub> Format subscripted teks
<sup> Format superscripted teks
<ins> Format text garis bawah
<del> Format text dengan garis di tengah
<mark> Format text yang berwarna
Berikut contoh penulisan tag/element format text di yang sudah di pelajari di atas :
<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>Ini adalah format teks bold</b><br/>
<i>Ini adalah format teks italic</i><br/>
<u>Ini adalah format teks underline</u><br/>
<em>Ini adalah format teks em</em><br/>
<small>Ini adalah format teks small</small><br/>
<strong>Ini adalah format teks strong</strong><br/>
<sub>Ini adalah format teks sub</sub><br/>
<sup>Ini adalah format teks sup</sup><br/>
<ins>Ini adalah format teks ins</ins><br/>
<del>Ini adalah format teks del</del><br/>
<mark>Ini adalah format teks mark</mark>
</body>
</html>
Dan berikut adalah hasilnya.
2. Links
atribut href, dimana didalam href (hypertext reference) ini lah yang akan di isikan alamat yang
dituju ketika text atau gambar di klik. berikut cara penulisan untuk membuat hyperlink :
<a href="http://afaizin913.blogspot.co.id">Klik Disini</a>
3. Tables
Tag <table> merupakan tag pembuka dalam membuat sebuah tabel pada html, tanpa tag <table> ini penggunaan <tr> dan <td> tidak dapat difungsikan dengan baik. Tag <tr> atau sering dikenal
dengan Table Row merupakan tag yang digunakan untuk membuat baris dalam tabel HTML. Sedangkan tag <td> atau dikenal dengan Table Data merupakan tag yang digunakan untuk membuat kolom dalam sebuah baris. Dan tag <th> untuk membuat Table Head atau bagian kepala atau juga sering disebut sebagai judul pada table. Untuk lebih jelasnya lihatlah contoh berikut.
Perhatikan contoh pembuatan table pada HTML berikut :
Setelah itu jalankan dan lihat hasilnya.
Jika jadi maka ulangi lagi hingga benar-benar paham. Mungkin sekian dari saya.
Selamat Belajar & Mencoba.
Syukron
Wassalamualaikum Wr. Wb.
Referensi
Awalnya saya kira sulit belajar pemograman web dengan menggunakan html, ternyata setelah saya membaca artikel ini saya sudah paham tentang penggunaan format2 seperti tag i, tag u dsb. Artikel ini sangat membantu saya, terimakasih admin, semoga bisa memberikan artikel² lain yg bermanfaat bagi pembaca
ReplyDeleteKunjungi link kampus saya
https://www.atmaluhur.ac.id