HTML (Hypertext Markup Language) MODUL TEORI II Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN HTML (Hypertext Markup Language)
HTML FONT Untuk membuat html fonts lebih baik kita menggunakan “style” atau yang lebih dikenal dengan css (Cascading Style Sheet) CSS dapat di tambahkan kedalam tag html dengan cara berikut: Dalam elemen <style> di bagian <head> HTML Dalam style attribut dalam elemen HTML
1. Mengatur font teks Contoh ini menunjukkan bagaimana cara untuk mengatur font pada teks. <html> <body> <h1 style="font-family:comic sans ms">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p> </body> </html>
2. Mengatur ukuran teks Contoh ini menunjukkan bagaimana untuk mengatur ukuran font pada teks. <html> <body> <h1 style="font-size:200%">This is a heading</h1> <p style="font-size:50px">This is a paragraph.</p> </body> </html>
3. Mengatur warna teks Contoh ini menunjukkan bagaimana cara untuk mengatur warna pada teks. <html> <body> <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p> </body> </html>
4. Mengatur background warna pada teks Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada teks. <html> <body> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
5. Mengatur posisi pada text Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada teks. <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p style="text-align:right;">This is a paragraph.</p> </body> </html>
6. Mengatur background warna pada seluruh halaman web Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada halaman web . <html> <body style="background-color:yellow;"> <h2>This is a heading</h2> <p>This is a paragraph.</p> </body> </html>
7. Menggabungkan seluruh style (font, size, color, background color, align) Contoh ini menunjukkan bagaimana cara untuk mengatur jenis teks, ukuran teks, background teks, posisi teks, dan background warna pada halaman web .
<html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red;text-align:right";> This text is in Verdana and red and right</p> <p style="font-family:times;color:white;background-color:blue"> This text is in Times and green and background blue</p> <p style="font-size:30px;">This text is 30 pixels high</p> </body> </html>
8. Membuat tulisan berjalan dengan menggunakan marquee Contoh: <html> <body> <marquee>Tulisan disini akan berjalan</marquee> </body> </html>
Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah : bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks direction="left/right/up/down" » Mengatur arah gerakan teks
behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan Scroll » teks bergerak berputar Slide » teks bergerak sekali lalu berhenti Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik ) title="pesan" » Pesan akan muncul saat mouse berada di atas teks
scrollmount="angka“ » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya. scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik loop="angka|-1|infinite" » Mengatur jumlah loop width="lebar" » Mengatur lebar blok teks dalam pixel atau persen
HTML LIST List merupakan bentuk umum yang biasa kita gunakan untuk membuat daftar sesuatu List bisa berupa nomor, atau tanpa nomor, angka, huruf romawi, bentuk dan lain-lain
1. <ol> </ol> (Ordered List) Ordered list / List memberikan nomor secara umum dimulai dengan menggunakan 1,2,3..., dst sampai dengan sejumlah item dalam list tersebut Angka-angka tersebut bisa secara otomatis di munculkan oleh browser (yang membuatnya mudah dalam penulis)
Contoh: <html> <body> <ol> <li>daftar pertama</li> <li>daftar kedua</li> <li>daftar ketiga</li> <li>daftar keempat</li> </ol> </body> </html>
Attribute for <OL ...> TYPE = 1 | A | a | I | i Atribut “type” pada <ol> berfungi untuk menampilkan list dengan berbagai macam bentuk, seperti I,II,III i,ii,iii A,B,C a,b,c 1,2,3,
contoh <ol type=A> <li>turn left on maple street </li> <li>turn right on clover court </li> </ol> <ol type=I> <ol type=i> contoh <ol type=1> <li>turn left on maple street </li> <li>turn right on clover court </li> </ol> <ol type=a>
Attribute for <OL ...> START = integer Atribut “start” pada <ol> berfungi untuk mendefinisikan nomor awal yang akan digunakan pada ordered list Contoh: <ol start=5> <li> mulai no lima 5 </li> <li> no 6 </li> <li> no 7 </li> </ol>
2. <ul> </ul>(Unordered List) Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list
contoh <html> <body> sistem bilangan: <ul> <li>Biner </li> <li>Desimal</li> <li>Hexsadesimal</li> </ul> </body> </html>
Attribute for <UL ...> TYPE = DISC | CIRCLE | SQUARE Atribut “type” pada <ul> berfungi untuk menampilkan list dengan berbagai macam bentuk, seperti DISC (lingkaran bulat penuh) CIRCLE(lingkaran kosong) SQUARE (kotak)
contoh <ul type=disc> <li>coffee <li>tea <li>lemonade </ul> <ul type=circle> <ul type=square> <li>coffee <li>tea <li>lemonade </ul>
3. <dl> </dl> (Definition List) Definition list digunakan untuk membuat suatu list atau urutan Terdapat tag <DT> Definition Term dan <DD> Definition Description
contoh <html> <body> <dl> <dt>mary <dd>so what's going on tonight? <dt>dawn <dd>let's play some music <dt>jason <dd>cool man, let's jam! </dl> </body> </html>
HTML IMAGES Gambar di dalam suatu web page merupakan sebuah daya tarik bagi pengunjung suat web site Setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat penampilan suatu dokumen dalam browser. Karenanya hati-hatilah memilih gambar dan menyertakannya ke dalam suatu dokumen.
Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam suatu folder dengan file html di luar folder gambar kemudian dipanggil melalui tag <img>
Tag <IMG> dan Atributnya Tag <IMG> merupakan singkatan dari IMAGE untuk menampilkan gambar pada HTML kita. Tag <img> memiliki beberapa atribut antara lain: SRC WIDTH & HEIGHT ALIGN ALT BORDER
Atribut – Atribut IMG SRC merupakan singkatan dari SOURCE yang dalam bahasa Indonesia berarti sumber. Atribut ini berfungsi untuk memberi tahu dimana letak dari sumber gambar yang ingin ditampilkan. Sumber gambar dapat diambil dari komputer sendiri maupun dari sumber yang ada di internet.
ALT Atribut ini digunakan untuk memberikan keterangan tambahan dari gambar. ALT merupakan kepanjangan dari ALTERNATIVE. WIDTH & HEIGHT Atribut ini digunakan untuk menentukan ukuran dari gambar, width (lebar) height (tinggi) ALIGN Atribut ini digunakan untuk menentukan posisi dari gambar BORDER Atribut ini digunakan untuk menambahkan border pada gambar
CONTOH <IMG SRC=“logo harapan.jpg” ALT="klikbelajar"> <IMG SRC=”gambar/logo harapan.jpg” ALT=“klikbelajar”> <IMG SRC=”http://ALAMAT_DOMAIN/NAMA_GAMBAR” ALT=“NAMA”>
<img src= “timoti/images/logo harapan <img src= “timoti/images/logo harapan.jpg" alt=“harapan" width="60" height="80" align="right" border="2" > <div align="center"> <img src="images/logo harapan2.jpg" alt="logo harapan" width="197" height="219" border="3“ > </div>
Membuat backround web menggunakan gambar <html> <head> <title>web background images</title> </head> <body background="logo harapan.jpg"> <img src="logo harapan.jpg" alt="klikbelajar" width="60" height="80" align="right" alt="babi" border="2" > </body> </html>