A. MATERI - MODUL 01 Struktur HTML

(1)

MODUL PEMBELAJARAN TAHUN PELAJARAN 2017-2018

Nama Sekolah : SMK Ma’arif 1 Kebumen Mata Pelajaran : Pemrograman Dasar Kelas/Semester : XI /Gasal

Materi Pokok : Struktur HTML

A. MATERI

Struktur Dasar HTML dalam Pembuatan WEB site 1. Pengertian HTML

Menurut Wikipedia HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

HTML atau kepedekan dari “Hypertext Markup Language” merupakan bahasa pemrograman dasar yang digunakan ketika akan membuat halaman web, baik web yang statis maupun web yang dinamis. HTML merupakan bahasa markup (markup language). Pada HTML terdapat berbagai tag atau elemen yang dapat digunakan untuk memformat sebuah dokumen dalam web.

Jadi, HTML yaitu bahasa pemrograman dasar untuk membuat sebuah web, yang bertujuan untuk menampilakan sebuah informasi guna menghasilkan tampilan yang terintegerasi.

2. Fungsi HTML

Berdasarkan pengertian dari HTML, banyak hal dan fungsi yang dapat dilakukan antara lain :

 Mengontrol tampilan dari halaman web dan isinya.

 Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.

 Membuat list atau penomoran dari sekumpulan hal.  Menampilkan informasi dalam bentuk tabel.

 Membuat Sebuah link yang digunakan untuk menuju dokument lain.

 Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

 Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

3. Struktur HTML a. Elemen

(2)

b. Tag

Tag merupakan teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

Yang merupakan tag-tag dasar dalam HTML adalah:  <html> </html>

Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu file HTML.

 <title> </title>

Tulisan yang berada diantara tag <title> dan </title> akan ditampilkan oleh browser pada bagian title dan merupakan title dari jendela browser.

 <head> </head>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head> </head>.

 <body> </body>

Bagian tag <body> </body> menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang dapat ditentukan.

Contoh : <html> <head>

<title>Contoh Document HTML</title> </head>

<body>

Hallo Pembaca Makalah Pemrograman Dasar WEBsite dengan HTML. </body>

</html>

c. Atribut

Atribut terdapat di dalam script sebuah elemen dan memberikan informasi tambahan tentang elemen. Atribut selalu ditentukan dalam tag awal Atribut ditulis dalam pasangan nama / nilai. Nilai dari atribut harus selalu tertutup dalam tanda kutip. Tanda kutip ganda adalah yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu menggunakan tanda kutip tunggal Misalnya: name = 'John "shotgun" Nelson'.

Atribut Deskripsi

Class Menentukan satu atau lebih classnames untuk sebuah elemen Id Menentukan id unik untuk sebuah elemen.

Style Menentukan inline CSS style untuk elemen.

Title Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip).

(3)

a. Mengatur Tulisan pada Halaman HTML.

Agar tulisan pada halaman sebuah web terlihat rapi, maka perlu pemformatan dalam tulisan tersebut. Baik tata cara pencetakannya maupun pengaturan tulisan yang lain. Adapun pengaturan format tersebut antara lain :

 Heading

Heading adalah hal yang penting dalam sebuah Document HTML. Heading didefinisikan dengan tag <h1> sampai dengan <h6>. Semakin besar angka dalam penulisan tag Heading semakin kecil ukuran yang tercetak dalam Browser.

Contoh : <html> <body>

<h1>Penulisan heading 1</h1> <h2>Penulisan heading 2</h2> <h3>Penulisan heading 3</h3> <h4>Penulisan heading 4</h4> <h5>Penulisan heading 5</h5> <h6>Penulisan heading 6</h6> </body>

</html>  Paragraf

Membuat paragraf dalam HTML dapat menggunakannya dengan tag <p>. Pada browser, secara otomatis penulisan paragraf akan menambahkan baris kosong sebelum dan sesudah paragraf.

Sebagian besar browser akan membenarkan penulisan HTML Paragraf, bahkan jika kita melupkan tag tersebut. Tetapi, tidak menuliskan tag dalam penulisan paragraf membuat hasil tulisan yang tercetak pada HTML tidak tertulis rapi.

Dalam penulisan paragraf, untuk mengganti baris dalam paragraf tersebut dapat kita gunakan tag break, dapat di tulis <br> atau <br \>.

<p>Penulisan Paragraf 1. </p> <p>Penulisan Paragraf 2. </p> <p>Penulisan <br \> Paragraf 3. </p> </body>

</html>  Format Teks

Banyak sekali tag yang digunakan untuk menformat sebuah tulisan dalam HTML. Menformat paragraf yang di maksudkan adalah membuat text bercetak tebal, miring, subscript text, superscript text dan format lainnya.

(4)

Tags Description <b> Mendefinisikan Teks bercetak tebal <i> Mendefinisikan Teks bercetak miring <small> Mendefinisikan Teks kecil

<strong> Mendefinisikan Teks penting <sub> Mendefinisikan Teks Subscript <sup> Mendefinisikan Teks Superscript <ins> Mendefinisikan Teks yang dimasukan <del> Mendefinisikan Teks yang dihapus

HTML Computer Output Tags Tags Descriptions <code> Mendefinisikan Kode Komputer

<kbd> Mendefinisikan tekx Keyboard

<samp> Mendefinisikan Sampel kode komputer <var> Mendefinisikan Variabel

<pre> Mendefinisikan teks terformat

HTML Citations, Quotations, dan Definition Tags Tags Descriptions

<abbr> Mendefinisikan sebuah singakatan atau akronim

<address> Mendefinisikan informasi kontak untuk penulis document <bdo> Mendefinisikan arah teks

Mendefinisikan bagian yang dikutip dari sumber lain

<q> Mendefinisikan sebuah inline (pendek) kutipan <cite> Mendefinisikan Judul karya

<dfn> Mendefinisikan sebuah istilah definisi  Mengatur Pemerataan Paragraf

Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:

1. <CENTER> </CENTER>

Tag ini akan menampilkan tulisan/gambar ditengah baris. 2. <P ALIGN=LEFT|CENTER|RIGHT> </P>

Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.

3. <H# ALIGN=LEFT|CENTER|RIGHT> </H#>

Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading.

 Menyisipkan Gambar

(5)

menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL gambar yang ingin ditampilkan.

</html>

URL menunjuk ke lokasi di mana gambar disimpan. Sebuah gambar bernama "image.jpg", yang terletak luar direktori dari file “image.html”.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, dan kemudian paragraf kedua.  Link ke Dokumen atau Situs yang Lain

HTML tag <a> mendefinisikan hyperlink. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain. Bila Anda memindahkan kursor di atas link dalam sebuah halaman Web, panah akan berubah menjadi sedikit tangan. Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.

Secara default, link akan muncul sebagai berikut di semua browser: 1. Link belum dikunjungi digarisbawahi dan biru

2. Sebuah link dikunjungi digarisbawahi dan ungu 3. Link aktif digarisbawahi dan merah

Contoh:

<a href=”http://www.example.com/”>Klik Link</a>  Penulisan Komentar dalam HTML

Komentar dalam penulisan HTML hanyal untuk menandai sebuah tags agar kita dapat lebih memahami maksud dari tujuan dari tags yang kita buat. Penulisan Komentar tidak dapat di tampilkan dalam sebuah Browser. Tags dari komentar adalah

Contoh :

b. Membuat List

Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling umum di Gunakan adalah Unordered List dan Ordered List :

 Unordered List

(6)

Contoh : <html> <body> <ul>

<li>Unordered List 1</li> <li>Unordered List 2</li> <li>Unordered List 3</li> </ul>

</body> </html>  Ordered List

Ordered list dimulai dengan tag <ol> dan setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka.

Contoh : <html> <body> <ol>

<li>Ordered List 1</li> <li>Ordered List 2</li> </ol>

</body> </html>

c. Membuat Tabel dan Pengaturannya

Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberaapa kolom (dengan tag <td>).

Di dalam tag <tabel> harus terdapat attribut “border” dan tebal dari border tersebut. Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas atau garis.

Contoh :

<td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> </tr>

<tr>

<td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> </tr>

</table>

Tags Descriptions <table> Mendefinisikan Tabel

(7)

<tr> Mendefinisikan Tabel baris <td> Mendefinisikan Tabel Kolom <caption> Mendefinisikan Judul Tabel

<colgroup> Menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat

<col> Menentukan sifat kolom untuk setiap kolom dalam elemen <thead> Grup isi header dalam sebuah tabel

<tbody> isi tubuh dalam sebuah tabel <tfoot> isi footer dalam sebuah tabel

d. Membuat Form dan Pengaturannya

From digunakan untuk membuat sebuah inputan untuk pengguna yang nantinya akan dikirim ke server. Bentuk form terdiri dari beberapa elemen diantaranya teks, checkbox, radio button, tombol submit dan banyak lagi. Form juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label. Untuk lebih jelasnya lihat Tabel :

Element pada Form

Element Descriptions

text Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks

password Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks yang dirahasiakan

radio mendefinisikan satu baris field input yang pengguna dapat memilih hanya satu saja

checkbox mendefinisikan satu baris field input yang pengguna dapat tidak memilih atau pilih semua.

button/submit /reset

Mendefinisikan bentuk tombol untuk mengirim semua form

file mendefinisikan satu baris field input yang pengguna dapat upload file

hidden mendefinisikan satu baris field input yang pengguna dapat menyembunyikan form

Tags Pada Form

Tags Descriptions

<form> Mendefinisikan sebuah form HTML untuk input pengguna <input> Mendefinisikan sebuah kontrol input

<textarea> Mendefinisikan sebuah kontrol input multiline (text area) <label> Mendefinisikan sebuah label untuk sebuah elemen <fieldset> terkait unsur-unsur dalam bentuk

<legend> Mendefinisikan sebuah caption untuk elemen <fieldset> <select> Mendefinisikan sebuah daftar drop-down

<optgroup> Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down

<option> Mendefinisikan pilihan dalam daftar drop-down <button> Mendefinisikan sebuah tombol diklik

(8)

kontrol input

<keygen> Baru Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)

<output> Baru Mendefinisikan hasil penghitungan e. Menggunakan Karakter Khusus

Berikut ini cara pengetikkan untuk menampilkan karakter khusus pada halaman html:

Symbol Description Caracte r

® registered trademark symbol ®

 trademark symbol ™

  nonbreaking space

< less-than symbol <

> greater-than symbol >

& Ampersand &

" quotation mark “

B. SOAL Pilihan Ganda

1. HTML merupakan singkatan dari .... a. Home Tool Markup Language

b. Hyperlinks and Text Markup Language c. Hyper Text Markup Language

d. Hyper Tool Markup Language e. Hyper Tricks Markup Language

2. Siapa yang mengembangkan Sejarah Web pertama kali...

a. Ruben d. Albert Einstein b. Thomas Alpha Edison e. Steward

c. Tim Berners-Lee 3. Profesi dalam pengembangan web, kecuali...

a. Web Developer d. Web Administrator b. Web Programer e. Web Browser c. Web Designer

4. Kegiatan menulis html di sebut?

a. Nulis d. Gambar

b. Coding e. Html

c. Ngetik

5. Yang dimaksud dengan halaman Web adalah

a. Halaman elektronik yang dibuka dengan email b. Halaman online bisa di download

c. Halaman digital yang dibuka dengan web browser

d. Halaman digital yang berisi berbagai jenis data dan gambar. e. Digital online yang terhubung dengan internet

6. Browser bawaan dari windows adalah ?

(9)

b. Mozila e. Internet Explorer c. Safari

7. Bahasa Pemrograman yg biasa digunakan untuk membuat halaman web adalah pengertian dari ?

a. HTML d. INTERNET

b. Web e. WWW

c. Program

8. Apa kepanjangan WWW ?

a. World Wide Web d. World Web Wide b. Wide World Web e. Web World Wide c. Web Wide World

9. Membuat tabel adalah fungsi dari ?

a. <TABLE> d. <IL> b. <HTML> e. <BR> c. <HEAD>

10. Apa Fungsi atribut “align” dalam HTML ?

a. Mengatur panjang d. Mengatur lebar b. Tebal garis tepi e. Warna latar belakang c. Perataan tabel

11. Ukuran Border dalam ….?

a. KM/H d. Pixel

b. CM e. Mph

c. Liter

12. Apa fungsi dari <center> adalah...

a. menampilkan informasi d. rata tengah

b. tulisan strong e. mendefinisikan table c. mempertebal tulisan

13. Tag tabel adalah….

a. <table>..</table> d. <table>..<table> b. </table>..<table> e. <table/>..<table> c. </table>..</table>

14. Untuk menentukan baris dalam table adalah… a. <hr> d. <b> b. <br> e. <tr> c. <p>

15. Apa fungsi bg color dalam membuat table …

a. warna latar belakang table d. warna latar belakang html b. warna desktop e. warna latar belakang teks c. warna latar belakang monitor

16. Tabel merupakan..

a. Informasi dalam bentuk baris dan kolom b. Tulisan berjalan

(10)

d. efek suara e. background

17. Tag yang digunakan untuk menampilkan informasi dalam bentuk list ? a. <li> d. <tr>

b. <ul> e. <td> c. <ol>

18. Properti <li> pada listing berguna untuk…

a. Membuat bullet point atau baris baru pada list b. Membuat teks miring

c. Membuat teks tebal d. Pindah baris

e. Membuat teks garis bawah

19. Tag <ul> dalam listing berguna untuk… a. Membuat kolom

b. Ganti paragraph c. Pindah baris

d. Membuat teks miring

e. Mendefinisikan awal dan akhir list 20. Perhatikan struktur berikut!

Dari struktur tersebut,untuk apakah itu?

a. Membuat background d. Membuat tabel b. Memberi efek suara e. Efek suara c. Membuat listing

21. Atribut yang digunakan untuk menentukan sumber berkas gambar, suara, atau video adalah...

a. SRC d. AUTOSTART

b. LOOP e. HIDDEN

c. UNITS 22. Tag gambar ?

a. <img> d. <pict> b. <jpg> e. <gambar> c. <ipg>

23. tag <input> berfungsi untuk

a. memainkan musik sebagai latar belakang b. mendefinisikan sebuah kontrol input c. membuat baris baru

d. membuka HML e. isi HTML

(11)

b. <b> e. <blink> c. <head>

25. Format Avi digunakan untuk ?

a. Audio d. suara

b. Picture e. musik

c. Video Essay

1. Tuliskan Struktur Dasar HTML ! 2. Tuliskan Struktur Dasar Tabel ! 3. Tuliskan Struktur Dasar Listing !