1 / 27

Pengantar HTML

Pengantar HTML. Objectives. Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti tentang WWW Mengerti tag-tag dasar HTML Membuat halaman web dengan HTML sederhana. World Wide Web (WWW).

jerold
Download Presentation

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

  2. Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: • Memahami konstruksi dasar halaman web. • Mengerti tentang WWW • Mengerti tag-tag dasar HTML • Membuat halaman web dengan HTML sederhana.

  3. World Wide Web (WWW) • Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia. • TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. • World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer.

  4. WWW - continued • WWW bekerja merdasarkan pada tiga mekanisme berikut: • Protocolstandard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. • AddressWWW memiliki aturan penamaan alamat web yaitu: URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. • HTMLdigunakan untuk membuat document yang bisa di akses melalui web. • http://www.detik.com/index.html

  5. HyperText Markup Language (HTML) • HTML  standard bahasa yang digunakan untuk menampilkan document web. • Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan document secara online sehingga bisa di akses. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. • Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

  6. Browser dan Editor • Browser: Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak yang lainya. • Editor: Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Notepad, Microsoft FrontPage, Macromedia Dreamweaver, dan lain-lain.

  7. Tag-tag HTML • Bila pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag. • Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain. • Tag html tidak bersifat case sensitive  <body> sama dengan <BODY>

  8. Tag-tag HTML - continued • Bentuk umum penulisan tag html adalah: <ELEMENTATTRIBUTE = value> Dimana: • Element- nama tag • Attribute - atribut dari tag • Value- nilai dari atribut. • Contoh: <BODY BGCOLOR=lavender>

  9. Struktur HTML document • Document HTML bisadibagimejaditigabagianutama: html, head, dan body. <html> <head> </head> <body> </body> </html>

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

  11. <html> • Setiap document HTML harus di awali dan di tutup dengan tag HTML  <html> …… </html> • Tag <html> memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.

  12. <head> • Bagian header dari document HTML di apit oleh tag <head></head>. • Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul dari halaman web. <head> <title>Welcome to eepis-its</title> </head>

  13. <body> • Tag <body> di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <html> <head> <title>Welcome to eepis-its</title> </head> <body bgcolor="lavender"> <p>Document HTML yang Pertama</p> </body> </html>

  14. Elemen dasar – Block Level • Block level element: terdapat 6 tingkatan, yaitu H1 sampai H6. <body> <h1>Heading one</h1> <h2>Heading two</h2> <h3>Heading three</h3> <h4>Heading four</h4> <h5>Heading five</h5> <h6>Heading six</h6> </body>

  15. Elemen dasar – Paragraph (p) • Menampilkan teks dalam bentuk paragraf. <body> <h3>Salam Kenal</h3> <p> Saya dari jurusan telekom PENS ITS. Siapa ya yang mo kenalan dengan saya. </p> <body>

  16. Elemen dasar – list item (li) • Unordered list <ul>: List item tidak berurutan (bullet) <body> <P>Nama-nama buah</P> <ul> <li>Mangga</li> <li>Duren</li> <li>Sirsak</li> </ul> </body>

  17. list item (li) - continued • Ordered list <ol>: List item berurutan. <body> <P>Daftar Jurusan PENS ITS</P> <ol start="1" type=“1"> <li>Telkom</li> <li>IT</li> <li>Elka</li> <li>Elektro Industri</li> </ol> <body>

  18. list item (li) - continued • Tipe-tipe pada list item - ordered list <ol> : • “A” : A, B, C, … • ”a” : a, b, c, … • ”I” : I, II, III, … • ”i” : i, ii, iii, … • ”1” : 1, 2, 3, …

  19. Elemen dasar – Horizontal Rules <hr> • Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html. • Attribut dari <hr> adalah: • Position: menetukan posisi dari <hr>, dengan nilai : center | right | left. • Width: untuk menentukan panjang <hr>. Nilai default 100%. • Size: untuk menentukan tebal dari <hr> dalam pixel. • Noshad: Efek bayangan. • Contoh: <hr position=“center” width=90% size=3 noshad>

  20. Pemformatan Page • Break : memulai baris baru tag : <br> • Font : menentukan format tampilan font <font color="#9966FF" size="5"> Belajar Web </font> • Color : attribute dgn 3 kategori warna (RGB) #RRGGBB, misal #FF0000 adalah Red

  21. Pemformatan Page – Cont. 1 • Alignment : untuk perataan objek (Left,Right,Center,Justify) <P align="center">Daftar Jurusan PENS ITS</P> • Format Text : A. Physical Format B. Logical Format C. Preformatted Text : menampilkan text spt aslinya. <pre> HTML sungguh menyenangkan. Mudah bukan… </pre>

  22. Pemformatan Page – Cont. 2 • Contoh : <html> <head> <title>Welcome to eepis-its</title> </head> <body> <B><P align="center">Lab di Jur. Telkom</P></B> Jurusan Telkom mempunyai 7 lab, diantaranya <br> <font color="#9966FF" size="3" face="arial"> 1. Lab. Multimedia </font> <br> 2. Lab. Microwave <br> 3. Lab. Komunikasi Digital <br> </body> </html>

  23. Elemen dasar – hyperlink <a> • Untuk membuat link ke dokumen lain. Contoh: <a href=dua.html>Ke halaman dua</a> <a href=“http://lecturer.eepis-its.edu/ ~zenhadi”> WEB PRIBADI ZEN </a> • Untuk membuat link ke bagian tertentu dlm dokumen. Contoh:

  24. Pembuatan Tabel • Untuk membuat tabel : <tabble> Cell-nya dengan tag <td> <html> <head> <title>Using Table</title> </head> <body> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> </body> </html>

  25. Pembuatan Tabel – Cont. 1 • Untuk membuat baris cell : <tr> • Untuk title tabel : <caption> <body> <table border="1"> <caption>Creating Table</caption> <tr> <td>cell 1a</td> <td>cell 1b</td> </tr> <tr> <td>cell 2a</td> <td>cell 2b</td> </tr> </table> </body>

  26. Pemformatan Tabel • Perataan tabel : 1. align (center, justify, left, right). 2. valign (baseline, top, middle, bottom) • Lebar tabel : width=“25%” • Warna cell : bgcolor=“red” • Spasi tabel : cellspacing untuk memberi spasi antar sel cellpadding untuk spasi dari border ke text dalam cell

  27. Pemformatan Tabel – Cont. 1 • Contoh : <body> <table border=1 cellspacing=5 cellpading=10> <tr align="left" valign="top"> <td width="25%" bgcolor=red>cell 1a</td> <td width="25%" bgcolor=yellow>cell 1b</td> </tr> <tr align="center" valign="baseline"> <td>cell 2a</td> <td>cell 2b</td> </tr> </table> </body>

More Related