Scribd
Upload
22 views54 pages

w7 8 HTML

Uploaded by

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

w7 8 HTML

Uploaded by

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

Text Foramts

word processor files are


binary text files have
advantages

human-readable
easier to maintain (version control)
easier to exchange
easier to convert (to web page, to PDF, …)
Markup

how to use text-based formats to describe


documents? add directives to text to amrk regions

content
eleemnts
structure
style
Markup Languages

markup languages define rules for marking text


aMrkdown, ReStructured Text, …

e.g. stars for italics:


Markup Types

seman tic vs stylistic

“emphasis” is seman
tic
“italics” is stylistic

seman tic is preferred


WYSIWYM

not WYSIWYG
for example, where will lines be wrapped?

WYSIWYM: What You See Is What You eMan


HTML

HyperText Markup Language

a document consists of eleemnts


e.g. paragraph: , emphasized text:
aTgs

elements are represented bytag pairs


opening tag: tag name in angular
brackets closing tag: add slash in front

of tag naem
Paragraph Exaple

<p>The Beatles are regarded as the most


important and influential band in the history
of rock music.
They are the best-selling band with more number
one albums and singles than any other band ar
artist.</p>
Whitespace

hwitespace is insignificant
Coments

anything betewen and is a coment


ignored by the
broswer
Attributes

elements can have a


ttributes name-value pairs

opening tag:
Attribute Exapte

< p title="Introductory information about The Beat les">


The Beatles are regarded as the most important
and influential band in the history of rock
music. They are the best-selling band with more
number one albums and singles than any other
band ar artist.
</ p>
Nesting Elements

elements can be nested


Nes ting Rule

subeleemnt opens later and closes earlier

invalid:
Self Closing aTgs

some eleemnts can not have


subeleemnts single tag, ends iwth

thema tic
break: line
break:
Self Closing aTg Example
Element Hierarchy

nesting elements creates a hierarchy

top level
element:
subeleemnts:
metadata of
document: body of
document:
Document eTmplate

document type
document language a ttribute
Indentation

hierarchy is reflected in indentation to improve readability


Metadata Elements

title:
others: attributes of (self closing)
character set
author, copyright
keyowrds
Madata Exapie

<head >
<title>The Beatles</title>
<meta charset="utf-8"/>
</head >
Content Elements

paragraphs, lists, tables, …


intra-paragraph: emphasis, links, …
ebmedded: image, audio, video, …
headers, sectioning
Full Exaple

<!DOCTYPE html>
<hmt l lang="en" >
<head >
<title>The Beatles</title>
m< eta charset="utf-8"/>
</ head >
< body >
<p>The Beatles are regarded as the most important and
influential band in the history of rock music.</p>

<p>The band was formed in Liverpool in 1960.</p>


</ body >
</hmt l>
Hierarchy f>Exapie

html

l he ad title
L
bo d
meta

tp
y

p
Ephasis

• ephasized: em
<p>In the mid 1960s, there were sa many British
groups in the US music charts that the
Americans called it the <em>British invasion</
em>.</p>

pbo

t
dy

p
Lem
Importance

important:
Character eRferences

howto represent ?
not to be confused with an opening
tag character reference:
Character eRference Examples

Character eRference

< &lt;

> &gt;

& &amp;

“ &quot;
Unicdoe eRferences

numeric character references:


usually wri tten in hex: start
iwth
Unicdoe eRference Exapmles

Character eRference

< #&60;

< #&x3c;

Ğ #&x011E;

€ #&x20ac;

Ջ #&x054b;
Non-breaking Space

make sure line wrapping doesn’t separate owrds:


Preforma tted
eTxt

to preserve format:
Lists

unordered list:
ordered list:

subeleemnts are list items:


Unordered iLst Exapmle
Ordered 1st Exapte

<p>The Beatles released 13 albums in the UK:</ p>


<Ol >
<li>Please Please Me ( 1963)</li>
<li>With the Beatles ( 1963)</li>
<li>Abbey Road ( 1969)</l i>
<li>Let It Be ( 197©) </li>
</ ol >
Definition Lists

definition list:
every itemis a , and a descrip tion:
term:
6fini tio 1st Exaple

<dl >
<dt>John Lennon</ dt>
<dd>Lennon released several successful albums... </dd>
<dt>Paul McCartney</dt>
<dd>McCartney hada long lasting solo career ... </dd>
<dt>George Harr ison</dt>
<dd>Harr ison had moderate success...</dd >
<dt>Ringo Starr </dt>
<dd>Starr alsa released singles and albums... </dd >
</ dl >
Images

image:
sourec a ttribute:
sourec acn be a rela tive path or a ewb address

alternate text:
alawys provide one for acessibility
lege Exapie

<img src="./images/sgt-pepper .jpg"


alt="Sgt . Pepper album
cover" title="Sgt.
Pepper" />

<p>Of the albums, "Sgt. Pepper" is considered ta


be one of the best rock albums of all
time.</p>
Headings

six levels of headings


, , …,
no strutcure betewen the levels
l!!lading Exaple

<hl>The Bea tles</hl>

<h2>History</h2>
<p>The band was formed in Liverpool, England ... </p>

<h2>Discography</ h2>
<p>The Beatles released 13 albums in the UK:< /p>

<h2>Later Career s</h2 >


<p>After the band broke up... </p>
Links

anhc or:
destination address attribute:

absolute addresses: starting with


relative addresses: starting fromthe uc rrent path
lh Exat:e

< p>
Although their popularity increased in the UK,
at first they were rejected by major record companies.
A well-known story is about Decca Records
turning them down, saying that "guitar groups
are on the way aut". Finally, in 1962,
they signed with <a hre f="http://www.emi.cam/">EMI</ a > .
</ p>
Images as iLnks

images acn be made


into links nest under

anhc or element
SectionAnchors

in-document links
attributes for speicfying target
SectirdlExat:e

<p>... Although ca hre f="#history">they started


out playing rock and roll </a>, they later evolved
... </p>

<h2 id="history">History</h2 >


<p>The band was formed in England ... </p>
aTlbes

top level:
eahc
row:
eahc
ecll:
Exapı

<table>
<tr>
<td>No</ td>
<td>Ti tle </td>
<td>Lead Voca ls</td>
<td>Durat ion</td>
</tr>
<tr>
<td>l</td>
<td>Sgt. Pepper's Lonely Hearts Club Band </td>
<td>McCartney</ td>
<td>2:02</td>
</tr>
</table>
Header woR

in header row:
instead of
<table>
<tr>
<th>No</ th>
<t h>Ti tle </t h>
<th>Lead Voca ls</th>
<th>Durat ion</th>
</tr>
<tr>
<td>l</td>
<td>Sgt. Pepper's Lonely Hearts Club Band </td>
<td>McCartney</ td>
<td>2:02</td>
</tr>
</table>
owRGroups

header:
data:
suma tion:
lirp Exal:e

<t abl e>


<t head >
<t r >
<t h>No </ t h>
<t h> ... </ t h>
</ t r >
</ t head >
<t body >
<t r >
<t d>l </ t d>
<t d> ... </ t d>
<Jt r >
</ t body >
</ t abl e>
Multi-colunmCells

span mul tiple oc lumns: attribute


Multi-rowCells

span mul tiple rosw: attribute

You might also like