Scribd
Unggah
29 tayangan16 halaman

Modul I

Modul ini membahas konsep dasar HTML. Terdiri dari teori dan latihan-latihan penggunaan berbagai tag HTML seperti <html>, <head>, <body>, <h1-h6>, <p>, <br>, <hr>, dan lainnya. Termasuk penjelasan atribut-atribut yang dapat digunakan pada masing-masing tag. Modul ini bertujuan memperkenalkan dasar-dasar penulisan kode HTML.

Diunggah oleh

kurnia gusti ayu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
29 tayangan16 halaman

Modul I

Modul ini membahas konsep dasar HTML. Terdiri dari teori dan latihan-latihan penggunaan berbagai tag HTML seperti <html>, <head>, <body>, <h1-h6>, <p>, <br>, <hr>, dan lainnya. Termasuk penjelasan atribut-atribut yang dapat digunakan pada masing-masing tag. Modul ini bertujuan memperkenalkan dasar-dasar penulisan kode HTML.

Diunggah oleh

kurnia gusti ayu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

MODUL I

Konsep Dasar HTML

I. TEORI
1.1 Mengenal HTML
HTML merupakan singkatan dari HyperText MarkUp Language yaitu bahasa standar web
(Markup) yang dikelola penggunaanya oleh W3C( World Wide Web Consortium) berupa tag – tag
yang menyusun setiap elemen dari website. Untuk mengetikkann skrip HTML dapat menggunakan
text editor seperti Notepad( text editor paling sederhana) atau Notepad ++, Sublime Text, dan lain
sebagainya. Unsur dan struktur dasar penulisan HTML yaitu sebagai berikut :

Penjelasan :
• <!DOCTYPE HTML> merupakan tag awal dari setiap dokumen HTML yang berfungsi
untuk menginformasikan pada browser bahwa dokumen sedang dibuka ada dokumen
HTML , pada HTML 5 penulisan doctype lebih sederhana dibandingkan versi
sebelumnya.
• Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di
dalamnya adalah kode HTML sehingga browser akan menterjemahkan sebagai dokumen
HTML. Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas
kepala dan badan
• Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>.
Bagian ini merupakan wadah untuk seluruh elemen head yang termasuk di dalamnya
terdapat judul halaman web, menyediakan meta data informasi, scripts, instruksi untuk
berelasi dengan dokumen stylesheet, dan banyak lainnya. Tag-tag yang digunakan di
bagian diantaranya:
<style><meta> <noscript><title> dsb
• Pada Bagian ini, bisa ditentukan judul dokumen HTML yang dituliskan dengan pasangan
<TITLE> dan </TITLE
• Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah dapat
dituliskan teks-teks, penyisipan gambar, Link, atau pembuatan tabel.

1.2 Heading
Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag yang mempunyai tag awal <Hx> dan
tag penutup </Hx>
Format : <H1>...........</H1> sampai <H6>.......</H6>
Atribut pada heading :
Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left, right.
Contoh beriut ini adalah format penulisan atribut Align pada tag <Hx> :
• <Hx ALIGN=”[left, center, right]”> Teks Judul <Hx>

Dimana :

 Left : Untuk mengatur teks rata kiri ;


 Center : Untuk mengatur teks rata tengah
 Right : Untuk mengatur teks rata kanan

1.3 Horizontal Rule


Membuat Horizontal Rule Horizontal Rule atau biasa yang disebut dengan garis horizontal Tag
yang digunakan untuk membuat garis horisontal adalah tag <HR>.
Atribut pada HR ( Horizontal Rule) :
Atribut yang terdapat pada <HR> adalah width, length, dan color. Penggunaan atribut-atribut pada
<HR> adalah sebagai berikut :
<HR ALIGN=”a” WIDTH=”x” SIZE=”y” COLOR = “z” NOSHADE>
Dimana :
- a = posisi garis (left, center, right)
- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi

1.4 Paragraf
Paragraf dibuat dengan tag <p>..</p>. Atribut yang sering digunakan dalam tag ini adalah align. Atribut
ini digunakan untuk mengatur perataan paragraf. Atribut pada paragraf ; Right, Left, Center , Justify..
1.5 Komentar
Komentar adalah baris text yang ditampilkan dalam website. Fungsinya untuk memberikan
keterangan pada skrip. Untuk menandai sebuah komentar menggunakan tag <!-- -- >
1.6 Line Break
Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah dokumen
HTML. Tag ini secara otomatis akan membuat baris baru tanpa memberi baris kosong dan akan
memotong sebarisan teks pada tempat dimana tag tersebut diletakkan/disisipkan.
1.7 Font
Format teks pada dokumen HTML dapat menampilkan berbagai jenis font, ukuran font, dan warna font
pada layar. Atribut-atribut yang digunakan pada <FONT> adalah :
- SIZE,
- FACE,
- dan COLOR.
Tag <FONT> ini merupakan tag berpasangan, oleh sebab itu harus diakhiri dengan tag
slash-nya</FONT> Berikut format penulisan sintak :

Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada atribut
tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut COLOR
ini, yaitu :
- pertama dengan menggunakan nama warna itu sendiri, contohnya blue, red, dan green.
- Sedangkan yang kedua adalah dengan menggunakan kode RGB suatu warna seperti,
#000000 = Black, #0000FF.
Berikut contoh beberapa warna :
Tabel 1. Atribut Warna
1.8 Style Teks
Style teks ialah teks yang dibuat dengan HTML dapat dibuat tebal, miring, bergaris bawah dan
sebagainya. Berikut tag yang digunakan untuk style teks :
 <b>…</b>, untuk menampilkan huruf tebal.

 <i>…</i> untuk menampilkan huruf miring.

 <u>…</u> untuk menampilkan garis bawah pada teks.

 <tt>…</tt> untuk menampilkan huruf seperti huruf mesin ketik.

 <strike>…</strike> untuk menampilkan garis horizontal pada bagian tengah huruf

 <big>…</big>, untuk menampilkan ukuran huruf yang lebih besar.

 <small>…</small>, untuk menampilkan ukuran huruf yang lebih kecil.

 <sub>…</sub>, untuk menampilkan subscript.

 <sup>…</sup>, untuk menampilkan superscript.

 <cite>…</cite>,digunakan untuk menandai suatu kutipan (Citation).

 <code>….</code>,digunakan untuk menampilkan kode-kode pemrograman,


misalnya bahasa C.

 <em>…</em>, digunakan untuk menandai suatu teks yang ditekankan oleh penulis/
teks penting dengan teks dicetak miring

 <kbd>…..</kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan


oleh user melalui keyboard

 <samp>…</samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai


contoh.

 <strong>…</strong>, digunakan untuk menandai bagian yang terpenting dari suatu


teks.

 <var>….</var>, digunakan untuk menampilkan nama variabel.


 <dfn>….</dfn>, digunakan untuk menandai sebuah subdefinisi dari daftar
definisi.

 <mark>…</mark>digunakan untuk membuat teks dengan background kuning,


seperti teks yang ditandai

 <ins>…</ins> untuk menunjukkan teks yang disisipkan dengan teks bergaris bawah

1.9 Karakter Spesial ( Simbol Khusus)


Setiap simbol memiliki kode nama dank ode nomor. Untuk menambahkan simbol – simbol
tertentu pada HTML dapat dilakukan dengan menuliskan kode nama atau kode nomor dari
simbol tersebut. Dalam penulisan diakhiri dengan semicolon (;). Berikut daftar kode nama dan
kode nomor simbol yang seiring digunakan di HTML.

1.10 List
Jenis list yaitu :
a) list berurutan ( ordered list) , <ol>…</ol>
Tag ini memiliki atribut type yang menunjukkan jenis penomoran dan dapat diberi nilai
1, a, A, I, i
b) list tidak berurutan ( unordered list) <ul>..</ul>
Tag ini memiliki atribut type tetapi nilainya berbeda , yaitu round, disc dan square.
• List Definisi : list yang memberi uraian terhadap suatu item dalam daftar yang disebut
list definisi. <dl>…</dl>
– Tag <dt> ; untuk judul deskripsi
– Tag<dd> ; untuk menjabarkan / menjelaskan isi deskripsi
Untuk membuat item list pada tiap baris list baik pada list berurutan maupun list tidak
berurutan menggunakan tag <li>….</li>

1.11 Date & Time

Berikut format penulisan date & time :

1.12 Tag <div>


Dalam HTML 5, penggunaan tag <div> masih bisa tetap digunakan. Tag
div menunjukkan division (divisi atau bagian), yaitu generik blok konten yang dapat digunakan
sebagai kontainer (penampung) untuk meng-group beberapa elemen menjadi satu.
HTML <div> element dapat dijadikan "wadah" untuk menempatkan beberapa elemen menjadi
satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi style dengan CSS dan
perlakuan khusus lainnya yang kemudian dapat diberi atribut class, id, title dan lain sebagainya.
1.13 Tag <span>
HTML <span> element merupakan element inline (elemen yang tidak membentuk garis
baru) yang digunakan untuk mengelompokkan beberapa element yang dimaksudkan untuk
memudahkan dalam pemberian style (dengan CSS). Misalnya, memudahkan untuk men-style
element ketika digunakan bersama dengan global attributes, contohnya:
attribute class, lang atau dir. <span> tag mencakup global attributes, yang artinya tag
tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara
umum berlaku untuk semua HTML tags.

II. LATIHAN

Latihan 1 . Struktur Dasar HTML


Pada latihan 1 ini, pastikan anda menginstall sublime text atau minimal menggunakan Notepad.
1. Buka text editor yang Anda gunakan dan ketikkan sintak berikut :

2. Setelah selesai, simpan file tersebut pada sebuah folder dengan nama file latihan1.html ,
pilih save as type : All Files
3. Buka folder tempat anda menyimpan file tersebut , kemudian Double klik file tersebut dan
akan terlihat hasilnya pada browser seperti gambar berikut :
Latihan 2. Heading
1. Ketikkan sintak berikut pada text editor Anda

2. Simpan file tersebut pada folder dengan nama latihan2.html


3. Double klik pada file tersebut , dan hasilnya akan seperti di bawah ini :

Latihan 3. Horizontal Rule


1. Ketikkan sintak berikut pada text editor Anda, simpan dengan nama latihan3,html
2. Buka pada browser dan berikut hasilnya

Latihan 4. Paragrah dan Hr


1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan4.html:

2. Buka pada browser dan berikut hasilnya

Latihan 5. Font dan Paragraf


1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan5.html:
2. Buka pada browser dan berikut hasilnya

Latihan 6. Style Teks


1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan6.html:
2. Buka pada browser dan berikut hasilnya :

Latihan 7. Karakter Special


1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan7. html:
2. Buka pada browser dan berikut hasilnya :

Latihan 8. List
1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan8. html:
2. Buka pada browser dan berikut hasilnya :

Latihan 9.
1. Ketikkan sintak berikut pada text editor Anda simpan dengan nama file latihan9. html:
2. Buka file pada browser dan berikut hasilnya :

Anda mungkin juga menyukai