MODUL 1 HTML (HyperText Mark-Up Language) Laboratorium STIMIK Komputer PPKIA Pradnya Paramita Malang
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. Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. (tag berarang)
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 section head. setelah <html> dan </head> di akhir Elemen-elemen pada bagian head akan mengerjakan tugastugas 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 dokumen. Penggunaannya adalah sebagai berikut : judul <title>judul Dokumen</title> 3. TAG BODY : Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup</body>.
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> Font pada halaman HTML dapat diformat sesuai dengan desain yang ditentukan, baik ukuran, jenis maupun warna.
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 Autoplay autoplay Controls Controls Loop Muted preload Src Deskripsi Langsung dijalankan Untuk menampilkan control audio (Pause, play,dan volume) loop Memutar ulang secara otomastis muted Mematikan audio Auto metadata Menentukan bagaimana audio none harus dimuat 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 mendownload, atau sampai pengguna menekan tobol putar. Preload Auto metadata Menentukan bagaimana audio none harus dimuat Src url Menentukan URL dari file audio Width Pixels Untuk mengatur lebar pemutar
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="background-image:url(images.jpg); backgroundrepeat: no-repeat; background-attachment: fixed;"> - membuat gambar tidak ikut tergeser dan tidak terulang Untuk membuat gambar terulang pada sumbu tertentu
<body repeat: <body repeat: style="background-image:url(images.jpg); repeat-x; ">(horisontal) style="background-image:url(images.jpg); repeat-y; ">(vertikal) backgroundbackground- 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 1. Penggunaan syntak HTML, penggunaan komentar dan tag <br> untuk ganti baris
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 5. Pengaturan Warna Background dan fontase, pada mempunyai atribut size, face dan color. Kemudian I,b,u fontase
6. Penggunaan tag <A HREF>. Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file yang dimaksud. 7. penggunaan atributnya tag audio kemudian jika ditambah berbagai 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 Desain semenarik mungkin (Gambar, grafik, suara, animasi)