Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.

Slides:



Advertisements
Presentasi serupa
Matakuliah Pengenalan Internet
Advertisements

HTML.
HTML Hyper Text Markup Language
Pemrograman Web 1Humisar Hasugian, S.Kom 1 Pengenalan HTML HTML • Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan.
Pengenalan HTML Oleh A ngraini. Tentang HTML HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan.
Nine: Pengantar HTML The Net Language. 2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti.
STMIK PPKIA Pradnya Paramita
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
HTML Basic Heading Paragraf & Text. Paragraf Breaks & Horizontal Rulez Creating and HTML Page Quoted Text Preformated Text Phrase Elements Formating Elements.
HTML.
Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.
Basic HTML Konsep dan Fungsi HTML
 HTML merupakan bahasa paling standard yang digunakan untuk membuat suatu website  HTML Singkatan dari H yper T ext M arkup L anguage  HTML bukanlah.
Internet Programming PHP 1 M. Agus Zainuddin EEPIS – ITS Surabaya.
HTML (Hypertext Markup Language)
Pengantar Pemrograman WEB
Pemrograman Web/TI/ AK /2 sks
HTML Basic.
HTML (Hypertext Markup Language)
Pemrograman Web HTML (1) Andy Haryoko, ST.
HTML PEMROGRAMAN INTERNET.
TABEL , FORM DAN FRAME.
BASIC TAG Belajar HTML COBA COBA 1 HASILNYA STRUKTUR HTML HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML HEAD Bagian header dari.
Pengenalan HTML Oleh Benny Irawan. WORLD WIDE WEB Web pada awalnya merupakan ruang informasi dalam internet, dengan menggunakan teknologi hyperteks, terdiri.
PERANCANGAN WEB Pertemuan 1: Pengenalan tentang WEB
ADD-ON Dasar HTML.
Pertemuan 2 : HTML.
PEMROGRAMAN WEB 1 BY: ASIH WINANTU.
HTML (cont.) (Nelly Sofi). Peng. Komp & TI 2C2 Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen.
PERTEMUAN I PENGENALAN HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan document web, yang bisa dilakukan dengan.
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.
S1 Teknik Informatika - Unijoyo
Desain Web dengan Tag HTML
Perancangan dan Pemrograman Web
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Pertemuan 4 Khairul Anwar Hafizd
Apa Itu HTML HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa (aturan) standar yang digunakan untuk menampilkan teks, gambar, video dan.
PEMETAAN VORD KEDALAM CMMI UNTUK MENINGKATKAN ANALISA KEBUTUHAN PERANGKAT LUNAK (STUDI KASUS : APLIKASI MEDIA MANAGEMENT DI PT.EBDESK INDONESIA) Mata.
HTML (cont.) (Devi Indriani).
Tak Kenal Maka Tak Sayang (HTML)
Internet dan Web By : Lisda Juliana P..
HTML.
( Materi web HTML ) Membuat tabel.
INTERNET (Praktikum) STMIK “BINA NUSANTARA JAYA”
Pemrograman Berbasis Web
Internet dan Web By : Lisda Juliana P..
Pengantar HTML.
List, Image, Link dan tabel
Pemrograman Berbasis WEB
Desain WEB.
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Oleh : Inggar Prayoga.,S.I.Kom
Internet dan Web By : Lisda Juliana P..
Deskripsi Mata Kuliah: Dunia internet semakin lama semakin berkembang karena manusia selalu mencari terobosan baru. Meskipun pada awalnya internet hanya.
Internet dan Web Ecking Mendrofha.
LPIA Cileungsi Team Div-Kom ‘10
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Web Design : Struktur Dasar Web dan Dokumen HTML
(Hyper Text Markup Language)
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Dasar HTML Hypertext Markup Language Dasar HTML.
Darmawan satyananda Mathematics department State university of malang
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Pemrograman Web PG117 – 3 SKS.
Pengenalan HTML HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web Untuk membuat dokumen web yang bisa.
Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Dasar - dasar Web dan HTML
Dasar-dasar HTML. 2 World Wide Web (WWW) Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia. TCP/IP.
Internet dan Web By : Lisda Juliana P..
Transcript presentasi:

Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS

2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Memahami konstruksi dasar halaman web. Mengerti tentang WWW Mengerti tentang WWW Mengerti tag-tag dasar HTML Mengerti tag-tag dasar HTML Membuat halaman web dengan HTML sederhana. 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. 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. 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. 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: 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 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.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.HTML digunakan untuk membuat document yang bisa di akses melalui web.

5 HyperText Markup Language (HTML) HTML  standard bahasa yang digunakan untuk menampilkan document web. HTML  standard bahasa yang digunakan untuk menampilkan document web. Mengontrol tampilan dari web page dan contentnya.Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses.Mempublikasikan document secara online sehingga bisa di akses. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.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.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. 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. 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 Kalo pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag. Kalo pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag. Contoh tag html adalah,,,,, dan lain-lain. Contoh tag html adalah,,,,, dan lain-lain. Tag html tidak bersifat case sensitive  sama dengan Tag html tidak bersifat case sensitive  sama dengan

8 Tag-tag HTML - continued Bentuk umum penulisan tag html adalah: Bentuk umum penulisan tag html adalah: Dimana: Element - nama tagElement - nama tag Attribute - atribut dari tagAttribute - atribut dari tag Value - nilai dari atribut.Value - nilai dari atribut. Contoh: Contoh:

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

10 Susunan HTML Homepage Kepala Tubuh Judul Homepage Isi…Teks Isi…Tabel. Isi…Audio, Video, dll.

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

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

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

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

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

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

17 list item (li) - continued Ordered list : List item berurutan. Ordered list : List item berurutan.<body> Daftar Jurusan PENS ITS Daftar Jurusan PENS ITS <li>Telkom</li><li>IT</li><li>Elka</li> Elektro Industri Elektro Industri </ol><body>

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

19 Elemen dasar – Horizontal Rules Elemen dasar – Horizontal Rules Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html. Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html. Attribut dari adalah: Attribut dari adalah: Position: menetukan posisi dari, dengan nilai : center | right | left.Position: menetukan posisi dari, dengan nilai : center | right | left. Width: untuk menentukan panjang. Nilai default 100%.Width: untuk menentukan panjang. Nilai default 100%. Size: untuk menentukan tebal dari dalam pixel.Size: untuk menentukan tebal dari dalam pixel. Noshad: Efek bayangan.Noshad: Efek bayangan. Contoh: Contoh:

20 Pemformatan Page Break : memulai baris baru Break : memulai baris baru tag : tag : Font : menentukan format tampilan font Font : menentukan format tampilan font Belajar Web Belajar Web Color : attribute dgn 3 kategori warna (RGB) Color : attribute dgn 3 kategori warna (RGB) #RRGGBB, misal #FF0000 adalah Red

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

22 Contoh : Contoh :<html><head> Welcome to eepis-its Welcome to eepis-its </head><body> Lab di Jur. Telkom Lab di Jur. Telkom Jurusan Telkom mempunyai 7 lab, diantaranya Jurusan Telkom mempunyai 7 lab, diantaranya 1. Lab. Multimedia 1. Lab. Multimedia 2. Lab. Microwave 2. Lab. Microwave 3. Lab. Komunikasi Digital 3. Lab. Komunikasi Digital </body></html> Pemformatan Page – Cont. 2

23 Elemen dasar – hyperlink Elemen dasar – hyperlink Untuk membuat link ke dokumen lain. Untuk membuat link ke dokumen lain.Contoh: Ke halaman dua Ke halaman dua <a href=“ ~zenhadi”> WEB PRIBADI ZEN ~zenhadi”> WEB PRIBADI ZEN Untuk membuat link ke bagian tertentu dlm dokumen. Untuk membuat link ke bagian tertentu dlm dokumen.Contoh:

24 Pembuatan Tabel Untuk membuat tabel : Untuk membuat tabel : Cell-nya dengan tag Cell-nya dengan tag <html><head> Using Table Using Table </head><body> cell 1 cell 1 cell 2 cell 2 cell 3 cell 3 cell 4 cell 4 </table></body></html>

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

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

27 Pemformatan Tabel – Cont. 1 Contoh : Contoh : <body> cell 1a cell 1a cell 1b cell 1b </tr> cell 2a cell 2a cell 2b cell 2b </tr></table></body>