Pages

Sabtu, 13 Agustus 2016

Dasar-Dasar Pembuatan Web Statis (MATERI KELAS XI RPL - SMKN 1 BLEGA)

1.   Konsep Dasar Web

HTML adalah singkatan dari Hyper Text Markup Language.
File HTML dapat dibuat menggunakan notepad, Adobe Dreamwaver, Frontpage disimpan dengan ekstensi .htm atau .html

2.   Bentuk Umum HTML
<HTML>
<TITLE>Contoh Homepage</TITLE>
<BODY>Hallo apa kabar?<BR>
Mudah-mudahan kabarnya Baik.
</BODY>
</HTML>
Keterangan :
·         <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML.
·         </HTML>Penutup/Akhir dari suatu dokumen HTML.
·         <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML.
·         </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML.
·         <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML.
·         </BODY>Tag Penutup dari isi dokumen HTML.
·         <BR> Tag untuk memisahkan satu baris menjadi dua baris

Tag HTML tidak casesensitive artinya huruf besar dan huruf kecil dibaca sama

3.   Head
<html>
<head>
<title> Mari Belajar HTML </title>
</head>
<body>
<b>Ini adalah</b> halaman <i>pertama</i> saya.
</body>
</html>
Hasilnya :

Anak panah menunjukkan title bar




Format, Text, Font Heading

1.   Pemformatan Teks
Untuk memformat teks seperti bold, italic, subscript atau superscript pada halaman html, tag-tag berikut digunakan:
<b>….</b>
Teks yang berada diantara tag disebelah akan diboldkan
<blink>....</blink>
Menjadikan kata-kata yang berada diantara tag itu berkelip-kelip. Perhatian!, jika anda mengelipkan keseluruhan teks, maka teks itu akan susah dibaca!. Disamping itu, tag blink ini didukung oleh Netscape Navigator saja.
<i>....</i>
Teks ini akan dimiringkan.
<sub>....</sub>
Teks di dalam tag ini akan disubscriptkan.
<sup>....</sup>
Teks di dalam tag ini akan disuperscriptkan.
<u>....</u>
Teks ini akan digarisbawahkan.
<cite>....</cite>
<code>....</code>
<em>....</em>
<kbd>....</kbd>
<samp>....</samp>
<strong>....</strong>
<var>....</var>
<big>....</big>
<small>....</small>
<tt>....</tt>
Kesemua tag-tag ini mempunyai fungsi pemformatan yang tersendiri. Anda dapat mencoba tag-tag tersebut untuk membedakan fungís masing-masing tag.




2.   Huruf tebal <b> dan miring <i>
<html>
<head></head>
<body>
<b>Ini adalah</b> halaman <i>pertama</i> saya.
</body>
</html>

Akan keluar hasil seperti berikut:
Ini adalah halaman pertama saya

3.   Font Teks
Digunakan untuk menentukan jenis huruf yang akan ditampilkan pada halaman web
<font face="Arial, Times New Roman, Lucida Sans">
kata-kata ini telah ditentukan font nya</font>

4.   Warna Teks
Digunakan untuk mewarnai huruf
<font color="#FF0000">baris ini berwarna merah</font>
Color
Hexadecimal
Color
Hexadecimal
Black
#000000
Blue
#0000FF
Olive
#808000
Lime
#00FF00
White
#FFFFFF
Fuchsia
#FF00FF
Green
#008000
Maroon
#800000
Red
#FF0000
Gray
#808080
Teal
#008080
Purple
#800080
Yellow
#FFFF00
Silver
#COCOCO
Navy
#000080
Aqua
#00FFFF

Bagian-bagian yang dapat diwarnai adalah:
·         Latar belakang Homepage
·         Teks
·         Link
·         Link yang telah digunakan
·         Latar belakang table
·         Border table
·         Font

5.    Tag-tag yang berkaitan
Tag
<body>
Fungsi
bgcolor - untuk mewarnai background halaman anda
text - untuk mewarnai semua teks. Perlu diingat bahwa teks yang berada di area tag <font> dan pengaktifan fungsi color tidak dipengaruhi oleh fungsi ini.
link - untuk menjadikan warna link lain dari yang telah ditetapkan oleh browser.
vlink - untuk menjadikan warna link yang telah digunakan berbeda dari yang telah ditetapkan oleh browser.
Contoh
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080">

Tag
<font>
Fungsi
color - untuk mewarnai semua huruf yang berada dalam area tag <font>
Contoh
<font color="#000000">

Tag
<table>
Fungsi
bgcolor - warna latar belakang table
bordercolor - warna untuk border.
Contoh
<table bgcolor="#800080" bordercolor="#FFFFFF">


Tidak ada komentar:

Posting Komentar