1 / 51

Tentang HTML

Tentang HTML. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).

buck
Download Presentation

Tentang HTML

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. Tentang HTML • HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). • Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML. • Yang dimaksud dengan HyperText adalah beberapa teks yang ada dalam dokumen HTML memuat informasi yang menghubungkan ke lokasi yang berbeda, baik dalam satu struktur dokumen atau ke alamat lain di internet. • Sedangkan Markup Language merupakan bagian spesifik pada dokumen yang mengindikasikan bagaimana suatu informasi akan ditampilkan pada web browser.

  2. Editor HTML • Text editor • Notepad • Editor plus • Ultra edit • WYSWYG • Macromedia dreamweaver • Microsoft frontpage • Microsoft publisher

  3. Struktur dokumen HTML <Head> <Title> Judul Homepage </Title> </Head> Kepala <head> Homepage <Body> Isi…Teks Isi…Tabel. Isi…Audio, Video, dll. </Body> Tubuh <body>

  4. HTML Ekstensi • Untuk menyimpan file HTML ekstensi yang digunakan adalah .htm atau html. • Ekstensi yang paling sering digunakan adalah .html

  5. Tags HTML • HTML tags digunakan untuk menandai element HTML • HTML tags ditandai dua character <and> • HTML tags ditulis berpasangan seperti <b> dan </b> • Tags yang pertama adalah start tag dan tags kedua adalah end tag • Teks diantara tag adalah content element • HTML tags tidak case sensitif , <b> sama dengan <B>

  6. Cara penulisan tags yang benar Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai berikut: <tag1> <tag2><tag n> ...</tag n> </tag2> <tag1>

  7. Basic HTML Tags

  8. TAG TAG DASAR HTML • Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas teks informasi. • HTML Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML. <html> di awal dokumen dan </html> di akhir dokumen.

  9. TAG TAG DASAR HTML (cont.) • Head Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan <head> diawalsetelah <html>, dan </head> diakhir section head • Title Merupakan tag didalam head yang harusdituliskanuntukmemberikanjudul/ informasipada caption browser web tentangtopikataujuduldaridokumen web yang ditampilkandalam browser. <title> juduldokumen</title>

  10. TAG TAG DASAR HTML (cont.) • Body Merupakan section utamadalamdokumen web. Pada section inisemuaisidokumen yang akanditampilkandidalam browser harusdituliskan. <body> diawal, segerasetelah tag </head> </body> diakhir, diletakkansebelum tag </html> • Paragraf Informasi yang disajikan dalam dokumen harus mengikuti kaidah kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf. Setiap paragraf harus dimulai dengan memberi tag <p>. diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. Setiappergantianparagrafharusdimulaidengan <p> kembali.

  11. TAG TAG DASAR HTML (cont.) ContohSoal :

  12. TAG TAG DASAR HTML (cont.) Hasil :

  13. TAG TAG DASAR HTML (cont.) ContohSoal :

  14. TAG TAG DASAR HTML (cont.) Hasil :

  15. TAG TAG DASAR HTML (cont.) • Line Break Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag <br> sebelum teks yang dimaksud dituliskan.

  16. TAG TAG DASAR HTML (cont.) ContohSoal :

  17. TAG TAG DASAR HTML (cont.) Hasil :

  18. TAG TAG DASAR HTML (cont.) • Heading Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan teks tersebut, jika dianggap sebagai heading1-digunakan tag <h1> • Sintakselemen heading <hy> Teks yang menjadi heading </hy>, dimana y adalahnomor heading

  19. TAG TAG DASAR HTML (cont.)

  20. TAG TAG DASAR HTML (cont.) ContohSoal :

  21. TAG TAG DASAR HTML (cont.) • Mengatur letak Heading Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris –align. Aligment heading  kiri-left  tengah –center  kanan-right

  22. TAG TAG DASAR HTML (cont.) ContohSoal :

  23. TAG TAG DASAR HTML (cont.) Hasil : Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri.

  24. TAG TAG DASAR HTML (cont.) • Penggaris Mendatar Sebuah garis dapat dsisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf. Tag<hr>disisipkan pada tempat garis akan disisipkan dokumen.

  25. TAG TAG DASAR HTML (cont.) Contoh :

  26. TAG TAG DASAR HTML (cont.) Hasil : Garis yang disisipkan dapat dalam bentuk penggaris karena lebar garis dapat diatur, ukuran garis dapat dalam bentuk point atau dalam bentuk relatif dalam window browser.

  27. TAG TAG DASAR HTML (cont.) • Komentar Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap program itu sendiri. Catatan/komentar dalam dokumen tidak ditampilkan dalam browser. Komentar disisipkan pada section body, diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari.

  28. TAG TAG DASAR HTML (cont.) Contoh :

  29. TAG TAG DASAR HTML (cont.) • Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag <!—sebagai awal, kemudian teks yang dikomentari, dan tag  sebagai akhir tag. • Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis miring sebelumnya.

  30. TAG TAG DASAR HTML (cont.) Hasil :

  31. MENGENAI PENULISAN HTML • Browser HTML menginterpretasikansatuataubeberapa space yang berdekatansebagaisebuahspace teksteksteksteks dianggapsebagai : teksteksteksteks • Browser HTML menginterpretasikan Carriage Return (Enter) danindentasi (Tab) sebagaisebuah space • Adabeberapakarakterkhusus yang dapatdirepresentasikandengankodetertentu – &nbsp; spasi – &lt; < – &gt; > – &amp; & – &quot; "

  32. TAG DASAR • HTML: menandaiawaldanakhirdokumen HTML <html>dokumen</html> • Head: menandaibagian header dokumen HTML <head>header</head> • Title: memberijudulpadadokumen HTML <title>juduldokumen</title> • Body: menandaiawaldanakhirisidokumen <body>isidokumen</body> <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isidokumen</body>

  33. TAG JUDUL (HEADING) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf

  34. TAG ENUMERASI (LIST) <li>item</li> Untukmenandaisuatu item daridaftar (enumerasi), diawalidengansimbol • (bullet) Kelompok item harusdiapitoleh tag <ul> </ul> dalamdaftarbertingkat. Untukmenomorienumerasidengannomorurut (1,2,3), apitlahdengan tag <ol> </ol>

  35. TAG ENUMERASI – LIST (cont.)

  36. TAG GAMBAR • <imgsrc="NamaFileGambar"> NamaFileGambar= file gambar yang mempunyaiekstensi .GIF, .JPG, atau .PNG. • Untukmenampilkansebuah file gambar. • Bentukpenulisan lain yang dianjurkan (XML style) : <imgsrc="NamaFileGambar" />

  37. TAG GAMBAR (cont.)

  38. TAG TABLE - DATA <table> definisitabel </table> Menampilkan data dalambentuktabel Tabeldidefinisikandengancaramenyatakanbaris-barisdankolomkolom. Tag untukpenandabarisadalah <tr> definisibaris </tr> Tag untukpenandakolomadalah <td>data</td>

  39. TAG TABLE – DATA (cont.)

  40. TAG TABLE - LAYOUT • Untukmenataletak (layout) isidokumen (walaupunhakikatnyabukanuntukkeperluanini)

  41. TAG TABLE – LAYOUT (cont.)

  42. TAG LINK <a href="Link">Kata yang di-click</a> <a name="#Acuan">Kata yang dituju</a> Link = Alamat URL ataunama file dan/atauacuan yang dituju Acuan= Katasembarangsebagaipenanda membentuk link ke URL/file/bagiandokumen lain.

  43. TAG LINK (cont.)

  44. HTML-LINK-LIST

  45. LINK HTML Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satuteks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser Webakan menyorot (“highlight”) teks atau gambar yang diidentifikasi sebagai link dengan warna dan /atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink atau link).

  46. TAG ANCHOR • Tag <A> digunakan untuk membuat suatu link kepada dokumen lain dalam web dengan • menambah atribut “href” sebagai definisi lokasi link. Contoh : • <A HREF=”http://www.microsoft.com”> clik here to show it</A>

  47. Ada tiga jenis link yaitu : Link relatif, Link absolute, Link dalam dokumen yang sama. - Link Relatif Digunakan jika membuat suatu link pada page anda ke page lain pada komputer yang sama. Bila dua page berada pada direktori sama, anda dapat menuliskan nama file html seperti berikut : <A HREF = “page_2.html”> Next </A> - Link Absolut Digunaka apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Contoh: <A HREF = “http://www.mangosoft.com”>Click here if you want to see my home page</A> - Link ke bagian lain dalam dokumen Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalambrowser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasiuntukpenelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandaisetiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumenakan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju kebagian-bagian tersebut.

  48. Memberi nama suatu bagian dalam dokumen, • Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut, • Sisipkan nama bagian tersebut dengan: <A NAME= “nama bagian”> Membuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan cara yangsama seperti link absolut atau relatif, namun nama dokumen dalam link diganti dengan namabagian dokumen dengan ditambah tanda # yang ditulis sebelum nama bagian tersebut. Contoh: <A HREF= “#nama bagian”> Bagian tentang link</A>

  49. Contoh Link <HTML> <HEAD> </HEAD> <BODY> <A NAME="TOP"> <A HREF="#LINK RELATIF">Link relatif</A><BR> <A HREF="#LINK ABSOLUT">Link Absolut</A><BR> <A HREF="#LINK WITH NEW WINDOW">Link with New Window</A><BR> <A HREF="#NO UNDERLINE">Link without underline</A><BR> </A> <BR> <A NAME="LINK RELATIF"> <H1>Link secara relatif, lihat contoh di bawah ini:</H1> <P> <A HREF="page_2.html">Klik di sini </A>jika mau ke halaman berikutnya. </P> </A> <A NAME="LINK ABSOLUT"> <H1>Link secara absolut, lihat contoh di bawah ini:</H1> <P> Klik <A HREF="http://www.mangosoft.com">my home page</A> if you want to see my personality. </P> </A>

More Related