Samenvatting Van HTML Css Uit Boek

De HTML-code Wat zoek je als resultaat?
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web page is
displayed in the main browser window.</p>
</body>
</html>
<html> Commentaar toevoegen

<! NIET VERGETEN DE TAG TE SLUITEN>
</html>
<html>
<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
</html>
<html>
<p>
To create a paragraph, surround
the words that make up the
paragraph with an opening <p>
tag and closing </p> tag.
By default, a browser will show
each paragraph on a new line
with some space between it and
any subsequent paragraphs.
Paragraph s
p>A paragraph consists of one or more sentences
that form a self-contained unit of discourse. The
start of a paragraph is indicated by a new
line.</p>
<p>Text is easier to understand when it is split up
into units of text. For example, a book may have
chapters. Chapters can have subheadings. Under
each heading there will be one or more
paragraphs.</p>
</html>
<html>
<p>This is how we make a word appear <b>bold.</b>
</p>
<p>Inside a product description you might see some
<b>key features</b> in bold.</p>
</html>
<html>
<p>This is how we make a word appear <i>italic</i>.
</p>
<p>It's a potato <i>Solanum teberosum</i>.</p>
<p>Captain Cook sailed to Australia on the
<i>Endeavour</i>.</p>
</html>
<html>
<p>On the 4<sup>th</sup> of September you will learn
about E=MC<sup>2</sup>.</p>
<p>The amount of CO<sub>2</sub> in the atmosphere
grew by 2ppm in 2009<sub>1</sub>.</p>
</html>
<html>
<p>The moon is drifting away from Earth.</p>
<p>The moon is drifting away from Earth.</p>
<p>The moon is drifting away from
Earth.</p>
</html>
<html>
<p>The Earth<br />gets one hundred tons heavier
every day<br />due to falling space dust.</p>
</html>
<html>
<p>Venus is the only planet that rotates
clockwise.</p>
<hr />
<p>Jupiter is bigger than all the other planets
combined.</p>
</html>
<html>
<p><strong>Beware:</strong> Pickpockets operate in
this area.</p>
<p>This toy has many small pieces and is <strong>not
suitable for children under five years old.
</strong></p>
</html>
<html>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
</html>
<html>
<blockquote cite="http://en.wikipedia.org/wiki/
Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start
again?</p>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to
animals. Not many listen though. That's the
problem.</q></p>
</html>
<html>
<p><abbr title="Professor">Prof</abbr> Stephen
Hawking is a theoretical physicist and
cosmologist.</p>
<p><acronym title="National Aeronautics and Space
Administration">NASA</acronym> do some crazy
space stuff.</p>
</html>
<html>
<p><cite>A Brief History of Time</cite> by Stephen
Hawking has sold over ten million copies
worldwide.</p>
</html>
<html>
<p>A <dfn>black hole</dfn> is a region of space from
which nothing, not even light, can escape.</p>
</html>
<html>
<address>
<! Opmerking: DEFAULT APPS mag bij MAIL NIET
gelinked zijn aan “Google Chrome” maar een mail-
programma>
<p><a href="mailto:[email protected]">
[email protected]</a></p>
<p>742 Evergreen Terrace, Springfield.</p>
</address>
</html>
<html>
<p>It was the <del>worst</del> <ins>best</ins> idea
she had ever had.</p>
</html>
<html>
<p>Laptop computer:</p>
<p><s>Was $995</s></p>
<p>Now only $375</p>
</html>
<html> Oef
<head>
<title>Text</title>
</head>
<body>
<h1>The Story in the Book</h1>
<h2>Chapter 1</h2>
<p>Molly had been staring out of her window for about
an hour now. On her desk, lying between the copies
of <i>Nature</i>, <i>New Scientist</i>, and all
the other scientific journals her work had
appeared in, was a well thumbed copy of <cite>On
The Road</cite>. It had been Molly's favorite book
since college, and the longer she spent in these
four walls the more she felt she needed to be
free.</p>
<p>She had spent the last ten years in this room,
sitting under a poster with an Oscar Wilde quote
proclaiming that <q>Work is the refuge of
people who have nothing better to do</q>. Although
many considered her pioneering work, unraveling
the secrets of the llama <abbr
title="Deoxyribonucleic acid">DNA</abbr>, to be an
outstanding achievement, Molly <em>did</em> think
she had something better to do.</p>
</body>
</html>
<html>
<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20
minutes until tender</li>
<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk mixture</li>
</ol>
</html>
<html>
<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>
</ul>
</html>
<html>
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
<dt>Scale</dt>
<dd>A device used to accurately measure the
weight of ingredients</dd>
<dd>A technique by which the scales are removed
from the skin of a fish</dd>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)</dd>
</dl>
</html>
<html>
<ul>
<li>Mousses</li>
<li>Pastries
<ul>
<li>Croissant</li>
<li>Mille-feuille</li>
<li>Palmier</li>
<li>Profiterole</li>
</ul>
</li>
<li>Tarts</li>
</ul>
</html>
<html> Oef
<head>
<title>Lists</title>
</head>
<body>
<h1>Scrambled Eggs</h1>
<p>Eggs are one of my favourite foods. Here is a
recipe for deliciously rich scrambled eggs.</p>
<h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1tbs butter</li>
<li>2tbs cream</li>
</ul>
<h2>Method</h2>
<ol>
<li>Melt butter in a frying pan over a medium
heat</li>
<li>Gently mix the eggs and cream in a bowl</li>
<li>Once butter has melted add cream and eggs</li>
<li>Using a spatula fold the eggs from the edge of
the pan to the center every 20 seconds (as if
you are making an omelette)</li>
<li>When the eggs are still moist remove from the
heat (it will continue to cook on the plate
until served)</li>
</ol>
</body>
</html>
<html>
<p>Movie Reviews:
<ul>
<li><a href="http://www.empireonline.com">
Empire</a></li>
<li><a href="http://www.metacritic.com">
Metacritic</a></li>
<li><a href="http://www.rottentomatoes.com">
Rotten Tomatoes</a></li>
<li><a href="http://www.variety.com">
Variety</a></li>
</ul>
</p>
</html>
<html>
<!springen in je eigen webspace>
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</p>
</html>
<html>
<!structuur voorbeeld in je eigen webspace>
</html>
<html>
<!springen in je eigen webspace>
</html>
<html>
programma>
<a href="mailto:[email protected]">Email Jon</a>
</html>
<html>
<a href="http://www.imdb.com" target="_blank">
Internet Movie Database</a> (opens in new window)
</html>
<html> Springen in dezelfde webpagina
<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
<a href="#prologue">Prologue</a><br /><br />
<h2 id="arc_shot">Arc Shot</h2>
<p>A shot in which the subject is photographed by an
encircling or moving camera</p>
<h2 id="interlude">Interlude</h2>
<p>A brief, intervening film scene or sequence, not
specifically tied to the plot, that appears
within a film</p>
<h2 id="prologue">Prologue</h2>
<p>A speech, preface, introduction, or brief scene
preceding the the main action or plot of a film;
contrast to epilogue</p>
<p><a href="#top">Top</a></p>
</html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1 id="top">Film Folk</h1>
<h2>Festival Diary</h2>
programma>
<p>Here are some of the film festivals we
will be attending this year.<br />Please
<a href="mailto:[email protected]">
contact us</a> if you would like more
information.</p>
<h3>January</h3>
<p><a href="http://www.sundance.org">
Sundance Film Festival</a><br />
Park City, Utah, USA<br />
20 - 30 January 2011</p>
<h3>February</h3>
<p><a href="http://www.tropfest.com">
Tropfest</a><br />
Sydney, Australia<br />
20 February 2011</p>

<p><a href="about.html">About Film Folk</a></p>
<p><a href="#top">Top of page</a></p>
</body>
</html>
<html>
<img src="images/quokka.jpg" alt="A family of
quokka" title="The quokka is an Australian
marsupial that is similar in size to the
domestic cat." />
</html>
<html>
<! In pixels ! >
<img src="images/quokka.jpg" alt="A family of
quokka" width="600" height="450" />
</html>
<html>
<img src="images/bird.gif" alt="Bird" width="100"
height="100" />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic. Many species undertake
long distance annual migrations, and many more
perform shorter irregular journeys.</p>
<hr />
<p><img src="images/bird.gif" alt="Bird" width="100"
height="100" />There are around 10,000 living
species of birds that inhabit different
ecosystems from the Arctic to the Antarctic. Many
species undertake long distance annual
migrations, and many more perform shorter
irregular journeys.</p>
<hr />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic.<img
src="images/bird.gif" alt="Bird" width="100"
height="100" />Many species undertake long
distance annual migrations, and many more perform
shorter irregular journeys.</p>
</html>
<html>
height="100" align="left" />There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
<hr />
height="100" align="right" />There are around
</html>
<html>
height="100" align="top" />There are around
<hr />
height="100" align="middle" />There are around
<hr />
height="100" align="bottom" />There are around
</html>
<html>
<figure>
<img src="images/otters.jpg" alt="Photograph of
two sea otters floating in water">
<br />
<figcaption>Sea otters hold hands when they
sleep so they don't drift away from each
other.</figcaption>
</figure>
</html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>
<img src="images/logo.gif"
alt="From A to Zucchini" />
</h1>
<figure>
<img src="images/chocolate-islands.jpg"
alt="Chocolate Islands"
title="Chocolate Islands Individual Cakes" />
<p>
<figcaption>
This recipe for individual chocolate
cakes is so simple and so delectable!
</figcaption>
</p>
</figure>
<h4>More Recipes:</h4>
<p>
<img src="images/lemon-posset.jpg"
alt="Lemon Posset"
title="Lemon Posset Dessert" />
<img src="images/roasted-brussel-sprouts.jpg"
alt="Roasted Brussel Sprouts"
title="Roasted Brussel Sprouts Side Dish" />
<img src="images/zucchini-cake.jpg"
alt="Zucchini Cake"
title="Zucchini Cake No Frosting" />
</p>
</body>
</html>
<html>
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</html>
<html>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
</html>
<html>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
</html>
<html>
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
</html>
<html>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2nd January</th>
<td>285</td>
<td>48</td>
</tr>

<tr>
<th>31st January</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
</html>
<html>
<table width="400" cellpadding="10" cellspacing="5">
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th width="150">Balance</th>
</tr>
<tr>
<th>January</th>
<td>250.00</td>
<td>660.50</td>
<td>410.50</td>
</tr>
<tr>
<th>February</th>
<td>135.55</td>
<td>895.20</td>
<td>1170.15</td>
</tr>
</table>
</html>
<html>
<table border="2" bgcolor="#efefef">
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th width="150" bgcolor="#cccccc">Balance</th>
</tr>
<tr>
<th>January</th>
<td>250.00</td>
<td>660.50</td>
<td bgcolor="#cccccc">410.50</td>
</tr>
<tr>
<th>February</th>
<td>135.55</td>
<td>895.20</td>
<td bgcolor="#cccccc">1170.15</td>
</tr>
</table>
</html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th scope="col">Home starter hosting</th>
<th scope="col">Premium business hosting</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Disk space</th>
<td>250mb</td>
<td>1gb</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>5gb per month</td>
<td>50gb per month</td>
</tr>

</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">Sign up now and save 10%!</td>
</tr>
</tfoot>
</table>
</body>
</html>
<html>
<form action="http://www.example.com/subscribe.php"
method="get">
<p>This is where the form controls will appear.
</p>
</form>
</html>
<html>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
</form>
</html>
<html>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15"
maxlength="30" />
</p>
</form>
</html>
<html>
<form action="http://www.example.com/comments.php">
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter
your comments...</textarea>
</form>
</html>
<html>
<form action="http://www.example.com/profile.php">
<p>Please select your favorite genre:
<br />
<input type="radio" name="genre" value="rock"
checked="checked" /> Rock
<input type="radio" name="genre" value="pop" />
Pop
<input type="radio" name="genre" value="jazz" />
Jazz
</p>
</form>
</html>
<html>
<p>Please select your favorite music service(s):
<br />
<input type="checkbox" name="service"
value="itunes" checked="checked" /> iTunes
value="lastfm" /> Last.fm
value="spotify" /> Spotify
</p>
</form>
</html>
<html>
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
<! Zou dit werken als je van hieruit naar een -link- zou
springen? Nee en ook niet met -id*>
</html>
<html>
<p>Do you play any of the following instruments?
(You can select more than one option by holding
down control on a PC or command key on a Mac
while selecting different options.)</p>
<select name="instruments" size="3"
multiple="multiple">
<option value="guitar" selected="selected">
Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard"
selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
</html>
<html>
<form action="http://www.example.com/upload.php"
method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
</html>
<html>
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe"
value="Subscribe" />
</form>
</html>
<html>
<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg"
width="100" height="20" />
</form>
</html>
<html>
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add"
width="10" height="10" /> Add</button>
<input type="hidden" name="bookmark"
value="lyrics" />
</form>
</html>
<html>
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender"
value="m">
<label for="male">Male</label>
</html>
<html>
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
</html>
<html>
<form action="http://www.example.com/login/"
method="post">
<label for="username">Username:</label>
<input type="text" name="username"
required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password"
required="required" />
<input type="submit" value="Submit" />
</form>
</html>
<html>
<form action="http://www.example.com/bookings/"
method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
</form>
</html>
<html>
<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
</form>
</html>
<html>
<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
</form>
</html>
<html>
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>
</html>
<html>
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search"
placeholder="Enter keyword" />
<input type="submit" value="Search" />
</form>
</html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="http://www.example.com/review.php" method="get">
<fieldset>
<legend>
Your Details:
</legend>
<label>
Name:
<input type="text" name="name" size="30" maxlength="100">
</label>
<br />
<label>
Email:
<input type="email" name="email" size="30" maxlength="100">
</label>
<br />
</fieldset>
<br />
<fieldset>
<legend>
Your Review:
</legend>
<p>
<label for="hear-about">
How did you hear about us?
</label>
<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
</p>
<p>
<br />
<label>
<input type="radio" name="rating" value="yes" />
Yes
</label>
<label>
<input type="radio" name="rating" value="no" />
No
</label>
<label>
<input type="radio" name="rating" value="maybe" />
Maybe
</label>
</p>
<p>
<label for="comments">
Comments:
</label>
<br />
<textarea rows="4" cols="40" id="comments">
</textarea>
</p>
<label>
<input type="checkbox" name="subscribe" checked="checked" />
Sign me up for email updates
</label>
<br />
<input type="submit" value="Submit review" />
</fieldset>
</form>
</body>
</html>
<html>
<! Aanpassen website naar webbrower html-capaciteit>
<!DOCTYPE html>HTML 5
<!DOCTYPE html PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
<?xml version="1.0" ?> XML Declaration

</html>
<html>
<p>Water and air. So very commonplace are these
substances, they hardly attract attention - and
yet they vouchsafe our very existence.</p>
<p id="pullquote">Every time I view the sea I feel
a calming sense of security, as if visiting my
ancestral home; I embark on a voyage of seeing.
</p>
<p>Mystery of mysteries, water and air are right
there before us in the sea.</p>
</html>
<html>
<p class="important">For a one-year period from
November 2010, the Marugame Genichiro-Inokuma
Museum of Contemporary Art (MIMOCA) will host a
cycle of four Hiroshi Sugimoto exhibitions.</p>
<p>Each will showcase works by the artist
thematically contextualized under the headings
"Science," "Architecture," "History" and
"Religion" so as to present a comprehensive
panorama of the artist's oeuvre.</p>
<p class="important admittance">Hours: 10:00 – 18:00
(No admittance after 17:30)</p>
</html>
<html>
<h1>Hiroshi Sugimoto</h1>
<p>The dates for the ORIGIN OF ART exhibition are as
follows:</p>
<ul>
<li>Science: 21 Nov - 20 Feb 2010/11</li>
<li>Architecture: 6 Mar - 15 May 2011</li>
<li>History: 29 May - 21 Aug 2011</li>
<li>Religion: 28 Aug - 6 Nov 2011</li>
</ul>
</html>
<html>
Timed to a single revolution of the planet around
the sun at a 23.4 degrees tilt that plays out the
rhythm of the seasons, this <em>Origins of Art</em>
cycle is organized around four themes: <b>science,
architecture, history</b> and <b>religion</b>.
</html>
<html>
<div id="header">
<img src="images/logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</html>
<html>
<p>Anish Kapoor won the Turner Prize in 1991 and
exhibited at the <span class="gallery">Tate
Modern</span> gallery in London in 2003.</p>
</html>
<html>
<iframe
width="450"
height="350"
src="http://maps.google.co.uk/maps?q=moma+new+york
&output=embed">
</iframe>
</html>
<html>
<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york
&output=embed"
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe>
</html>
<html>
<head>
<title>Information About Your Pages</title>
<meta name="description"
content="An Essay on Installation Art" />
<meta name="keywords"
content="installation, art, opinion" />
<meta name="robots"
content="nofollow" />
<meta http-equiv="author"
content="Jon Duckett" />
<meta http-equiv="pragma"
content="no-cache" />
<meta http-equiv="expires"
content="Fri, 04 Apr 2014 23:59:59 GMT" />
</head>
<body>
</body>
</html>
<html>
<head>
<meta name="description" content="Telephone, email
and directions for The Art Bookshop, London, UK" />
<title>Contact The Art Bookshop, London UK</title>
</head>
<body>
<div id="header">
<h1>The Art Book Shop</h1>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">new publications</a>
</li>
<li class="current-page">
<a href="index.html">contact</a></li>
</ul>
</div>
<div id="content">
<p>Charing Cross Road, London, WC2, UK</p>
<p><span class="contact">Telephone</span>
0207 946 0946</p>
<p><span class="contact">Email</span>
<a href="mailto:[email protected]">
[email protected]</a></p>
<iframe width="425" height="275" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.co.uk/maps?f=q&
source=s_q&hl=en&geocode=&
q=charing+cross+road+london&output=embed">
</iframe>
</div>
<p>© The Art Bookshop</p>
</body>
</html>
<html>
<head>
<title>Adding HTML5 Video</title>
</head>
<body>
<video src="video/puppy.mp4"
poster="images/puppy.jpg"
width="400" height="300"
preload
controls
loop>
<p>A video of a puppy playing in the snow</p>
</video>
</body>
</html>
<html>
<head>
<title>Multiple Video Sources</title>
</head>
<body>
<video poster="images/puppy.jpg" width="400"
height="320" preload controls loop>
<source src="video/puppy.mp4" type='video/
mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/puppy.webm" type='video/
webm;codecs="vp8, vorbis"' />
<p>A video of a puppy playing in the snow</p>
</video>
</body>
</html>
<html>
<head>
<title>Adding a Flash MP3 Player</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {mp3: "audio/test-audio.mp3"};
swfobject.embedSWF(
"flash/player_mp3_1.0.0.swf",
"music-player", "200", "20", "8.0.0",
flashvars, params);</script>
</head>
<body>
<div id="music-player">
<p>You cannot hear this track because this
browser does not support our Flash music
player.</p>
</div>
</body>
</html>
</html>
<html>
<head>
<title>Adding HTML5 Audio</title>
</head>
<body>
<audio src="audio/test-audio.ogg"
controls autoplay>
<p>This browser does not support our audio
format.</p>
</audio>
</body>
</html>
<html>
<head>
<title>Multiple Audio Sources</title>
</head>
<body>
<audio controls autoplay>
<source src="audio/test-audio.ogg" />
<source src="audio/test-audio.mp3" />
<p>This browser does not support our audio
format.</p>
</audio>
</body>
</html>
<HTML> Het attribuut “target” kan vier
<HEAD>
<TITLE>Voorbeeld frames</TITLE> verschillende waarden hebben:
</HEAD>
<FRAMESET BORDERCOLOR="red" _blank
FRAMEBORDER="1" ROWS="10%,,10%"> Zorgt ervoor dat de link in een nieuw browserscherm
* vb. 3 rijen, dan zie je 2 komma's - 10% boven en geladen wordt.
onder, rest is voor midden
<FRAME SRC="boven.html" SCROLLING="no"> _self
<FRAMESET BORDERCOLOR="green" Link wordt in hetzelfde browserscherm geladen.
COLS="10%,*">
* vb. 2 kolommen, dan zie je 1 komma - 10% links _parent
en rest is voor rechts Laadt de link in de bron van het document.
<FRAME SRC="links.html" SCROLLING="no">
<FRAME SRC="rechts.html" SCROLLING="yes"" _top
MARGINWIDTH="1" MARGINHEIGHT="1"> Laadt de link in het gehele scherm. Alleen van belang bij
</FRAMESET> frames.
<FRAME SRC="onder.html" SCROLLING="no">
</FRAMESET> Zo zien de tags er dus uit als je het "target" attribuut
</HTML> gebruikt met één van de vier bijbehorende waarden:
<A href="http://www.voorbeeld.nl/" target="_blank">Zo

wordt de link in een nieuw browserscherm geladen</A>
<A href="http://www.voorbeeld.nl/" target="_self">Zo

wordt de link in hetzelfde browserscherm geladen</A>

<A href="http://www.voorbeeld.nl/" target="_parent">Zo
wordt de link in de bron van het document geladen</A>
<A href="http://www.voorbeeld.nl/" target="_top">Zo

wordt de link in het hele scherm geladen (alleen voor
frames-pagina's)</A>
Een hyperlink –tekstlink, een foto, of iets anders is Het attribuut "target"
Hieronder staan de verschillende mogelijkheden op
een rijtje. Soms kan het handig zijn om naar een bepaald gedeelte op
een pagina te verwijzen. Denk aan een lange pagina met
href="https://www.mijn-eigen-website.nl" veel tekst. Het is dan ideaal om een link naar een
specifieke paragraaf te kunnen opnemen.
een specifieke pagina:
href="https://www.mijn-eigen-website.nl/website- Hiervoor dient het attribuut name.
software.php"
Je zet de tag <A name="de naam">De tekst waar je naar
een specifieke plaats binnen een pagina: toe linkt</A> bij het gedeelte waar je naar toe wilt linken.
href="https://www.mijn-eigen-website.nl/website-
software.php#fotobewerking" Dan gebruik je de tag <A href="#de naam">Hier komt de
link-tekst</A> daar waar je de link wilt plaatsen.
een map binnen een website:
href="https://www.mijn-eigen-website.nl/lidmaatschap" Even een voorbeeld:
een foto of afbeelding: Als je hier klikt, ga je naar de tekst "Linken naar
href=”https://www.mijn-eigen- bestanden op je eigen site" hierboven op deze pagina.
website.nl/images/paraplu.jpg"
Bij de tekst waar ik naar wil linken heb ik dit geplaatst:
een audio-bestand:
href="https://www.mijn-eigen-website.nl/muziek/grapes_- <A name="tekst">Links naar bestanden op je eigen
_I_dunno.mp3" site:</A>
een video-bestand: En de link zelf heb ik als volgt gemaakt:

href="https://www.mijn-eigen-website.nl/wat-je-moet-
weten.mp4" <A href="#tekst">hier</A>
een pdf-bestand, een doc-bestand, een txt-bestand, een rtf- Linken naar bestanden elders op het web
bestand, een xls-bestand, een ppt-bestand, een epub, etc: Linken naar een bestand op een totaal andere website is
vrij eenvoudig.
href="https://www.mijn-eigen-website.nl/ebooks/handige-
websites-voor-webmasters.pdf" Je gebruikt natuurlijk weer de tags <A> en </A>.
een e-mailadres: Nu moet je wel "http://" en "www." toevoegen aan het

href=mailto:[email protected] link-adres, want nu verwijs je naar een bestand op een
<! Opmerking: DEFAULT APPS mag bij MAIL NIET andere server.
programma> Een voorbeeld:
<A href="http://www.hetadres.nl/index.html">De link-
een telefoonnummer: tekst hier!</A>
href=tel:+311234567890
Met deze link verwijs je dus naar het bestand "index.html"
Hoe maak ik dat ik een afbeelding “clickable” maak? wat een onderdeel is van "http://www.hetadres.nl/".
VB. Dit attribuut wordt vooral gebruikt in pagina's met frames

(waarover later meer), maar kan ook gebruikt worden in
<a href="janfevijn.html"><img src="jantjefevijn.jpg" normale pagina's.
alt="smile pic" a>

Samenvatting Van HTML Css Uit Boek

Uploaded by

Copyright:

Available Formats

Samenvatting Van HTML Css Uit Boek

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Samenvatting Van HTML Css Uit Boek

Uploaded by

Copyright:

Available Formats

De HTML-code Wat zoek je als resultaat?

<!DOCTYPE html PUBLIC

<!DOCTYPE html PUBLIC

<!DOCTYPE html PUBLIC

<?xml version="1.0" ?> XML Declaration

<A href="http://www.voorbeeld.nl/" target="_blank">Zo

<A href="http://www.voorbeeld.nl/" target="_self">Zo

<A href="http://www.voorbeeld.nl/" target="_top">Zo

een video-bestand: En de link zelf heb ik als volgt gemaakt:

een e-mailadres: Nu moet je wel "http://" en "www." toevoegen aan het

VB. Dit attribuut wordt vooral gebruikt in pagina's met frames

You might also like