3 - Berbagai Model Text

1 MEMBUAT HALAMAN WEB BARU DAN MENGELOLA KONTEN
TEKS WEB
Capaian Pembelajaran
Setelah membaca dan mengaji bab ini, mahasiswa diharapkan mampu:
• Mahasiswa mampu membuat halaman web baru
• Mahasiswa mampu membuat halaman website sederhana dengan berbagai model text.
3.1. Pengenalan HTML

HTML (HyperText Markup Language) merupakan bahasa yang digunakan untuk
membuat halaman web. Dokumen HTML berisi tanda khusus atau tagging yang menentukan
bagaiman teks ditampilkan di website. Halaman html memiliki ekstensi (*.html atau *.htm)
HTML (HyperText Markup Language) adalah “bahasa” yang digunakan
pada untuk membuat halaman web di internet. HTML memungkinkan untuk menampilkan teks,
gambar, link ke halaman lain, membuat form isian, menyisipkan video, suara, dan lain-lain.
Dokumen HTML sebenarnya hanya berupa file teks biasa yang dilengkapi
dengan tanda-tanda khusus (tag) yang menentukan bagaimana teks tersebut ditampilkan. Karena itu,
dokumen HTML dapat dibuat menggunakan teks editor sederhana seperti Notepad, EditPlus, vi, dan
sebagainya. Namun sekarang initelah banyak visual editor untuk HTML seperti: Microsoft Front
Page, Macromedia Dreamweaver, Adobe GoLive, dan lain-lain.
Selanjutnya dapat membuat satu dokumen HTML sederhana misal dengan menggunakan
Macromedia Dreamweaver CS6 sesuai instalasi sebelumnya dan disimpan (Save as) sebagai
Webpage (*.htm, *.html), contoh dengan nama Hallo.html. Perintah HTML ditandai dengan tag
<html>….</html>
Gambar 1. Sintak HTML
1
Maka hasilnya setelah dijalankan di browser
Gambar 2. Helo Word Hasil di Browser
3.2. Membuat Halaman Web Baru

Setelah mengatur site, maka selanjutnya dapat membuat halaman baru. Pada saat
pembuatan halaman web kita juga harus memberi title atau judul halaman web. Judul merupakan
komponen yang harus ada pada sebuah web, judul menunjukkan identitas halaman web yang akan
tampil pada title bar browser. Judul memberikan gambaran isi dari halaman web. Untuk membuat
halaman web baru maka :
1. Klik menu bar File -> New atau Ctrl+N. Maka selanjutnya akan muncul jendela New
Document seperti gambar 3.
Gambar 3. Pembuatan Dokumen Baru
2. Klik New Document, pada Document Type pilih </>HTML, selanjutnya pada bagian Title
tulis judul halaman yang akan dibuat.
3. Doc Type biarkan pada pilihan HTML5, selanjutnya klik Create.
2
3.3. Elemen-Elemen HTML
Berikut ini elemen-elemen yang terkait dengan text, penjelasannya dimulai dari yang
paling dasar, yaitu paragraph.
Paragraf
Paragraf adalah elemen paling mendasar dari dokumen teks. Tunjukkan paragraf dengan
elemen p dengan menyisipkan tag pembuka di awal paragraf dan tag penutup setelahnya,
seperti yang ditunjukkan dalam contoh ini:
Menjadi Program Studi D3 Administrasi Bisnis Unggul Bertaraf ASEAN dalam
Bidang Administrasi Bisnis pada Tahun 2029.
Menghasilkan Sumber Daya Manusia dalam bidang administrasi bisnis yang
beriman dan bertaqwa kepada Tuhan Yang Maha Esa.
Meningkatkan keahlian dan keterampilan lulusan yang berbasis ilmu
pengetahuan dan teknologi dalam bidang administrasi bisnis. 
Paragraf mungkin bisa berisi teks, gambar, dan elemen inline lainnya, tetapi mereka
mungkin tidak mengandung heading untuk judul, list, atau elemen apa pun yang biasanya
ditampilkan sebagai blok secara default (Robbins, 2018).
Penulisan pada teks halaman web dilakukan dengan cara klik panel grup Insert ->
Paragraph (Gambar 4) arahkan pada lembar kerja atau design view.
Gambar 1. Tools Untuk Menulis Teks
Selanjutnya pada panel properties akan muncul beberapa icon untuk pengaturn font seperti pada
Gambar 5.
Bold,Italic,
HTML settimgs Paragraph Add class unordered list, ordered list
(displayed) Format to tag
Link options
Link
CSS Add ID
Settings to tag
Document
title
Gambar 2. Panel Properties untuk Teks
3
Heading
Paragraph digunakan untuk membuat paragraf, sedangkan heading untuk mengatur
ukuran huruf pada halaman web. Heading dimulai dari heading 1(H1) sampai heading 6(H6) yang
semakin lama ukurannya semakin kecil. Model ukuran heading ditunjukkan pada Gambar 6. Pada
panel properties akan menampilka beberapa pengaturan untuk mengatur tulisan seperti yang terlihat
pada Gambar 6
Gambar 3. Model dan Ukuran Heading
Sumber Gambar : (McFarland & Grover, 2015)

Lists
HTML menyediakan elemen untuk mengurutkan dan membuat list/daftar. Terdapat
beberapa macam list antara lain :
Unordered lists
Daftar item yang muncul tanpa urutan tertentu dengan penggunaan simbol. Penggunaan list
ini digunakan untuk daftar yang tidak memerlukan urutan. Untuk mengidentifikasi daftar yang
tidak diurutkan, tandai sebagai elemen ul. Tag <ul> pembuka diletakkan sebelum item daftar
pertama, dan tag penutup </ul> dilektakkan setelah item terakhir. Kemudian, untuk menandai
setiap item dalam list sebagai item list(li), diletakkan pada pembuka dan penutup tag li, seperti
yang ditunjukkan dalam contoh ini, gambar 7.
Gambar 4 Unordered List
Sumber Gambar : (Robbins, 2018)
Ordered lists
Daftar secara terurut berdasarkan angka, huruf, atau romawi. Penggunaan list ini untuk
daftar yang mementingkan urutan tertentu seperti langkah-langkah atau petunjuk. Ordered list
dicontohkan seperti pada gambar 8.
4
Gambar 5 Ordered List

Description lists
Daftar yang terdiri dari pasangan nama dan nilai, termasuk tetapi tidak terbatas pada istilah
dan definisi.
<dl> ….</dl> descripsi list
<dt>…..</dt> nama, seperti istilah atau label
<dd>….</dd> nilai, seperti deskripsi atau definisi
List deskripsi digunakan untuk semua jenis pasangan nama / nilai, seperti istilah dan
definisi, pertanyaan dan jawaban, atau jenis istilah lainnya dan informasi terkait. Struktur mereka
sedikit berbeda dari dua list lain yang sebelumnya telah dijelaskan. Semua list deskripsi ditandai
sebagai elemen dl. Isi dari dl adalah sejumlah elemen dt yang menunjukkan nama, dan elemen dd
untuk nilai masing-masing. List deskripsi seperti dicontohkan pada gambar 9.
Gambar 6. Description List
Elemen dl hanya boleh mengandung elemen dt dan dd. Kita tidak bisa menyisipkan elemen
heading, atau paragraph ke dalam elemen nama (dt), tetapi nilainya (dd) dapat berisi semua jenis
elemen disisipkan. Sebagai contoh, elemen dd terakhir dalam contoh sebelumnya berisi dua elemen
paragraf (spasi default yang canggung dapat dibersihkan dengan style sheet) (Robbins, 2018).
5
Horizontal Rule
Horizontal rule atau HR merupakan elemen kosong, kita cukup meletakkan tag <hr>
dimana tempat yang akan diberi garis, seperti contoh gambar 10
Gambar 7 Horizontal Rule
Kutipan Panjang <blockquote>

Jika Anda memiliki kutipan panjang, testimonial, atau bagian salinan dari sumber lain,
tandai sebagai elemen blockquote. Disarankan bahwa konten dalam elemen blokquote terkandung
dalam elemen lain, seperti paragraf, judul, atau daftar, seperti yang ditunjukkan dalam contoh
gambar 11:
Gambar 8 Blockquete

Preformatted Text
Di bab sebelumnya, Anda mengetahui bahwa browser mengabaikan spasi putih seperti
karakter spasi dalam dokumen sumber. Tetapi dalam beberapa jenis informasi, seperti penulisan
puisi, spasi penting untuk menyampaikan makna. Untuk menangani itu maka digunakan elemen teks
pra-format (pra). Elemen unik karena ditampilkan persis seperti yang diketik. Contoh penggunaan
elemen <pre> ditunjukkan pada gambar 12.
6
Gambar 9 Preformatted Text
Sumber Gambar: (Robbins, 2018)
Bold, Italic, Strike, Underline, dan Small

Elemen b, i, u, s, dan kecil diperkenalkan untuk menyusun text tebal, miring, garis bawah,
tulisan dicoret, dan teks yang lebih kecil. Berikut ini contoh dan penjelasannya:
… : Digunakan pada kata yang ditekankan diberi tanda dengan
lebih tebal hurufnya (bold), contoh:
The slabs at the ends of letter strokes
are called
serifs.
 … : Digunakan pada kata atau istilah yang memiliki makna
khusus atau biasanya juga untuk kata atau istilah serapan
dari bahasa yang berbeda (italic), contoh
Simply change the font and
Voila!, a new personality!
<s> ….</s> : Digunakan pada kata yang dicoret atau salah (strike-
through), contoh :
Scala Sans was designed by <s>Eric
Gill</s> Martin Majoor.
 …. : Digunakan untuk teks beranotasi (underline), contoh :
New York subway signage is set in
Helviteca.
… : Digunakan untuk teks lebih kecil dari huruf lainnya
 (smaller type size), contoh :
(This font is free for personal
and commercial use.)
Pada gambar 13 merupakan hasil dari contoh yang sudah dijelaskan sebelumnya
7
Gambar 10 Hasil Bold, Italic, Strike, Underline, dan Small
Sumber Buku : (Robbins, 2018)
3.4. Menulis Text

Penulisan pada teks halaman web dilakukan dengan cara klik panel grup Insert ->
Paragraph (Gambar 3.4) arahkan pada lembar kerja atau design view.
Gambar 14. Tools Untuk Menulis Teks
Selanjutnya pada panel properties akan muncul beberapa icon untuk pengaturn font seperti pada
Gambar 15.
Bold,Italic,
unordered list, ordered list
HTML settimgs Paragraph Add class

(displayed) Format to tag
Add ID Link
CSS
Settings to tag
Link options
Document
title
Gambar 15. Panel Properties untuk Teks
8
Paragraph digunakan untuk membuat paragraf, sedangkan heading untuk mengatur
ukuran huruf pada halaman web. Heading dimulai dari heading 1(H1) sampai heading 6(H6) yang
semakin lama ukurannya semakin kecil. Model ukuran heading ditunjukkan pada Gambar 3.6. Pada
panel properties akan menampilka beberapa pengaturan untuk mengatur tulisan seperti yang terlihat
pada Gambar 16
Gambar 16. Model dan Ukuran Heading
Berikut akan langkah untuk membuat teks pada dokumen html, yang sekaligus bagaimana
membuat list dengan bulleted dan numbering.
9
Gambar 17. Teks Heading dan Paragraf Beserta List
Untuk membuat halaman web seperti Gambar 3.7 maka diperlukan langkah-langkah
berikut:
1. Klik insert -> paragraph, maka pada lembar design view akan muncul tempat untuk menulis
text, seperti Gambar 18 edit tulisan tersebut.
Gambar 18. Desain Tampilan Paragraf
2. Blok judul tulisan “Visi Misi D3 Administrasi Bisnis”, pada panel properties pilih format
Heading 1, untuk sub judul “visi” dan “misi” pilih Heading 3.
Gambar 19. Pengaturan Heading pada Panel Properties
10
3. Blok isi dari misi untuk membuat daftar pada halaman web. Berdasarkan bentuknya ada dua
macam daftar yaitu bulleted atau unordered listdan numbering atau ordered list. Bulleted
merupakan list yang digunakan untuk hal yang tidak terurut. Dengan beberapa simbol untuk
pembuatan list.Numbering merupakan list yang digunakan untuk hal terurut, seperti
penomeran langkah, urutan seperti (1, 2,3,....dst atau 1.1, 1.2, 1.3, ...dst).
Gambar 10. Blok Teks
4. Pada panel properties pilih HTML icon untuk unordered list dan untuk ordered list.
5. Untuk menambahkan tanggal pada halaman web klik menu insert -> html -> date atau pada
panel grup klik insert->date untuk membuka kotak dialog pengaturan kalender seperti Gambar
3.11. Centang “Update automatically on save” agar tanggal pada halaman web berganti secara
otomatis sesuai dengan kalendar yang ada pada komputer.
Gambar 11. Kotak Dialog Insert Date
11
6. Klik OK untuk menampilkan tanggal.
7. Simpan file dengan nama teks.html. Untuk mengetahui hasilnya tekan F12 di browser anda.
3.5. LATIHAN
- Buatlah halaman website seperti Gambar 22 berikut !
- Atur Ukuran Heading dan format tulisan menggunakan Times New Roman!
Gambar 12. Latihan Menulis Teks
12

3 - Berbagai Model Text

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

3 - Berbagai Model Text

Diunggah oleh

Hak Cipta:

Format Tersedia

1 MEMBUAT HALAMAN WEB BARU DAN MENGELOLA KONTEN

3.1. Pengenalan HTML

Gambar 1. Sintak HTML

Gambar 2. Helo Word Hasil di Browser

3.2. Membuat Halaman Web Baru

Gambar 3. Pembuatan Dokumen Baru

Gambar 1. Tools Untuk Menulis Teks

Gambar 3. Model dan Ukuran Heading

Sumber Gambar : (McFarland & Grover, 2015)

Gambar 4 Unordered List

Sumber Gambar : (Robbins, 2018)

Sumber Gambar : (Robbins, 2018)

Gambar 6. Description List

Sumber Gambar : (Robbins, 2018)

Gambar 7 Horizontal Rule

Sumber Gambar : (Robbins, 2018)

Kutipan Panjang <blockquote>

Sumber Gambar : (Robbins, 2018)

Sumber Gambar: (Robbins, 2018)

Bold, Italic, Strike, Underline, dan Small

Sumber Buku : (Robbins, 2018)

3.4. Menulis Text

Gambar 14. Tools Untuk Menulis Teks

HTML settimgs Paragraph Add class

Gambar 16. Model dan Ukuran Heading

Gambar 18. Desain Tampilan Paragraf

Gambar 19. Pengaturan Heading pada Panel Properties

Gambar 10. Blok Teks

Gambar 11. Kotak Dialog Insert Date

Gambar 12. Latihan Menulis Teks

Anda mungkin juga menyukai