Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bab2 - Pengenalan HTML   Web Design   Team Dosen        Politeknik Elektronika Negeri Surabaya (PENS)   1
Dokumen HTML   kependekan dari Hyper Text Markup    Language   file teks murni yang dapat dibuat dengan teks    editor ...
Penamaan Dokumen   Dokumen HTML diberi nama sembarang    kemudian diberi tambahan ekstensi ”.htm”    atau ”.html”        ...
Definisi Elemen   Dokumen HTML disusun elemen-elemen    atau komponen dasar pembentu HTML.    Contoh dari elemen dokumen ...
Definisi Tag   Tag digunakan untuk menandai elemen    dalam suatu dokumen HTML   Tag HTML terdiri atas sebuah sudut kiri...
Elemen HTML yang diperlukan   Elemen yang dibutuhkan untuk membuat    suatu dokumen HTML dinyatakan dengan    tag <html>,...
   Secara umum dokumen web dibagi menjadi dua    section, yaitu section head dan section body   Pola umum :    <html>   ...
   Setiap dokumen html harus diwali dengan    menuliskan tag <html> dan tag </html> di    akhir dokumen.   Tag ini menan...
   Section atau elemen head ditandai dengan    tag <head> diawal dan tag </head> diakhir.   Section ini beiris informasi...
   Section body ditandai dengan tag <body>    dan diakhiri dengan tag </body> diakhir.   Section body merupakan isi doku...
Contoh1.html<html><head><title>Belajar Web   Design</title></head>ini adalah halaman HTML<body></body></html>             ...
Penggunaan Tag   Tag HTML diapit dengan dua karakter kurung    bersudut, < dan >.   Tag HTML secara normal selalu    ber...
Atribut Tag   Tag dapat mempunyai atribut.   Atribut menyatakan sesuatu tentang tag    tersebut.   Atribut digunakan un...
   Tag berikut tidak mempunyai atribut :       <body>. Tag <body>   Tag berikut mempunyai atribut :       <body bgcolo...
Tag HTML   Merupakan tag dasar yang mendefinisikan    bahwa dokumen ini adalah dokumen HTML.    <html>    ..................
Tag Head   Merupakan tag setelah <html> untuk    menuliskan keterangan tentang dokumen    HTML.   Isi teks diantara <hea...
Title   Merupakan tag yang digunakan untuk    menuliskan judul dokumen HTML   Hasil tag ini akan ditampilkan dalam windo...
Body   Merupakan section dalam dokumen HTML yang    akan ditampilkan dalam browser.    <html>    <head>    <title>Belajar...
Paragraf   Setiap paragraf               <html>                                  <head>    harus dimulai                 ...
Line Break   Kita dapat memaksa            <html>                                  <head>    ganti baris pada            ...
Heading   Tag heading aklan membuat tulisan    ditampilkan dengan huruf yang lebih besar    atau ditebalkan.   Heading d...
   <html>   <head><title>Heading</title></head>   <body>   <h1>Heading 1</h1>   <h2>Heading 2</h2>   <h3>Heading 3</...
Garis Pembatas   Sebuah garis pembatas dapat disisipkan    dalam dokumen web dengan menggunakan    tag <hr>              ...
Komentar   Dalam sebuah dokumen              <html>    HTML ada informasi yang           <head>                          ...
Toolbar Dreamweaver untuk dasarHTMLKeterangan - tab Text : h1           : heading 1 h2           : heading 2 h3        ...
FINISH                                           26         Politeknik Elektronika Negeri Surabaya (PENS)
Upcoming SlideShare
Loading in …5
×

Pengenalan html

1,197 views

Published on

materi tik html

Published in: Education
  • Be the first to comment

  • Be the first to like this

Pengenalan html

  1. 1. Bab2 - Pengenalan HTML Web Design Team Dosen Politeknik Elektronika Negeri Surabaya (PENS) 1
  2. 2. 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 2 Politeknik Elektronika Negeri Surabaya (PENS)
  3. 3. Penamaan Dokumen Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html” 3 Politeknik Elektronika Negeri Surabaya (PENS)
  4. 4. Definisi Elemen Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list. 4 Politeknik Elektronika Negeri Surabaya (PENS)
  5. 5. 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> 5 Politeknik Elektronika Negeri Surabaya (PENS)
  6. 6. 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. 6 Politeknik Elektronika Negeri Surabaya (PENS)
  7. 7.  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> 7 Politeknik Elektronika Negeri Surabaya (PENS)
  8. 8.  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. 8 Politeknik Elektronika Negeri Surabaya (PENS)
  9. 9.  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> 9 Politeknik Elektronika Negeri Surabaya (PENS)
  10. 10.  Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilkan pada browser. 10 Politeknik Elektronika Negeri Surabaya (PENS)
  11. 11. Contoh1.html<html><head><title>Belajar Web Design</title></head>ini adalah halaman HTML<body></body></html> 11 Politeknik Elektronika Negeri Surabaya (PENS)
  12. 12. Penggunaan Tag Tag HTML diapit dengan dua karakter kurung bersudut, < dan >. Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1> Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1> 12 Politeknik Elektronika Negeri Surabaya (PENS)
  13. 13. Atribut Tag Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. 13 Politeknik Elektronika Negeri Surabaya (PENS)
  14. 14.  Tag berikut tidak mempunyai atribut :  <body>. Tag <body> Tag berikut mempunyai atribut :  <body bgcolor=”red”> 14 Politeknik Elektronika Negeri Surabaya (PENS)
  15. 15. Tag HTML Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. <html> ........................ </html> 15 Politeknik Elektronika Negeri Surabaya (PENS)
  16. 16. 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> 16 Politeknik Elektronika Negeri Surabaya (PENS)
  17. 17. 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> 17 Politeknik Elektronika Negeri Surabaya (PENS)
  18. 18. 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> 18 Politeknik Elektronika Negeri Surabaya (PENS)
  19. 19. Paragraf Setiap paragraf <html> <head> harus dimulai <title>Tag Paragraf</title> dengan memberi tag </head> <body> <p> <p>berikut ini adalah paragraf 1</p> Diakhir paragraf <p>berikut ini adalah paragraf 2</p> tidak diharuskan <p>berikut ini adalah paragraf menuliskan </p> 3</p> </body> sebagai akhir </html> paragraf. 19 Politeknik Elektronika Negeri Surabaya (PENS)
  20. 20. Line Break Kita dapat memaksa <html> <head> ganti baris pada <title>Ganti Baris</title> dokumen web <head> <body> dengan tag <br> 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> 20 Politeknik Elektronika Negeri Surabaya (PENS)
  21. 21. 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. 21 Politeknik Elektronika Negeri Surabaya (PENS)
  22. 22.  <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> 22 Politeknik Elektronika Negeri Surabaya (PENS)
  23. 23. Garis Pembatas Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr> 23 Politeknik Elektronika Negeri Surabaya (PENS)
  24. 24. Komentar Dalam sebuah dokumen <html> HTML ada informasi yang <head> <title>Horizontal Rule</title> berfungsi sebagai catatan </head> atau komentar terhadap <body> dokumen isi komentar ini <!-- komentar ni tidak akan ditampilkan di browser --> tidak akan ditampilkan <p>Tulisan ini akan ditampilkan dalam browser. di browser</p> </body> <!-- sebagai awal dan tag </html> --> sebagai akhir komentar. 24 Politeknik Elektronika Negeri Surabaya (PENS)
  25. 25. Toolbar Dreamweaver untuk dasarHTMLKeterangan - tab Text : h1 : heading 1 h2 : heading 2 h3 : heading 3 br : Line Break p (dibalik) : Paragraf 25 Politeknik Elektronika Negeri Surabaya (PENS)
  26. 26. FINISH 26 Politeknik Elektronika Negeri Surabaya (PENS)

×