Dasar HTML

DASAR HTML
Akronim
 HTTP (Hyper Text Transport Protokol) : protokol
komunikasi (pada layer aplikasi TCP/IP) yang mengatur
transfer file-file web (teks dan image).
 URL (Uniform Resource Location) : alamat yang
digunakan untuk menunjuk situs web.
 HTML (Hyper Text Markup Language) : bahasa standar
untuk membuat tampilan web
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)
 Aplikasi pembangun html : MS-FrontPage,
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, Netscape,
Opera, Mosaic, dll
Dasar HTML 4
HTML
 Hypertext: kata atau frase yang menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada
kata atau frase untuk mengikuti link ini maka web browser akan
memindahkan tampilan pada bagian lain dari naskah atau dokumen
yang kita tuju.
 Markup: file HTML berisi suatu instruksi tertentu yang dapat
memberikan suatu format pada dokumen yang akan ditampilkan
pada browser.
 Language: Meski HTML bukan merupakan bahasa pemrograman,
HTML merupakan kumpulan dari beberapa instruksi yang dapat
digunakan untuk mengubah-ubah format suatu naskah atau
dokumen.
Dasar HTML 5
Anatomy of a Tag
 Keyword: Nama Tag
 e.g., the keyword of the <I> tag is ‘I’
 Type: container or standalone
 container: turn an effect on/off
e.g. <I>italic text</I>
 standalone: a single element
e.g. <IMG SRC=“pic.gif”>
 Function: menjelaskan elemen / efek
Dasar HTML 6
Attributes
 Definisi konten
<IMG SRC=“pic.gif”>
 Modifikasi efek
<IMG SRC=“pic.gif” ALIGN=LEFT>
 User-defined values
 Character, strings, integers, etc.
Dasar HTML 7
Outline Dasar HTML
 Struktur HTML
 Format Teks
 Hyperlink
 List
 Insert Gambar
 Tabel
Dasar HTML 8
TAG utk Struktur Dokumen
 <HTML>,
 <HEAD>,
 <BODY>
 <BASE>, <META>, <LINK>, <SCRIPT>, <STYLE>,
<TITLE>
Dasar HTML 9
HTML Skeleton
<HTML>
<HEAD>
<TITLE>Judul Web</TITLE>
</HEAD>
<BODY>
Teks (isi web) + script / coding diletakkan disini
didalam tag body
</BODY>
</HTML>
Dasar HTML 10
Tag: <HTML>
 Type: container
 Function: declares document to be HTML; all
content contained inside
 Syntax: <HTML>…</HTML>
 Attributes: none
Dasar HTML 11
Tag: <HEAD>
 Type: container
 Function: contains tags comprising the
document head
 Syntax: <HEAD>…</HEAD>
 Related Tags: <BASE>, <LINK>, <META>,
<SCRIPT>, <STYLE>, <TITLE>
Dasar HTML 12
Tag: <BASE>
 Type: standalone
 Function: set global HREF, TARGET
 HREF used when computing relative URL
references
 TARGET used when computing frame references
for linked documents
 Syntax:
<BASE HREF=“base_URL”>
<BASE TARGET=“frame_name”>
Dasar HTML 13
Tag: <BASE>
 Attributes
 only one attribute per tag instance
 two tags to set defaults for both HREF & TARGET
Dasar HTML 14
Tag: <BASE>
 Example
<HEAD>
<BASE HREF=“http://mysite/”>
<BASE TARGET=“bigframe”>
</HEAD>
<BODY>
<A HREF=“mypage.html”>
</BODY>
Dasar HTML 15
Tag: <BASE>
 Equivalent to:
<HEAD>
</HEAD>
<BODY>
<A TARGET=“bigframe” HREF=
“http://mysite/mypage.html”>
</BODY>
Dasar HTML 16
Tag: <META>
 Function:
 declares document meta-information: keywords,
expiration date, author, page generator, etc.
 also used to implement client pull (dynamic update
after a delay)
Dasar HTML 17
Tag: <META>
 Attributes:
 HTTP-EQUIV - specify type of HTTP header to send
with the document; commonly REFRESH or
EXPIRES
 NAME - specifies the document meta-variable you
wish to specify: AUTHOR, KEYWORDS,
GENERATOR, DESCRIPTION
Dasar HTML 18
Example Meta Tag
<head>
<title>My page title</title>
<META HTTP-EQUIV="REFRESH" CONTENT="X;
URL=newpage_or_URL.html">
</head>
Dasar HTML 19
Tag: <SCRIPT>
 Type: container
 Function: contains script code referenced in
the <BODY>
 Syntax:
<SCRIPT LANGUAGE=“name”>… </SCRIPT>
Dasar HTML 20
Tag: <SCRIPT>
 Attributes:
 LANGUAGE - what scripting language
SRC - URL of (remote) script code
 TYPE - of script code
text/javascript
Dasar HTML 21
Tag: <TITLE>
 Type: container
 Function: give the document a descriptive title
(used in history list, title bar, bookmarks, etc.
 Syntax: <TITLE>… </TITLE>
 Example:
<TITLE>Web Site Tips</TITLE>
Dasar HTML 22
Tag: <BODY>
 Type: container
 Function: contains all text and tags inside the
document
 Syntax:
<BODY BGCOLOR=“color”
BACKGROUND=“image” LINK=“link_color”
ALINK=“active_link_color”
VLINK=“visited_link_color”
TEXT=“text_color”> isi halaman web
</BODY>
Dasar HTML 23
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 24
Tag: <BODY>
 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 25
Tag: <BASEFONT>
 Function: set default size, color, typeface for
<BODY>
 Syntax:
<BASEFONT SIZE=“size” COLOR=“color”
FACE=“list_typefaces”>
Dasar HTML 26
Tag: <BASEFONT>
 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 27
Tag: <BASEFONT>
 Example
<BASEFONT SIZE=5 COLOR=“navy”
FACE=“Arial,Helvetica”>
Dasar HTML 28
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 29
Tag: <FONT>
 Type: container
 Function: modify font properties of the
contained text
 Syntax:
<FONT SIZE=“size” COLOR=“color”
FACE=“list_typefaces”>… </FONT>
Dasar HTML 30
Tag: <FONT>
 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
<FONT SIZE=“+1” COLOR=“red”>
Warning!</FONT>
Dasar HTML 31
Text Flow Tags
 <BR> (Line Break; untuk pindah ke baris berikut)
 <P> (Plain Paragraph; ganti paragraph-sama dengan 2
line break)
 <BR><BR>
 <HR> (Horizontal Line Rule)
 <BLOCK QUOTE>…</BLOCK QUOTE>
(Used to indent long quotations)
Dasar HTML 32
Character Formatting Tags
 <B>…</B> (Bold)
 <I>…</I> (Italic)
 <EM>…</EM> (Emphasis, usually italic)
 <STRONG>…</STRONG>
(Strong Emphasis; usually bold)
 <BLINK>…</BLINK>
 (Blinking text. Very Annoying. Only works in Netscape
Navigator)
Dasar HTML 33
Character Formatting Tags
 <BIG>Bigger Text</BIG>
 <S>Stricken Text</S>
 <SMALL>Smaller Text</SMALL>
 <SUB>Subscript</SUB>
 <SUP>Superscript</SUB>
 <TT>Fixed-width Chars</TT>
 <U>Underlined Text</U>
Dasar HTML 34
Heading Tags
 <H1>Header 1<H1>= Header 1
 <H2>Header 2<H2> = Header 2
 …
 <H6>Header 6<H6> = Header 6
Dasar HTML 35
Phrase Formatting
 <ACRONYM>HTML</ACRONYM>
 <ADDRESS>email</ADDRESS>
 <CITE>citation</CITE>
 <CODE>Code Sample</CODE>
 <DEL>deleted text</DEL>
 <DFN>defining instance</DFN>
 <EM>Emphasized Text</EM>
Dasar HTML 36
Tag: <A> LINKS
 Type: container
 Function: define hyperlink
 Syntax:
<A HREF=“about.htm”
TARGET=“_blank”>ABOUT ME</A>
Dasar HTML 37
Tag: <A>
 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 38
Tag: <A>
 <A HREF=“URL”>…</A> (Creates a link to a web
page)
 <A HREF=“#label name”>…</A>
(Creates a link to a target in the current document)
 <A NAME=“label name”>…</A>
(Defines the target to which you are linking)
Dasar HTML 39
Contoh:
 <a href=”page2.html”>Company Profile
</a>
 <a href=”http://www.google.com”>
Google</a>
Dasar HTML 40
Lists
 ordered lists (automatically numbered)
 unordered lists (bullet points)
Dasar HTML 41
Ordered Lists
displayed as:
Outline<BR> Outline
<OL> 1. Introduction
<LI>Introduction 2. Body
<LI>Body 3. Conclusion
<LI>Conclusion 4. Endnotes
<LI>Endnotes
</OL>
Dasar HTML 42
Unordered Lists
Types of Lists<BR> displayed as:

<UL> Types of Lists
<LI>ordered lists • ordered lists
<LI>unordered lists • unordered lists
<LI>definition lists • definition lists
</UL>
Dasar HTML 43
Insert Images Tag: IMG
 Function: insert image
 Syntax:
<IMG SRC=“logo.gif” ALT=“Logo”>
 Attribut:
 SRC: nama file gambar
 ALT: text yang akan muncul ketika mouse over
gambar atau jika browser tidak support image
Dasar HTML 44
Tables
 Untuk membuat tabel, dapat juga digunakan untuk membuat
layout halaman web
<table>
<th>Header</th>
<tr>
<td>Column 1</td>
<td>Column 2</td>
…
…
<td>Column n</td>
</tr>
</table>
Dasar HTML 45
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 46
Comments
 comments may be added to an HTML file to
inform those who would modify or maintain
the pages
example:

Dasar HTML 47
Next Week
 Table
 Cascading Style Sheet
Dasar HTML 48
Tugas
 Membuat web pribadi, 5 halaman:
 Index (depan)
 About Me (Data Pribadi)
 My Favorite (Hobby)
 My Special Links
 Dampak Internet
 Syarat: Gunakan hanya pengolah teks (Notepad)!

 Tanpa tabel, boleh ada image dan background, gunakan sebanyak
mungkin tag dasar yang ada
 Send ke Email
Dasar HTML 49

Dasar HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Dasar HTML

Caricato da

Copyright:

Formati disponibili

DASAR HTML

Types of Lists<BR> displayed as:

 Syarat: Gunakan hanya pengolah teks (Notepad)!

Potrebbero piacerti anche