Fundamental Technologies used by browsers:
HTML consists of nested elements which are delimited by tags
<h1>this is a heading</h1>
Some HTML elements don't have any content - e.g. the br tag, which signifies a line break:
<br />
or
<br>
HTML elements may have attributes:
<img src="portrait.png" alt="Portrait of the user" />
values are usually inclosed in double quotes
examples:
<!-- this is a comment -->
https://codesandbox.io/s/ → static
(alternatives: https://codepen.io https://jsfiddle.net, https://plnkr.co)
Exercise: inspect an existing website in the browser tools
<!DOCTYPE html>
<html lang="de">
<head></head>
<body></body>
</html>
<!DOCTYPE html>
Declares the file as an HTML(5) document
<html>: contains the entire document; it often has the language set, e.g. lang="en"<head>: contains information like document title, character encoding, ...<body>: the actual content that is displayed in the browser viewthe following characters should always be "escaped" in an HTML document:
< becomes <> becomes >& becomes &these characters must be escaped if they occur in attributes:
" becomes "' becomes ' if the attribute is delimited by ')In HTML, any sequence of whitespace characters (space, line break, tab) is interpreted as a single space.
These examples are all equivalent (displaying a single space between the images):
<img src="foo.png" /> <img src="bar.png" />
<img src="foo.png" /> <img src="bar.png" />
<img src="foo.png" />
<img src="bar.png" />
example of multi-line formatting if we want to display multiple elements without a space in between:
<img src="image1.png" /><img src="image2.png" /><img
src="image3.png"
/>
Stylesheets allow us to include predefined styles and reuse them across HTML documents
they may be included from predefined libraries (e.g. Bootstrap) or created manually
example:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>
usually in the head of a document
Resets: stylesheets that unify basic styles across browsers:
CDN: Content Delivery Network - services that host CSS and JS libraries
CSS Libraries:
complete list:
We'll create a website for a Restaurant
contents: table for opening hours, form for Reservations, ...
h1 elements inside of nav, aside, article and section have their font sizes adjusted automatically:
<h1>big heading</h1>
<section>
<h1>medium heading</h1>
...
</section>
<section>
<h1>medium heading</h1>
<section>
<h1>small heading</h1>
<p>...</p>
</section>
</section>
Example:
<a href="https://en.wikipedia.org/wiki/HTML"
>Wikipedia article</a
>
Link that opens in new tab / window:
<a
href="https://en.wikipedia.org/wiki/HTML"
target="_blank"
rel="noreferrer"
>Wikipedia article</a
>
E-Mail link:
<a href="mailto:foo@bar.com">send e-mail</a>
Download link:
<a href="report.ods" download>report</a>
in practice:
em or i for making text italicstrong or b for making text boldactual meaning according to the HTML 5 standard:
em - emphasisi - proper names, technical terms, foreign words, ...strong - importanceb - other highlightExamples:
My next phone <em>must</em> be a <i>FooPhone</i>.
<strong>The event is cancelled</strong> due to bad weather.
div: generic block elementspan: generic inline elementblock elements: displayed underneath each other, as wide as possible
inline elements: displayed next to each other, as wide as their content
ul (unordered list)ol (ordered list - numbered)li (list item)example:
<h1>tetrapods:</h1>
<ul>
<li>amphibians</li>
<li>reptiles</li>
<li>birds</li>
<li>mammals</li>
</ul>
nested lists:
<h1>vertebrate:</h1>
<ul>
<li>fish</li>
<li>
tetrapods
<ul>
<li>amphibians</li>
<li>reptiles</li>
<li>birds</li>
<li>mammals</li>
</ul>
</li>
</ul>
elements:
buttonforminputlabelselect<form action="/register" method="post">
<div>
<label
>first name: <input type="text" name="firstname"
/></label>
</div>
<div>
<label
>last name: <input type="text" name="lastname"
/></label>
</div>
<button type="submit">register</button>
</form>
<button type="submit">press me!</button>
button types:
<input />
<input type="password" />
default type: text
other possibilities:
checkboxradiofilepassworddate (HTML 5)email(HTML 5)number (HTML 5)search (HTML 5)Possible values of the autocomplete attribute:
namegiven-nameemailusernamerequiredminlengthmaxlengthCSS pseudoclasses: :valid, :invalid
<input
type="number"
min="-5"
max="5"
step="0.1"
value="1"
/>
Inputs should have labels that describe them:
<label
>enter your name:
<input />
</label>
or
<label for="name-input">enter your name:</label>
<input id="name-input" />
<form action="/register" method="post">
first name: <input type="text" name="firstname" /><br />
last name: <input type="text" name="lastname" /><br />
<button type="submit">register</button>
</form>
When the form is submitted, a post request with the following content is sent to /register:
firstname=John&lastname=Doe
imgvideoaudioattributes:
src: image pathalt: alternative text in case the picture cannot be displayedsrcset: list of image paths for different resolutions<img
alt=""
src="images/2000x1000.png"
srcset="
images/500x250.png 500w,
images/1000x500.png 1000w
"
/>
<video autoplay loop controls width="250">
<source src="myvideo.webm" type="video/webm" />
<source src="myvideo.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
Example video: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
<audio src="myaudio.mk" loop volume="0.5"></audio>
relevant web image formats:
relevant web video formats:
see also: Wikipedia: HTML5 video
tags:
tabletbody)thead)trth, tdcaptionattributes:
colspan, rowspantitlemetadocument title that appears in the window bar:
<title>my website</title>
meta tags are used for including associated meta information
We should usually include a <meta charset="UTF-8" /> declaration so we can use any Unicode characters
<button>😊</button>
We should usually include a viewport declaration to reset browser scaling on small devices
<meta name="viewport" width="device-width" />
Background: In the early days of mobile web (before responsive design), Websites were scaled down by mobile browsers. The above code disables this behavior.
<meta
name="description"
content="Wikipedia is a free online encyclopedia, ..."
/>
may be used by search engines
<meta name="keywords" content="HTML,javascript" />
icon that is displayed in the website tab:
<link
rel="icon"
sizes="32x32"
href="favicon_32.png"
type="image/png"
/>
if no explicit link is present, browsers will look for facivon.ico by default
Strategies to make websites accessible by as many people as possible
relevant groups:
mechanisms:
button and section instead of div)<img
src="dinosaur.png"
alt="A red Tyrannosaurus Rex:
A two legged dinosaur standing upright, with small arms,
and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur"
/>
button, a, form, input)Hosting for static websites is often available for free:
CSS framework for creating websites - we don't have to write (much) CSS
body, h1, button, ... changesclass attributeWe'll create a simple website - e.g. for a restaurant
contents:
Container = basic building block for bootstrap, top-level division of a document
<div class="container-fluid">: container that is as wide as the page<div class="container">: container that "locks" on specific sizesusing classes container, row, col
<div class="container">
<div class="row">
<div class="col">one</div>
<div class="col">two</div>
<div class="col">three</div>
</div>
<div class="row">
<div class="col">four</div>
<div class="col">five</div>
</div>
</div>
Margins are spacings between elements
Bootstrap classes for margins:
ml-auto: margin-left: automl-1: small left marginmt-4: big top marginmy-2: medium margin in y directions (top and bottom)e.g.:
presentation: VS Code
code snippet: html:5
SVG (scalable vector graphics): XML-based format for vector graphics
Attributes (example):
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1000"
height="500"
viewBox="-500 0 1000 500"
></svg>
g: grouprectcircleellipsetext, tspanpathid, classtransform (e.g. "rotate(180)", "translate(20 30)")x, y (position)stroke (line color)fill (fill color)<rect x="50" y="50" width="20" height="200" fill="darkgrey">
<circle r="10" cy="290"/>
<ellipse cy="60" rx="30" ry="50"/>
element path, attribute d
rectangle:
<path d="M 0,0 L 10,0 L 10,10 L 0,10 L 0,0">
M: move toL: line toH: horizontal line toV: vertical line toQ: quadratic bézier curve toT: smooth quadratic bézier curve toC: cubic bézier curve toS: smooth cubic bézier curve toA: elliptical arc toZ: close pathAll path commands are also possible with relative coordinates (with lowercase commands)
<path d="M 500,500 l 10,10">
is quivalent to:
<path d="M 500,500 L 510,510">
<g>
<rect width="10" height="10">
<rect x="20" width="10" height="10">
</g>
Via attribute transform:
<rect transform="translate(250, 0) rotate(-90, 50, 50)"/>
<g fill="grey" stroke="black" stroke-width="3">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" width="500" height="500" viewBox="0 0 500 500">
<g
transform="translate(250, 0) rotate(45, 0, 160)"
fill="grey">
<rect y="100" x="-10" width="20" height="190"/>
<circle r="10" cy="290"/>
<ellipse cy="60" rx="35" ry="55"/>
</g>
<g
transform="translate(250,0) rotate(-45, 0, 160)"
fill="darkgrey">
<path d="
M -10,310 L 10,310 L10,100
C 10,90 20,80 20,70
L 19,0 L13,0 L11,70 L5,70 L3,0
L-3,0 L-5,70 L-11,70 L-13,0 L-19,0 L-20,70
C-20,80 -10,90 -10,100 Z"/>
</g>
</svg>