HTML (Meliana Yunita Malau)

-

Website adalah kumpulan dari halaman-halaman situs yang terdapat dalam sebuah domain atau subdomain yang berada di dalam World Wide Web (WWW) di internet. Alasan seseorang mengunjungi website adalah karena konten yang tersedia di website tersebut.  Untuk membuat website kita dapat menggunakan html untuk website sederhana. Disini saya Meliana Yunita Malau ingin menjelaskan sedikit mengenai HTML, yang akan digunakan untuk membuat website sederhana nanti.

HTML

 1. Apa itu HTML?

Menurut Wikipedia Hypertext Markup Language atau yang biasa dikenal dengan HTML adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban atau pencarian di internet.

Pengertian HTML sering kali dikaitkan dengan bahasa pemrograman. Akan tetapi, sejatinya, HTML bukan sebuah bahasa pemrograman (programming languange), melainkan sebuah markup languange.

2. Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Fungsi HTML yang lebih spesifik yaitu, membuat halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.

3. Kode HTML

Diambil dari sumber W3Schools, pengertian tanda dalam HTML adalah simbol berupa kurung siku (<>) yang memiliki pasangan.

Pasangan ini adalah tanda awal dan tanda akhir. Tanda awal merupakan kurung siku saja (<kode tanda>) dan tanda akhir merupakan kurung siku dengan garis miring (</kode tanda>).

Contoh :
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

4. Membuat Judul di HTML

Dalam membuat sebuah website diperlukan judul. Judul HTML adalah judul atau subjudul yang ingin Anda tampilkan di halaman web. Judul HTML didefinisikan dengan tag <h1> hingga <h6>. 

<h1> mendefinisikan heading yang paling penting. 

<h6> mendefinisikan heading yang paling tidak penting.

Contoh : 

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

5. Membuat Paragraf di HTML

Paragraf merupakan sebuah baris baru yang selalu digunakan dalam membuat sebuah web, dan browser secara otomatis menambahkan beberapa spasi sebelum dan sesudah paragraf.

Contoh :

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

6. Kode Warna HTML

Kode warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Berikut adalah beberapa kode warna HTML yang dapat dijadikan referensi untuk color branding atau web design.

  1. White     #FFFFFF     RGB (255, 255, 255)
  2. Black      #000000      RGB (0, 0, 0)
  3. Blue        #0000FF      RGB (0, 0, 255)
  4. Brown    #A52A2A    RGB (165, 42, 42)
  5. Red         #FF0000      RGB (255, 0, 0)
  6. Yellow    #FFFF00      RGB (255, 255, 0)

Untuk mendapatkan lebih banyak kode warna lagi, anda dapat mencari HTML Color Codes.

7. Menggunakan Kode Warna HTML

Untuk mengubah warna teks pada seluruh halaman website, anda bisa mendefinisikannya di tag <body>. Sedangkan untuk mengubah warna pada satu atau sebagian kecil teks, anda bisa menggunakan tag font yang lama dengan format:

<font color = “# ff0000”> text </font>

Warna dalam HTML harus didefinisikan sebagai kode HEX, yang merupakan kode enam digit yang mewakili jumlah warna merah, hijau, dan biru (RGB), misal:

<font color = “green”> text </font>

Contoh :
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Sejumlah browser baru memungkinkan anda untuk memberi nama warna, seperti yang dicontohkan di atas, tetapi opsi yang anda punya bisa jadi lebih terbatas.

8. Menggunakan Size Font

Font size digunakan untuk mengatur ukuran atau besar kecilnya font tersebut. Untuk mengatur huruf pada HTML anda dapat menggunakan tag <FONT> dan tag penutup </FONT>. 

<body>

<font size="1">ini adalah ukuran Font 1</font><br>
<font size="2">ini adalah ukuran Font 2</font><br>
<font size="3">ini adalah ukuran Font 3</font><br>
<font size="4">ini adalah ukuran Font 4</font><br>
<font size="5">ini adalah ukuran Font 5</font><br>
<font size="6">ini adalah ukuran Font 6</font><br>

</body>

Contoh :
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

9. Menambahkan Gambar di HTML

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src. Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path.

Contoh :
<img src="img_girl.jpg">

Tag <img> juga harus berisi atribut lebar dan tinggi, yang menentukan lebar dan tinggi gambar (dalam piksel).

Contoh : 
<img src="img_girl.jpg" width="500" height="600">
Mengapa gambar di laman web HTML tidak muncul?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi nama folder gambar sesuai dengan yang disimpan, akses kembali atau reload halaman website yang gambarnya tidak muncul. Jika sudah benar, maka gambar yang ada di folder akan terlihat.

10. Menambahkan Link di HTML

Atribut terpenting untuk menambahkan link adalah elemen <a> adalah atribut href, yang menunjukkan tujuan tautan. Teks tautan adalah bagian yang akan terlihat oleh pembaca. Mengklik teks tautan, akan mengirim pembaca ke alamat URL yang ditentukan.
<a href="url">link text</a>

Contoh : 

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Sekian materi mengenai HTML dari saya, semoga bermanfaat bagi kita semua. Terima kasih sudah mengunjungi blog saya.
Meliana Yunita Br. Malau (21140036)

Komentar

Posting Komentar