Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Monday, 27 February 2017

Belajar HTML Part 2 Menambahkan Format, Links, Tables

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

  1. 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>

Berikut beberapa format teks yang sering digunakan dalam HTML.

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

Hyperlink sendiri ditulis dengan menggunakan tag <a>. Tag <a> ini selalu diikuti oleh
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> 

Ketika diklik pada kalimat “Klik Disini” otomatis halaman akan dialihkan ke dalam halaman afaizin913.blospot.co.id. Ini merupakan konsep dasar dari links. Hal ini juga tergantung pada perintah href sendiri akan dikemanakan link tersebut dialihkan. Intinya Links merupakan format teks yang dapat mengalihkan suatu kata atau kalimat ke dalam sebuah links yang ditentukan.




  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

No comments:

Post a Comment

Adbox