HTML (Hyper Text Markup Languange) Adalah : Bahasa pemrogramman yang dibuat untuk membangun sebuah website Protokol yang digunakan dalam HTML adalah

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML (Hyper Text Markup Languange) Adalah : Bahasa pemrogramman yang dibuat untuk membangun sebuah website Protokol yang digunakan dalam HTML adalah"

Yuliana Halim
7 tahun lalu
Tontonan:

1 Pertemuan 1

2 HTML (Hyper Text Markup Languange) Adalah : Bahasa pemrogramman yang dibuat untuk membangun sebuah website Protokol yang digunakan dalam HTML adalah HTTP(HyperText Transfer Protocol)

4 <html> <head> <title>belajar HTML Pertama</html> <body> Hello World </body> </html> Keterangan : <HTML> dan </HTML> adalah menandakan bahwa kode yang terdapat didalam merupakan kode HTML sehingga dapat diterjemahkan oleh browser. <HEAD> dan </HEAD> adalah bagian header atau kepala dari program HTML <TITLE> dan </TITLE> adalah merupakan judul yang akan ditampilkan pada Tab browser <Body> dan </Body> adalah Tempat dimana program HTML dibuat

5 TAG <BR> adalah Tag yang digunakan untuk membuat baris baru dalam HTML. <HTML> <HEAD> <TITLE> Menggunakan TAG BR </TITLE> </HEAD> <BODY> Belajar HTML Pertama <BR> Semoga Berhasil </BODY> </HTML>

6 TAG <P> adalah Tag yang digunakan untuk membuat Paragraf dalam HTML. <HTML> <HEAD> <TITLE> Menggunakan TAG P </TITLE> </HEAD> <BODY> BELAJAR HTML<P> Dengan Belajar Kode Program HTML<br> Kita mampu untuk membuat sebuah website<br> kode HTML ini merupakan dasar dari pembuatan sebuah website </BODY> </HTML>

7 Tag P dapat dikombinasikan dengan Align contohnya : <HTML> <HEAD> <TITLE> Menggunakan TAG P ALIGN </TITLE> </HEAD> <BODY> BELAJAR HTML <P ALIGN= CENTER > Dengan Belajar Kode Program HTML<br> Kita mampu untuk membuat sebuah website<br> kode HTML ini merupakan dasar dari pembuatan sebuah website </P> </BODY> </HTML>

8 Tag untuk judul terdapat 6 buah ukuran yaitu : <H1>... </H1> <H2>... </H2> <H3>... </H3> <H4>... </H4> <H5>... </H5> <H6>... </H6> Contoh : <HTML> <HEAD> <TITLE> Menggunakan TAG H </TITLE> </HEAD> <BODY> <H1> Menggunakan H1 </H1> <H2> Menggunakan H2 </H2> <H3> Menggunakan H3 </H3> <H4> Menggunakan H4 </H4> <H5> Menggunakan H5 </H5> <H6> Menggunakan H6 </H6> </BODY> </HTML>

9 Tag H ini juga dapat dikombinasikan dengan align yaitu : Left : Untuk Rata kiri terhadap Halaman Right : Untuk Rata kanan terhadap Halaman Center : Untuk rata Tengah Justify : Untuk rata kiri dan kanan Contoh : <HTML> <HEAD> <TITLE> Menggunakan TAG H ALIGN </TITLE> </HEAD> <BODY> <H1 ALIGN = RIGHT > Menggunakan H1 </H1> </BODY> </HTML>

10 Membuat TAG garis Horizontal dan TAG center menggunakan <HR> dan <Center> Contoh : <HTML> <HEAD> <TITLE> Menggunakan TAG HR </TITLE> </HEAD> <BODY> <center>membuat GARIS HORIZONTAL</center><P> <HR WIDTH = 5% SIZE = 10 NOSHADE> <HR WIDTH = 10% SIZE = 10 > <HR WIDTH = 20% SIZE = 10 NOSHADE> <HR WIDTH = 35% SIZE = 10 NOSHADE> <HR WIDTH = 20% SIZE = 10 NOSHADE> <HR WIDTH = 10% SIZE = 10 NOSHADE> <HR WIDTH = 5% SIZE = 10 NOSHADE> <HR WIDTH = 5% SIZE = 10 NOSHADE> <HR WIDTH = 5% SIZE = 10 NOSHADE> </BODY> </HTML>

11 Contoh : <HTML> <HEAD> <TITLE> Menggunakan LIST</TITLE> </HEAD> <BODY> <H3>List Tanpa Urutan </H3> <UL> Sistem Informasi (S1) Teknik Informatiks (S1) Komputerisasi Akuntansi (D3) Manajemen Informatiks (D3) Teknik Komputer (D3) </UL> <H3>List dengan bulatan </H3> <UL> <li>sistem Informasi (S1) <li>teknik Informatiks (S1) <li>komputerisasi Akuntansi (D3) <li>manajemen Informatiks (D3) <li>teknik Komputer (D3) </UL> </BODY> </HTML> Bentuk dari LIST dapat berupa Lingkaran Penuh, Garis Tepi Lingkaran dan Segiempat Contoh : Lingkaran Penuh <li type = DISC > Tepi Lingkaran <li type = CIRCLE > Segi Empat <li type = SQUARE >

12 Contoh : <HTML> <HEAD> <TITLE> Menggunakan LIST OL</TITLE> </HEAD> <BODY> <OL> <li>sistem Informasi (S1) <li>teknik Informatika (S1) <li>komputerisasi Akuntansi (D3) <li>manajemen Informatiks (D3) <li>teknik Komputer (D3) </OL> OL Dengan Type <OL type= i > <li>sistem Informasi (S1) <li>teknik Informatika (S1) <li>komputerisasi Akuntansi (D3) <li>manajemen Informatiks (D3) <li>teknik Komputer (D3) </OL> OL dengan Value <OL> <li value = 1 >Sistem Informasi (S1) <li value = 10 >Teknik Informatika (S1) <li value = 5 >Komputerisasi Akuntansi (D3) </OL> </BODY> </HTML>

13 <html> <head> <title>hyperlink</title> </head> <body> <pre> for i = 1 to 10 for j = 10 to 1 step - 1 print * next j next i </pre> <bdo dir =ltr>ini Pelajaran tentang HTML</bdo> <br> <bdo dir =rtl>ini Pelajaran tentang HTML</bdo> Ini Pelajaran <del>tentang</del> HTML </body> </html>

14 Contoh : <HTML> <HEAD> <TITLE> Menggunakan LIST TABLE</TITLE> </HEAD> <BODY> <Table border= 10 > <TR><TH>Jurusan</TH> <TH>Jenjang</TH></TR> <TR><TD>SISTEM INFORMASI</TD><TD align="center">s1</td></tr> <TR><TD>TEKNIK INFORMATIKA</TD><TD align="center">s1</td></tr> <TR><TD align="center">komputerisasi AKUNTANSI</TD><TD align="center">d3</td></tr> <TR><TD>MANAJEMEN INFORMATIKA</TD><TD align="center">d3</td></tr> <TR><TD>TEKNIK KOMPUTER</TD><TD align="center">d3</td></tr> </Table> </BODY> </HTML>

15 Absolute Address : merupakan link URL address dari website lain. Relatife Address : merupakan path dari sebuah file yang akan dituju Contoh : <html> <body> <p> <a href= page2.htm">html Tutorial</a> Link Ini untuk ke Halaman Web Sendiri </p> <p> <a href=" Link Ini Membuka sebuah Halaman Website </p> </body> </html>

16 Contoh : <html> <body> <p> Link 1<a href= page2.htm"><img src="smiley.gif width="32" height="32"></a> </p> <p> Link 2<a href= src="smiley.gif width="32" height="32"></a> </p> </body> </html> Catatan : Jika ingin membuka sebuah Hyperlink menggunakan halaman lain gunakan perintah > target = _blank

17 Lompat kebagian lain dalam sebuah document Contoh : <html> <head> <title>jump To...</title> </head> <body> <a href="#akhir">lompat ke akhir</a> <h2><a name=awal>chapter 1</a></h2> <p>chapter 1 Mempelajari tentang...</p> <h2>chapter 2</h2> <p>chapter 2 Mempelajari tentang...</p> <h2>chapter 3</h2> <p>chapter 3 Mempelajari tentang...</p>... <h2>chapter 17</h2> <p>chapter 17 Mempelajari tentang...<a name=akhir>.</a></p> <a href="#awal">lompat Ke awal</a> </body> </html>

18 Hyperlink untuk pengiriman pesan ke sebuah Contoh : <html> <body> <address> Untuk Pengiriman Klik Dibawah<br /> <a href="mailto:us@example.org"> us</a><br /> Address: Box 564, Jakarta<br /> Phone: </address> </body> </html> Atau Menggunakan sebuah CC dan BCC : <a href="mailto:someone@example.com?cc=someoneelse@example.com& bcc=andsomeoneelse@example.com&subject=summer%20party">sen d mail!</a>

dokumen-dokumen yang mirip

TAG 10/2/2011. Pengenalan HTML. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML. Pengantar Bahasa HTML (Membuat Dasar Tag)

TAG 10/2/2011. Pengenalan HTML. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML. Pengantar Bahasa HTML (Membuat Dasar Tag) Perancangan & Pemprograman WEB Pertemuan 2 Pengenalan HTML, TAG, list, dan Hyperlink Pengenalan HTML Apakah file HTML itu? HTML singkatan dari Hyper Text Markup Language. Merupakan suatu bahasa pemorgraman