Konsep HTML, CSS, JS & Dasar

Konsep
HTML, CSS,
JS & Dasar
HTML
Oleh: Mujahid Robbani Sholahudin, S.Pd
Kelas Coding MTs Istiqlal Jakarta

Bagian Web - Pertemuan ke-1
Peran HTML, CSS, dan Javascript dalam
Web
Apa itu HTML?
• HTML adalah singkatan dari Hyper Text Markup Language

• HTML adalah bahasa markup standar untuk halaman Web
• HTML menggambarkan struktur halaman Web
• HTML terdiri dari serangkaian elemen
• Elemen HTML memberi tahu browser cara menampilkan konten
• Dengan HTML kita bisa membuat situs Web kita sendiri
Apa itu CSS?
• CSS adalah singkatan dari Cascading Style Sheets

• CSS adalah bahasa yang kita gunakan untuk menata dokumen HTML.
• CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau
di media lain
• CSS menghemat banyak pekerjaan. CSS dapat mengontrol tata letak
beberapa halaman web sekaligus
• Stylesheet eksternal disimpan dalam file CSS
Apa itu Javascript?
• JavaScript adalah bahasa pemrograman paling populer di dunia.
• JavaScript adalah bahasa pemrograman Web.
• JavaScript dan Java adalah bahasa yang sama sekali berbeda, baik dalam konsep maupun
desain.
• JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
• ECMA-262 is the official name of the standard. ECMAScript is the official name of the
language.
Contoh Struktur Dasar HTML
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Judul pertama saya</h1>

<p>Paragraf pertama saya</p>
</body>
</html>
Penjelasan Contoh
• Deklarasi <!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 title bar browser atau di
tab halaman)
• Elemen <body> mendefinisikan tubuh 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
Apa itu Elemen HTML?
• Elemen HTML didefinisikan oleh tag pembuka, beberapa konten, dan tag penutup:
<tagname>Kontennya disini</tagname>
• Elemen HTML adalah keseluruhan dari tag pembuka hingga tag penutup:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
Catatan: Beberapa elemen HTML tidak memiliki konten (seperti elemen <br>). Elemen-
elemen ini disebut elemen kosong. Elemen kosong tidak memiliki tag penutup!
Fakta tentang Elemen HTML
• Elemen HTML dapat bersarang (ini berarti elemen dapat berisi elemen lain).
• Semua dokumen HTML terdiri dari elemen HTML bersarang.
• Elemen HTML tanpa konten disebut elemen kosong. Tag <br> mendefinisikan jeda
baris, dan merupakan elemen kosong tanpa tag penutup
• Tag HTML tidak peka huruf besar/kecil: <P> artinya sama dengan <p>. Standar HTML
tidak memerlukan tag huruf kecil, tetapi W3C merekomendasikan huruf kecil dalam
HTML, dan menuntut huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.
• Daftar referensi tag-tag dalam HTML per kategori bisa dilihat dan dipelajari disini
Mulai Ngoding HTML
• Buka Notepad (Windows) atau TextEdit (Mac)

• Tulis kode HTML berikut
<!DOCTYPE html>
<html>
<body>
<h1>Ini Judul</h1>
<p>Ini Paragraf</p>
</body>
</html>
• Simpan dengan nama file index.html, pastikan Save as type pilih All Files
• Buka file index.html di browser favorit!
Atribut HTML
• Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML

• Semua elemen HTML dapat memiliki atribut
• Atribut selalu ditentukan di tag pembuka
• Atribut biasanya datang dalam pasangan nama/nilai seperti: name=“value”
Tag-Tag Dasar HTML
• Heading (Judul)
• Paragraph (Paragraf)
• Link (Tautan)
• Image (Gambar)
• List (Daftar)
• Form (Formulir)
• Table (Tabel)
Heading (Judul)
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Memiliki tag penutup
• Semakin besar angkanya semakin kecil ukuran judulnya
• <h1> menunjukkan judul yang paling penting
• <h6> menunjukkan judul yang paling tidak penting
• Penggunaan Heading sangat penting karena bisa berefek kepada SEO
• Gunakan heading HTML untuk heading saja. Jangan gunakan heading untuk membuat teks menjadi
BESAR atau tebal.
• Contoh:
<h1>Ini Judul 1</h1>
Paragraph (Paragraf)
• <p>
• Setiap paragraf akan memulai baris baru secara otomatis
• Memiliki atribut khusus yaitu title untuk memberikan deskripsi tooltip
saat mouse diarahkan ke atas paragraf
• Contoh:
<p title=“Ini tooltip">Ini paragraf</p>
Link (Tautan)
• <a>
• Membuat tautan yang bisa diklik
• Terdapat Atribut khusus yaitu:
• href untuk menentukan tujuan tautan
• target untuk menentukan metode kunjungan
Contoh:
<a href="https://www.google.com">Kunjungi Google</a>
<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
Image (Gambar)
• <img> • Terdapat Dua Jenis src:
• TIDAK memiliki tag penutup • Absolute URL  Eksternal
• Relative URL  Local
• Menampilkan gambar
• Terdapat Atribut khusus yaitu
• src  sumber file
• alt  teks alternatif jika sumber file
tidak bisa diakses
• width  menentukan panjang
gambar dalam pixel
• height  menentukan tinggi
gambar dalam pixel
List (Daftar)
• Terdiri dari dua pilihan tag, <ul> dan <ol>
• <ul> artinya Unordered List / Daftar Tidak Berurut
• <ol> artinya Ordered List / Daftar Berurut
• Di dalam keduanya terdapat tag <li> artinya List Item
• Masing-masing tag memiliki tag penutup
• Memiliki atribut khusus yaitu type untuk menentukan tipe list
• Untuk <ul>, type bisa bernilai disk, circle, square, none. Secara default adalah
disk
• Untuk <ol>, type bisa bernilai 1, A, a, I, i. Secara defaut adalah 1
Contoh List
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Catatan: List bisa saling bersarang

Form (Formulir)
• Formulir HTML digunakan untuk mengumpulkan input pengguna. Input pengguna
paling sering dikirim ke server untuk diproses.
• Elemen <form> adalah wadah untuk berbagai jenis elemen input, seperti: text,
checkbox, radio, tombol submit, dll.
• Memiliki atribut khusus yaitu method, action, target, autocomplete, novalidate,
enctype, name, accept-charset, rel
<form method="POST" action="login.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="text" id="password" name="password">
</form>
Elemen Input
• <input type="button"> • <input type="password">
• <input type="checkbox"> • <input type="radio">
• <input type="color"> • <input type="range">
• <input type="date"> • <input type="reset">
• <input type="datetime-local"> • <input type="search">
• <input type="email"> • <input type="submit">
• <input type="file"> • <input type="tel">
• <input type="hidden"> • <input type="text">
• <input type="image"> • <input type="time">
• <input type="month"> • <input type="url">
• <input type="number"> • <input type="week">
Memiliki atribut khusus yaitu type, for, name, value, placeholder, autofocus, autocomplete, width, height,
required, disabled, readonly, size, maxlength, min, max, formaction, formenctype, formmethod, formtarget,
formnovalidate, multiple, pattern, list
Table (Tabel)
• Tabel HTML memungkinkan pengembang web untuk mengatur data ke dalam baris dan kolom.
• Struktur Table sederhana
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
• tr adalah table row, th adalah table head, td adalah table data
Atribut Global
• Atribut yang bisa digunakan di semua elemen HTML
• Yang paling populer dan sering digunakan:
• id  digunakan sebagai selector CSS maupun JS
• class  digunakan sebagai selector CSS maupun JS
• style  digunakan untuk menambahkan CSS di elemen tertentu
• data-*  digunakan untuk menyimpan sebuah variable ke dalam dataset
DOM (Document Object Model)
Elemen Block vs Inline
Semantic vs Non-Semantic
Grafis & Multimedia di HTML
• Canvas  Menggambar animasi atau membuat game sederhana
• Audio  Menyisipkan audio ke dalam HTML
• Video  Menyisipkan video ke dalam HTML
• Youtube  Menyisipkan youtube ke dalam HTML
• Akan dipelajari lebih detail di pertemuan lain

Konsep HTML, CSS, JS & Dasar

Diunggah oleh

Informasi Dokumen

Judul 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

Konsep HTML, CSS, JS & Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Konsep

Kelas Coding MTs Istiqlal Jakarta

• HTML adalah singkatan dari Hyper Text Markup Language

• CSS adalah singkatan dari Cascading Style Sheets

<h1>Judul pertama saya</h1>

• Buka Notepad (Windows) atau TextEdit (Mac)

• Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML

Catatan: List bisa saling bersarang

• Akan dipelajari lebih detail di pertemuan lain

Anda mungkin juga menyukai