P1. HTML

PERTEMUAN 1: HTML
(Struktur HTML, Format Teks)
A. KOMPETENSI DASAR
a. Memahami struktur dasar dokumen HTML dan HTML5
b. Mampu membuat dokumen HTML yang baik dan benar.
c. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
A. Membuat Dokumen HTML

Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Download dan instal software Sublime Text dan Xampp (tersedia dilearning)
2. Untuk Sublime Text instalasi seperti biasa, sedangkan Xampp silahkan ikuti video instalasi
dan konfigurasi Xampp yang tersedia dilearning.
3. Selanjutnya buat sebuah folder di c:\xampp\htdocs dengan nama P_WEB_NIM.
4. Buka editor teks Sublime Text
5. Ketikkan teks (kode-kode HTML) berikut:
6. Simpan dokumen HTML dengan nama P1_html.html dan letakkan di lokasi direktori web
(C:\xampp\htdocs\P_WEB_NIM)
7. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen
http://localhost/P_WEB_NIM/P1_html.html
B. Format Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks. Langkah-
langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
A. Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan
menggunakan tag <hn> dan diakhiri dengan </hn>, dimana n menyatakan tipe dengan nilai 1-6.
1. Buka editor teks Sublime Text atau klik menu File pilih New File
3. Simpan dokumen HTML dengan nama P1_html1.html dan letakkan di lokasi direktori web
http://localhost/P_WEB_NIM/P1_html1.html
5. Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.
Silahkan ubah struktur kode html seperti berikut:
6. Simpan dan refresh web browser.

B. Paragraf
Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan paragraf. Dalam
konteks HTML, paragraf direpresentasikan melalui tag <p>.
5. Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika hanya ingin
membuat baru, tidak harus menggunakan paragraf. Sebagai gantinya, gunakan tag line break
<br />. Tambahkan kode berikut:
6. Simpan dan refresh web browser

C. Fontase
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font, seperti huruf
tebal, huruf miring, garis bawah, dan masih banyak lagi.
D. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag <body>. Atribut ini dapat diisi
dengan nama warna misalnya red atau kode heksadesimal misalnya #FFFFFF. Khusus untuk elemen-elemen lain
tertentu, tersedia atribut color yang memungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilai
atribut ini juga dapat berupa nama warna atau kode heksadesimal.
E. Bekerja dengan Gambar
Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk keperluan ini,
HTML menyediakan tag <img> yang didukung dengan sejumlah atribut.
1. Masukkan File Gambar yang akan digunakan kedalam folder (C:\xampp\htdocs\P_WEB_NIM)
Contoh:
Nama file: mesincuci
Tipe : .jpg
Ket:
Width adalah Lebar gambar dan height adalah panjang gambar dalam ukuran px (pixel) dan % silahkan
diubah dengan px atau %
STUDI KASUS
Membuat halaman web sederhana yang berisi tentang biodata anda melibatkkan elemen paragraf,
Fontase, pewarnaan dan gambar simpan di folder P_WEB_NIM. Upload hasil praktikum beserta
dengan file latihan diatas dalam bentuk zip.
SELAMAT MENGERJAKAN

P1. HTML

Diunggah oleh

Informasi Dokumen

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

P1. HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PERTEMUAN 1: HTML

(Struktur HTML, Format Teks)

a. Memahami struktur dasar dokumen HTML dan HTML5

b. Mampu membuat dokumen HTML yang baik dan benar.

c. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.

A. Membuat Dokumen HTML

6. Simpan dan refresh web browser.

6. Simpan dan refresh web browser

E. Bekerja dengan Gambar

1. Masukkan File Gambar yang akan digunakan kedalam folder (C:\xampp\htdocs\P_WEB_NIM)

Anda mungkin juga menyukai