2_dasar-dasar html
Transcript of 2_dasar-dasar html
-
8/7/2019 2_dasar-dasar html
1/31
Triyanna Widiyaningtyas
-
8/7/2019 2_dasar-dasar html
2/31
HTML (Hypertext Markup Language) merupakansebuah bahasa markup, bukan bahasapemrograman. Bahasa markup (Indonesia:markah) adalah bahasa yang mengombinasikan
teks dan informasi tambahan mengenai tekstersebut. HTML merupakan dokumenstandar yang digunakan untuk mendesainhalaman web.
Pada awal tahun 2000, W3C (World WideWeb Consortium) membuat perubahan besar
melalui XHTML (eXtensible Hypertext MarkupLanguage). Ide dasarnya, dalam upayameningkatkan kompatibilitas dokumen HTML,W3C menambahkan struktur dan ekstensibilitasXML (eXtensible Markup Language) ke HTML.
-
8/7/2019 2_dasar-dasar html
3/31
-
8/7/2019 2_dasar-dasar html
4/31
Di samping elemen utama di atas, masih
terdapat berbagai jenis elemen yang dapat
digunakan di dalam dokumen HTML. Salah
satu elemen yang perlu diperhatikan adalahuntuk penulisan komentar. Di HTML,
komentar dinyatakan dengan tag .
-
8/7/2019 2_dasar-dasar html
5/31
Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan:
a. WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihanpaket bundel seperti ini dikarenakan praktis sehingga tinggalmemfokuskan pada pemrograman.
b. Web BrowserSangat disarankan menggunakan browser utama Mozilla Firefox.Adapun untuk pembanding, sebaiknya juga memanfaatkanbrowser lain.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentukhalaman aplikasi web (tidak diperkenankan menggunakan IDEseperti Dreamweaver dan sebagainya).
d. HTML Validator
Untuk menghasilkan dokumen HTML yang valid, diwajibkanmemasang validator, misalnya berupa add-on pada browserFirefox.
-
8/7/2019 2_dasar-dasar html
6/31
Secara garis besar, struktur dokumen HTMLterdiri dari dua bagian: headerdan bodi. Dimana header mendefinisikan informasimengenai dokumen, sedangkan bodi
mendefinisikan tubuh atau isi dokumen.Ini judul dokumen
Ini adalah teks di body
-
8/7/2019 2_dasar-dasar html
7/31
Untuk menghasilkan dokumen yang well-
formed, kita harus merujuk pada aturan XML
yang dituangkan ke dalam dokumen XHTML.
Dalam implementasinya, di sini kitamenambahkan tag di bagian
paling atas dan mengidentifikasikan dokumen
sebagai XHTML compliant.
-
8/7/2019 2_dasar-dasar html
8/31
Ini judul dokumen
Ini adalah teks di body
-
8/7/2019 2_dasar-dasar html
9/31
Untuk menguji aplikasi web, kitamempublikasikannya ke web server, baiksecara lokal maupun Internet. Lingkunganlokal tentu merupakan pilihan yang efisien,khususnya ketika aplikasi masih dalam tahappengembangan.
Langkah yang diperlukan untuk publikasi inisangat sederhana. Pastikan bahwa file
dokumen sudah diletakkan di direktori web,misalnya untuk WampServer lokasidefaultnya adalah www. Untuk paket webserver lainnya, misalnya XAMPP adalahhtdocs.
-
8/7/2019 2_dasar-dasar html
10/31
HTML menyediakan beragam elemen yang
dapat dimanfaatkan untuk pemformatan teks.
Heading
Heading merupakan salah satu elemen penting didalam dokumen HTML. Heading didefinisikan
menggunakan tag dan diakhiri dengan , di
mana n menyatakan tipe dengan nilai 1-6.
Heading 1
Heading 2 Heading 3
Heading 4
Heading 5
Heading 6
-
8/7/2019 2_dasar-dasar html
11/31
Elemen heading menyediakan atribut align yang
dapat digunakan untuk mengatur posisi teks.
Heading 1
Heading 2 Heading 3
-
8/7/2019 2_dasar-dasar html
12/31
-
8/7/2019 2_dasar-dasar html
13/31
Ini paragraf pertama
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
Ini paragraf ketiga
-
8/7/2019 2_dasar-dasar html
14/31
Sebagaimana heading, kita juga bisa mengatur posisiparagraf dengan memanfaatkan atribut align. Sebagaicontoh, dokumen berikut akan menghasilkan paragrafrata tengah, kiri kanan, dan kanan
Demo Paragraf
Ini paragraf rata tengah
-
8/7/2019 2_dasar-dasar html
15/31
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Ini paragraf rata kanan
-
8/7/2019 2_dasar-dasar html
16/31
Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kitahanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya,gunakan tag line break
.Membuat baris baru
Membuat baris baru
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
-
8/7/2019 2_dasar-dasar html
17/31
HTML menyediakan sejumlah elemen yang dapat
dimanfaatkan untuk mengatur font, seperti huruf tebal, huruf
miring, garis bawah, dan masih banyak lagi.
Sebagai tambahan, di sini juga akan dijelaskan mengenai cara
mencetak tag. Seperti diketahui, tag
di dokumen secaraotomatis akan diterjemahkan sebagai paragraf. Adapun untuk
mencetak karakter
di layar, kita perlu menggunakan namaentitas. Sebagai contoh, karakter < dinyatakan dengan nama
entitas < dan karakter > dinyatakan dengan >.
-
8/7/2019 2_dasar-dasar html
18/31
Menggunakan tag ...
Menggunakan tag
...
Menggunakan tag ...
Menggunakan tag ...
Menggunakan tag ...
Menggunakan tag
...
-
8/7/2019 2_dasar-dasar html
19/31
Di HTML, kita juga bisa menampilkan
karakter-karakter khusus dengan
memanfaatkan nama entitas. Tabel berikut
memperlihatkan beberapa jenis karakter khusus
yang dapat digunakan beserta nama entitasnya.
Karakter Deskripsi Nama Entitas
Cent
Pound
Yen Euro
Copyright
Registered
Trademark
-
8/7/2019 2_dasar-dasar html
20/31
Adakalanya kita menginginkan agar teks
yang tertulis di editor teks dapat ditampilkan
apa adanya. Pada kasus seperti ini, kita
bisa memanfaatkan keberadaan tag .Tag ini akan menampilkan teks dengan font
Courier dan tetap mempertahankan spasi
serta baris baru.
-
8/7/2019 2_dasar-dasar html
21/31
------------------------------------------------
No | Nama | Alamat------------------------------------------------
1 | PT. Bintang | Jl. Terusan Surabaya
2 | PT. Sinar Jaya | Jl. Tidar
3 | PT. Mitra | Jl. Galunggung
4 | PT. Harapan | Jl. Jombang
5 | PT. Barokah | Jl. Bondowoso
------------------------------------------------
-
8/7/2019 2_dasar-dasar html
22/31
Di HTML, garis horizontal direpresentasikan
melalui tag . Meskipun kebanyakan
browser me-renderelemen ini dengan
visualisasi yang sedikit berbeda, namunpada hakekatnya mencerminkan sebuah
bentuk garis horizontal
-
8/7/2019 2_dasar-dasar html
23/31
Membuat garis horizontal
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
-
8/7/2019 2_dasar-dasar html
24/31
HTML mendukung list dalam bentuk terurut
(ordered), tak terurut (unordered), dan
definisi (definition). Untuk setiap bentuk list
ini, terdapat list itemdinyatakan melaluitag berpasanganyang merepresentasikan
item-item list.
-
8/7/2019 2_dasar-dasar html
25/31
Ordered List
Sat
D a
Unordered List
Satu
Dua
Definition List
Satu
Satu Satu
Dua
Dua Dua
-
8/7/2019 2_dasar-dasar html
26/31
-
8/7/2019 2_dasar-dasar html
27/31
Heading 3
Font berwarna merah
Font berwarna merah (menggunakan nilai heksa)
-
8/7/2019 2_dasar-dasar html
28/31
Tak hanya teks, kita juga bisa
menyisipkan gambar di dalam dokumen
HTML.
Untuk keperluan ini, HTML menyediakan tag yang didukung dengan sejumlah
atribut.
-
8/7/2019 2_dasar-dasar html
29/31
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna
aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna
aliqua.
-
8/7/2019 2_dasar-dasar html
30/31
Buat halaman web sederhana yang
melibatkan elemen teks, garis, warna, dan
gambar. Di mana terdapat minimal sebuah
heading dan garis berwarna, gambardengan garis tepi (border), dan halaman
utama dengan latar belakang gambar
sembarang.
-
8/7/2019 2_dasar-dasar html
31/31