Format Teks Pada Halaman
Web
Dasar HTML (Hypertext Markup Language)
HTML disebut Bahasa markup karena menggunakan tanda (mark)
untuk menandai bagian-bagian dari teks. Misalnya, teks di antara tanda
<B> dan </B> akan menjadi tebal, teks di antara tanda <U> dan </U>
akan bergaris bawah
Tugas masing-masing:
HTML : Membuat struktur sebuah halaman dan menyajikan konten
CSS : Menghias halaman supaya terlihat lebih bagus
Javascript : Khusus di materi ini untuk interaktifitas, animasi, slide
show dsb
Html bisa menghias font tetapi css bisa melakukan jauh lebih baik
Analoginya
Manekin memiliki struktur tubuh
Baju, aksesoris merupakan teknologi css
Javascript selain membuat tampilan lebih menarik, juga
membuat jadi lebih cerdas karena merupakan programming
language, dia bisa melakukan pengambilan keputusan, proses
komuptasi yang lebih kompleks sehingga manekin bisa
berjalan, bicara dsb.
Format Dokumen HTML
Struktur Penulisan HTML
Tag DOCTYPE berfungsi memberitahu web browser bahwa dokumen yang akan di proses
adalah HTML
Jika tidak dituliskan browser tetap menampilkan dan memproses halaman web, namun browser
sebenarnya menjakankan halaman HTML pada mode khusus yang disebut quirk mode
<html> tag pembuka, semua kode harus berada di dalam tag ini
<head> umum nya berisi berbagai definisi halaman (kode CSS, JavaScript, dll yg tidak tampil di
browser)
<title> judul dokumen ditampilkan pada title bar di web browser
<body> berisi semua elemen yang akan tampil dalam halaman web (paragraph, tabel, link, gambar,
dll)
tag <HTML>
Bagian <head>
Judul halaman <title></title>
CSS <style></style>
javascript <script></script>
metadata <meta> </meta> -> berfungsi untuk mendiskripsikan website kita
Bagian <body>
Teks <h1>, <h2>,
Pendukung teks <br>, <hr> <em>, <strong>
Gambar <img>
Hyperlink <a>
List (bullets & numbering) <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Tabel <table>, <thead>, <tbody>, …
Form <form>, <input>, <select>, <button> …
Script <script>
Object <object> multimedia menyimpan flash
Groping <div>, <span>
Komentar <!– in adalah komentar. -- >
Struktur tag
<namatag atribut=“nilai”>
Contoh
<body bgcolor=“lighblue”>
Atribut global
Accesskey = menentukan elemen ini bisa diakses menggunakan keyboard
dir=menentukan arah tulisan direction
lang=language
Style=menyisipkan inline css
Title=memberikan judul
paragraf
<body>
<p>membuat paragraph 1</p>
<br>
<p>membuat <br> paragraph 2 </p>
<hr>
<p><b>Selamat datang</b> di halaman <i>web pertama saya</i></p>
<p>nama saya <u> Shandra W </u> </p>
<hr>
<p><strong>Pengumuman</strong>, pembelajaran PWPB hari ini <em>Lanjut
sampai sore</em></p>
</body>
heading
<body>
<h1>judul makalah</h1>
<p>isi makalah</p>
<h2>sub bab</h2>
<p> isi sub bab</p>
<h3>sub sub bab>
<h6> paling kecil </h6>
</body>
List <HTML>
<ol> ordered list - list ter urut bisa menggunakan - atribut type : 1, A, a, I, i
<ul> unordered list - membuat list tidak terurut - atribut type : disc, square, circle
<dl> definition list – terminologi dan deskripsi jadi isinya berpasangan
<body> <h3>List bawaan Kamis</h3> <h3>Mapel PWPB</h3>
<h3>List Mapel hari Kamis</h3> <ul> <dl>
<ol> <li> Laptop </li> <dt> HTML </dt>
<li> PWPB </li> <li> Cas Laptop </li> <dd> Hypertext Markup Language</dd>
<li> Basis Data </li> <li> HP </li> <dt> CSS </dt>
<li> Matematika </li> <li> Kabel data </li> <dd> Cascading Style Sheets </dd>
</ol> </ul> </dl>
</body>
hyperlink <HTML>
<a> </a> anchor / engker , Atribut href -> <a href=“”></a>
External Link Internal Link Relative url
Menuju ke website lain : Google Menuju ke halamn website lain halamn website lain yang satu
yang satu domain domain di folder yang berbeda
<body> <body> <body>
<p>Klik disini untuk masuk ke <p>Klik <a href=“[Link]> <p>Klik <a
halaman berikutnya</p> disini untuk masuk ke halaman href=“baru/[Link]>
2</p> disini untuk masuk ke halaman
Kemudian ganti
belajar list</p>
<p>Klik <a Kemudian membuat halaman 2
href=[Link] <p>Kembali <a Kemudian membuat halaman 2
disini untuk masuk ke halaman href=“[Link]> ke <p>Kembali <a
webnya Google</p> halaman 1</p> href=“../[Link]>
</body> </body> ke halaman belajar hyperlink</p>
</body>
TUGAS !
Membuat Folder dengan nama depan kalian (missal Shandra)
Kemudian di dalam folder Shandra buatlah file html dengan nama halaman1
Membuat Folder lagi dengan nama belakang kalian (missal Liany)
Kemudian di dalam folder Liany buatlah file html dengan nama halaman2
Hubungkan kedua halaman tersebut dengan menerapkan Relative url
image <HTML>
<img src=“”> atribut src, alt (memberikan alternative teks pada gb), title (memberikan judul pada
gambar), width (lebar gb), height (tinggi gambar) -> px, %
Internal resource (png, jpg…) Ecternal resource
Gambar yg sdh ada di folder yg mengambil gambar dari web lain
sama dengan html
Tidak di sarankan
<body> Contoh penerapan atribut
<img src=“[Link]”>
</body> <body>
<img src=“[Link]” alt=“Logo Sekolah”
Berlaku relative title=“LogoSMKN1Dlanggu” width=“50% atau 200”>
</body>
<img src=“folder1/[Link]”>
Tabel <HTML>
Struktur tabel
<table></table>
Tabel <HTML>
Simple Complex
<table>
<tr>
<td>baris1, kolom 1</td>
<td>baris1, kolom 2</td>
</tr>
<tr>
<td>baris2, kolom 1</td>
<td>baris2, kolom 2</td>
</tr>
</table>
Tabel <HTML>
Atribut -> border (garis disekitar cell), cellspacing (menambah jarak antar
cell), cellpadding (memberi luas dari sebuah cell), colspan , rowspan
Tabel <HTML>
Melakukan margin
colspan (menggabungkan 2 atau lebih kolom)
rowspan (menggabungkan 2 atau lebih baris)
Tabel <HTML>
colspan
Tabel <HTML>
Rowspan -> menggabungkan baris
Latihan
form <HTML>
Elemen yang digunakan untuk mengelola data dari input yang dilakukan oleh
user
Log in form
Form registrasi
dsb
<form> Elemen form </form>
Elemen yang sering digunakan di dalam form:
Input, textarea (mengisikan pesan, komentar), select (dropdown,
combobox), button, label(menandai sebuah elemen input
<Input type =“”> …. Text, password, radio, checkbox, dll
TUGAS
Membuat halaman web
1. Beranda ada list, foto, mengarahkan ke website smkn 1 dlanggu,
mengarahkan ke halaman tabel jurusan, mengarahkan ke halaman
form pertanyaan
2. Tabel Jurusan (berisikan jurusan, tingkatan, jumlah kelas, total kelas
per jurusan)
Jurusan Tingkatan Jumlah Kelas Total Kelas di Jurusan
Rekayasa Perangkat X 3
Lunak XI 3 8
XII 2
3. Form pertanyaan (gunakan Sebagian besar elemen)