Pertemuan 2 HTML Dan Format Text

FAJAR SURYANI PEMROGRAMAN WEB I
HTML DAN BASIC TEXT FORMATTING

(FORMAT TEXT)
POKOK BAHASAN:
✓ Dasar-dasar HTML
✓ Struktur dasar HTML
✓ Attribut HTML
✓ Tag utama HTML
✓ Format Text
✓ Kontrol Font dan Karakter Spesial
✓ Plaintext
✓ XMP
✓ Marquee
TUJUAN BELAJAR:
Setelah mempelajari bab ini diharapkan mampu:

✓ Menjelaskan dasar-dasar HTML
✓ Menjelaskan struktur dasar HTML
✓ Menjelaskan attribut HTML
✓ Menjelaskan dan menerapkan tag utama HTML
✓ Menjelaskan dan menerapkan format text
✓ Menjelaskan dan menerapkan marquee
2.1 Mengenal HTML

HTML(Hyper Text Markup Language) merupakan bahas pemrograman tersetruktur
yang dikembangakan untuk membuat halaman website. HTML sendir bukan bahasa
pemograman (programming language), tetapi termasuk bahasa markup (markup language).
Jika dibandingkan dengan bahasa pemograman lain, dalam HTML tidak akan ditemukan
struktur yang biasa di temukan dalam bahasa pemograman lainnya seperti IF, LOOP, maupun
variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian
dari sebuah halaman.
HTML terdiri dari simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang
dimaksudkan untuk menampilkan halaman pada web browser. Ciri-ciri HTML :
1. Tersusun oleh tag-tang sebagai penanda, missal <html> … </html>
2. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML
seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda
</x> seperti tag <br>, <input> dan lainnya.
3. Tidak case sensitive (huruf kapital dan huruf kecil dianggap sama)
4. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html.
Langkah yang harus dilakukan untuk menjalankan file HTML adalah sebagai berikut :
1. Buka aplikasi Notepad++, lalu ketikkan text berikut ini :
2. Lalu simpan file tersebut pada folder dimana xampp diinstal. Contoh saya menyimpan
pada folder D:\xampp\PW1. Untuk diperhatikan bahwa nama file penyimpanan harus
diketikan extensi filenya, seperti .html seperti pada gambar di bawah ini
3. Buka browser dan ketikan //localhost/[nama folder yang kita buat], maka akan muncul
file yang telah kita buat seperti pada gambar di bawah ini
4. Pilih nama file Latihan 1.html, maka akan tampil seperti gambar dibawah ini :
4.1 Struktur Dasar HTML

HTML terdiri dari unsur-unsur yang membentuk strutur skrip HTML yaitu tag, atribut
dan elemen. Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag
DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling
dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut. Berikut tag HTML
adalah sebagai berikut :
<ELEMEN ATRIBUT = VALUE>

Keterangan :
1. DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang
berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses
adalah HTML.
2. Elemen = nama tag
3. Atribut = atribut dari tag
4. Value = nilai dari atribut
Contoh :
<BODY BGCOLOR = BLUE>
Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section HEAD
dan section BODY. Tag utama HTML, yaitu :
TAG ATRIBUT DESKRIPSI

<html> … </html> Sebagai tanda awal dan
tanda akhir dokumen
HTML
<head> … </head> TITLE, BASE, ISINDEX, LINK, Sebagai informasi page
SCRIPT, STYLE, dan META header.
<body> … </body> BGCOLOR, BACKGROUNCOLOR, Settingan atribut untuk
BGSOUN, FONT, LINK, ALING, seluruh dokumen HTML
VLINK, TOPMARGIN, LEFTMARGIN,
MARGINHEIGHT, MARGINWIDTH
Contoh struktur dasar HTML :
Save sebagai Latihan 2.html dan jalankan file dengan cara sama pada contoh
sebelumnya atau juga dapat dengan cara double klik file tersebut atau klik kanan → Open With
→ browser yang diinginkan.
Hasil tampilan sebagai berikut :
4.2 Tag, Elemen dan Atribut HTML

4.2.1 Tag HTML
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:
“<” tagname “>”
1. Tag HTML biasanya selalu akan terdiri dari satu pasang, misalnya <p> dan </p>
2. Tag pertama adalah tag mulai (awal) dan tag pasangannya adalah tag selesai (akhir)
3. Tag kedua ditulis sama dengan tag pertama hanya saja perlu ditambahkan garis miring
atau slash untuk membedakan kedua tag tersebut.
Berikut adalah format dasar penulisan tag HTML :
<tagname> …isi…</tagname>
Sebagai contoh jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal
atau miring, di dalam HTML dapat ditulis sebagai berikut (simpan dengan nama file Latihan
3.html):
Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

Keterangan :
1. Tag <i> pada kode HTML diatas text secara garis miring (i, singkatan dari italic),
2. Tag <b> untuk menebalkan tulisan (b, singkatan dari bold).
4.2.2 Elemen HTML

Elemen adalah bagian dari skrip HTML yang terdiri dari tag pembuka, isi element dan
tag penutup. Jika sebuah elemen ditampilkan pada browser, maka hanya isi elemen saja yang
ditampilkan. Contoh pada Latihan 3.html diatas :
Jika ditampilkan pada browser, maka hanya tulisan “Selamat belajar pemrograman WEB
yang super assikkk guys…!!!” yang akan ditampilkan pada browser.
4.2.3 Atribut HTML

Atribut merupakan informasi tambahan yang berada di dalam tag. Atribut berupa
property yang mengatur bagaimana elemen dari suatu tag akan ditampilkan. Atribut ditulis
dalam symbol tag setelah nama tag dengan dipisahkan oleh spasi. Atribut ada yang memiliki
nilai (value) dan ada yang tidak memiliki nilai. Nilai suatu atribut ditulis dalam tanda petik
ganda (“…”), dipisahkan dengan symbol sma dengan(=) dari nama atribut. Contoh :
<p align = “center”>
Berikut adalah karasteristik dari atribut pada HTML :

1. Atribut hanya ditulis pada tag pembuka
2. Setiap tag memiliki atribut yang berbeda-beda yang dapat diterapkan pada tag tersebut.
3. Beberapa atribut ada yang dapat diterapkan ke semua tag atau disebut global attribute,
misal : class, id, style dan lainnya.
4. Sebuah tag dapat ditulis dengan tanpa atribut, 1 atribut atau banyak atribut.
5. Jika tag ditulis dengan banyak atribut, masing-masing atribut dipisahkan menggunakan
spasi.
4.3 Pemformatan Paragraf dan Text

Ada beberapa jenis pemformatan text dalam HTML. Berikut penjelasan masing-masing
jenis pemformatan text :
4.3.1 Pemformatan Paragraf

Paragraf dibuat dengan tag <p> </p>. Atribut yang sering digunakan dalam tag ini
adalah align, Atribut ini digunakan untuk mengatur perataan paragraf. Nilai yang dapat
diberikan pada atribut align antara lain : left, center, right dan justify. Setiap penggunaan tag
<p> akan berganti ke baris baru, Jika ingin pindah baris tanpa memulai dengan tag <p>, dapat
menggunakan tag <br> tanpa penutup, perhatikan contoh kode HTML berikut:
Pada skrip di atas terdapat 4 paragraf dengan perataan yang berbeda.Hasilnya seperti
gambar berikut:
4.3.2 Pemformatan Judul
Ada 6 style judul dalam HTML yang dibuat menggunakan tag <h1> sampai <h6> , Tag
<hl> menghasilkan judul dengan ukuran huruf paling besar, sedangkan <h6> akan
menghasilkan judul dengan ukuran paling kecil. Berikut contoh program pemformatan judul
pada HTML :
Pada skrip di atas berisi susunan judul yang dibuat dengan <h1> hingga <h6>. Hasilnya
seperti gambar berikut:
4.3.3 Style Text

Teks yang dibuat dengan HTML dapat dibuat tebal, miring, bergaris bawah, bergaris
tengah dan sebagainya. Berikut tag yang dapat digunakan untuk mengatur style teks:
TAG DESKRIPSI
<b> … </b> untuk membuat teks tebal.
<i> … </i> untuk menjadikan teks miring.
<u> … </u> untuk membuat teks bergaris bawah.
<strike> … </strike> untuk membuat teks bergaris tengah.
<strong> … </strong> untuk menunjukkan teks penting dengan teks dicetak
tebal.
<em> ... </em> untuk menunjukkan teks penting dengan teks dicetak
miring.
<small> … </small> untuk membuat teks lebih kecil dari umumnya.
<mark> … </mark> untuk membuat teks dengan background kuning, seperti
teks yang ditandai.
<del> … </del> untuk menunjukkan teks yang dihapus dengan teks
dicoret tengah.
<ins> … </ins> untuk menunjukkan teks yang disisipkan dengan teks
bergaris bawah.
<sub> … </sub> untuk membuat subscript
<sup> … </sup> untuk membuat superscript
<marquee> … Untuk membuat text berjalan
</marquee>
Berikut contoh program:
Hasil dari skrip di atas seperti gambar berikut :

Walaupun hasil yang didapat sama antara tag <b> dan tag <strong>, tag <i> dan tag
<em>, tag <u> dan tag <ins>, serta tag <strike> dan tag <delete>, namun penggunaan tag
tersebut memiliki tujuan yang berbeda. Tag <strong> dan <em> lebih ditujukan untuk
menandai teks yang penting. Sedangkan untuk contoh penggunaan <sub> dan <sup> sebagai
berikut:
Hasil tampilan pada browser sebagai berikut :
4.3.4 Atribut Style

Setelah mempelajari style text salah satu yang tidak kalah penting adalah mempelajari
atribut style. Atribut ini nantinya juga berhubungan dengan CSS atau struktur tata letak yang
lebih tinggi lagi. Berikut format penulisan atribut style:
<tagname style = “property:value;”>
Berikut contoh penggunaan atribut:

ATRIBUT CONTOH PENGGUNAAN

Warna background <body style=”background-color:powderblue;”>
Warna text <h1 style=”color:blue;”>
<p style=”color:red;”>
Jenis Font <h1 style=”font-size:300%;”>
Dan masih banyak lagi atribut yang dapat digunakan cara mudah mempelajari selain bisa
dengan menambahkan referensi bisa juga dengan mencoba satu per satu pada library yang
sudah disediakan pada text editor. Caranya dengan mengetikkan huruf sesuai yang diinginkan
pada text editor maka akan muncul fungsi dan tinggal pilih yang diinginkan dengan menekan
tombol Tab. Hal ini juga akan mengurangi kesalahan pengetikkan (typo).
4.4 Karakter Spesial\

Selain karakter “<”, HTML menyediakan ratusan karakter khusus yang bisa digunakan.
Berikut adalah tabel karakter khusus yang sering digunakan:
SIMBOL / DESKRIPSI KODE NOMOR KODE NAMA

KARAKTER HTML HTML
‘ Kutip satu '
- Tanda kurang -
! Tanda seru !
“ Kutip ganda " "
# Simbol pagar #
$ Simbol dollar $
% Simbol persen %
& Simbol dan & &
( Kurung buka (
) Kurung tutup )
* Tanda bintang *
, Tanda koma ,
. Tanda titik .
/ Garis miring /
: Titik dua :
; Titik koma ;
? Tanda tanya ?
@ Simbol [at] @
[ Kurung siku buka [
\ Garis miring terbalik / \
backslash
] Kurung siku tutup ]

KARAKTER HTML HTML
^ Tanda sisipan / ^
sirkumfleksa
_ Garis bawah _
‘ Tanda petik `
{ Kurung kurawal buka {
| Garis tegak / pipe |
} Kurung kurawal tutup }
~ Simbol ekuivalen ~
¡ Tanda seru terbalik ¡ ¡
¦ Garis tegak terputus ¦ ¦
“ Titik dua diatas huruf vocal ¨ ¨
< Panah kiri tunggal ‹ &lsaquo;
> Panah kanan tunggal › &rsaquo;
¯ Garis atas ‾ &oline;
ȼ Simbol sen ¢ ¢
£ Simbol pondsterling £ £
¤ Simbil mata uang ¤ &current;
¥ Simbol yen ¥ ¥
€ Simbol Euro € €
+ Tanda tambah +
* Tanda bintang ∗ &lowast;
< Kurang dari < <
= Sama dengan =
≠ Sama dengan dicoret ≠ ≠
> Lebih dari > >
± Simbol lebih kurang ± ±
<< Panah kiri ganda « «
>> Panah kanan ganda » »
x Simbol perkalian × ×
+ Simbol pembagian ÷ ÷
↑ Panah atas ↑ ↑
→ Panah kanan → →
↓ Panah bawah ↓ ↓
← Panah kiri ← ←
↵ Simbol enter / carriage ↵ &crarr;
return
↔ Panah kiri kanan ↔ ↔
§ Simbol bagian / seksi § §
© Simbol hak cipta © ©
(copyright)

KARAKTER HTML HTML
® Simbol merek dagang ® ®
terdaftar (registered
trademark)
® Simbol merek dagang ® ®
terdaftar (registered
trademark)
֯ Simbol derajat ° °
µ Simbol mikro µ &miro;
¶ Simbol pilcrow, simbol ¶ ¶
paragraf
· Titik tengah, koma Georgia · ·
… Ellipsis horizontal … …
¼ Satu per empat ¼ ¼
½ Satu per dua, setengah ½ ½
¾ Tiga per empat ¾ ¾
1 Pangkat satu ¹ ¹
2
Pangkat dua, kuadrat, ² ²
persegi
3
Pangkat tiga, kubik ³ ³
α Alpha α α
ẞ Beta β β
Non-breaking space
Berikut contoh penggunaan pada program:
Berikut hasil tampilan pada browser:

4.5 Teks Komentar

Komentar adalah baris teks yang tidak ditampilkan dalam halaman website. Fungsinya
untuk memberi keterangan pada skrip. Untuk menandai sebuah komentar menggunakan tag
. Berikut contoh penggunaan pada program:
Pada skrip di atas, teks yang berwarna hijau adalah komentar. Tulisan tersebut tidak akan
ditampilkan pada website seperti gambar berikut:
4.6 Langkah Praktikum

1. Pada praktikum kali ini mahasiswa membuat program HTML pada contoh program yang
ada pada subbab-subbab sebelumnya, kemudian tampikan pada halaman web browser.
2. Buatlah dokumen web yang berisi rangkuman dari Seminar Nasional “Develop Your
Creativity With IoT in Industry 4.0" dengan ketentuan:
a. Tuliskan identitas diri : Kelas, Nama, NIM pada bagian ujung kanan atas layar
b. Judul materi dengan type font h1 posisi center
c. Isi konten berupa rangkuman dengan minimal 3 paragraf
d. Percantik tampilan text dengan memanfaatkan atribut-atribut yang anda pelajari baik
dari modul ataupun dari referensi lainnya.

Pertemuan 2 HTML Dan Format 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

Pertemuan 2 HTML Dan Format Text

Diunggah oleh

Hak Cipta:

Format Tersedia

FAJAR SURYANI PEMROGRAMAN WEB I

HTML DAN BASIC TEXT FORMATTING

Setelah mempelajari bab ini diharapkan mampu:

2.1 Mengenal HTML

4.1 Struktur Dasar HTML

<ELEMEN ATRIBUT = VALUE>

<BODY BGCOLOR = BLUE>

TAG ATRIBUT DESKRIPSI

Contoh struktur dasar HTML :

Hasil tampilan sebagai berikut :

4.2 Tag, Elemen dan Atribut HTML

“<” tagname “>”

Berikut adalah format dasar penulisan tag HTML :

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

4.2.2 Elemen HTML

4.2.3 Atribut HTML

<p align = “center”>

Berikut adalah karasteristik dari atribut pada HTML :

4.3 Pemformatan Paragraf dan Text

4.3.1 Pemformatan Paragraf

4.3.2 Pemformatan Judul

4.3.3 Style Text

Berikut contoh program:

Hasil dari skrip di atas seperti gambar berikut :

Hasil tampilan pada browser sebagai berikut :

4.3.4 Atribut Style

<tagname style = “property:value;”>

Berikut contoh penggunaan atribut:

ATRIBUT CONTOH PENGGUNAAN

Jenis Font <h1 style=”font-size:300%;”>

4.4 Karakter Spesial\

SIMBOL / DESKRIPSI KODE NOMOR KODE NAMA

SIMBOL / DESKRIPSI KODE NOMOR KODE NAMA

SIMBOL / DESKRIPSI KODE NOMOR KODE NAMA

Berikut contoh penggunaan pada program:

Berikut hasil tampilan pada browser:

4.5 Teks Komentar

4.6 Langkah Praktikum

Anda mungkin juga menyukai