MODUL 1 HTML (HyperText Mark-Up...

Praktikum Pemrograman web 1

[email protected] 2018

MODUL 1

HTML

(HyperText Mark-Up Language)

Laboratorium KomputerSTIMIK PPKIA Pradnya Paramita Malang

PERTEMUAN PRAKTIKUM 11.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai

perintah – perintah dasar HTML2. Mahasiswa dapat membuat beberapa halaman

website sederhana

1.2 Materi :1. Elemen atau Tag – tag Dasar HTML2. Atribut Tag HTML3. Value Atribut HTML

1.3 TeoriHTML (HyperText Markup Language) merupakan bahasa pemrogramanweb dasar yang digunakan untuk membuat halaman situs secarasederhana. Untuk belajar HTML dasar sebaiknya anda menggunakanNotepad atau text editor yang bisa mengasah pemahaman anda.Dalam penamaan dokumen HTML tidak ada aturan bakunya, filedokumen yang mempunyai ekstensi .htm atau .html maka dianggapfile dokumen HTML.

• Contoh : latih.htm = latih.html1. Buka text editor anda (Notepad ++ / yang disarankan

lainnya)2. Ketik script dibawah ini ke dalama text editor

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 harusditulis dalam bagian ini</body></html> <!—tag untuk mengakhiri dokumen HTML-->

3. Simpan dengan nama latih.htm atau latih.htmlPengunaan Element/Tag Dan AtributnyaDalam pembuatan dokumen HTML penulisan elemen yang diawali dandiakhiri dengan tag HTML mempunyai peraturan sebagai berikut : Tag HTML diapit dengan dua karakter kurung sudut ( < dan

> ) Tag HTML secara normal selalu berpasangan misal

(...) , 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, makapenulisan tag akhir tidak boleh bersilang dan harusberurutan. (tag berarang)

Contoh penulisannya :..Tebal dan Miring..

Tag HTML tidak case sensitive. Ini artinya <html> samadengan <HTML>

Atribut tag harus ditulis di dalam tag bersangkutanContoh : < body bgColor= “#fffeee” alink=“#cccccc”>Kerangka : <tag (nama tag) atribut1=”value1”atribut2=”value2” …>

TAG DASAR HTML1. TAG HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumentersebut adalah dokumen html. Tag ini merupakan suatukeharusan bagi pemrogram web untuk menuliskannyasebagai tag pertama dalam dokumen html. Penulisan tagseperti berikut ini :

<html> pada awal dokumen dan </html> pada akhir dokumen

2. TAG HEADBagian Head sebenarnya tidak harus ada pada dokumen HTML,tetapi pemakaian head yang benar akan meningkatkankegunaan suatu dokumen HTML. Isi bagian headkecuali judul dokumen – tidak akan terlihat olehpembaca dokumen tersebut. Penulisan tag seperti berikutini :

<head> di awal setelah <html> dan </head> di akhirsection 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 juduldokumen. Penggunaannya adalah sebagai berikut :

<title>Judul Dokumen</title>

3. TAG BODY : Bagian BODY merupakan isi dari dokumenHTML. Semua informasi yang akan ditampilkan, mulaidari teks, gambar, sound, dan lain-lain, akan ditempatkandi bagian ini. Seperti telah disebutkan di atas,bagian BODY diawali oleh tag <body> danditutup</body>.

Tag Body mempunyai atribut

Tag Heading <hn>Tag heading berfungsi untuk memformat heading (judul dan subjudul), n adalah bilangan 1 s.d 6, dimana <h1> jenis yangmemiliki ukuran paling besarAtribut tag Paragrap :Align = [ left | center | right]

Tag Paragraf Berfungsi pengaturan antara paragrap dalam halaman web, taguntuk membuat paragraph yaitu dan di akhiri dengan tagAtribut tag Paragrap :Align = [ left | center | right | justify]

Tag Break Berfungsi untuk memberikan baris baru suatu paragrap dalamhalaman web.

Tag Horisontal Rules<hr>Berfungsi untuk menampilkan garis horisontal di dalam halamanweb.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, default100%)Noshade = solid line

Tag Pemformatan Karakter Font pada halaman HTML dapat diformat sesuai dengan desainyang ditentukan, baik ukuran, jenis maupun warna.

Tag Ragam Karakterbolditalicunderline

Tag AudioSebelum ada HTML5, file audio pada website hanya bisadimainkan di browser dengan plug-in (seperti flash). Eleman<audio> pada HTML5 berfungsi untuk menanamkan audio dalamsebuah halaman web. Tag ini berfungsi untuk menampilkan suarayang sesuai keinginan kita ke dalam sebua website dengan carapenulisan <audio>…</audio>. Tag audio ini mengenali beberapaformat audio diantaranya : MP3, ogg dan Wav. Browser yanghanya bisa mendukung yang bisa menampilkan, tag audiomempunyai mempunyai beberapa atribut :

Atribut Nilai DeskripsiAutoplay autoplay Langsung dijalankanControls Controls Untuk menampilkan control

audio (Pause, play,dan volume)Loop loop Memutar ulang secara otomastisMuted muted Mematikan audiopreload Auto metadata

noneMenentukan bagaimana audioharus dimuat

Src url Menentukan URL dari file audio

Tag videoTag ini berfungsi untuk mengeluarkan suara dan menampilkananimasi atau video di dalam sebuah website. Tag ini bisaditulis dengan <video>…</video>. Saat ini, ada 3 format yangdidukung untuk tag <video> yaitu MP4, WebM, ogg. tag videomempunyai beberapa atribut antara lain :Atribut Nilai DeskripsiAutoplay autoplay Langsung dijalankanControls Controls Untuk menampilkan control

audioHeight Pixels Mengatur tinggiLoop loop Memutar ulang secara otomastisMuted muted Mematikan audioPoster URL Untuk menetukan gambar yang

akan ditampilkan sebagaicover, saat video sedang men-

download, atau sampai penggunamenekan tobol putar.

Preload Auto metadatanone

Menentukan bagaimana audioharus dimuat

Src url Menentukan URL dari file audioWidth Pixels Untuk mengatur lebar pemutar

Tag CanvasElemen <canvas> digunakan untuk menggambar grafik, dengancepat, melalui JavaScript. Elemen <Canvas> hanya wadah untukgrafis. Elemen <canvas> memiliki beberapa metode untukmenggambar jalan, kotak, lingkaran, teks, dan menambahkangambar.

Tag SVGSVG adalah singkatan dari Scalable Vector Graphics. SVGdigunakan untuk mendefinisikan grafis untuk Web. SVG memilikibeberapa metode untuk menggambar jalan, kotak, lingkaran,teks, dan gambar grafis.

Elemen / Tag Image <img>

Ada beberapa hal yang perlu diperhatikan dalam penyisipancitra atau gambar ke page, yakni :

1. Ukuran file citra2. Tipe file citra

File citra dapat disisipkan ke dalam suatu file HTMLdengan menggunakan tag <IMG>, yakni dalam

format penuh: <IMG SRC="URL" ALT="deskripsi teks" ALIGN="Arah">

Atribut elemen ImageSRC = ( 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 backgroundDengan tag <body background = "images1.jpg"><body style="background-image:url(images.jpg); background-repeat: no-repeat; background-attachment: fixed;"> - membuatgambar tidak ikut tergeser dan tidak terulangUntuk membuat gambar terulang pada sumbu tertentu<body style="background-image:url(images.jpg); background-repeat: repeat-x; ">(horisontal)<body style="background-image:url(images.jpg); background-repeat: repeat-y; ">(vertikal)Elemen Link/Ancor <a>Berfungsi untuk penghubung antara satu halaman dengan halamanlain. Link bisa berupa text atau gambar. Dua atribut yangsering 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 internetContoh : <a haref = “http:// www.google.com”>google</a>Link ke bagian lain dalam dokumen : Link ke bagian lain dalampage 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 : [email protected]>kirim email </a>

1.4 LATIHAN – LATIHAN1. Penggunaan syntak HTML , penggunaan komentar dan tag untuk ganti baris

2. Menggunakan tag untuk membuat paragraph dan menggunakantag <H1> s.d <H6>untuk memperbesar huruf, kemudian anda cobaditambah atribut align dan valuenya

3.Membuat garis horizontal

4. Penggunaan tag <pre> untuk menampilkan teks apa adanya

5. Pengaturan Warna Background dan fontase, pada fontasemempunyai atribut size, face dan color. Kemudian I,b,u

6. Penggunaan tag <A HREF>

.Buatlah file halx.htm, sehingga ketika diklik pada Halaman Xakan menuju file yang dimaksud.

7. penggunaan tag audio kemudian jika ditambah berbagaiatributnya

8. Penggunaan tag video



1.5 TUGAS1. 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)

MODUL 1 HTML (HyperText Mark-Up...

Documents

Transcript of MODUL 1 HTML (HyperText Mark-Up...