Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
10
3.
Format Teks HTML
3.1.
Logical Format
Logical format
menerapkan layout dokumen secara logis dan terstruktur. Semua
tag ini memerlukan tag penutup. Tag yang termasuk dalam logical format adalah sebagai
berikut.
a.
<cite>
digunakan untuk menandai suatu kutipan (citation).
b.
<code>
digunakan untuk menampilkan kode-kode pemrograman, misal bahasa C,
dll.
c.
<em>
digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh
penulis.
d.
<kbd>
digunakan untuk menandai suatu teks yang harus dimasukkan oleh user
melalui keyboard.
e.
<samp>
digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
f.
<strong>
digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu
teks.
g.
<var>
digunakan untuk menampilkan nama variabel.
Contoh: latihan11.html
3.2.
Physical Format
Physical format
adalah format terhadap fisik sebuah font. Semua tag ini
memerlukan tag penutup. Yang termasuk physical format adalah sebagai berikut.
a.
<b>
digunakan untuk menampilkan huruf tebal.
b.
<
i>
digunakan untuk menampilkan huruf miring.
c.
<u>
digunakan untuk menampilkan garis bawah pada teks.
d.
<tt>
digunakan untuk menampilkan huruf seperti huruf mesin ketik.
e.
<strike>
digunakan untuk menampilkan garis horizontal pada bagian tengah huruf.
<html> <head>
<title>Belajar Logical Format</title> </head>
<body>
<cite>Bila kamu tak tahan lelahnya belajar, bersiaplah menanggung perihnya kebodohan</cite> Imam Syafii.<br><br>
Untuk menampilkan data array di pemrograman PHP adalah <code>echo "$namaarray[]";</code><br><br>
Saya berkata, "Jangan di pegang <em>nanti rubuh</em>." <br><br>
Mahasiswa dapat belajar perancangan web secara mandiri melalui <kbd>www.w3schools.com</kbd><br><br>
Pada abjad terdapat 5 huruf vokal, yaitu <samp>AEIUO</samp>.<br><br>
Setiap tugas Pengenalan Perancangan Web dikumpulkan <strong>tepat waktu</strong><br><br>
Kode program tersebut diiterasi sebanyak <var>N</var> kali. <br><br>
</body> </html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
11
f.
<big>
digunakan untuk menampilkan ukuran huruf yang lebih besar.
g.
<small>
digunakan untuk menampilkan ukuran huruf yang lebih kecil.
h.
<sub>
digunakan untuk menampilkan subscript.
i.
<sup>
digunakan untuk menampilkan supersxript.
Contoh: latihan12.html
3.3.
Preformatted
(<pre>)
Tag
<pre>
digunakan untuk membuat tampilan dokumen pada
browser
sama
dengan tampilan pada text editor (preformatted). Dengan menggunakan tag
<pre>
maka
tag
<p>
dan tag
<br>
tidak diperlukan lagi.
Contoh: latihan13.html
<html><head>
<title>Latihan-13: Penggunaan Tag PRE</title> </head>
<body bgcolor=#FFFFCC>
Tag pre dapat digunakan untuk membuat tampilan seperti ini: <pre>
Tabel Mahasiswa:
============================================================= |Id | Nama Mahasiswa | No. Mhs | Jurusan |Sem.| ============================================================= | 1 | Aditya | 16.01.2109 | Teknik | 4 | | 2 | Sinta | 16.02.2233 | Manajemen | 4 | ============================================================= Script program:
for($id = 1; $id <= 4; $id++) { if($nama != “”) print($nama); else print(“Kosong”); } </pre> </body> </html> <html> <head>
<title>Belajar Physical Format</title> </head>
<body>
<b>Ini ditulis tebal</b><br> <i>Ini ditulis miring</i><br> <u>Ini digaris bawahi</u>
<strike>Ini akan bergaris tengah</strike><br>
<tt>Ini akan tertulis seperti huruf dari mesin ketik</tt><br> H<sub>2</sub>O<br>
2<sup>2</sup>=8<br> </body>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
12
3.4.
Address
Alamat (
address
) adalah salah satu elemen yang umum ada di dalam sebuah
dokumen. Tag
address
ditulis dengan
<address>
dan diakhiri dengan
</address>
.
Setiap baris dalam penulisan alamat dipisahkan dengan menggunakan tag
<br>
. Dengan
menggunakan tag address, penulisan alamat dapat distandardkan.
Contoh: latihan14.html
3.5.
Singkatan
Penulisan singkatan (akronim) pada halaman HTML mungkin terjadi. Tag
<abbr>
dan tag
<acronym>
dapat digunakan untuk menyimpan kepanjangan dari sebuah
singkatan yang ditampilkan pada halaman HTML.
Fungsi dari tersebut adalah ketika pointer diarahkan ke tulisan(singkatan) yang ada
di halaman HTML, maka kepanjangan dari singkatan tersebut akan ditampilkan
mengambang di atasnya.
Contoh: latihan15.html
3.6.
Teks yang Disisipkan atau Dihapus
Pada sebuah halaman web, sering dijumpai tulisan atau teks yang dikoreksi.
Koreksi pada halaman HTML dapat dibuat dengan memanfaatkan tag
<ins>
dan tag
<del>
. Tag
<ins>
memberikan tanda untuk sisipan dengan membuat teks di garis bawah.
Tag
<del>
menunjukkan hasil koreksi pekerjaan dengan memberikan garis tengah
horizontal pada teks yang dihapus.
<html> <head>
<title>Pembuatan Tag Singkatan</title> </head>
<body>
<abbr title=”World Wide Web”>WWW</abbr><br>
<acronym title=”HyperText Transfer Protocol”>HTTP</acronym><br> <p>Pada beberapa browser atribut tittle dapat digunakan untuk menampilkan kepanjangan dari teks singkatan/akronim apabila mouse diarahkan di atasnya.</p>
</body> </html>
<html> <head>
<title>Pembuatan Tag Address</title> </head>
<body> <address>
STMIK AMIKOM Yogyakarta<br>
Kampus Terpadu: Jl. Ring Road Utara<br> Condong Catur<br> Sleman<br> Yogyakarta </address> </body> </html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
13
Contoh: latihan16.html
3.7.
Font
Tag
<font>
dapat digunakan untuk menentukan format tampilan
font
pada
dokumen HTML, seperti
color,
style,
size, dll. Atribut yang dapat digunakan untuk tag
font antara lain sebagai berikut.
a.
Ukuran Font
Atribud
size
digunakan untuk mengatur ukuran font pada halaman HTML. Nilai font
dimulai dengan nilai 1 untuk huruf terkecil dan nilai 7 untuk ukuran paling besar,
atau +1 untuk ukuran huruf terkecil dan nilai +6 untuk ukuran paling besar.
b.
Jenis Font
Jenis font yang digunakan pada pembuatan halaman HTML menggunakan atribut
face
. Atribut
face
diisi dengan jenis font misalnya: Arial, Times New Roman,
Calibri, Verdana, Courier New, dan lain-lain.
c.
Warna Font
Atribut
color
digunakan untuk mengatur warna pada halaman HTML. Terdapat
dua cara dalam pemberian nilai pada atribut color, yaitu:
Dengan menyebutkan warna seperti red, green, dan blue.
Dengan menggunakan nilai RGB(Red Green Blue) dari satu warna. Misal:
#FF0000 untuk red, #00FF00 untuk green, dan #0000FF untuk blue.
Penulisan atribut font adalah:
<font size= “1”> Ukuran Font </font><br> <font face= “arial”> Jenis Font</font><br> <font color= “blue”>Warna Font</font><br> <html>
<head>
<title>Pembuatan Tag Sisipan/Koreksi</title> </head>
<body>
Daftar Buku Terbaru:<br>
1. Pemrograman Web dengan HTML Rp. 65.000<br>
2. Sistem Basis Data <del>Rp. 78.000</del> <ins>Rp. 68.000</ins><br> 3. Belajar Bootstrap Rp. 70.000
</body> </html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
14
Contoh: latihan17.html
\
4.
Link HTML (tag Anchor)
Dokumen html menggunakan
hyperlink
(anchor) untuk menghubungkan satu
dokumen ke dokuman yang lain. anchor dibuat dengan menggunakan tag a.
Terdapat tiga jenis link:
4.1.
Link Relatif
Dibuat apabila membuat sebuah
link pada halaman HTML ke halaman HTML
yang lainnya di komputer yang sama, tanpa memerlukan alamat internet yang lengkap.
Jika kedua halaman terletak pada direktori yang sama, dapat dituliskan nama file html
sebagai berikut:
Contoh: latihan18.html
4.2.
Link Absolut
Dibuat apabila membuat sebuah link ke halaman web lain di internet. Dalam
hal ini alamat internet harus ditulis secara lengkap. Berikut adalah contohnya:
<html> <head> <title>Pemformatan Text</title> </head> <body bgcolor="aqua"> <p>
<font color="#9966FF" size="6"><center>Konsep Basis Data</center></font>
</p>
<center><i><u><font color="#4466ff" size="3">
Adalah suatu koleksi data komputer yang terintegrasi, diorganisasikan dan disimpan dalam suatu cara yang memudahkan pengambilan kembali. </center></i></u></font>
<b><p><font color="green" size="5">perangkat lunak basis data</font></p></b>
<left><b><font color="brown" size="3" face="courier new">
Adalah perangkat lunak sistem yang memungkinkan para pemakai membuat, memelihara, mengontrol dan mengakses basis data dengan cara yang praktis dan efisien.
</font></b></left> </body>
</html>
<html> <head>
<title>Contoh Link Relatif</title> </head>
<body>
Contoh link relatif dapat dibuka melalui <a href=”latihan17.html”>link berikut</a>
</body> </html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
15
Contoh: latihan19.html
4.3.
Link ke Bagian Lain dalam Dokumen
Link
ini dibuat ketika sebuah dokumen HTML yang dibuat sangat panjang.
Sehingga apabila ditampilkan dalam
browser web
akan mengharuskan pengguna
melakukan
scroll
secara berulang kali. Navigasi untuk penelusuran dokumen dapat
dimudahkan dengan membuat
link antarbagian, dengan menandai setiap bagian tersebut
dengan memberinya nama.
Penulisan sintaksnya adalah:
Contoh: latihan20.html
Next code...
<html> <head>
<title>Contoh Link Absolut</title> </head>
<body>
Alamat website resmi STMIK AMIKOM Yogyakarta <a href=”http://www.amikom.ac.id”>link berikut</a> </body>
</html>
<a href=”#tujuan”>Link asal</a> Artikel bebas
.. ..
<a name=”tujuan”>Posisi tujuan</a> Artikel bebas
.. ..
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
16
4.4.
Link Mailto
Contoh ini akan mendemonstrasikan bagaimana membuat
link
pada suatu pesan
mail (tidak akan bisa bekerja jika mail client tidak dipasang).
Contoh: latihan21.html
5.
Marquee
Marquee
merupakan tag non-standard elemen HTML yang menyebabkan suatu
teks/gambar bergerak ke atas dan ke bawah, kanan atau kiri secara otomatis. Tulisan
berjalan ini dapat digunakan untuk menuliskan kata-kata penting di sebuah halaman web.
Penulisan sintaksnya adalah:
Terdapat beberapa atribut yang dapat digunakan untuk marquee, antara lain:
Atribut
Fungsi
bgcolor
mengatur
background
dari teks yang diberi efek marque
width
mengatur lebar dari area teks-nya (dinyatakan dalam px atau
%)
height
mengatur tinggi dari area teks (dinyatakan dalam px atau %)
direction
mengatur gerakan dari teks tersebut (
up
,
down
,
left
,
right
)
scrollamount
mengatur kecepatan dari gerakan teks (angka dalam px),
semakin tinggi angka digunakan, akan semakin cepat gerakan
<html> <head>
<title>Contoh Link Mailto</title> </head>
<body>
Untuk pertanyaan dan tugas dapat dikirimkan ke <a href=mailto:lilisdfarida@amikom.ac.id>email berikut</a> </body>
</html>
<marquee> Text atau Gambar di sini</marquee>
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu
halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
17
Atribut
Fungsi
dari teksnya
behaviour
mengatur efek dari gerakan (
slide
,
scroll
,
alternate
)
loop
menentukan jumlah pengulangan
onmouseover
digunakan untuk menghentikan efek ketika disorot (
hover
)
mouse
onmouseout
digunakan untuk melanjutkan efek bila mouse sudah tidak
menyorot
Contoh: latihan22.html
Contoh: latihan23.html
<html><head>
<title>Contoh Marquee 1</title> </head>
<body>
Contoh Pembuatan Marquee:<br>
<marquee bgcolor=”blue”>Marquee dengan atribut width</marquee><br> <marquee width=”50%”>Marquee dengan atribut width</marquee><br> <marquee height=”50px”>Marquee dengan atribut height</marquee><br> <marquee direction=”left”>Marquee dengan atribut direction
left</marquee><br>
<marque direction=”right”>Marquee dengan atribut direction right</marquee><br>
<marque direction=”up”>Marquee dengan atribut direction up</marquee><br>
<marque direction=”down”>Marquee dengan atribut direction down</marquee><br>
</body> </html>
<html> <head>
<title>Contoh Marquee 2</title> </head>
<body>
Contoh Pembuatan Marquee:<br>
<marquee scrollamount=”15”>Marquee dengan atribut scroolamount</marquee><br>
<marquee behavior=”scroll”>Marquee dengan atribut behavior scroll</marquee><br>
<marquee behavior =”slide”>Marquee dengan atribut behavior slide</marquee><br>
<marquee behavior =”alternate”>Marquee dengan atribut behavior alternate</marquee><br>
</body> </html>
Pengenalan Perancangan Web
2016
Ld.Farida | STMIK AMIKOM Yogyakarta
18
Contoh: latihan24.html
<html><head>
<title>Contoh Marquee 3</title> </head>
<body>
Contoh Pembuatan Marquee:<br>
<marquee direction=”left” bgcolor=”green” loop=”2”
behavior=”slide”>Marquee dengan atribut loop</marquee><br>
<marquee direction=”down” scrollamount=”2” onmouseover=”this.stop()” onmouseout=”this.start()”>
Marquee akan berhenti bergerak ketika disorot mouse dan bergerak kembali ketika sudah tidak disorot</marquee><br>
</body> </html>
