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

https://validator.w3.org/

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
&lt; <
&gt; >
&nbsp; (non-breaking space)
&ndash; –
&amp; &
&Eacute;  (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">

&lt;J&#39;aime la cr&egrave;me &quot;cr&eacute;meuse&quot;&gt;

Challenge

Display

<J'aime la crème "crémeuse">

&lt;J&#39;aime la cr&egrave;me &quot;cr&eacute;meuse&quot;&gt;

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).

 

Change the page appearance with the "style" panel

See "further reading" on the dedicated website

HTML / CSS - TWTS 01

By sebbes

Made with Slides.com

HTML / CSS - TWTS 01

  • 814

More from sebbes