HTML DASAR

DASAR-DASAR HTML
HTML merupakan kependekan dari Hyper Text Markup Language.
Ini merupakan bahasa standar yang di gunakan oleh protokol
HTTP ( hyper text transfer protokol)
ciri-ciri HTML:
• Tersusun oleh tag-tag ( sebagai penanda, karena itulah maka
dia disebut Markup Language) contoh : <html>…</html>
• Pada umumnya mempunyai tag pembuka dan tag penutup
seperti contoh diatas, namun ada beberapa tag yang tidak pake
itu kayak <br>, <hr>, dll.
• Tidak case sensitif ( huruf gede atau kecil sama saja).
• Nama file berupa *.html atau *.htm

STRUKTUR DOKUMEN HTML
Html yang baik memiliki tag <head> dan <body>;
• Tag <head> mendefinisikan bagian header dari dokumen HTML tersebut.
• Tag <body> berisi isi dokumen yang tampil di browser anda.
<HTML>
<HEAD>
<TITLE>SURAH AL-FATIHAH</TITLE>
</HEAD>
<BODY>
DISINI TERDAPAT SURAH AL-FATIHAH
</BODY>
</HTML>

WARNA PADA HTML
1. WHITE
2. BLACK
3. RED
4. GREEN
5. BLUE
6. MAGENTA
7. CYAN
8. YELLOW
9. AQUAMARINE
10. BAKER’S CHOCOLATE
11. VIOLET
12. BRASS
13. COPPER
14. PINK
15. ORANGE
1. #FFFFFF
2. #000000
3. #FF0000
4. #00FF00
5. #0000FF
6. #FF00FF
7. #00FFFF
8. #FFFF00
9. #70DB93
10. #5C3317
11. #9F5F9F

MAIN COLOUR
Seperti pada photosop atau corel
draw! Main colour dapat anda
tentukan dengan berbagai aplikasi
flash, atau anda bisa cari sendiri di
google untuk ketegori warna HTML
Contoh sederhana:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY>

TAG-TAG DASAR HTML
Ada buanyaakkk…. sekali tag HTML. Silahkan Anda cari di
google atau buku-buku yang menyangkut tag HTML, namun
secara garis besar ada beberapa tag yang sering di pakai.
Tag HTML Fungsi
<body>..</body> Untuk tampilah halaman web,
mempunyai atribut bgcolor untuk
warna backgorund, text untuk warna
text. <body bgcolor=“red”
text=“blue”>…..</body>
<br> Untuk pindah baris. Tanpa tag
penutup
<h1>…<h1>
………………
<h6>….</h6>
Untuk membuat heading dan
mempunyai 6 jenis heading.
<hr> Membuat garis horizontal, tanpa tag
penutup
<center>….</center> Menengahkan kata

Tag HTML Fungsi
<p> </p> Untuk membuat paragraph. Disertai
atribut <p align=“center”> untuk rata
tengah, <p align=“right”> untuk rata
kanan.
<b>…</b> Membuat huruf tebal BOLD
<i>….</i> Membuat huruf miring italic
<u>….</u> Membuat garis bawah pada tulisan
underline
Masih banyakkk lagi…. >>>>>>

PARAGRAPHS, <P> </P>,
<H1>..<H6>
<HTML><HEAD>
<TITLE> CONTOH HTML KU </TITLE>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
<H6> Heading 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

TAG LIST
Tag HTML Fungsi
<ul>…. </ul> Membuat list tanpa nomer urut.
Mempunyai artibut beberapa type.
Misalnya < ul type=“square”>…</ul>
Defaultnya type=“round”;
<ol>…</ol> Membuat list bernomer. Mempunyai
atribut type misalnya < ol
type=I>…</ol>. Default type=1.
<li> Membuat item-item pada list dan
harus berada dalam tag <ul> atau
<ol>. Tanpa tag penutup

CONTOH SEDERHANA:
<UL TYPE=“square”>
<LI> List item …</LI>
</UL>
Hasilnya:
List item …
List item …
List item …
<ol>
</ol>
Hasilnya:
1. List item …
2. List item …
3. List item …

LIST ELEMENT
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

AGAK SEDIKIT DI
KEMBANGKAN
<OL TYPE =“i”>
<LI> Aku….</LI>
<LI> Sedang…</LI>
</OL>
<P> Belajar Tentang…</P>
<OL TYPE=“i” START=“3”>
<LI> HTML coy.…</LI>
</OL>
i. aku…
ii. Sedang…
Belajar Tentang..
iii. HTML Coy …

CONTOH LAGI:
<UL TYPE = “square”>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>

TAG IMAGE/GAMBAR
Misalnya :
<img
src=https://www.facebook.com/images/fb_icon_325x325.png
align=“middle” border=“1” height=“150” width=“100”>
Tag HTML Fungsi
<img src=“nama_file”> Menampilkan gambar jenis file yang
didukung adalah .gif, .jpg, .png, .tif,
dll. Tanpa tag penutup. Tag ini
mempunyi atribut “align” yang
berfungsi mengatur posisi text
terhadap gambar, atribut border
untuk memberi bingkai pada gambar,
height untuk tinggi gambar, dan width
untuk lebar gambar

LINKS
Terdapat 2 jenis link, yaitu link ke halaman lain dan link ke
halaman yang sama.
• Link ken halaman lain dibuat dengan tag:
<a href=“nama_file_yang_dituju”> teks yang ditampilkan</a>
• Link ke halaman yang sama dibuat dengan pasangan tag:
<a href=“#nama anchor”>teks yang ditampilkan</a>
Kemudian di bagian yang diberi tag anchor-nya:
<a name=“nama_anchor”>….</a>

TABEL
Tag HTML Fungsi
<table>…</table> Untuk membuat table. Mempunyai
atribut: border untuk mengatur bingkai
tabel biasanya 1..10
Bgcolor: untuk membari warna
background
Width: untuk mengatur lebar tabel
<caption>….</caption> Memberi judul tabel (tidak harus
digunakan)
<th>…</th> Untuk membuat judul kolom
<tr>…</tr> Untuk membuat baris dalam table
mempunyai atribut sama dengan
<td>…</td>
<td>…</td> Membuat suatu sel data. Mempuyai
atribut: rowspan: untuk
menggabungkan baris
Colspan: menggabungkan kolom

<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table>
Column 1
Header
Column 2
Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

UNTUK HTML LEBIH LANJUT
SEPERTI:
FORM
JENIS INPUT
JENIS TOMBOL
AKAN DI TERANGKAN OLEH
NARASUMBER!

HTML DASAR

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a HTML DASAR

Semelhante a HTML DASAR (20)

Mais de Rahmatdi Black

Mais de Rahmatdi Black (17)

HTML DASAR