Scribd
Unggah
59 tayangan22 halaman

Web Statis 2-Pengenalan HTML

Diunggah oleh

asihwinantu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
59 tayangan22 halaman

Web Statis 2-Pengenalan HTML

Diunggah oleh

asihwinantu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 22

Web Statis

Pertemuan 2
Pengenalan HTML

Asih Winantu, S.Kom, M.Cs


www.STMIKElRahma.ac.id
www.stmikelrahma.ac.id 1
Apa itu HTML
 HTML : Hypertext Markup Language

 HTML adalah bahasa dasar untuk menampilkan


halaman web pada web
browser.

 HTML adalah bahasa Markup, artinya


bahasa HTML hanya digunakan untuk me-
markup suatu dokumen web.

www.stmikelrahma.ac.id 2
Tag HTML
 Kode dalam HTML di sebut TAG
 HTML tag digunakan untuk mark-up HTML element
 ƒHTML tag diapit oleh karakter < dan>
 Tag biasanya berpasangan , seperti<b> and </b>
 Tag pertama dalam pasangan tersebut adalah tag
awal, dan tag kedua adalah tag akhir.
 Teks diantara tag awal dan tag akhir disebut
elemen
 HTML tag tidak case sensitive, <b> means the
same as <B>

www.stmikelrahma.ac.id 3
Penulisan tag
 Tag disarankan untuk dituliskan dalam huruf
kecil / lowercase
 World Wide Web Consortium (W3C)

mengeluarkan rekomendasi tersebut mulai


HTML 4

www.stmikelrahma.ac.id 4
Atribut dalam tag
 Tag bisa memiliki atribut
 Atribut memiliki value
 Contoh :

<body bgcolor=“red”>

Ket :
Body merupakan tag
Bgcolor merupakan atribut dari body
Red merupakan value dari bgcolor

www.stmikelrahma.ac.id 5
Praktek HTML
Tools yang dibutuhkan :
 Komputer / laptop dengan sistem operasi

(Windows, Linux, MacOS)


 Teks editor (notepad, notepad++,sublime

text, dll)
 Browser (ie,safari, mozzila firefox,chrome,dll)

www.stmikelrahma.ac.id 6
Struktur HTML

www.stmikelrahma.ac.id 7
Latihan 1
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<hr>
<p>This is a paragraph.</p>

</body> Ketikkan kode html diatas di text editor, lalu simpan


</html> dengan nama lat1.html.
Kemudian jalankan di browser anda
www.stmikelrahma.ac.id 8
Tag dasar HTML

www.stmikelrahma.ac.id 9
Logical Tag
 Mendeskripsikan bagaimana tampilan teks
seharusnya

www.stmikelrahma.ac.id 10
Physical tag
 Memberitahukan browser format fisik
suatu teks

www.stmikelrahma.ac.id 11
Karakter khusus

www.stmikelrahma.ac.id 12
HTML Background
 Background
• <body background="clouds.gif“>
• <body
background="http://profdevtrain.austincc.edu/html/graphics/clouds
.gif">

 Bgcolor
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Catatan:
Atribut Bgcolor & background tidak berlaku lagi mulai HTML5
www.stmikelrahma.ac.id 13
Warna pada HTML
 Kode warna  Nama warna

www.stmikelrahma.ac.id 14
Hasil lat1 di browser

www.stmikelrahma.ac.id 15
Latihan 2

www.stmikelrahma.ac.id 16
Mengenal HTML 5
 HTML5 adalah singkatan Hyper Text Markup
Language Versi 5

 HTML5 merupakan sebuah teknologi penerus


dari generasi sebelumnya yang dikeluarkan
oleh W3C (World Wide Web Consortium) dan
WHATWG (Web Hypertext Application
Technology Working Group).

www.stmikelrahma.ac.id 17
Apa saja Feature baru pada HTML5?
 New Semantic Elements :dengan semantic element, maka akan memudahkan search
engine dalam melacak bagian-bagian web.
 Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag .
 Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak
ketiga.
 WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi
web.
 Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web
browser yang disebut Server-Sent Events (SSE).
 Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan
JavaScript.
 Audio & Video : Anda dapat menanamkan/embed audio atau video pada halaman
web Anda tanpa menggunakan plugin pihak ketiga.
 Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan
aplikasi web Anda..
 Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5
dan memperluas halaman web Anda dengan kostum semantics.
 Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web
yang sama.

www.stmikelrahma.ac.id 18
Apa saja Feature yang dihapus pada
HTML5?
 Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama
dengan tag
 Applet : Digunakan untuk memasukan file java kedalam dokumen
HTML
 Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis
font untuk semua teks dalam dokumen
 Big : Memperbesar ukuran teks sebesar satu point dari defaultnya
 Center : Untuk perataan tengah terhadap teks atau gambar
 Dir : Mendefinisikan sebuah daftar direktori
 Font : Mendefinisikan jenis font, warna dan ukuran untuk teks
 Frame : Mendefinisikan frame dalam fremeset
 Frameset : Mendefinisikan satu set frame
 Noframes : Jika browser user tidak mendukung frame
 Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi
tag ini sama dengan tag
 Tt : Mendefinisikan teletype text

www.stmikelrahma.ac.id 19
Perbedaan penulisan HTML dan
HTML 5
Penulisan deklarasi html yang lebih simple
<!DOCTYPE html>

Sedangkan pada HTML 4 :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

www.stmikelrahma.ac.id 20
Contoh HTML 5
<!doctype html>
<html lang=en>
<head>
<title>HTML5 test document</title>
<meta charset=utf-8>
meta details go here
</head>
<body>
content goes here
</body>
</html>

www.stmikelrahma.ac.id 21
terimakasih

www.stmikelrahma.ac.id 22

Anda mungkin juga menyukai