3 pemrograman internet html (1)
Post on 02-Jul-2015
519 Views
Preview:
TRANSCRIPT
HyperTextMarkupLanguage sesi 1 HTML
Toni Tegar Sahidi tonitegarsahidi@gmail.com
STT Stikma Internasional, Malang
HTML adalah “bahasa” yang mendefinisikan bagaimana sebuah web ditampilkan di layar browser
Ketikkan Kode di bawah ini
<html>
<head>
<title>Lihat aku di tittlebar browser</title>
</head>
<body>
Aku adalah konten dan aku berada di kotak utama
web browser.
</body>
</html>
HTML OVERVIEW #1 Menulis kode HTML #2 Price... eh HTML Tag! #3 Komponen Utama HTML #4 Memformat Teks dengan HTML #5 Utak-atik Gambar dengan HTML
#1 MENULIS
KODE HTML
1/6
:: praktek :: Buka Text Editor 'Kesayangan' Anda
(Notepad, Kwrite, Vim, Emacs)
simpan dengan nama coba.html, Opsi pilihan penyimpanan ganti dari Text Files menjadi
All Files.
Notepad di Windows
Ganti jadi All Files
Isi dengan sebuahnama, dibelakangnya kasih .html
buka file manager (misal Windows Explorer), lalu buka file coba.html yang telah Anda buat
tersebut
Akan terbuka Web Browser menampilkan file coba.html
MEMBUAT WEBSITE TIDAK HARUS MEMAKAI
DREAMWEAVER!
DREAMWEAVER, CODELOBSTER, EPIPHANY, NETBEANS, KATE, DLL
HANYALAH TOOL UNTUK MEMPERMUDAH!
versus
#2 PRICE, EH..
HTML TAGS!
2/5
Setiap kode HTML berbentuk sebuah tag
Tag selalu diapit dengan tanda < dan > contoh <html> , <body>, dll
Pada umumnya, tag bersifat berpasangan, ada tag pembuka, dan ada tag penutup
Tag pembuka diapit tanda < dan > contoh <title> sedangkan
Tag penutup diapit tanda </ dan > contoh </title>
Contoh <title>Lihat aku di tittlebar browser</title>
Namun beberapa tag, hanya satu jenis saja (tak ada tag pembuka & penutup)
contoh <br />
#3 KOMPONEN
UTAMA HTML
3/5
<html>
<head>
<title>Lihat aku di tittlebar browser</title>
</head>
<body>
Aku adalah konten dan aku berada di kotak
utama web browser.
</body>
</html>
mulai dengan <html> dan akhiri dengan </html>
<html>
<head>
<title>Lihat aku di tittlebar browser</title>
</head>
<body>
Aku adalah konten dan aku berada di kotak
utama web browser.
</body>
</html>
<head></head>
wadah / Kontainer untuk semua element head. Element head dapat berupa title, script, link
CSS, informasi meta, dll.
<body></body>
Mendefinisikan badan(body) dari dokumen. tempat semua konten dari dokumen HTML,
seperti teks, image, links, dlsb.
tempat mendefinisikan Background dari halaman
<html> <head> <title>mencoba lebih keren lagi...</title> </head> <body bgcolor="#a340f4"> halooo..... </body> </html>
bgcolor="#a340f4"
#a340f4 adalah warna heksadesimal
Warna heksadesimal paling rendah adalah #000000 dan tertinggi adalah #ffffff
www.colorpicker.com
selain background warna, body juga bisa diberikan background gambar...
caranya? Lihat di www.w3schools.com
#4 MEMFORMAT TEKS
DENGAN HTML
4/5
Heading untuk sesuatu yang lebih BESAR
Tulis kode berikut diantara
tag <body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
practices makes perfect!
mari coba tags berikut ini
try these!
<b>saya tebal</b>
<i>saya miring</i>
<u>saya garis bawah</u>
and these!
<font size="3" color="red">This is some
text!</font>
<font size="2" color="blue">This is some
text!</font>
<font face="verdana" color="green">This is
some text!</font>
#5 UTAK ATIK GAMBAR
DENGAN HTML
5/5
Cari gambar apapun, simpan di folder yang sama dengan file coba.html. Misal file gambar 'kucing.jpg'
Tulis kode berikut diantara
tag <body>
<img src="kucing.jpg" alt="kucing imut"
height="200" width="180">
tag <img>
mendefinisikan gambar dalam halaman web.
2 parameter yang wajib ada.... src & alt.
2 parameter yang wajib ada.... src & alt.
src mendefinisikan sumber gambar
gambar tidak masuk kedalam kode tapi dihubungkan (linked) ke dalam
halaman web.
tag <img> hanya memberikan sebuah space, tempat untuk image tersebut dimunculkan.
2 parameter yang wajib ada.... src & alt.
alt mendefinisikan apa yang ditampilkan jika gambar gagal dimuat
misal gambar kucing tadi kehapus...
further references : http://www.w3schools.com
next session
HTML Link
HTML Table
HTML Paragraph
CSS
top related