MODUL LURING

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

KELAS XI

REKAYASA PERANGKAT LUNAK

MODUL 2

MENERAPKAN FORMAT TEKS PADA HALAMAN WEB

DINAS PENDIDIKAN PROVINSI JAWA TIMUR

SMK NEGERI 2 SINGOSARI
2020
 Modul 2

MENERAPKAN FORMAT TEKS PADA HALAMAN WEB

A. Judul Materi : Menerapkan Format Teks pada Halaman Web

B. Kegiatan Belajar : Daring

C. Kompetensi Dasar
3.2 Menerapkan format teks pada halaman web
4.2 Membuat kode html untuk menampilkan teks dalam format tertentu pada halaman web

D. Indikator Pencapaian Kompetensi

3.2.1 Menjelaskan struktur dasar pemrograman web dengan html.
3.2.2 Menjelaskan berbagai versi dari html.
4.2.1 Merancang program tampilan format teks dalam halaman web
4.2.2 Membuat program halaman web yang menampilkan teks dengan berbagai format.

D. Tujuan Pembelajaran
1. Siswa dapat mengamati untuk mengidentifikasi dan merumuskan masalah tentang format
teks pada halaman web.
2. Siswa dapat mengumpulkan dan mengolah data tentang format teks pada halaman web.
3. Siswa dapat mengomunikasikan tentang format teks pada halaman web

E. Uraian Materi

1. Struktur Dasar Pemrograman Web Dengan HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script untuk
menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler
dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-
perintah yang dispesifikasikan.

Struktur dasar pemrograman website HTML / dokumen HTML adalah sebagai berikut:
2. Versi HTML

HTML sudah menjadi teknologi utama web dari 1990an setelah Tim Berners-Lee, yang
merupakan ahli fisika dari Lembaga Penelitian CERN, menciptakannya di tahun 1989.
Tujuan awal dari pembuatan HTML adalah untuk melayani pembaca agar bisa membuka
dokumen yang berformat HTML. Namun, seiring vitalnya manfaat HTML, hingga saat ini
sudah ada 5 versi yang Anda kenal, seperti berikut ini:

a. HTML v1.0
Versi pertama dari HTML ini adalah pionir dari perkembangan HTML. Tidak heran jika
versi ini memiliki banyak sekali kelemahan termasuk tampilannya yang masih sangat
sederhana. HTML versi 1.0 ini sudah mampu mendukung peletakan image pada
dokumen tanpa adanya wrapping, heading, hypertext, paragraph, cetak tebal dan miring
pada penulisan text.

b. HTML v2.0 (24 November 1995)

HTML versi 2.0 adalah pionir dari web interaktif seperti yang Anda temukan saat ini.
Dibandingkan dengan versi pertama, struktur HTML lebih tertata rapi dan mampu
menampilkan form dokumen. Dengan adanya form tersebut, Anda bisa memasukkan
alamat, nama, saran dan kritik pada suatu dokumen.

c. HTML v3.0
Jika dibandingkan dengan kedua versi HTML sebelumnya, HTML v3.0 tidak memiliki
umur yang lama. Itu disebabkan karena ada versi terbaru dari versi 3, yaitu versi 3.2. Di
versi 3.0, HTML sudah bisa dipergunakan untuk meletakkan tabel dan gambar. Fitur
terbaru dari HTML 3.0 juga mampu untuk mendukung penggunaan rumus matematika
pada dokumennya.

d. HTML v3.2 (14 Januari 1996)

HTML versi ini adalah pembaruan dari versi 3.0. Hingga saat ini, jenis HTML ini adalah
yang paling sering dipergunakan. Versi ini dipublikasikan dan versi pertama yang
dikembangkan serta distandarisasi khusus oleh W3C. Versi 3.2 ini pada awalnya disebut
dengan Wilbur sebelum dikenal dengan nama HTML versi 3.2.

Fitur yang ada di versi ini diantaranya adalah gambar untuk background, tabel, style,
frame, hingga teks di sekeliling gambar. Jika di versi sebelumnya, Anda hanya bisa
menggunakan HTML saja untuk pembuatan dokumen namun di versi ini tidak. Artinya,
Anda bisa menggunakan script di luar HTML untuk kinerja HTML yang lebih baik atau
untuk tujuan tertentu. Beberapa script HTML yang bisa dipergunakan diantaranya adalah
Javascript dan VBScript.

e. HTML v4.0 (18 Desember 1997)

Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2.
Beberapa diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.
f. HTML v4.01 (5 Mei 2000)
Setelah ada versi 4.0, terdapat versi 4.01 yang merupakan revisi dari versi sebelumnya.
Di versi ini, ada perbaikan kesalahan minor (kecil). Dari struktur pada HTML yang ada
di versi ini, membuat HTML v4.01 menjadi standarisasi elemen serta atribut script
XHTML 1.0.

g. HTML v5.0 (28 Oktober 2014)

Bisa dikatakan, versi 5.0 dari HTML adalah versi paling canggih dan paling stabil
dibandingkan versi sebelumnya. Pembaharuan ini baru diperkenalkan pada tahun 2009.
Versi terbaru ini dikembangkan lagi pada tanggal 4 Maret 2010 oleh W3C dan IETF
(Internet Engineering Task Force). IETF sendiri merupakan organisasi yang sudah
menangani HTML sejak v2.0.

3. Html, Head, Title, Body.

a. HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan
seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan,
dan blockquote untuk halaman web dan aplikasi.

b. Head adalah elemen HTML head <head> sangat disarankan untuk disertakan dalam
semua dokumen HTML karena jika kita tidak sertakan bisanya akan mengakibatkan
error, terlebih lagi jika browser yang kita pakai adalah browser lama. Meskipun saat ini
pada HTML5 kita bisa menghilangkan penulisan tag ini, masih sangat disarankan untuk
tetap menuliskan-nya.

Berikut penjelasan singkat mengenai elemen dan atribut yang biasanya digunakan pada
elemen HTML head.

- Elemen HTML title – Digunakan untuk memberikan judul pada halaman.

- Elemen HTML base – Digunakan untuk menentukan URL default dan target default
untuk semua link pada halaman.
- Elemen HTML script – Digunakan sebagai tempat penulisan script tambahan,
biasanya javascript.
- Elemen HTML meta – Digunakan untuk menyediakan metadata tentang dokumen
HTML. Metadata bisa berupa deskripsi, kata kunci atau lainnya.
- Elemen HTML link – Digunakan untuk mendefinisikan link di dalam atau antara
dokumen HTML dan juga untuk dokumen pada sumber eksternal (biasanya file
CSS).
- Elemen HTML style – Digunakan untuk mendefinisikan informasi style untuk
dokumen HTML.

c. Title adalah Title tag menentukan isi dari sebuah halaman. Title tag juga sering
digunakan oleh search engine sebagai judul dari hasil pencarian. Ini membuat title tag
penting untuk SEO dan juga untuk berbagi di jejaring social. Elemen ini di buat untuk
menjelaskan dan mendeskripsikan apa yang di bahas dalam sebuah halaman web. Hal ini
penting baik itu untuk pembaca dan juga untuk optimasi di search engine.

d. HTML elementbody menunjukkan konten sebuah dokumen. Isi dari sebuah dokumen
HTML yang akan ditampilkan pada jendela browser terdapat pada elemen <body>,
 sedangkan informasi dan keterangan lainnya yang berkaitan dengan dokumen tersebut
dapat ditulis pada element <head>. Dalam sebuah dokumen, hanya terdapat satu element
<body>.

4. Tag Syntax, Option

a. Tag Syntax
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web
browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf,
list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan
tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan
tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada
di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

<p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
</p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda
forward slash (/)

Contoh :

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat.
Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk
menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk
menebalkan tulisan (b, singkatan dari bold)

b. Option .
Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan
dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang
mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat
user. Berikut contoh penulisannya:
5. Fungsi Berbagai Tag dalam Html

Berikut adalah daftar dari tag-tag HTML.

<form>
Tag untuk membu at sebua h form HTML untuk input pengguna

<input»
Tag untuk membuat sebuah kontrak input

<textarea>
Tag untuk membuat sebuah kontrak input multibaris (text a rea)

<button>
Tag untuk membuat sebuah tombol yang dapat diklik

* select>
Tag untuk membuat sebuah dafta r drap-down

Tag untuk membuat sebuah kelompok p ilihan yang terkait dalam dafta r d rap-

«opbon>
down Tag untuk membuat pilihan dalam d altar drap-d own

<label>
Tag untuk membuat sebuah la bet untuk sebuah elemen <input>

-=fieIdset>
Grup unsur terkait dalam bentuk

*legend>
Tag untuk membuat sebuah caption untuk seb uah elemen <Iield set>, *figure>, atau
<d eta ils>

Menentukan daltar pilihan yang telah ditetapkan untuk kontrol input (tag baru
HTMLS)

Audio/Video

*a udio>
Tag untuL mem buat isi suara (tag baru HTMLS)

Tag untuk membu at sumber beberapa media untuk elemen media (<video> dan
<audio>) (tag baru HTMLS)
<tra ck>
Tag untuk membuat trek teks untuk elemen media {<uideo> dan <a u dio*) (log baru
HTMLS)
<video>
Tag untuk membuat sebuah video atau film (tag baru HTMLS)
Lsnks

*a>
Tag untuk membu at hyperlink
<link>
Tag untuk membuat hubungan antara dokumen dan sumber daya ekstemal (paling
sering digunakan untuk link ke style sheet)
<n
Tag untuk m em bu at naviga si link {tag baru HTM LS)
av>

Lists
Tag untuk mem buat daft:a r d engan selain nomor
<ul>
Tag untuk membuat daftar dengan nomor
<ol>
Tag untuk membuat sebuah item daftar
<li>
6. Format teks dalam html.
Hasil dari format diatas setelah di jalankan (run)