HTML / CSS
Separation of concerns
- HTML is for data
- CSS is for presentation
Separation of concerns
- HTML is for data
- CSS is for presentation
Note: "table" is for tabular data, not for layout
A lot of deprecated ressources on the internet!
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Opening tags
- p: paragraph
- a: anchor (for links)
- main, header, section, article : structuring the content
- div: generic bloc
- span: generic inline
- ...
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Closing tags
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Self closing tags, <tag> or <tag />:
- img: image,
- input: field in a form,
- br: new line,
- ...
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Attributes:
- class: to give some style (see the CSS part)
- src: source of external content to insert
(for images, scripts, ...) - alt: alternate text if img is missing
- href: hypertext reference
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Mandatory attributes:
- for img: src, alt
- for a: href
- ...
HTML
<p class="inner">
<img src="/img/logo.png" alt="Site logo" />
Go to my
<a href="http://example.com">
wonder full website
</a>
</p>Urls, if the file is read from "http://toto.org/user/tata":
- /foo/bar ➡️ http://toto.org/foo/bar (absolute)
- foo/bar ➡️ http://toto.org/user/foo/bar (relative)
- http://example.com ➡️ http://example.com
Note the absence/presence of opening and trailing "/"
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Doctype: what version of html do we use
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Header: not displayed, mainly "metadata".
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Declare encoding (depends on your editor's settings):
- utf-8 (recommended)
- iso-8859-1
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Description, to help search engines
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Include CSS file
HTML - complete document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi!</title>
<meta name="description" content="Hello!">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Body: all the content of the page
Validate your pages
Hands on:
Open a web page, and look at the HTML source:
- "see source" (Ctrl + U): raw text sent by the server
- with the developer tools: F12 > inspect.
How to display "<"?
HTML escaping
| Escaping code | Rendered symbol |
|---|---|
| < | < |
| > | > |
| | (non-breaking space) |
| – | – |
| & | & |
| É (useless with utf-8) | É |
| &aagrave; (useless with utf-8) | à |
| ... | ... |
Challenge
Display
<J'aime la crème "crémeuse">
Challenge
Display
<J'aime la crème "crémeuse">
<J'aime la crème "crémeuse">Challenge
Display
<J'aime la crème "crémeuse">
<J'aime la crème "crémeuse">
Escaping is important against
Arthur wrote: <p onload="send_passwords()">Hello</p>
Escaping is important against
CSS basics
p {
color: red;
background-color: #ff00ff;
}CSS basics
p {
color: red;
background-color: #ff00ff;
}All the <p> tags
CSS basics
p {
color: red;
background-color: #ff00ff;
}All the <p> tags
are written in red with pink background
CSS selectors
p a {
...
}All the <a> tags inside a <p> tag
CSS selectors
p a {
...
}All the <a> tags inside a <p> tag
<p><a href="...">Blah</a></p>
<a href="...">Doh!</a>CSS selectors
.foo {
...
}All the tags with a class "foo"
CSS selectors
.foo {
...
}All the tags with a class "foo"
<p class="foo">Blah</p>
<p>Hey, <span class="foo">Doh!</span></p>CSS selectors
#bar {
...
}All the tags with THE id "bar"
<p id="qix">Blah</p>
<p>Hey, <span id="bar">Doh!</span></p>CSS selectors
#bar {
...
}All the tags with THE id "bar"
<p id="qix">Blah</p>
<p>Hey, <span id="bar">Doh!</span></p>Id has to be unique among an HTML document
CSS selectors
#bar, .foo {
...
}All the tags with THE id "bar", or a class foo
<p class="foo">Blah</p>
<p>Hey, <span id="bar">Doh!</span></p>CSS selectors
Mix!
.foo a.bar
#menu .major, #cie-desc .major
.btn:hover
CSS selectors
Mix!
.foo a.bar
/* <a> tags with bar class, within a tag with foo class */
#menu .major, #cie-desc .major
/* tags with major class, within either menu or
cie-desc id */
.btn:hover
/* tags with btn class, when the mouse is over the
element */CSS selectors
Mix!
.foo a.bar
/* <a> tags with bar class, within a tag with foo class */
#menu .major, #cie-desc .major
/* tags with major class, within either menu or
cie-desc id */
.btn:hover
/* tags with btn class, when the mouse is over the
element */Pseudo selector
CSS layout
Use "flexbox" and "grid"!
CSS is powerful
-
selectors,
-
layout (flexbox + grid),
-
animations.
Hands on:
browse to a website, open developer tools (F12 > inspect).