Pengenalan HTML
Matakuliah Pengenalan Internet

Oleh : Suparno
Email : endustong@yahoo.com
Blog : www.digdoyo.com
Pengertian
• HTML (Hypertext Markup Language) adalah
script utk menyusun dokumen Web. Dokumen
HTML disimpan dalam format t...
Kegunaan HTML
• Mengontrol tampilan dari web page dan
contentnya.
• Mempublikasikan dokumen secara online
sehingga bisa di...
Browser dan Editor
• Browser : software untuk menterjemahkan
tag-tag HTML menjadi halaman web. (IE,
Netscape, Mozilla, Ope...
Struktur Dokumen
• HTML : Utk memberitahu browser bahwa
didalamnya adalah dokumen HTML
• HEAD : Bagian header dokumen. Bia...
Tag
• Tag : teks khusus (markup) berupa dua
karakter “<“ dan “>” yang digunakan untuk
menuliskan perintah HTML.
• Umumnya ...
Element
Element terdiri atas tiga bagian, yaitu tag
pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul
...
Attribute
• Attribute mendefinisikan property dari suatu
element HTML, yang terdiri atas nama
attribute dan nilai attribut...
Element HTML
• Menyatakan pada browser bahwa dokumen
Web yang digunakan adalah HTML.
• Syntax Penulisan
<html>
…………
</html...
Element HEAD
• Merupakan header/kepala dari dokumen
HTML.
• Tag <head> dan tag </head> harus terletak di
antara element ht...
Element TITTLE
• Merupakan judul dari dokumen HTML yang
ditampilkan pada jendela browser.
• Tag <title> dan tag </title> h...
Element BODY
• Elemen yang digunakan untuk menampilkan isi
dokumen HTML pada jendela browser.
• Tag <body> dan tag </body>...
Element BODY
• Elemen ini memiliki attribute yang
menspesifikasikan warna dan latarbelakang
dokumen yang ditampilkan pada ...
Format Text HTML
• Mengatur format atau tampilan-tampilan
teks dalam dokumen html agar tampil lebih
menarik.
• Elemen-elem...
Format Text HTML
• Elemen-elemen yang digunakan :
– H1, H2, H3, H4, H5, H6 (Heading) : utk membuat
judul teks dengan 6 jen...
Format Text HTML
• Elemen-elemen yang digunakan :
– CENTER : utk menampilkan teks dgn posisi
horizontal di tengah
– BASEFO...
Format Text HTML
• Elemen-elemen yang digunakan :
– HR (Horizontal Rule) : utk membuat garis
horizontal. Tanpa tag penutup...
Hyperlink
Digunakan untuk menghubungkan halaman
yang ada dalam satu situs (Internal Link) atau
pada situs yang lain (Ekste...
Hyperlink
Syntax Hyperlink
<a href=“URI” name=“Name” target=“Target”>
hypertext</a>
URI
= alamat URL absolute/relatif
Name...
Upcoming SlideShare
Loading in …5
×

Pengenalan internet 10

300 views

Published on

Slide pengenalan HTML - struktur utama dalam dokumen html

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
300
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pengenalan internet 10

  1. 1. Pengenalan HTML Matakuliah Pengenalan Internet Oleh : Suparno Email : endustong@yahoo.com Blog : www.digdoyo.com
  2. 2. Pengertian • HTML (Hypertext Markup Language) adalah script utk menyusun dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengan-dung tag-tag yang memerintahkan browser utk mengeksekusi perintah yang ispesifikasikan. • HTML merupakan standard bahasa yg digunakan untuk menampilkan dokumen web.
  3. 3. Kegunaan HTML • Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan dokumen secara online sehingga bisa di akses dari manapun. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. • Menambahkan objek-objek seperti image, audio, video dan juga java applet dalam dokumen HTML.
  4. 4. Browser dan Editor • Browser : software untuk menterjemahkan tag-tag HTML menjadi halaman web. (IE, Netscape, Mozilla, Opera, Chrome dll) • Editor : software untuk membuat dokumen HTML. (FrontPage, Dreamweaver, Notepad, dll)
  5. 5. Struktur Dokumen • HTML : Utk memberitahu browser bahwa didalamnya adalah dokumen HTML • HEAD : Bagian header dokumen. Biasanya memuat tag : – TITTLE utk judul halaman web. – META utk informasi mengenai dokumen seperti Author Name, Keyword dll. • BODY : Utk menampilkan teks, image, link dan semua yang akan ditampilkan di web.
  6. 6. Tag • Tag : teks khusus (markup) berupa dua karakter “<“ dan “>” yang digunakan untuk menuliskan perintah HTML. • Umumnya berpasangan : Tag Pembuka – Tag Penutup (ditambahkan tanda “/” sebelum nama tag). • Penulisan tag tidak Case Sensitive <HTML> …… </HTML>
  7. 7. Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title. <title> (tag pembuka) Judul dokumen (isi) </title> (tag penutup)
  8. 8. Attribute • Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama attribute dan nilai attribute • Secara umum nilai attribute harus diapit tanda kutip satu („) atau tanda kutip dua (“) <body bgcolor="black" text="yellow"> hasilnya warna text kuning, latar belakang hitam
  9. 9. Element HTML • Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. • Syntax Penulisan <html> ………… </html>
  10. 10. Element HEAD • Merupakan header/kepala dari dokumen HTML. • Tag <head> dan tag </head> harus terletak di antara element html. • Syntax Penulisan <html> <head> ….. </head> </html>
  11. 11. Element TITTLE • Merupakan judul dari dokumen HTML yang ditampilkan pada jendela browser. • Tag <title> dan tag </title> harus terletak di antara element head. • Syntax Penulisan <head> <tittle> ….. </tittle> </head>
  12. 12. Element BODY • Elemen yang digunakan untuk menampilkan isi dokumen HTML pada jendela browser. • Tag <body> dan tag </body> harus terletak di bawah element head. • Syntax Penulisan <body> ….. </body>
  13. 13. Element BODY • Elemen ini memiliki attribute yang menspesifikasikan warna dan latarbelakang dokumen yang ditampilkan pada browser. • Syntax Penulisan <body text=“wtext" bgcolor=“wlatar" background=“wlatargambar" link=“wlink" alink=“wlinkaktif" vlink=“wlinkkunjungan"> .............. </body>
  14. 14. Format Text HTML • Mengatur format atau tampilan-tampilan teks dalam dokumen html agar tampil lebih menarik. • Elemen-elemen yang digunakan : – BR (Break Line) : utk ganti baris, tanpa tag penutup – P (Paragraph) : utk ganti paragraf diikuti baris kosong diawal dan diakhir paragraf. Elemen P memiliki attribute align dgn nilai left, center dan right
  15. 15. Format Text HTML • Elemen-elemen yang digunakan : – H1, H2, H3, H4, H5, H6 (Heading) : utk membuat judul teks dengan 6 jenis ukuran huruf dan tercetak tebal. Memiliki attribute align dgn nilai left, center dan right – B (Bold) : utk menebalkan tampilan teks – I (Italic) : utk menampilkan teks miring – U (Underline) : utk memberi garis bawah pd teks – PRE (Preformat) : utk menampilkan teks apa adanya
  16. 16. Format Text HTML • Elemen-elemen yang digunakan : – CENTER : utk menampilkan teks dgn posisi horizontal di tengah – BASEFONT : utk mengubah dasar ukuran huruf tampilan dari browser. Memiliki attribute size dgn nilai 1 – 7 pixel. Tidak mempunyai tag penutup. – FONT : utk mengubah jenis, ukuran dan warna huruf. Memiliki attribute color utk warna, face utk jenis huruf dan size utk ukuran huruf
  17. 17. Format Text HTML • Elemen-elemen yang digunakan : – HR (Horizontal Rule) : utk membuat garis horizontal. Tanpa tag penutup. Memiliki attribute align dgn nilai left, center, right attribute size utk ketebalan garis, attribute width utk panjang garis dan attribute noshade utk membuat garis solid
  18. 18. Hyperlink Digunakan untuk menghubungkan halaman yang ada dalam satu situs (Internal Link) atau pada situs yang lain (Eksternal Link). Hyperlink mempunyai atribute : href, name dan target href : sebagai hypertext reference eksternal URI (uniform resource identifier) name : menghubungkan ke tujuan dlm halaman web (anchor) target : utk menampilkan halaman web pada satu jendela yg sama atu jendela baru
  19. 19. Hyperlink Syntax Hyperlink <a href=“URI” name=“Name” target=“Target”> hypertext</a> URI = alamat URL absolute/relatif Name = nama anchor/penghubung pada halaman web Target = tempat menampilkan halaman (_blank, _top, _self, _parent) Hypertext = visualisasi teks yang di tampilkan

×