Coba

Presentation

•

Computers

•

University

•

Practice Problem

•

Hard

suci fauziah

Used 1+ times

FREE Resource

5 Slides • 0 Questions

1MEMBUAT 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

Gambar 1. Sintak HTML

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

Sumber Gambar : (Robbins, 2018)

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

Sumber Gambar : (Robbins, 2018)

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.

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!

: 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

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.

Gambar 15. Panel Properties untuk Teks

Paragraph

Format

Bold,Italic,

unordered list, ordered list

Link options

HTML settimgs
(displayed)

Add class

to tag

Link

Add ID
to tag

Document

title

CSS

Settings

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.