MODUL 1
HTML
(HyperText Mark-Up Language)
Laboratorium Komputer
PERTEMUAN PRAKTIKUM 1
1.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah dasar HTML
2. Mahasiswa dapat membuat beberapa halaman website sederhana
1.2 Materi :
1. Elemen atau Tag tag Dasar HTML 2. Atribut Tag HTML
3. Value Atribut HTML
1.3 Teori
HTML (HyperText Markup Language) merupakan bahasa pemrograman web dasar yang digunakan untuk membuat halaman situs secara sederhana. Untuk belajar HTML dasar sebaiknya anda menggunakan
Notepad atau text editor yang bisa mengasah pemahaman anda. Dalam penamaan dokumen HTML tidak ada aturan bakunya, file dokumen yang mempunyai ekstensi .htm atau .html maka dianggap file dokumen HTML.
• Contoh : latih.htm = latih.html
Struktur Dasar HTML/ Kerangka HTML
<html> <! tag untuk memulai dokumen HTML--> <! Bagian Header - ->
<head>
<title> Judul halaman </title>
</head>
<! Bagian body-->
<body>
Informasi yang akan ditampilkan pada web browser harus ditulis dalam bagian ini
</body>
</html> <! tag untuk mengakhiri dokumen HTML-->
Pengunaan Element/Tag Dan Atributnya
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri dengan tag HTML mempunyai peraturan sebagai berikut :
Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
Tag HTML secara normal selalu berpasangan misal (<i>...</i>) , tetapi juga ada tag yang tidak berpasangan
Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
Contoh penulisannya :
<b><I>..Tebal dan Miring..</I></b>
Tag HTML tidak case sensitive. Ini artinya <html> sama dengan <HTML>
Atribut tag harus ditulis di dalam tag bersangkutan
Contoh : < body bgColor= #fffeee alink= #cccccc > Kerangka : <tag (nama tag) atribut1= value1 atribut2= value2 >
TAG DASAR HTML 1. TAG HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen tersebut adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen
2. TAG HEAD
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
Menyediakan judul dokumen
Menjembatani hubungan antar dokumen
Memberitahu browser untuk membuat form pencarian
Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head :
Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai berikut :
<title>Judul Dokumen</title>
Tag Body mempunyai atribut
Tag Heading <hn>
Tag heading berfungsi untuk memformat heading (judul dan sub judul), n adalah bilangan 1 s.d 6, dimana <h1> jenis yang memiliki ukuran paling besar
Atribut tag Paragrap :
Align = [ left | center | right]
Tag Paragraf <p>
Berfungsi pengaturan antara paragrap dalam halaman web, tag untuk membuat paragraph yaitu <p> dan di akhiri dengan tag </p>
Atribut tag Paragrap :
Align = [ left | center | right | justify]
Tag Break <br>
Berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web.
Tag Horisontal Rules<hr>
Berfungsi untuk menampilkan garis horisontal di dalam halaman web.
Atribut elemen horisontal rule :
Align = [ left | center | right ] (Horizontal aligment, default center)
Size = pixels (line height, default 2)
Width = length ( line width, pixed or percentage, default 100%)
Noshade = solid line
Tag Pemformatan Karakter <font>
Tag Ragam Karakter
<b>bold</b>
<i>italic</i>
<u>underline</u>
Tag Audio
Sebelum ada HTML5, file audio pada website hanya bisa dimainkan di browser dengan plug-in (seperti flash). Eleman <audio> pada HTML5 berfungsi untuk menanamkan audio dalam sebuah halaman web. Tag ini berfungsi untuk menampilkan suara yang sesuai keinginan kita ke dalam sebua website dengan cara penulisan <audio> </audio>. Tag audio ini mengenali beberapa format audio diantaranya : MP3, ogg dan Wav. Browser yang hanya bisa mendukung yang bisa menampilkan, tag audio mempunyai mempunyai beberapa atribut :
Atribut Nilai Deskripsi
Autoplay autoplay Langsung dijalankan
Controls Controls Untuk menampilkan control audio (Pause, play,dan volume) Loop loop Memutar ulang secara otomastis Muted muted Mematikan audio
preload Auto metadata none
Menentukan bagaimana audio harus dimuat
Src url Menentukan URL dari file audio
Tag video
Tag ini berfungsi untuk mengeluarkan suara dan menampilkan animasi atau video di dalam sebuah website. Tag ini bisa ditulis dengan <video> </video>. Saat ini, ada 3 format yang didukung untuk tag <video> yaitu MP4, WebM, ogg. tag video mempunyai beberapa atribut antara lain :
Atribut Nilai Deskripsi
Autoplay autoplay Langsung dijalankan
Controls Controls Untuk menampilkan control audio
Height Pixels Mengatur tinggi
Loop loop Memutar ulang secara otomastis Muted muted Mematikan audio
Poster URL Untuk menetukan gambar yang akan ditampilkan sebagai cover, saat video sedang men-download, atau sampai pengguna menekan tobol putar.
Preload Auto metadata none
Menentukan bagaimana audio harus dimuat
Tag Canvas
Elemen <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui JavaScript. Elemen <Canvas> hanya wadah untuk grafis. Elemen <canvas> memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.
Tag SVG
SVG adalah singkatan dari Scalable Vector Graphics. SVG digunakan untuk mendefinisikan grafis untuk Web. SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
Elemen / Tag Image <img>
Ada beberapa hal yang perlu diperhatikan dalam penyisipan citra atau gambar ke page, yakni :
1. Ukuran file citra 2. Tipe file citra
File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag <IMG>, yakni dalam
format penuh:
<IMG SRC="URL" ALT="deskripsi teks" ALIGN="Arah">
Atribut elemen Image
SRC = ( location of image) ALT = text ( alternate text) Width = length ( image width) Height = height ( image height)
Align = [ top | middle | bottom | left | right] Border = length (link border width)
Gambar sebagai background
Dengan tag <body background = "images1.jpg">
<body style="image:url(images.jpg); background-repeat: no-repeat; background-attachment: fixed;"> - membuat gambar tidak ikut tergeser dan tidak terulang
<body style="image:url(images.jpg); background-repeat: repeat-x; ">(horisontal)
<body style="image:url(images.jpg); background-repeat: repeat-y; ">(vertikal)
Elemen Link/Ancor <a>
Berfungsi untuk penghubung antara satu halaman dengan halaman lain. Link bisa berupa text atau gambar. Dua atribut yang sering dipakai pada tag ini adalah href dan target.
Bentuknya : < a href = URL_Tujuan> hypertext</a> Contoh penggunaanya:
<A HREF=http://www.yahoo.com/Home/homepage.html> Klik di sini </A>
<A HAREF = Tujuan > <IMG SRC = nama file gambar.ekstensinya ></A>
Link Relatif :
Link page lain pada computer yang sama Contoh : <a haref = file2.html > berikutnya </a>
Link absolute : link web lain di internet
Contoh : <a haref = http:// www.google.com >google</a>
Link ke bagian lain dalam dokumen : Link ke bagian lain dalam page yang sama
<A haref = #nama bagian > bagian lain</a>
Membuka Link untuk Window Baru
<a href = http :// www.google.com target = _blank >Google </a>
Keluar dari suatu Frame
<a href = http :// www.google.com target = _top >Google </a>
Mailto
<a href = mailto : zainal@gmail.com>kirim email </a>
1.4 LATIHAN LATIHAN
2. Menggunakan tag <P> untuk membuat paragraph dan menggunakan tag <H1> s.d <H6>untuk memperbesar huruf, kemudian anda coba ditambah atribut align dan valuenya
3.Membuat garis horizontal
4. Penggunaan tag <pre> untuk menampilkan teks apa adanya
6. Penggunaan tag <A HREF>
.
Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file yang dimaksud.
7. penggunaan tag audio kemudian jika ditambah berbagai atributnya
8. Penggunaan tag video
1.5 TUGAS
1. Buatlah sebuah website sederhana yang berisi tentang cerita Biografi anda berupa narasi, dengan ketentuan :
memakai rangkaian tag tag (elemen)yang sudah dipaparkan
minimal 3 paragraf
dalam 1 paragraf minimal 50 kata
