Your SlideShare is downloading. ×
0
DASAR-DASAR HTML
HTML merupakan kependekan dari Hyper Text Markup Language.
Ini merupakan bahasa standar yang di gunakan o...
STRUKTUR DOKUMEN HTML
Html yang baik memiliki tag <head> dan <body>;
• Tag <head> mendefinisikan bagian header dari dokume...
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...
MAIN COLOUR
Seperti pada photosop atau corel
draw! Main colour dapat anda
tentukan dengan berbagai aplikasi
flash, atau an...
TAG-TAG DASAR HTML
Ada buanyaakkk…. sekali tag HTML. Silahkan Anda cari di
google atau buku-buku yang menyangkut tag HTML,...
Tag HTML Fungsi
<p> </p> Untuk membuat paragraph. Disertai
atribut <p align=“center”> untuk rata
tengah, <p align=“right”>...
PARAGRAPHS, <P> </P>,
<H1>..<H6>
<HTML><HEAD>
<TITLE> CONTOH HTML KU </TITLE>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Para...
TAG LIST
Tag HTML Fungsi
<ul>…. </ul> Membuat list tanpa nomer urut.
Mempunyai artibut beberapa type.
Misalnya < ul type=“...
CONTOH SEDERHANA:
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
Hasilnya:
Li...
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 ...
AGAK SEDIKIT DI
KEMBANGKAN
<OL TYPE =“i”>
<LI> Aku….</LI>
<LI> Sedang…</LI>
</OL>
<P> Belajar Tentang…</P>
<OL TYPE=“i” ST...
CONTOH LAGI:
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI...
TAG IMAGE/GAMBAR
Misalnya :
<img
src=https://www.facebook.com/images/fb_icon_325x325.png
align=“middle” border=“1” height=...
LINKS
Terdapat 2 jenis link, yaitu link ke halaman lain dan link ke
halaman yang sama.
• Link ken halaman lain dibuat deng...
TABEL
Tag HTML Fungsi
<table>…</table> Untuk membuat table. Mempunyai
atribut: border untuk mengatur bingkai
tabel biasany...
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, ...
UNTUK HTML LEBIH LANJUT
SEPERTI:
FORM
JENIS INPUT
JENIS TOMBOL
AKAN DI TERANGKAN OLEH
NARASUMBER!
SEKIAN DULU,
TERIMAKASIH!!
Belajar html!!
Belajar html!!
Upcoming SlideShare
Loading in...5
×

Belajar html!!

239

Published on

belajar html oleh diri sendiri (rahmatdi - j1f111008)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
239
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Belajar html!!"

  1. 1. 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
  2. 2. 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>
  3. 3. 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
  4. 4. 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>
  5. 5. 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
  6. 6. 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…. >>>>>>
  7. 7. 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> <P> Paragraph 2, ….</P> <H3> Heading 3 </H3> <P> Paragraph 3, ….</P> <H4> Heading 4 </H4> <P> Paragraph 4, ….</P> <H5> Heading 5 </H5> <P> Paragraph 5, ….</P> <H6> Heading 6</H6> <P> Paragraph 6, ….</P> </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,….
  8. 8. 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
  9. 9. CONTOH SEDERHANA: <UL TYPE=“square”> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> </UL> Hasilnya: List item … List item … List item … <ol> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> </ol> Hasilnya: 1. List item … 2. List item … 3. List item …
  10. 10. 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, ……
  11. 11. 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 …
  12. 12. CONTOH LAGI: <UL TYPE = “square”> <LI> List item …</LI> <LI> List item … <OL TYPE=“i” START=“3”> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> </OL> </LI> <LI> List item …</LI> </UL>
  13. 13. 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
  14. 14. 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>
  15. 15. 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
  16. 16. <table border=“1”> <tr> <th> Column 1 header </th> <th> Column 2 header </th> </tr> <tr> <td> Row1, Col1 </td> <td> Row1, Col2 </td> </tr> <tr> <td> Row2, Col1 </td> <td> Row2, Col2 </td> </tr> </table> Column 1 Header Column 2 Header Row1, Col1 Row1, Col2 Row2, Col1 Row2, Col2
  17. 17. UNTUK HTML LEBIH LANJUT SEPERTI: FORM JENIS INPUT JENIS TOMBOL AKAN DI TERANGKAN OLEH NARASUMBER!
  18. 18. SEKIAN DULU, TERIMAKASIH!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×