Pertemuan 2 - HTML

HTML
PERTEMUAN KE-2
Teknik Komputer
Universitas
Teknik Komputer - Universitas Sriwijaya
Apa itu HTML ?

• HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk
membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan
aplikasi.
Fungsi dan Cara Kerja HTML?

• HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat
fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat
dokumen, sama seperti Ms. Word.
• Menggunakan tag dan attribute untuk mark up halaman website
Bagaimana Cara Kerja HTML?

 file yang diakhiri dengan ekstensi .html atau .htm
 Ekstensi file ini bisa dilihat dengan mengunakan web browser
 Masing-masing halaman HTML terdiri atas seperangkat tags
 Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan
syntax <tag></tag>.
 Contoh tag : (<div></div>), (<h1></h1>), (<p></p>), (<img>), (<a></a>), dan banyak
lagi
Pengertian Tag HTML dan Fungsinya

Tag HTML memiliki dua tipe utama: block-level dan inline tags.
1. Elemen block-level memakai semua space yang tersedia dan selalu membuat line baru di
dalam dokumen. Contoh dari tag block adalah heading dan paragraf.
2. Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat
line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-
level. Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level
• Elemen level blok selalu dimulai pada baris baru dan menempati seluruh lebar halaman, dari kiri
ke kanan. Elemen level blok dapat menempati satu baris atau beberapa baris dan memiliki jeda
baris sebelum dan sesudah elemen.
Tag Inline
• Pada dasarnya, elemen Inline tidak menyebabkan jeda baris (dimulai pada baris baru) dan tidak
memenuhi lebar penuh halaman, hanya ruang yang dibatasi oleh tag pembuka dan penutupnya.
Biasanya digunakan dalam elemen HTML lainnya.
Contoh Sederhana HTML

• <!DOCTYPE html> mendefinisikan bahwa dokumen ini adalah dokumen HTML5
• Elemen <html> adalah elemen root dari halaman HTML.
• Elemen <head> berisi informasi meta tentang halaman HTML.
• Elemen <title> menentukan judul untuk halaman HTML (yang ditampilkan di bilah
judul browser atau di tab halaman).
• Elemen <body> mendefinisikan badan dokumen, dan merupakan wadah untuk
semua konten yang terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar,
dll.
• Elemen <h1> mendefinisikan judul besar.
• Elemen <p> mendefinisikan paragraf.
Sumber : https://www.w3schools.com/
Struktur HTML Page
Kelebihan dan Kekurangan HTML

Kelebihan : • Mudah diintegrasikan dengan bahasa backend, seperti PHP dan
Node.js.
• Bahasa yang digunakan secara luas dan memiliki banyak sumber serta
komunitas yang besar. Kekurangan :
• Dijalankan secara alami di setiap web browser. • Paling sering digunakan untuk halaman web statis. Untuk fitur
dinamis, Anda bisa menggunakan JavaScript atau bahasa backend,
• Memiliki learning curve yang mudah.
seperti PHP.
• Open-source dan sepenuhnya gratis.
• HTML tidak memungkinkan user untuk menjalankan logic. Alhasil,
• Bahasa markup yang rapi dan konsisten. semua halaman web harus dibuat terpisah meskipun menggunakan
elemen yang sama, seperti header dan footer.
• Standard web yang resmi di-maintain oleh World Wide Web
Consortium (W3C). • Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
• Terkadang perilaku browser susah untuk diprediksi (misalnya, browser

lama tidak selalu bisa render tag yang lebih baru).
HTML Menggunakan Sublime/Notepad

1. Buka Sublime/Notepad
2. Ketik kode HTML seperti dibawah ini :
3. Simpan file dengan format index.html
Silahkan Mencoba Contoh Berikut
Jangan Pernah Lewati Tag Akhir!

Atribut HTML
• Semua elemen HTML dapat memiliki atribut Jenis-jenis atribut:
• Atribut memberikan informasi tambahan tentang 1. Atribut href
elemen
2. Atribut src
• Atribut selalu ditentukan di tag awal
3. Atribut alt
• Atribut biasanya datang dalam pasangan nama / nilai
4. Atribut Style
seperti: name = "value“
Atribut href
• Tag <a> mendefinisikan hyperlink. Atribut href • Silahkan demonstrasikan ke sublime / notepad
menentukan URL halaman link yang dituju. pada masing-masing PC/Lapotop dan gunakan
website lain.
• Baris ke-9 merupakan kode HTML untuk
atribut href dimulai dengan <a href = …> dan
ditutup dengan tag </a>
Atribut src
• Tag <img> digunakan untuk menyematkan • Tag <img> juga harus berisi atribut lebar dan
gambar di halaman HTML. Atribut src tinggi, yang menentukan lebar dan tinggi
menentukan jalur ke gambar yang akan gambar (dalam piksel):
ditampilkan.
• atribut src dimulai dengan <img src = …>
Atribut alt
• Atribut alt yang diperlukan untuk tag <img> • Silahkan coba jika <img src = …> diganti dengan
menentukan teks alternatif untuk gambar, jika nama lain, missal Naruto.jpeg.
gambar karena alasan tertentu tidak dapat
ditampilkan. Hal ini dapat terjadi karena
koneksi yang lambat, atau kesalahan pada
atribut src, atau jika pengguna menggunakan
pembaca layar.
Atibut Style
• Atribut style digunakan untuk menambahkan • Cobalah dengan warna lain!
gaya ke elemen, seperti warna, font, ukuran,
dan lainnya.
• Baris ke-8 merupakan kode HTML untuk
atribut href dimulai dengan <p style= …> dan
ditutup dengan tag </p>
Background Image dalam HTML

• Carilah gambar dan simpan dalam • Ketiklah kode disamping ini.
satu folder yang sama dengan file
tempat menyimpan file .html
HTML Table
• Tag <table> mendefinisikan tabel HTML. • Secara default, teks dalam elemen <th> dicetak
tebal dan di tengah.
• Setiap baris tabel didefinisikan dengan tag <tr>.
Setiap header tabel didefinisikan dengan tag • Secara default, teks dalam elemen <td>
<th>. Setiap data tabel / sel didefinisikan dengan beraturan dan rata kiri.
tag <td>.
HTML Table - Add a Border

• Cobalah kode HTML berikut ini dengan • Apa perbedaan hasil yang disini dengan hasil
menambahkan kode dibaris 4-7. sebelumnya?
HTML Form
• Elemen HTML <form> digunakan untuk membuat formulir HTML untuk input pengguna
• Elemen <input> HTML adalah elemen formulir yang paling sering digunakan.
• Sebuah elemen <input> dapat ditampilkan dengan berbagai cara, bergantung pada atribut type.
Kode HTML Form

• Salinlah kode HTLM berikut • Type bisa berupa text, radio, checkbox
• Belum ada Tindakan pada button Submit • Silahkan dicoba kode HTML yang sama dengan
mengganti type menjadi radio dan checkbox.
Sekian Kuliah Hari ini, Semoga Bermanfaat!

Pertemuan 2 - HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 2 - HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

Apa itu HTML ?

Fungsi dan Cara Kerja HTML?

Bagaimana Cara Kerja HTML?

Pengertian Tag HTML dan Fungsinya

Contoh Sederhana HTML

Struktur HTML Page

Kelebihan dan Kekurangan HTML

• Terkadang perilaku browser susah untuk diprediksi (misalnya, browser

HTML Menggunakan Sublime/Notepad

Silahkan Mencoba Contoh Berikut

Jangan Pernah Lewati Tag Akhir!

Background Image dalam HTML

HTML Table - Add a Border

Kode HTML Form

Sekian Kuliah Hari ini, Semoga Bermanfaat!

Anda mungkin juga menyukai