Introduction to HTML and the World Wide Web

This chapter, titled 'Nine Pengantar HTML' is an introduction to HTML (Hypertext Markup Language) and the World Wide Web (WWW). By the end of this chapter,

Uploaded on Apr 24, 2023 | 3 Views
jean

About Introduction to HTML and the World Wide Web

PowerPoint presentation about 'Introduction to HTML and the World Wide Web'. This presentation describes the topic on This chapter, titled 'Nine Pengantar HTML' is an introduction to HTML (Hypertext Markup Language) and the World Wide Web (WWW). By the end of this chapter,. The key topics included in this slideshow are . Download this presentation absolutely free.

Presentation Transcript

Slide1Nine: Pengantar HTMLThe Net Language

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

Slide33World Wide Web (WWW) • Internet merupkan 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.

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

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

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

Slide77Tag-tag HTML • Kalo 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>

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

Slide99Struktur HTML document • Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body. <html> <head> </head> <body> </body> </html>

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

Slide1111<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 syauqi.net</title> </head>

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

Slide1313Elemen 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>

Slide1414Elemen dasar – Paragraph (p) • Menampilkan teks dalam bentuk paragraf. <body> <h3>Puisi Sedih</h3> <p> Hatiku sedih Sediiih sekali Benar-benar sedih Suer….. </p> <body>

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

Slide1616list item (li) - continued • Ordered list <ol> : List item berurutan. <body> <P>Juara Lomba Balap Karung</P> <ol start="1" type=“1"> <li>Sugiono</li> <li>Parto</li> <li>Tarjo</li> <li>Widodo</li> </ol> <body>

Slide1717list 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, …

Slide1818Elemen 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>

Slide1919Elemen dasar – hyperlink <a> • Untuk membuat link ke dokumen lain. • Contoh: <a href=dua.html>Ke halaman dua</a>

Slide2020Tag-tag html lain • EM, I, B dan FONT: Pemformatan font • BR : Break line • APPLET : Java Applet. • IMG: Gambar. • Dan lain-lain.

Slide2121Latihan • Buatlah satu halaman web pribadi. Isi halaman web tersebut dengan beberapa informasi seperti: – Nama. – Alamat. – Tempat Tanggal Lahir. – Jadwal Kuliah. – Dan lain-lain.