Scribd
Upload
46 views3 pages

Chapter 2

materi

Uploaded by

Sapik Bubud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views3 pages

Chapter 2

materi

Uploaded by

Sapik Bubud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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 <!-- and -->

<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
&nbsp; GAP &nbsp; between
some of the words.
</p>

Beberapabagiandikelolaolehbrowser

Untuksetiapurutanspasimenunjukkan
saturuang
Browsersecaraotomatismenyesuaikan
ukuranwindow
Canoverridesometextlayout

<br/> taguntukmembuatbarisbaru
(tanpapenutuptag)
<p></p> Taguntukmembuatparagraf
baru
&nbsp; 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>
&nbsp;&nbsp; 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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy