Materi Kelas : XI
Semester : Ganjil
Standar Kompetensi :
Menggunakan homepage untuk keperluan informasi dan komunikasi
Kompetensi Dasar :
Membuat homepage sederhana
Rencana Pelaksanaan Pembelajaran (RPP) :
Untuk RPP, dapat diunduh di sini
Materi :
- HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform computer ke platform computer lainnya tanpa perlu melakukan suatu perubahan apapun
- Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.
- Perbedaan dokumen HTML dengan document teks adalah bahwa anda dapat memberikan suatu format tertentu, seperti bentuk tebal, miring, form, list, table pada dokumen HTML sedangkan pada teks biasa anda tidak dapat melakukannya. Disamping itu adalah adanya elemen-elemen HTML beserta tag-tagnya ( ditulis dengan tanda <> )
- Untuk membuat dokument HTML, dapat digunakan beberapa editor seperti Notepad atau Notepad++ ,wordpad maupun dreamweaver
A. Element
B. Tag
Tag dinyatakan dengan tanda lebih kecil ( < ) dan tanda lebih besar (> ), tag biasanya merupakan suatu pasangan yang disebut tag awal
<I> Teks ini akan terlihat miring di browser</I>
<B>Teks ini akan terlihat tebal di browser </B>
Note : HTML tidak membedakan antara huruf besar dan huruf kecil dari suatu elemen, semuanya akan memberikan hasil yang sama. HTML tidak membenarkan penulisan tag yang tumpang tindih, seperti :
<Tag1>Teks untuk tag1 <Tag2>
Teks untuk tag2 </Tag1>></Tag2>
C. Atribut
Tag awal bisa memiliki beberapa buah atribut atau properti yang menyatakan karakteristik dari tag-tag tersebut, misalnya dalam <P ALIGN=”center”>, atribut dengan nama ALIGN mempunyai nilai “center” yang berfungsi untuk menengahkan paragraph. Bahkan tag bias mengandung beberapa atribut, seperti pada <FONT FACE=”Arial” SIZE=8 COLOR=”red”>yang menyatakan jenis font, ukuran serta warna font atau huruf yang digunakan.
D. Struktur
Dokumen HTML mempunyai 3 buah tag utama yang membentuk struktur dari dokumen tersebut, yaitu :
HTML = untuk menyatakan suatu dokumen HTML
HEAD = memberikan informasi tentang dokumen
BODY = menyimpan informasi / data yang akan ditampilkan dalam dokumen HTML
Strukturnya dapat dilihat seperti berikut :
<HTML>
<HEAD>
*** Bagian HEAD ***
</HEAD>
<BODY>
*** Bagian BODY ***
</BODY>
Baiklah,kita akan mulai dari mengenal tag-tag yang ada dalam HTML dan kemudian mencoba mempraktikannya menggunakan editor Notepad++ yang di awal sudah kita download, bebrapa tag yang akan kita pelajari adalah :
digunakan untuk membuat heading atau bagian judul, contoh :
<h1>Ini adalah contoh heading</h1>
<h2>Ini adalah contoh heading</h2>
<h3>Ini adalah contoh heading</h3>
2. HTML Paragraph
digunakan untuk membuat paragraf teks,
contoh :
hasil :
Ini adalah contoh paragraf rata kiri
3. HTML Image (<IMG SRC..>)
digunakan untuk menampilkan gambar (jog,bmp,gif,png,ico).
syntax : <IMG SRC="URL_Gambar" >
contoh :
hasilnya:
4. HTML MARQUEE (<MARQUEE>)
digunakan untuk menampilkan teks berjalan,
syntax : <MARQUEE >Teks</MARQUEE >
contoh :
hasilnya:
HTML
cobalah tulis tag HTML di bawah ini (latihan1.html) :
<HTML>
<HEAD>
<TITLE> Home Page Pribadiku </TITLE>
</HEAD><FONT COLOR=“RED”>
<MARQUEE DIRECTION=“Right” >WELCOME In MY PERSONAL WEB </MARQUEE><BR>
<HR SIZE=10 WIDTH=350 ALIGN=“center”>
<BODY BGCOLOR=“BLUE”>
<FONT COLOR=“ORANGE”>
<P ALIGN=”center”>
Hello….Apakah anda sudah mengetahui cara membuat home page ? jika belum, mari kita mempelajarinya bersama-sama menggunakan HTML, kelihatannya rumit tapi ternyata menarik…</P>
<P ALIGN=”left”> Anda harus rajin menulis, mengcopy, atau bahkan cut & paste untuk mempercepat penulisan tag di dokumen notepad…</P>
</BODY>
</HTML>
Pak...mo tanya, editor HTMnya boleh pke notepad++ atu dreamwaever ndak?
Boleh...klo bisa pakai Notepad++ aja dulu, karena kita mau belajar codingnya, klo langsung dreamweaver nanti mlah gakmau belajar coding
Pak bedanya HTL dengan halaman Web itu apa ya?
pak marqueeitu arahnya bisa dari atas ke bawah atau sebaliknya gak pak ? apa cuma kira kanan aja ?
pak, kalo mau mengatur margin di html tu gimana ya ?
soalnya beberapa hari lalu waktu bikin html tiap naruh gambar sama tulisan pasti tiba-tiba mentok ke sebelah kiri, ga bisa dipasin di tengah.
pak kalau editor htm pakai notepad (bukan notepad++) bisa tidak?
lalu kalau misalnya font face kita menggunakan nama font hasil download (bukan asli dari kompute) apa bisa?
Pak editornya selain pake notepad++ pake apa ?
pak kalo nulisnya cuma html, body dll tidak pakai tag, bagaimana hasilnya?
pak mau tanya nih, caranya bikin tulisan 'blink' di webpage gimana ya pak? lupa hehe
pak, dapetin notepad++ dmana pak?
@Hilman-->HTML itu bahasa yang digunakan untuk membuat webdan berbasis teks, sekarang ada banyak tools untuk membuat web selain HTML, seperti dreamweaver, frontpage, dsb,
pak bedanya Notepad sama Notepad++ ap??
trus contoh isi bagian 'HEAD' sama 'BODY' bagaimana??
@avista--> klo mo atas bawah berarti atributnya diganti DIRECTION=UP atau DIRECTION=bottom
pak, bedanya Notepad sama Notepad++ apa??
trus contoh isi dari 'HEAD' dan 'BODY' bagaimana??
N0tepad sama Notepad++ sebenarnya sama2 editor teks, bedanya klo yg notepad++ sudah bisa membedakan mana yang pernyataan,mana yang teks biasa dengan membedakan warna teksnya secara otomatis, jadi lebih memudahkan kita dalam mengedit tag