NathanAdhitya/Rangkuman HTML TIK.md

## Rangkuman HTML TIK.md

      
    Raw
  

              Rangkuman HTML TIK.md
            
          
    Rangkuman TIK

Nathan, 24/02/2021
Teori Dasar

HTML adalah singkatan dari Hypertext Markup Language.

HTML dirancang pada konsep bahasa markup SGML, yang merupakan standar untuk membuat dokumen menggunakan tanda (markup) seperti paragraf, list, heading, dan lain-lain. (dalam HTML, markup yang digunakan adalah seperti p, li, h1)
Di dalam dokumen HTML, terdapat tag atau tanda. Tag adalah penanda awalan dan akhiran dari sebuah elemen. Tag dibuat menggunakan kurung siku <...>, dengan pasangan penutup menggunakan garis miring (/) di depan nama tag.

Untuk diingat: Tidak semua tag memiliki pasangan. Secara umum, mayoritas tag memilki pasangan penutup.
Tag


Tag
Fungsi


<html>
untuk memulai dokumen HTML


<head>
untuk membuat bagian head


<body>
untuk membuat bagian body


<h1> sampai <h6>
untuk membuat heading pada artikel (angka menunjukkan tingkat heading / ukuran)


<p>
untuk membuat paragraf


<!-- ... -->
untuk membuat komentar (tidak ditampilkan oleh browser)


<ul>
unordered list (list tidak urut, seperti menggunakan •)


<ol>
ordered list (list urut, seperti menggunakan 1, i, I, a, b)


<li>
list item (item/objek dari sebuah list)


<br>*
line break (ekuivalen dengan enter)


<hr>*
horizontal rule (br dengan)


<title>^
menentukan judul sebuah halaman


<a>
anchor, digunakan untuk membuat hyperlink. Digunakan untuk lompat ke link dan element tertentu.


<img>*
image, digunakan untuk memasukkan gambar di HTML.


<center>
membuat teks terletak di center, seperti di MS Word.


<i>
formatting: italic


<b>
formatting: bold


<u>
formatting: underline


<s>
formatting: strikethrough


<pre>
formatting: preformatted (tanpa formatting HTML, spasi dan tab dianggap murni)


<blockquote>
formatting: menjorok ke dalam seperti quote


<sup>
formatting: superscript (mirip pangkat)


<sub>
formatting: subscript (mirip jumlah atom di satu molekul)


* :  tag tidak memiliki pasangan, contoh syntax yang diperbolehkan: <br>, <br />

^ : umumnya diletakkan di head
Atribut

adalah kata khusus yang berada di dalam tag pembuka. Fungsinya adalah menentukan perilaku dari suatu elemen.


Atribut
Tag
Fungsi


href
a
menentukan arah link. #id/#name untuk mengarahkan ke tempat di halaman yang sama dengan id/name yang sama;   Gunakan protokol seperti https://google.com untuk membuka halaman web yang tidak lokal.   Gunakan path relatif untuk mengakses file lokal seperti praktikum2/prak.html


src
img
menentukan sumber sebuah gambar, isi mirip dengan atribut href.


align
p
digunakan untuk menentukan posisi teks. isi valid: left, center, right


type
ol
menentukan simbol urutan yang digunakan. isi valid: 1, a, A, i, I


type
ul
menentukan simbol urutan yang digunakan. isi valid: circle, disc, square


color
p
memberikan warna pada teks


width,height
img
mengatur tinggi, lebar objek, dapat menggunakan % untuk relatif ukuran browser, dapat menggunakan px untuk pixels.


style
*
menggunakan css untuk formatting, dapat digunakan untuk hampir semua tag.


Penggunaan attribut contohnya:
<tag nama-attribut="isi-attribut"></tag>
Jika lebih dari satu, attribut selanjutnya dipisahkan dengan spasi.
<img src="https://media.makeameme.org/created/sus-60gw8n.jpg" width="100px" />
Elemen

Dalam HTML, elemen adalah sebuah komponen yang menyusuk dokumen tersebut. HTML sifatnya mirip seperti pohon, sebuah elemen dapat dimasukkan ke dalam elemen lainnya.


Elemen yang di bawah sebuah elemen akan memiliki ciri/karakteristik yang turun dari elemen di atasnya.

Contoh:
<p style="font-color: red;">
    <b>halo, </b>
    <i>teman-teman</i>
</p>
akan menghasilkan yang memiliki formatting seperti (berwarna merah):

halo, teman-teman

Struktur Dasar

Untuk HTML dapat bekerja, ada aturan struktur dasar yang wajib diikuti.
<!DOCTYPE HTML> <!-- opsional, tag ini menyatakan versi HTML yang digunakan -->
<html> <!-- harus dimulai dan diakhiri dengan html, tag ini wajib hanya satu. -->
    <head> <!-- harus memiliki head, letakkan judul, css, dll di sini. Jika elemen yang nampak di halaman ditaruh di sini, tidak akan muncul, tag ini wajib hanya satu. -->
        <title>judul</title> <!-- judul halaman -->
        <link rel.... /> <!-- referensi file css (jika ada, tidak wajib) -->
        <style></style> <!-- tempat menaruh css di HTML, umumnya -->
    </head>
    <body> <!-- tempat utama menaruh elemen di HTML, tag ini wajib hanya satu. -->
        <!-- isi html, seperti p, div, dan elemen-elemen lainnya yang ingin dimunculkan -->
        <script ...></script> <!-- referensi file javascript (jika ada, tidak wajib) -->
    </body>
</html>
Karakter Spesial

Karakter spesial dikategorikan karakter-karakter yang berada di luar dari keyboard biasa, misal simbol © dan juga karakter-karakter khusus yang dapat menabrak sintaks HTML, misalnya < dan >.


Kode
Hasil


&copy;
©


&nbsp;
spasi kosong (" ")


&lt;
less than (<)


&gt;
greater than (>)


&plusmn;
±


&deg;
°


Contoh Pengunaan Hyperlink

Hyperlink di dalam HTML dibuat menggunakan tag <a> atau anchor. Anchor menggunakan atribut href yang mengindikasikan destinasi dari . Penulisan nilai pada href harus berupa link penuh (menggunakan protokol jika ke website lain seperti https://, dan tidak membutuhkan protokol jika ke link pada website yang sama).
Contoh:
<a href="https://google.com">Ini adalah sebuah link</a>
Hasil:
Ini adalah sebuah link
Atribut Tag Anchor


Atribut
Value
Keterangan


href
link
menentukan arah link. #id/#name untuk mengarahkan ke tempat di halaman yang sama dengan id/name yang sama; Gunakan protokol seperti https://google.com untuk membuka halaman web yang tidak lokal. Gunakan path relatif untuk mengakses file lokal seperti praktikum2/prak.html


target
_blank
Membuka tab baru jika di klik


style
css
CSS pada tag HTML dipisah dengan ;. Contoh: style="color: red; background: blue;"


Langkah/Aturan Pengunaan Tabel

Target:
<table>
    <thead>
      <tr>
        <th colspan="2" width=100>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <td width=50>Jill</td>
            <td rowspan="2" colspan="2">Smith</td>
        </tr>
        <tr>
            <td>test</td>
        </tr>
    </tbody>
</table>

    
        Name
        Age
      
    
            Jill
            Smith
        
        
            test
        
    
Langkah-Langkah


Semua kode harus diatara <table> dan </table>
<table>
<!-- insert code here -->
</table>


Tentukan jumlah baris/row yang diinginkan, kemudian masukkan <tr></tr> untuk setiap baris yang diinginkan. (tr = table row
Tabel yang ingin kita buat memerlukan 3 kolum sehingga kita buat 3 x <tr></tr>
<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>


Tentukan jumlah kolum yang diinginkan dan masukkan <td></td> sebanyak jumlah kolum di setiap <tr></tr>. (td = table data cell)
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>


Khusus baris paling atas, <td> diganti <th> agar text otomatis dibuat bold. (th = table header)
<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
 
     
         1
         2
         3
     
     
         4
         5
         6
     
     
         7
         8
         9
     
 
Berikan colspan dan rowspan pada sel yang ingin di besarkan. Kita ingin membesarkan 1 sebanyak 1 column sehingga row 1 kita berikan colspan 2
<table>
    <tr>
        <th colspan="2">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
 
     
         1
         2
         3
     
     
         4
         5
         6
     
     
         7
         8
         9
     
 
Karena sel 1 diperpanjang ke kanan, maka sel 2 harus dihapus setelah colspan ditambahkan. Hapus <td> atau sel yang akan di merge dengan sel yang diberikan colspan atau rowspan
<table>
    <tr>
        <th colspan="2">1</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
 
     
         1
         3
     
     
         4
         5
         6
     
     
         7
         8
         9
     
 
Ulangi tahap ke 7 dan 8 tapi gunakan colspan dan rowspan
<table>
    <tr>
        <th colspan="2">1</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td colspan="2" rowspan="2">5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
 
     
         1
         3
     
     
         4
         5
         6
     
     
         7
         8
         9
     
 
Hapus tabel 6, 8, 9
<table>
    <tr>
        <th colspan="2">1</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td colspan="2" rowspan="2">5</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>
 
     
         1
         3
     
     
         4
         5
     
     
         7
     
 
Mengapa tabel tidak sesuai ekspektasi? Sebenarnya layout tabel sudah benar, hanya saja kolum diantara 1 dan 3 (diarsir biru) ter-collapase karena tidak memiliki width atau lebar.


Solusinya adalah dengan memberikan custom kolum tengah width. Dengan memberikan sel 1 width yang lebih besar dari sel 4, kita akan memaksa kolum 2 untuk memiliki width yang bukan 0.
<table>
    <tr>
        <th colspan="2" width=100>1</th>
        <th>3</th>
    </tr>
    <tr>
        <td width=50>4</td>
        <td colspan="2" rowspan="2">5</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>

    
        1
        3
    
    
        4
        5
    
    
        7
    

Ganti angka dengan label setiap sel.
<table>
    <thead>
      <tr>
        <th colspan="2" width=100>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <td width=50>Jill</td>
            <td rowspan="2" colspan="2">Smith</td>
        </tr>
        <tr>
            <td>test</td>
        </tr>
    </tbody>
</table>

    
        Name
        Age
      
    
            Jill
            Smith
        
        
            test
        
    
Tabel Dengan Colspan

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

  
    Name
    Age
  
  
    Jill
    Smith
    43
  
  
    Eve
    Jackson
    57
  

Tabel Dengan Rowspan

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

  
    Name
    Jill
  
  
    Phone
    555-1234
  
  
    555-8745


Atribut
Tag
Fungsi


width
td, th, atau table
mengindikasikan lebar (dalam satuan px)


height
td, th, atau table
tinggi dari suatu sel (dalam satuan px)


align
td, th
right, left, center, justify


border
td, th, atau table
memberikan border pada elemen. Value atribut dibuat dalam pixel (border=0)
Tag	Fungsi
`<html>`	untuk memulai dokumen HTML
`<head>`	untuk membuat bagian head
`<body>`	untuk membuat bagian body
`<h1>` sampai `<h6>`	untuk membuat heading pada artikel (angka menunjukkan tingkat heading / ukuran)
`<p>`	untuk membuat paragraf
`<!-- ... -->`	untuk membuat komentar (tidak ditampilkan oleh browser)
`<ul>`	unordered list (list tidak urut, seperti menggunakan •)
`<ol>`	ordered list (list urut, seperti menggunakan 1, i, I, a, b)
`<li>`	list item (item/objek dari sebuah list)
`<br>`*	line break (ekuivalen dengan enter)
`<hr>`*	horizontal rule (br dengan)
`<title>`^	menentukan judul sebuah halaman
`<a>`	anchor, digunakan untuk membuat hyperlink. Digunakan untuk lompat ke link dan element tertentu.
`<img>`*	image, digunakan untuk memasukkan gambar di HTML.
`<center>`	membuat teks terletak di center, seperti di MS Word.
`<i>`	formatting: italic
`<b>`	formatting: bold
`<u>`	formatting: underline
`<s>`	formatting: strikethrough
`<pre>`	formatting: preformatted (tanpa formatting HTML, spasi dan tab dianggap murni)
`<blockquote>`	formatting: menjorok ke dalam seperti quote
`<sup>`	formatting: superscript (mirip pangkat)
`<sub>`	formatting: subscript (mirip jumlah atom di satu molekul)
Atribut	Tag	Fungsi
href	a	menentukan arah link. #id/#name untuk mengarahkan ke tempat di halaman yang sama dengan id/name yang sama; Gunakan protokol seperti `https://google.com` untuk membuka halaman web yang tidak lokal. Gunakan path relatif untuk mengakses file lokal seperti `praktikum2/prak.html`
src	img	menentukan sumber sebuah gambar, isi mirip dengan atribut href.
align	p	digunakan untuk menentukan posisi teks. isi valid: `left`, `center`, `right`
type	ol	menentukan simbol urutan yang digunakan. isi valid: `1`, `a`, `A`, `i`, `I`
type	ul	menentukan simbol urutan yang digunakan. isi valid: `circle`, `disc`, `square`
color	p	memberikan warna pada teks
width,height	img	mengatur tinggi, lebar objek, dapat menggunakan % untuk relatif ukuran browser, dapat menggunakan px untuk pixels.
style	*	menggunakan css untuk formatting, dapat digunakan untuk hampir semua tag.
Kode	Hasil
`©`	©
` `	spasi kosong (" ")
`<`	less than (<)
`>`	greater than (>)
`±`	±
`°`	°
Atribut	Value	Keterangan
`href`	link	menentukan arah link. #id/#name untuk mengarahkan ke tempat di halaman yang sama dengan id/name yang sama; Gunakan protokol seperti https://google.com untuk membuka halaman web yang tidak lokal. Gunakan path relatif untuk mengakses file lokal seperti praktikum2/prak.html
`target`	_blank	Membuka tab baru jika di klik
`style`	css	CSS pada tag HTML dipisah dengan `;`. Contoh: `style="color: red; background: blue;"`
Atribut	Tag	Fungsi
`width`	`td`, `th`, atau `table`	mengindikasikan lebar (dalam satuan px)
`height`	`td`, `th`, atau `table`	tinggi dari suatu sel (dalam satuan px)
`align`	`td`, `th`	`right`, `left`, `center`, `justify`
`border`	`td`, `th`, atau `table`	memberikan border pada elemen. Value atribut dibuat dalam pixel (`border=0`)