Pengenalan web minggu kedua

Pemrograman Web (Teori)
HTML

Wawan Darmawan, S.Kom
darmawan.wawan@gmail.com

STMIK MUHAMMADIYAH JAKARTA - 2012

Pengantar
• Dewasa ini, hampir semua dokumen web dibuat dengan
bahasa HTML (Hypertext Mark-up Language). Meskipun
anda bisa saja membuat web page (halaman web) tanpa
mengerti sedikitpun HTML, yakni dengan menggunakan
editor HTML berjenis WYSIWYG seperti Microsoft
FrontPage, Dreamweaver, Adobe PageMill atau Netscape
Composer, namun sangat disarankan bahkan nyaris
diharuskan, agar anda mengerti bahasa HTML. Terutama
agar anda bisa memanfaatkan secara optimal berbagai
fasilitas browser dan mengingat sejumlah kelemahan yang
terdapat pada editor WYSIWYG seperti di atas.
• Untuk itu langkah pertama bagi Anda yang bercita-cita
memiliki website sendiri adalah belajar HTML.


Apa itu HTML
• HTML (Hypertext Markup Language) adalah bahasa
program yang digunakan untuk menulis format
dokumen yang dapat digunakan dalam Web.
• Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-
mark-up) dengan kode-kode tertentu yang disebut tag
untuk menjadi dokumen HTML (file *.htm atau
*.html).
• Oleh karena itu, untuk membuat dokumen HTML, anda
bisa menggunakan semua program teks editor biasa,
mulai dari Notepad hingga MS Word.


• HTTP (hypertext transfer protocol) merupakan protokol
yang digunakan untuk mentransfer data antara web
server ke web browser. Protokol ini mentransfer
dokumen-dokumen web yang ditulis atau berformat
HTML (hypertext markup language).
• Dikatakan markup language karena HTML berfungsi
untuk memformat file dokumen teks biasa untuk bisa
ditampilkan pada web browser sesuai keinginan. Hal
tersebut dapat dilakukan dengan menambah elemen
atau sering disebut sebagai tag-tag


Mengenal TAG
• Tag awal HTML
<HTML>
<BODY>
</BODY>
</HTML>

•Isi dari dokumen HTML yang sesungguhnya
adalah yang ditulis diantara tag <BODY>.


• Warna pada HTML
- Perlu diketahui bahwa penentuan warna pada
HTML bisa dengan nama warna (dalam bahasa
Inggris) dan bisa pula dengan kode warna. Kode
warna ditulis dalam format heksa #rrggbb. Berikut
ini adalah 16 nama warna beserta kodenya dalam
format heksa (harap diingat bahwa tulisan 0
adalah angka nol


Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Aquamarine #70DB93
Chocolate #5C3317
Violet #9F5F9F
Brass #B5A642
Copper #B87333
Pink #FF6EC7
Orange #FF7F00
<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>

Tulisan ini akan tampak dalam browser


• Heading, Paragraph dan Break
- Tag heading <hx> berfungsi untuk memformat heading ( judul dan sub-judul )
dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk
setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari
<h1> sampai <h6>.
- Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraph
dalam halaman web anda. Dalam elemen paragraph terdapat atribut : align =
[left | center | right] yang berfungsi sebagai pengaturan perataan paragraph,
jadi cukup pilih salah satu dari ketiga pilihan tanpa diberi kurung buka dan
tutup, sebagai default-nya adalah left. Anda dapat memilih perataan kiri,
tengah atau kanan.
- Tag paragraph <br> berfungsi untuk memberikan baris baru suatu paragrap
dalam halaman web anda. Tag Break tidak memerlukan tag penutup break.
- Tag Horisontal Ruler <hr> berfungsi untuk menampilkan garis horizontal di
dalam halaman web anda. Tag Horisontal Ruler tidak memerlukan elemen
penutup </hr>. (standarisasi terbaru, semua tag pembuka memakai tag
penutup).


<HTML>
<BODY>
<H1>Header level 1</H1> Header level 1
<H2>Header level 2</H2> Header level 2 <HTML>
<H3>Header level 3</H3> Header level 3 <BODY>
<H4>Header level 4</H4> Header level 4 Baris pertama
<H5>Header level 5</H5> Header level 5 <BR>Baris kedua
<H6>Header level 6</H6> Header level 6 <BR>Baris ketiga
</BODY> </BODY>
</HTML> </HTML>

Baris pertama
Baris kedua
Baris ketiga


• Font pada HTML
- Untuk memodifikasi font digunakan tag <font> </font>
- Atribut untuk font yaitu:
• color=“#FF0000”
• size=“7”
• face=“verdana, arial”
• Image pada HTML
- Menggunakan <image src=“x.jpg”>
- Memiliki atribut antara lain :
- src→lokasi gambar yang akan ditampilkan
- width→ukuran lebar gambar
- height→ukuran tinggi gambar
- alt→deskripsi tentang gambar
- title→judul gambar


<html>
<head>
<title>Minggu 5</title>
</head>
<body>
<p align="right">
<font size="5" color="green" face="Verdana, Arial">
Tulisan ini berwarna hijau,
berukuran 7, dan jenisnya Verdana
</font>
</p>
<p align="center">
<font size="5" color="red" face="Courier, Arial">
Tulisan ini berwarna hijau,
berukuran 7, dan jenisnya Verdana
</font>
</p>
<p align="left">
Paragraf Rata kiri
</p>
<img src="Sunset.jpg"
width="150"
height="115"
align="middle"
hspace="200" vspace="50"
alt="gambar" border="10">
Jarak bagian kanan<BR>
Jarak bagian bawah<BR>
</body>
</html>


HTML 5


What’s New???
• Semantic elements: header, footer, section,
articles, etc
• Canvas (for drawing)

• Local storage

• Audio & Video Elements


Pengenalan web minggu kedua

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (17)

Destaque

Destaque (7)

Semelhante a Pengenalan web minggu kedua

Semelhante a Pengenalan web minggu kedua (20)

Pengenalan web minggu kedua