1 / 31

Pengenalan HTML

Pengenalan HTML. Markup Language. Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi Mark up ditambahkan bukan untuk tampilan tetapi untuk memberikan struktur interpretasi / pemberian arti

pepin
Download Presentation

Pengenalan 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. Pengenalan HTML

  2. Markup Language • Mark up : informasitambahan yang ditempatkanpadateksuntukmenjelaskanbagaimanatekstersebutdiinterpretasi • Mark up ditambahkanbukanuntuktampilantetapiuntukmemberikanstrukturinterpretasi/pemberianarti • HTML (HyperText Markup Language)merupakan subset dari SGML (Standard Generalized Markup Language) Contoh subset lain dari SGML : • XML (eXtensible Markup Language) • SMIL (Synchronized Multimedia Integration Language) • MathML (Mathematical Markup Language) • CML (Chemical Markup Language)

  3. About HTML • HTML : format standaruntukmembuatdokumen web • HTML versiterakhir : HTML 4.01 • Spesifikasi HTML standar : http://www.w3.org/TR/html4 • HTML merupakanbahasabertanda, menggunakanrangkaiantekstertentu (tag) untukmenandaiteks yang mempunyaiinterpretasikhusus • File HTML berupa file teks (plain text file), bukan binary file

  4. Dokumen HTML • kependekan dari Hyper Text Markup Language • file teks murni yang dapat dibuat dengan teks editor • Dokumen ini dikenal sebagai web page • merupakan dokumen yang disajikan dalam web browser

  5. Penamaan Dokumen • Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html”

  6. Contoh Dokumen HTML <html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, namasaya ..... Iniadalah <i>homepage</i> <b>pertama</b> saya, karenasayabarubelajartentang caramembuat <b><i>homepage</i></b>. </p> </body> </html> <!-- akhirdokumen HTML -->

  7. HTML Authoring Tools Text Editor • OS default – notepad (Windows) – vi (Unix) • Third party – EditPlus, Crimson Editor, UltraEdit,Notepad ++ (Windows) – joe (Linux), dll Visual Editor • Macromedia DreamWeaver • MS Front Page • Web Page maker • dll

  8. Definisi Elemen • Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

  9. Definisi Tag • Tag digunakan untuk menandai elemen dalam suatu dokumen HTML • Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar • Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>

  10. Elemen HTML yang diperlukan • Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>. • Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.

  11. Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body • Pola umum : <html> <head> -- Informasi tentang dokumen HTML </head> <body> -- Informasi yang akan ditampilkan dalam web browser </body> </html>

  12. Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. • Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.

  13. Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. • Section ini beiris informasi tentang dokumen HTML, misalnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>

  14. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. • Section body merupakan isi dokumen yang akan ditampilkan pada browser.

  15. Contoh1.html <html> <head> <title>Belajar Web Design</title> </head> ini adalah halaman HTML <body> </body> </html>

  16. Penggunaan Tag • Tag HTML diapit dengan dua karakter kurung bersudut, < dan >. • Tag HTML secara normal selaluberpasanganseperti <H!> dengan </H1> • Tag HTML tidak ‘case sensitive’, berarti <H1> damadengan <h1> • Di antara tag awaldan tag akhirbisaterdapat tag lain • Penulisan tag tidakbolehtumpangtindih penulisan yang salah <tag1><tag2>teks</tag1></tag2>→ penulisan yang benar <tag1><tag2>teks</tag2></tag1>→

  17. Atribut Tag • Tag dapat mempunyai atribut. • Atribut menyatakan sesuatu tentang tag tersebut. • Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.

  18. Tag berikut tidak mempunyai atribut : • <body>. Tag <body> • Tag berikut mempunyai atribut : • <body bgcolor=”red”>

  19. 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>

  20. Tag HTML • Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. <html> ........................ </html>

  21. Tag Head • Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. • Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser. <head> <title>Belajar Web Design</title> </head>

  22. Title • Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML • Hasil tag ini akan ditampilkan dalam window caption browser. <title>Belajar Web Design HTML</title>

  23. Body • Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser. <html> <head> <title>Belajar Web Design</title> </head> <body> ini adalah section HTML yang ditampilkan di browser </body> </html>

  24. Paragraf • Setiap paragraf harus dimulai dengan memberi tag <p> • Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. <html> <head> <title>Tag Paragraf</title> </head> <body> <p>berikut ini adalah paragraf 1</p> <p>berikut ini adalah paragraf 2</p> <p>berikut ini adalah paragraf 3</p> </body> </html>

  25. Line Break • Kita dapat memaksa ganti baris pada dokumen web dengan tag <br> <html> <head> <title>Ganti Baris</title> <head> <body> ini adalah baris ke 1<br> ini adalah baris ke 2<br> ini adalah baris ke 3<br> ini adalah baris ke 4<br> ini adalah baris ke 5<br> </body> </html>

  26. Heading • Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. • Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan.

  27. <html> • <head><title>Heading</title></head> • <body> • <h1>Heading 1</h1> • <h2>Heading 2</h2> • <h3>Heading 3</h3> • <h4>Heading 4</h4> • <h5>Heading 5</h5> • <h6>Heading 6</h6> • </body> • </html>

  28. Garis Pembatas • Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>

  29. Komentar • Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. • <!-- sebagai awal dan tag --> sebagai akhir komentar. <html> <head> <title>Horizontal Rule</title> </head> <body> <!-- komentar ni tidak akan ditampilkan di browser --> <p>Tulisan ini akan ditampilkan di browser</p> </body> </html>

  30. Toolbar Dreamweaver untuk dasar HTML Keterangan - tab Text : • h1 : heading 1 • h2 : heading 2 • h3 : heading 3 • br : Line Break

  31. FINISH

More Related