TEORI HTML DAN CSS
1. HTML
HTML ( Hyper Text Markup Language ) adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web.
Untuk membuat dokumen HTML bisa menggunakan editor text seperti Notepad, Visual Studio Code dll.
Untuk menulis dalam html perlu menggunakan tag. Hampir semua tag dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup.
Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku :
"<" dan ">".
- Struktur Dalam HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
Arti elemen tersebut :
Elemen DOCTYPE
Digunakan untuk menentukan jenis dokumen
Elemen HTML
Digunakan sebagai tag pembuka dan penutup, tag pembuka HTML merupakan tanda awal dan tag penutup HTML merupakan tanda penutup akhir dari dokumen HTML
Elemen Head
Digunakan sebagai tempat kumpulan data atau yang berisi tentang data dokumen HTML itu
Elemen title
Memberikan judul pada dokumen HTML.
- TAG
Di dalam HTML terdapat banyak atribut tag, atribut tersebut berbeda-beda. Tag biasanya berpasangan, yang mana ada tag pembuka dan tag penutup, tapi tidak semua tag memiliki penutup. Tag pembuka biasanya berbentuk <nama tag>, dan tag penutup berbentuk </nama tag>.
Selain itu dalam dokumen HTML kita juga bisa menambahkan efek huruf seperti, tebal, miring, garis dll. Jika ingin menambahkan efek tersebut, maka kita perlu menggunakan tag masing-masing.
Berikut beberapa tag pembuka dan penutup dalam HTML beserta fungsinya :
| Tag HTML | Fungsi |
|---|---|
| <b></b> | Menebalkan teks |
| <i></i> | Membuat teks miring |
| <s></s> | Membuat teks coret |
| <u></u> | Membuat teks bergaris bawah |
| <small></small> | Membuat teks yang lebih kecil |
| <sup></sup> | Membuat teks superscript |
| <sub></sub> | Membuat teks subscript |
| <tiltle></title> | Membuat judul halaman |
| <table></table> | Membuat table |
| <img> | Menambahkan gambar |
| <h1></h1> | Membuat judul teks |
| <hr> | Membuat garis horizontal |
| <form></form> | Membuat form dalam HTML |
| <div></div> | Untuk membagi halaman dalam blok |
| <html></html> | Pembuka dan penutup HTML |
Selain itu masih banyak lagi tag dalam HTML lainnya
Contoh hyperlink dalam HTML :
<a href="https://www.youtube.com/watch?v=A3LRdMUzI-4"><center>PACARNYA LEAA</center></a>
<table align="center" border="1" cellpadding="10">
<tbody><tr>
<th bgcolor="green">K-DRAMA</th>
<th bgcolor="green">C-DRAMA</th>
</tr>
<tr>
<td>School 2021</td>
<td>Our Secrets</td>
</tr>
<tr>
<td>Vicenzo</td>
<td>The Love Equation</td>
</tr>
<tr>
<td>Happiness</td>
<td>Gank Your Heart</td>
</tr>
<tr>
<td>True Beauty</td>
<td>Profesional Single</td>
</tr>
</tbody></table></span></center>
Hasil :
| K-DRAMA | C-DRAMA |
|---|---|
| School 2021 | Our Secrets |
| Vicenzo | The Love Equation |
| Happiness | Gank Your Heart |
| True Beauty | Profesional Single |
<ul>
<li>Strawbery</li>
<li>Leci</li>
<li>Mangga</li>
</ul>
- Strawbery
- Leci
- Mangga
<ol>
<li>Black</li>
<li>Green</li>
<li>Blue</li>
</ol>
- Black
- Green
- Blue
<form>
<label for="fname">Favorite color:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Favorite fruit:</label><br>
<input type="text" id="lname" name="lname">
</form>
2. CSS
CSS adalah singkatan dari Cascading Style Sheets ), yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, kita bisa mengatur jenis font, warna tulisan, latar belakang halaman, jarak dll.
CSS terbagi menjadi 3 jenis, yaitu :
- INLINE CSS
Inline CSS adalah salah satu kode yang di tuliskan dalam dokumen HTML, inline css hanya mempengaruhi satu baris kode HTML, Contoh inline css:
<h1 style="font-size:30px;color:green;">Aku azaleaaa</h1> Hasil :Aku azaleaaa
- EXTERNAL CSS
External CSS adalah kode yang di tuliskan dalam HTML, external css berfungsi untuk mengatur tampilan semua halaman website, Contoh external css :
Untuk hasil bisa klik result
- INTERNAL CSS
Internal CSS adalah kode yang di tuliskan dalam HTML, internal css berfungsi untuk membuat custom khusus.
Untuk hasil bisa klik result
Tidak ada komentar:
Posting Komentar