Web Information Systems Lecture 2: HTML

Web Information Systems
HTML
Katrien Verbert
katrien.verbert@cs.kuleuven.be

How Pages Use Structure
HEADLINE

SUBHEADING

Digital versions
often have similar
structure

Structure In Word Docs
Headings and
subheadings
reflect hierarchy
of information

Main heading
and important
information
appear first

The information
is expanded upon
and may use
subheadings

Html: Page Structure
<html>
</html>
<body>
</body>
<h1>This is the Main Heading</h1>
<h2>This is a Sub-Heading</h2>
<h2>Another Sub-Heading</h2>
<p>This text might be an introduction to
the rest of the page.</p>
<p>Here you can see another.</p>
<p>Many long articles have sub-headings
to help you follow the structure.</p>

A Closer Look At Tags
OPENING TAG CLOSING TAG
CHARACTER CHARACTER
LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET
FORWARD SLASH

langlang en-usen-us
Attributes Tell Us More
About Elements
<p =" ">Paragraph in English</p>
ATTRIBUTE
NAME
ATTRIBUTE
VALUE

Body, Head & Title
<html>
<head>
<title>This is the Title of...</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>

Summary
• HTML pages are text documents.
• HTML uses tags, which act like containers and tell you
about the information that lies between them.
• Tags are often referred to as elements.
• Tags usually come in pairs. Opening tags denote the start
of a piece of content; closing tags denote the end.
• Opening tags can carry attributes, which tell us more about
the content of that element.
• Attributes require a name and a value.
• To learn HTML you need to know what tags you can use,
what they do, and where they can go.

Learning how
these elements
are used
Learning a list
of elements

Tags Describe Content
These tags are
known as "markup"
Creating a page
involves adding tags
to content

<h1>This is a Main Heading</h1>
<h2>This is a level 2 heading</h2>
Headings

<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 will be one
or more paragraphs.</p>
Paragraphs

<p>The Earth<br />gets one hundred tons
heavier every day<br />due to falling space
dust.</p>
Line breaks

1. Chop potatoes into quarters
2. Simmer in salted water
3. Heat milk and butter
4. Drain potatoes and mash
5. Mix in the milk mixture
Three List Types
UNORDERED DEFINITIONORDERED
• 1kg King Edward potatoes
• 100ml milk
• 50g salted butter
• Freshly grated nutmeg
• Salt and pepper to taste
Sashimi
Sliced raw fish
Scale
A device used to
accurately measure weight

<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 texture</li>
</ol>
Ordered lists (numbered)

Unordered lists (bullets)
<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>

<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish served
with condiments.</dd>
<dt>Scale</dt>
<dd>Device used to measure the weight
of ingredients.</dd>
<dd>A technique by which the scales are
removed from the skin of fish. <dd>
</dl>
Definition lists

<ul>
<li>Mousses</li>
<li>Pastries</li>
<ul>
<li>Croissant</li>
<li>Milles-feille</li>
<li>Palmier</li>
<li>Profiteroles</li>
</ul>
<li>Tarts</li>
</ul>
Nested list

Writing Links
<a href="http://www.imdb.com">IMDB</a>
the page the link
takes you to

Writing Links
<a href="http://www.imdb.com">IMDB</a>
THE PAGE THE LINK TAKES YOU TO
THE TEXT THE USER CLICKS ON

<a href=”index.html”>Home</a>
<a href=”about.html”>About</a>
<a href=”movies.html”>Movies</a>
<a href=”contact.html”>Contact</a>
Linking to other pages on the same site

<a href="http://www.imdb.com"
target="_blank">IMDB</a> (opens in a
new window)
Opening links in a new window

<h1 id="top">
Film-Making Terms</h2>
<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
<h2 id="prologue">
Prologue</h2>
<a href="#top">Top</a>
<h1 id="top">
Film-Making Terms</h2>
<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
<h2 id="prologue">
Prologue</h2>
<a href="#top">Top</a>
Linking to a specific
part of the same page

<img src="images/quokka.jpg"
alt="A family of quokka"/>
Adding images

<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>90</td>
</tr>
</table>
Basic table structure

<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>
</table>
Table headings

...
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
...
Spanning columns

...
<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>
Spanning rows

Semantic Markup
WHAT IS IT?
Set of elements, for
example:
The <em> tag adds
emphasis
<blockquote>
contains a quote
WHY USE IT?
Provides extra
information about
your content
Do NOT use it to
alter presentation of
those elements
APPLICATION
Screen readers can
add emphasis to
words in <em>
Search engines can
find quotations in
<blockquote>

<p><strong>Beware</strong> pickpockets
operate in this area.</p>
<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>
Strong & emphasis

<address>
<p><a href="homer@example.org">
homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield</p>
</address>
Author details

Summary
• HTML elements are used to describe the structure of the
page (e.g. headings, subheadings, paragraphs).
• They also provide semantic information (e.g. where
emphasis is placed, definitions of acronyms, when text is a
quotation).

<h1>Current Exhibition</h1>
<h2>Olafur Eliasson</h2>


Comments in HTML

<div id="header">
<img src="logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div>
Grouping text &
elements in a block

<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>
Grouping text &
elements inline

New HTML5 layout elements
<body>
<div id="page">
<div id="header">
<div id="nav">
<div id=
"sidebar">
<div class="article">
<div id="footer">
<div id="content">

NEW HTML5 LAYOUT ELEMENTS
<body>
<div id="page">
<header>
<nav>
<div id=
"sidebar"><article>
<article>
<div id="footer">
<div id="content">

NEW HTML5 LAYOUT ELEMENTS
<body>
<div id="page">
<header>
<nav>
<aside>
<article>
<article>
<footer>
<div id="content">

<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
HEADER
<header>

<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
NAVIGATION
<nav>

<article>
<figure>
<img src="bok-choi.jpg" alt="BokChoi" />
<figcaption>Bok Choi</figcaption>
</figure>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
<p>A five week introduction to
traditional Japanese…</p>
</article>
ARTICLES
<article>

<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (...)</a>
<a href="">Tsukune (...)</a>
<a href="">Okonomiyaki (...)</a>
<a href="">Mizutaki (...)</a>
</section>
</aside>
ASIDE
<aside>

<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (...)</a>
<a href="">Tsukune (...)</a>
<a href="">Okonomiyaki (...)</a>
<a href="">Mizutaki (...)</a>
</section>
SECTIONS
<section>

<hgroup>
</hgroup>
HEADING GROUPS
<hgroup>

<figure>
<img src="images/bok-choi.jpg"
alt="Bok Choi" />
</figure>
FIGURES
<figure> <figcaption>

<a href="introduction.html">
<article>
<figure>
<img src="bokchoi.jpg" alt="BokChoi" />
</figure>
<hgroup>
</hgroup>
</article>
</a>
Linking around
block-level elements

header, section, footer, aside, nav,
article, figure, figcaption {
display: block;}
HELPING OLDER
BROWSERS UNDERSTAND

Summary
• The new HTML5 elements indicate the purpose of different
parts of a web page and help to describe its structure.
• The new elements provide clearer code (compared with
using multiple <div> elements).
• Older browsers that do not understand HTML5 elements
need to be told which elements are block-level elements.
• To make HTML5 elements work in Internet Explorer 8 (and
older versions of IE), extra JavaScript is needed, which is
available free from Google.

Visual Editors (WYSIWYG)
https://html-online.com/editor/

Notepad++ https://notepad-plus-plus.org/

WebStorm
2/19/19 109
https://www.jetbrains.com/webstorm/
Key on Toledo

Useful links
2/19/19 110
• http://www.w3schools.com/html/default.asp
• https://www.codecademy.com/learn/web

Text book
HTML & CSS: Design
and Build Web Sites
Jon Duckett

Web Information Systems Lecture 2: HTML

More Related Content

What's hot

Similar to Web Information Systems Lecture 2: HTML

More from Katrien Verbert

Recently uploaded

Web Information Systems Lecture 2: HTML