Chapter 2

22/03/2011
Hypertext
Tags & elements
Text formatting
Lists, hyperlinks, images
Tables, frames
Form
Banyaktoolspendukungpengembanganweb,
contoh:MicrosoftFrontPage,NetscapeComposer,
Adobe PageMill,MacromediaDreamWeaver,
HotDog dll
HotDog,dll
MengapaperlumempelajaricodeHTMLdasar?
Oleh:FiftinNoviyanto,S.T.,M.Cs.
HyperText Markup Language (HTML) adalah bahasa yang

digunakan untuk membuat dokumen dan menampilkannya di
web.
hypertext referstothefactthatWebpagesaremorethanjusttext
cancontainmultimedia,providelinksforjumpingwithin&without
markup referstothefactthatitworksbyaugmentingtextwithspecialsymbols(tags)
thatidentifystructureandcontenttype
h id if
d
HTML adalah standar yang berkembang (sebagai teknologi baru)
HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia

in 1993, Mosaic added many new features (e.g., integrated images)
HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late
in 1994-96, Netscape & IE added many new, divergent features
HTML 3.2 (W3C, 1996): attempted to unify into a single standard

but didn't address newer technologies like Java applets & streaming video
may want low-level control

may care about size/readability of pages
may want to "steal" page components and integrate into existing
pages
may want dynamic features such as scripts or applets
HTML 4.0 (W3C, 1997): current standard

attempted to map out future directions for HTML, not just react to vendors
XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards
HTMLmerupakansekumpulantagyang
mengidentifikasikanstructuredancontent
tagsareenclosedin< >
<img
img src
src="image.gif"
image.gif /
/> specifiesanimage
mosttagscomeinpairs,markingabeginningand
ending
<title> and</title> enclosethetitleofapage
HTMLelementadalahpasangantag
<title>My Home Page</title> is a TITLE element

<b>This text appears bold.</b> is a BOLD element
<p>Part of this text is <b>bold</b>.</p>
is a PARAGRAPH element that contains a BOLD element
HTMLmemiliki2elemenutama
HEADcontainssetupinformationforthebrowser&theWebpage
e.g.,thetitleforthebrowserwindow,styledefinitions,JavaScriptcode,
BODYcontainstheactualcontenttobedisplayedintheWebpage
<html>
<! Matakuliah Pemrograman Web -->
<! Chapter # 2 -->
HTML documents begin and end with <html>

and </html>tags
<head>
<title>Title for Page</title>
</head>
Comments appear between 
<body>
Text that appears in the page
</body>
</head>
</html>
HEAD section enclosed between <head> and

BODY section enclosed between <body> and
</body>
22/03/2011
<html>
<head>
<title>Text Layout</title>
</head>
<body>
<p>
This is a paragraph of text<br/>
made up of two lines.
lines
</p>
<p>
This is another paragraph with a
GAP between
some of the words.
</p>
Beberapabagiandikelolaolehbrowser
Untuksetiapurutanspasimenunjukkan
saturuang
Browsersecaraotomatismenyesuaikan
ukuranwindow
Canoverridesometextlayout
<br/> taguntukmembuatbarisbaru
(tanpapenutuptag)
<p></p> Taguntukmembuatparagraf
baru
Taguntukmembuatspasi
kosong
Digunakanuntukmembuatheading:judulmaupunsubjudul
canspecifyheadingsfor
<html>
<head>
<title>Blocks of Text</title>
</head>
paragraphsorblocksoftext
<h1></h1> tagsproducealarge,
<h2></h2> tagsproduceaslightly
d li h l
<h2>Subheading</h2>
<p> Here is some subtext.</p>
smallerheading
<h6></h6> tagsproduceatiny
heading
caninsertahorizontalruleto
<hr/>
dividesections
<h1>Major heading 2</h1>

<p>
Here is some more text.
</p>
</body>
<p>
This paragraph is<br/>
indented on the first line<br/>
but not on subsequent lines.
</p>
</body>
</html>
boldheading
<body>
<h1>Major heading 1</h1>
<p> Here is some text.</p>
<hr/> drawslineacrosswindow
<hr width="50%" />
<hr size=10 />
setswidth
setsthickness
</html>
canspecifyhow
elementsshouldbe
aligned(defaultis
leftjustified)
<html>
<head>
<title>Text Alignment</title>
</head>
<body>
<h1 style="text-align:center">Centered
Heading</h1>
<p>
< >
Here is some left-justified text
(which is the default in HTML).
</p>
utilizeSTYLE
attributeoftag
tojustifymorethan
<p style="text-align:center">
Here is some centered text.
</p>
oneelementasa
group,useDIVtags
<div style="text-align:right">
<h2>Right-justified Heading</h2>
<p>Here is some right-justified text.</p>
</div>
</body>
ellelements
enclosedinDIVare
formattedsimilarly
canspecifystylesforfonts
<html>
<head>
<title>Text Styles</title>
</head>
<b> </b> specifybold

<i> </i> specifyitalics
<tt> </tt> specifytypewriter
<big> </big>
<body>
<p>
Text can be emphasized using
<b>bold</b>, <i>italics</i>, or even
<big>resizing</big>. <br/>
The typewriter font is good for
displaying code:
<tt>sum = sum + i;</tt> <br />
And remember: <span style="color:red">
<small>2<sup>10</sup></small> =
1024</span>
</p>
</body>
like(fixedwidth)font
thefont
h f
sizeofthefont
</html>
increasethesizeof
<small> </small>
<sub> </sub>
<sup> </sup>
decreasethe
specifyasubscript
asuperscript
<p style="color:red"></p>
paragraphs
for
<span style="color:blue">
</span> forinlinetext
Note:ifelementsarenested,theorderof
opening/closingisimportant!(LIFO)
</html>
<html>
<head>
<title>More Text Grouping</title>
</head>
<body>
<p>
<tt><pre>
for (i = 0; i < 10; i++) {
sum = sum + i;
}
</pre></tt>
</p>
<p>
Eagleson's Law states that:
<blockquote>
looked at for six or more months
might as well have been written by
someone else.
</blockquote>
</p>
</body>
</html>
<pre></pre> specifytextthatistobe
displayedasis(linebreaksandspacing
arepreserved)
usefulforcodeorwheneveryouwant
f
p f
y
texttofitaspecificlayout
<blockquote></blockquote>
specifytextthatistobeindentedonboth
margins
usefulforquotationsorforindentingtext
insubsections
<html>
<head>
<title>Simple Lists</title>
</head>
Thereare3differenttypesoflistelements
<ol></ol> specifiesanorderedlist
<body>
<p>
<ol>
<li>First thing.
<li>Second thing.
<li>Third thing.
</ol>
</p>
<p>
<dl>
<dt>HTML
<dd>HyperText Markup Language
<dt>HTTP
<dd>HyperText Transfer Protocol
</dl>
</p>
</body>
</html>
(usingnumbersorletterstolabeleach
listitem)
<li>
<li> identifieseachlistitem
cansettypeofordering,startindex
<ul></ul> specifiesunorderedlist
(usingabulletforeach)
<li> identifieseachlistitem
<dl></dl> specifiesadefinitionlist
<dt> identifieseachterm
<dd> identifiesitsdefinition
22/03/2011
Spring,2004,WebProgramming
Wendywillard(2006). HTML. ISBN 9790072263787.
Davidwillard(2005). CrashCourse. ISBN 0071422420.
Andi(2001). DesainWebdenganMicrosoftFrontPage97.
W h
WahanaKomputer&Andi
K
&A diYogyakarta.
k
ISBN 9795335219.
Shellywoods(2001). IntroductoryConceptsandTechniques.
Gexpublisingservice. ISBN 978142927206.
StevenE.Callihan(2006). HTML4inaWeekend.
USA. ISBN 1592000592.
Buatlahhalamanwebsederhana
Gambarsketsawebyangakandibuat
GunakansebanyakmungkintagHTML

Chapter 2

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Chapter 2

Încărcat de

Drepturi de autor:

Formate disponibile

22/03/2011

HyperText Markup Language (HTML) adalah bahasa yang

HTML adalah standar yang berkembang (sebagai teknologi baru)

HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia

HTML 3.2 (W3C, 1996): attempted to unify into a single standard

may want low-level control

may want dynamic features such as scripts or applets

HTML 4.0 (W3C, 1997): current standard

<title> and</title> enclosethetitleofapage

<title>My Home Page</title> is a TITLE element

HTML documents begin and end with <html>

Comments appear between

HEAD section enclosed between <head> and

<h1>Major heading 2</h1>

<hr width="50%" />

<hr size=10 />

<b> </b> specifybold

S-ar putea să vă placă și