belajar html!!

Belajar HTML!!

Oleh : Rahmatdi - J1F111008

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 HTMLHtml 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 HTML1. 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

12. #B5A642

13. #B87333

14. #FF6EC7

15. #FF7F00

MAIN COLOURSeperti 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 HTMLAda 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 1Paragraph 1,….




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 ELEMENTTYPE 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

https://www.facebook.com/images/fb_icon_325x325.png



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..10Bgcolor: untuk membari warna backgroundWidth: 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 barisColspan: 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:

FORMJENIS INPUTJENIS TOMBOL

AKAN DI TERANGKAN OLEH NARASUMBER!

SEKIAN DULU, TERIMAKASIH!!

belajar html!!

Documents