Pertemuan 2 Pemograman

MENYAJIKAN FORMAT
TEKS DALAM
DOKUMEN WEB
Pertemuan kedua(2), Pemrograman Web dan Perangkat Bergerak
07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 1

Latihan sesi 1
• 1. Jelaskan apa tugas profesi dalam pengembangan aplikasi web
berikut : 2. Apa kepanjangan dari istilah-istilah berikut ini :

a. WWW
• a. Web Designer b. HTML
c. URL
• b. Web Programmer
d. W3C
• c. Web Administrator e. HTTP
f. FTP
• d. Web Master g. IP
3. Sebutkan versi HTML dari versi awal hingga sekarang !
4. Sebutkan berbagai jenis browser, sebutkan masing-
07/09/2021
masing keunggulan dan kekurangannya, kemudian 2
Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST
sebutkan browser pilihan kalian!

Anatomi Dokumen Web
Dasar-dasar HTML
• Apa itu HTML ?
• HTTP (Hypertext transfer protocol) merupakan protokol yang
digunakan untuk mentransfer data antara web server ke web browser.
• Protocol ini mentransfer dokumen-dokumen web yang ditulis atau
berformat HTML (Hypertext MarkupLanguage).
• Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web
browser hal ini dilakukan dengan menambahkan elemen atu sering
disebut sebagai tag-tag pada file teks biasa tersebut.

Anatomi Dokumen Web
Dasar-dasar HTML HTML 5
• Header. Berguna untuk menyatakan suatu judul, yang bisa diisi
dengan elemen logo dan nama perusahaan.
• Footer. Merupakan kebalikan dari header. Sebagai catatan kaki,
elemen ini berguna untuk menaruh informasi di bagian bawah
halaman web.
• Time. Elemen ini berguna untuk menyajikan informasi tentang
waktu.
• Audio. Memungkinkan penyajian player untuk memutar suara.
• Video. Memungkinkan player untuk memainkan film.

Anatomi Dokumen Web
Dasar-dasar HTML Tag HTML
• Yang membedakan dokumen HTML dengan dokumen – dokumen lainnya
adalah adanya elemen HTML yang di sebut juga dengan Command HTML dan
biasa di sebut dengan TAG yang di gunakan untuk menentukan tampilan dari
dokumen HTML. Setiap dokumen HTML di awali dan di akhiri
dengan TAG HTML.
• Contoh : <BEGIN TAG> </END TAG>
TAG tidak case sensitive sehingga bisa menggunakan <HTML> atau <html>.
• Artinya, Kapital atau tidak, tidaklah masalah.

Anatomi Dokumen Web
Dasar-dasar HTML Tag HTML

Anatomi Dokumen Web
Struktur dasar HTML
• <html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,atau apapun
yang tampil pada dokumen web.
</body>
</html>

Anatomi Dokumen Web
Pengaturan Properti Dokumen
• Kode Warna di HTML5
Jika sesuai dengan Color Name yang ada,

07/09/2021
terdapat 140 warna secara keseluruhan
Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 8
Anatomi Dokumen Web
Atribut Elemen <body>
• BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumen)
• BGCOLOR = Warna (warna latar belakang dokumen, default putih)
• TEXT = Warna (warna teks dokumen, default hitam)
• LINK = Warna (warna link dokumen, default biru)
• VLINK = Warna (warna visited link dokumen, default ungu)
• ALINK = Warna (warna aktif link dokumen, default merah)

Anatomi Dokumen Web
Atribut Elemen Heading
• <h1>… <h6>
• Tag heading berfungsi untuk memformat heading (judul dan subjudul) dari
suatu halam web. Heading ini akan memperbesar ukuran huruf untuk
setiap jenis heading. Ad 6 buah heading yang dikenal di HTML, yaitu dari
<h1> sampai <h6>.

Mengatur folder pembelajaran progweb
Buatlah susunan folder sesuai dengan contoh diatas !

Praktikum pertemuan ketiga 2
• Buka Text Editor/HTML Editor (Notepad++)

• Ketikkan dokumen HTML
• Simpan dengan format *.html
• Buka hasilnya/dokumen html dengan web browser
• Buatlah beberapa dokumen HTML berikut ini. :

Lat1Heading.html

Lat2Paragraf.html

Lat3Link.html

Lat4Gambar.html

Tugas :
Tes Formatif
• 1. HTML kepanjangan dari?
• 2. Siapakah yang membuat standar 3. Tag HTML yang benar untuk ukuran huruf heading terbesar
Web?
• a) Google 4. Tag HTML yang benar untuk membuat huruf menjadi cetak
miring adalah?
• b) Microsoft
5. Apa Tag HTML yang benar untuk membuat hyperlink?
• c) Mozilla a) <a
• name="http://www.w3schools.com">W3Schools.com</a>
d) The World Wide Web Consortium b) <a>http://www.w3schools.com</a>
c) <a href="http://www.w3schools.com">W3Schools</a>
d) <a url="http://www.w3schools.com">W3Schools.com</a>
6. Sebutkan 4 tag minimal dalam sebuah dokumen HTML!


Pertemuan 2 Pemograman

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

Pertemuan 2 Pemograman

Diunggah oleh

Hak Cipta:

Format Tersedia

MENYAJIKAN FORMAT

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 1

berikut : 2. Apa kepanjangan dari istilah-istilah berikut ini :

sebutkan browser pilihan kalian!

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 3

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 4

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 5

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 6

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 7

Jika sesuai dengan Color Name yang ada,

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 9

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 10

Buatlah susunan folder sesuai dengan contoh diatas !

• Buka Text Editor/HTML Editor (Notepad++)

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 12

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 13

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 14

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 15

07/09/2021 Menyajikan Format Teks dalam dokumen Web, Hana ZM, ST 16

6. Sebutkan 4 tag minimal dalam sebuah dokumen HTML!

Anda mungkin juga menyukai