1 / 25

HTML Basic

HTML Basic. Pendahuluan. Dalam berkomunikasi di Internet dibutuhkan alamat . Untuk alamat internet ini biasanya dikenal dengan Uniform Resource Locator. (URL). Untuk tiap web memiliki alamat yang berbeda dan unik (IP)

keelia
Download Presentation

HTML Basic

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Basic

  2. Pendahuluan • Dalamberkomunikasi di Internet dibutuhkanalamat. • Untukalamat internet inibiasanyadikenaldengan Uniform Resource Locator. (URL). Untuktiap web memilikialamat yang berbeda dan unik (IP) • Sebuah web mempunyai URL denganskematerdiridarinamaweb server itusendiridanalamatnya.

  3. Ada beberapa jenis protocol harus dikenal di internet yaitu : • FTP (File Transfer Protocol). • Telnet • Gopher • POP3-mail • IRC (internet Relay Chat • HTTP (Hypertext Transfer Protocol) TUGAS : JelaskanartidanfungsidariProtokoldiatas.

  4. BROWSER • Fungsidari browser adalahuntukmengirimkandanmengambil data darisebuahweb server kemudianmenerjemahkanbahasa HTML dari web server tersebut yang hasilnyakemudianditampilkanpada layer monitor. • Browser yang paling banyakdigunakansekarangadalah Microsoft Internet Explorer (IE), FireFox, Opera, Cromedll.

  5. HTML (HyperText Markup Language) • HTML merupakansatu-satunyabahasapemrograman yang digunakanuntukmerancanghalaman web. Fasilitasyang telahdidukungoleh HTML adalahkemampuanuntukmenampilkanteks, gambar, frame multimedia • HTML memilikibanyakkekurangan, hinggaHTML dikembangkansedemikianrupasehinggakedalamHTML tersebutdapatditambahkansuatubahasapemrograman script (scriptinglanguage) yang dapatdigunakanuntukmeningkatkankemampuanperancangansebuahhalaman web.

  6. BeberapaIstilahdalam Internet 1. Upload/ Download File 2. HTML Editor Ada beberapa HTML Editor yang dapatAndagunakanyaitu: MicrosoftFrontPage, notepad, Adobe Pagemill,MacromediaDreamweaver, Macromedia Dreamweaver Ultradev, dll. Kebanyakandari HTML Editor inisifatnyaadalah WYSIWYG (What You See Is What You Get) 3. Komponendarisuatu browser: • 1. Balok Title window, 2. Menu Browser, 3. Indikatorloading halaman HTML, 4. Navigator Button, 5. AlamatURL, 6. Frame window, 7. ScrollBarwindow, 8. Status window, 9. Koneksi Browser

  7. BAB II TAG HTML

  8. PENDAHULUAN • Sebuahdokumen HTML berisielemen-elemenkode HTML yang disebut HTML Tag. • Penulisannyadiapitolehapa yang disebut delimiter (pembatas). Atausuatukarakterataukumpulankarakter yang mengawalidanmengakhirisuatu tag. • UntukHTML delimiter yang dipakaiadalahdengankarakter< dan> . Sebuahkode program HTML selaludiawalidandiakhiridengansebuah tag. Contohtag : <HTML> -----Kode program. </HTML>

  9. HTML dibagimenjadi 2 bagianyaitu body (badan) danhead (kepala). Bagianhead ditandaidengan tag <HEAD> sedangkanbagian body ditandaidengantag <BODY>. • Bagianhead digunakanuntukmenyimpaninformasimengenaidokumentersebut , misalnyajudul, namapenulis, komentar**V • Sedangkanbagian body digunakanuntukmenuliskanisiutamadaridokumenweb tersebut. Contoh dari tag dokumen web sederhana : (Aktifkan NotePad) <HTML> <HEAD><H1>Pelatihan WEB dasar</H1> </HEAD> <BODY> Selamatdatangkepelatihan web dasar. </BODY> </HTML>

  10. Tag dasar HTML

  11. 5. <B> … </B> Membuattulisantebal (Bold Text ) 6. <P> … </P> Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain seperti berikut • <P ALIGN=”left”> … </P> 􀃆 untukpengaturan paragraph rapatkiri (left) • <P ALIGN=”center”> … </P> 􀃆 untukpengaturan paragraph di tengah (center) • <P ALIGN=”right”> … </P> 􀃆 untukpengaturan paragraph rapatkanan (right) 7. <BR> • Untukmemberikanbarisbaru / pergantianbaris. Diletakkanpadabagianteks yang maubergantibaris. 8. <A> …. </A> • Membuat link antarduahalamanweb 9. <IMG SRC=”gambar.jpg” … >…</IMG> • JikaAndainginmeletakkangambar / file photo di web Anda, makadapat dilakukan dengan memberikan tag ini

  12. Latihan 2 • Rancanglahsebuah web dgntampilansepertigambarini

  13. <HTML> • <HEAD><H2>SELAMAT DATANG DI SMK NEGERI 3 PEMATANGSIANTAR</H2> • </HEAD> • <BODY> • <H1>--------------------------------------------------------------------.</H1> • <H1>JALAN MEDAN KM 10,5 PEMATANGSIANTAR</H1> • <H2>KOMPETENSI KEAHLIAN.</H2> • <H3>1. PERHOTELAN.</H3> • <H4>2. REKAYASA PERANGKAT LUNAK</H4> • <H5>3. TATA BUSANA DAN KECANTIKAN</H5> • </BODY> • </HTML>

  14. 10. Pengaturan bentuk, ukuran, dan warna tulisan. • Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

  15. 11. <HR> • Pemberian tag inibertujuanuntukmembuatgaris horizontal padadokumen web. Dapatdiberikan attribute sepertipadaatributgambar/ image. 12. Tag Tabel. • Untukmembuattabel di dokumen web dapatdilakukandenganmemberikantag-tag Tabel. Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut. • Untuk membuat tabel seperti tampak di bawah ini : • Sel 1, baris 1 Sel 2, baris 1 Sel 3, baris 1 Sel 4, baris 1 • Sel 1, baris 2 Sel 2, baris 2 Sel 3, baris 2 Sel 4, baris 2 Makatag yang harusditulisadalahsbb: • <table border="1"> • <tr> <!--baris 1 awal--> • <td>Sel 1, baris 1</td> • <td>Sel 2, baris 1</td> • <td>Sel 3, baris 1</td> • <td>Sel 4, baris 1</td> • </tr> <!--baris 1 akhir-->

  16. <table border="1"> • <tr> <!--baris 1 awal--> • <td>Sel 1, baris 1</td> • <td>Sel 2, baris 1</td> • <td>Sel 3, baris 1</td> • <td>Sel 4, baris 1</td> • </tr> <!--baris 1 akhir--> • <tr> <!--baris 2 awal--> • <td>Sel 1, baris 2</td> • <td>Sel 2, baris 2</td> • <td>Sel 3, baris 2</td> • <td>Sel 4, baris 2</td> • </tr> <!--baris 2 akhir--> • </table>

  17. Prinsip-prinsipDesain Web • Fokuspadakebutuhan. • Efisiendalammenggunakansumberdaya • Mendukungnavigasi • Buatlah halaman Web senyaman dan seramahmungkin • Mendukunginteraksi, biladiperlukan

  18. Fungsi tag <font> adalahuntukmemanipulasibaikjenis, ukuran, danwarnahuruf <html> <head> <title>Atribut dari Tag Font</title> </head> <body> <p><font face="Arial">Ini Font Arial</font></p> <p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p> <p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarnabirusekaligustebal</b></font> <p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna merah, tebaldanberada di tengah</b></font><p> <p align="center"><font face="Arial" color="red">Ini Font Arial berwarnaMerah, </font><font face="Verdana" color="blue">Sedangkaniniadalah font Verdana berwarnabiru</font></p> </body> </html>

  19. F. Tag <select>...</select> dan <option Tag select tidakbisaberdirisendiridanharusmenggandengtag option untukdapatmenampilkan output. Dan carakerjanyahampirsamadengan tag radio hanya saja tag select lebih singkat.

  20. Tag FORM • Tag <form> bergunauntukmengirimkan(mem-post) variabel yang bersisi data ke file tujuan yang memprosesvariabeltersebut. Tag-tag yang biasadigunakanbersama tag form adalahtag <input> dan <textarea>. Tag <input> • Tag <input> memilikiatributtype yang fungsinyasangat vital dalam output tampilan. Isi dariatributtype dapatmenentukanjenistampilanapakahitutextbox, password box, checkbox,radio button dansebagainya.

  21. Tag <select>...</select> dan <option> • Tag select tidakbisaberdirisendiridanharusmenggandengtag option untukdapatmenampilkan output. Dan carakerjanyahampirsamadengan tag radio hanya saja tag select lebih singkat. <html> <head> <title>Propeti tag Select dan Option</title> </head> <body> <p><b>Penggunaan select dandan option</b></p> <p>Daftarkategorisilahkanpilihkategori</p> <form action="coba.php" method="post"> Kategori: <select name="Pilihan"> <option value="Kategori 1">Kategori 1 <option value="Kategori 2">Kategori 2 <option value="Kategori 3">Kategori 3 </select> <p><input type="submit" value="KIRIM"></p> </form> </body> </html>

  22. Tag <img> • Untukmenampilkangambarpadahalamandapatdigunakan tag <img>. Format file yang dapatdidukungoleh tag imgbermacam-macammulai BMP, JPG, GIF, TGA dan lain-lain.Tagimgmemilikibeberapaatributyaitu : • ‐ src : letak file gambar yang akanditampilkan • ‐ border: tebalbingkaigambar • ‐ height: menentukantinggi image/gambar • ‐ width: menentukanlebar image/gambar

  23. <html> • <head> • <title>Atributdari Tag img</title> • </head> • <body> • <p><b>Tag imghanyadenganatribut <i>src</i></b></p> • <p><imgsrc="file:///D|/Hydrangeas.jpg" border="10"></p> • <p><imgsrc="file:///C|/Users/Public/Pictures/Sample Pictures/tulips.jpg" width="400" height="300"></p> • </body> • </html>

  24. TUGAS JelaskanartidanfungsidariProtokol • FTP (File Transfer Protocol). • Telnet • Gopher • POP3-mail • IRC (internet Relay Chat • HTTP (Hypertext Transfer Protocol)

More Related