Pemrograman Web DASAR HTML
HTML Dasar • HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. • Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad.
Dasar HTML
2
HTML: HyperText Markup Language • •
•
•
Halaman Web ditulis dalam format HTML HTML adalah plain text yang berisi: • Tag-tag HTML • Teks isi web Plain text dapat dibuat dengan : • Notepad, WordPad (Windows 95/98), Simple Text (Macintosh), Vi or pico (UNIX) HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web): MSFrontPage, Macromedia Dreamweaver, EditPlus, Adobe GoLive, dll
Dasar HTML
3
HTML: HyperText Markup Language • • • •
File html hanya berisi teks, tetapi dapat disisipkan tag untuk (memanggil) image, sound, animasi, objek ActiveX, dll File-file (image, animasi, dll) tersebut berdiri sendiri dan harus diupload ke server bersama file html-nya Script dapat disisipkan pada halaman web untuk memberikan kemampuan programming pada halaman web File html dibuka/dilihat dengan aplikasi interner browser. Misalnya: MS Internet Explorer, Google Crome, Opera, Mosaic, dll Dasar HTML
4
HTML Sederhana <TITLE>Judul Web Hello Word !! Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk melihat hasilnya, double click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi supaya sama, maka sebaiknya digunakan ekstensi .html.
Dasar HTML
5
Tag: <TITLE> • Type: container • Function: give the document a descriptive title (used in history list, title bar, bookmarks, etc. • Syntax: <TITLE>… • Attributes: none • Example: <TITLE>Web Site Tips Dasar HTML
6
Tag: • • •
Type: container Function: contains all text and tags inside the document Syntax: isi halaman web Dasar HTML 7
Colors • Color attributes can be: • one of the 16 reserved color names: BLACK, WHITE, AQUA, SILVER, GRAY, MAROON, RED, PURPLE, FUSCHIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL • specified by an RBG hexadecimal triplet: e.g., #FFFFFF (white)
Dasar HTML
8
Tag: • Attributes: • ALINK - link color when clicked • BACKGROUND - URL of an image to use (will be tiled to fit) • BGCOLOR - background color • LINK - link color (unvisited) • TEXT - default text color • VLINK - link color (visited)
Dasar HTML
9
Tag:
• Type: standalone • Function: set default size, color, typeface for • Syntax:
Dasar HTML
10
Tag:
• Attributes: • COLOR - one of 16 reserved names or an RGB hexadecimal triplet • FACE - list of typefaces (uses first available) • SIZE - integer value from 1 to 7 (default is 3); mapped to point size by browser according to user preferences
Dasar HTML
11
Tag:
• Example
Dasar HTML
12
Format Teks • Font: jenis font dan ukuran huruf • Formatting Karakter: • Huruf tebal, cetak miring, underline,
• Text Flow: Ganti baris, ganti paragraph, garis horisontal • Heading: judul, sub judul • Formatting Frasa
Dasar HTML
13
Tag:
• Type: container • Function: modify font properties of the contained text • Syntax: …
Dasar HTML
14
Tag: •
Attributes: • • •
•
COLOR - one of 16 reserved names or an RGB hexadecimal triplet FACE - list of typefaces (uses first available) SIZE - integer value from 1 to 7; or increment / decrement relative to base font
Example Warning!
Dasar HTML
15
Text Flow Tags • •
(Line Break; untuk pindah ke baris berikut) (Plain Paragraph; ganti paragraphsama dengan 2 line break) •
• •
(Horizontal Line Rule) … (Used to indent long quotations)
Dasar HTML
16
Character Formatting Tags • • • •
… (Bold) … (Italic) <EM>… (Emphasis, usually italic) <STRONG>… (Strong Emphasis; usually bold)
• •
(Blinking text. Very Annoying. Only works in Netscape Navigator)
Dasar HTML
17
Character Formatting Tags • • • • • • •
Bigger Text <S>Stricken Text <SMALL>Smaller Text <SUB>Subscript <SUP>Superscript Fixed-width Chars Underlined Text Dasar HTML
18
Heading Tags • Header 1= Header 1 • Header 2 = Header 2 • … • Header 6 =
Dasar HTML
Header 6
19
Latihan Pertamaku
Paragraf ini akan rata kiri
Paragraf ini akan rata kiri
Paragraf ini akan rata kiri
br digunakan untuk ganti baris
Kalimat ini akan dicetak Bold
Kalimat ini akan dicetak Italic
Kalimat ini akan dicetak Bold dan Italic
Perintah hr digunakan untuk membuat garis
Tag: LINKS • Type: container • Function: define hyperlink • Syntax: ABOUT ME
Dasar HTML
22
Tag: • Attributes: • HREF – file or URL address for hyperlinks target • TARGET – target frame or page • • • •
_blank : open link file/url in new window _self : same frame _top : whole page _parent : parent frame
Dasar HTML
23
Contoh: • Company Profile • Google
Dasar HTML
24
Lists • ordered lists (automatically numbered) • unordered lists (bullet points)
Dasar HTML
25
Ordered Lists
Outline
- Introduction
- Body
- Conclusion
- Endnotes
Dasar HTML
displayed as: Outline 1. Introduction 2. Body 3. Conclusion 4. Endnotes
26
Unordered Lists
Types of Lists
- ordered lists
- unordered lists
- definition lists
Dasar HTML
displayed as: Types of Lists • ordered lists • unordered lists • definition lists
27
Insert Images Tag: IMG • Type: standalone • Function: insert image • Syntax: 
• Attribut: • SRC: nama file gambar • ALT: text yang akan muncul ketika mouse over gambar atau jika browser tidak support image Dasar HTML
28
Tables • • • • • •
Additional attributes of the tag are: Align to define where the table should go. Width = width of the table (either a number or %). Border to define if there would be a border. Cellspacing = distance between cells. Cellpadding = distance between edge of a cell and the cell contents.
Dasar HTML
29
Table •
Untuk membuat tabel, dapat juga digunakan untuk membuat layout halaman web Latihan Table Dasar HTML
30
Table … Latihan Table Dua
Comments • comments may be added to an HTML file to inform those who would modify or maintain the pages example:
Dasar HTML
32
<TITLE>Halaman pembuka Background Gambar
Tugas •
Membuat web pribadi, 2 halaman: • •
• • •
Home / Profile Berita Internet Terkini
Syarat: Gunakan hanya pengolah teks (Notepad)! Boleh dengan tabel, boleh ada image dan background, gunakan sebanyak mungkin tag dasar yang ada Send ke Email
Dasar HTML
34
HOME / PROFILE
“Slogan Here” Home Profile
Ucapan Selamat Datang + Foto Gambaran Ttg Web ini
Link Berita Internet Terkini
Nama Kelompok
Copyright © NIM All right reserved 2010
BERITA INTERNET TERKINI
“Slogan Here” Link Home Profile
Link Berita Internet Terkini
Ucapan Selamat Datang + Foto
Gambaran Ttg Web ini
Nama Kelompok
Copyright © NIM All right reserved 2010
