html

HTML5 / CSS

Basis

<!DOCTYPE htmlli><<html lang="en">

<head>

<meta charset="UTF-8">>

<html Les1>

<html >

<html >

<html >

<html
Eerste les webanimatie
>

<html
html5
>

<html >

<html >

In het begin...

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Titel hier</title>
links naar externe bestanden (css, javascript...)
Link naar google font

<link href="https://fonts.googleapis.com/css?family=Allura|Bad+Script|Caveat|Cookie|Courgette|Dancing+Script|Handlee|Kaushan+Script|Playball|Ranga|Sacramento|Satisfy" rel="stylesheet">

Head: Style

Stylesheet

body{

background-image: URL("link");
font-family: "Cambria";
etcetera
}

img{}
h1, h2, h3, p...
margin: de ruimte buiten een div
padding: de ruimte binnen een div

Body

Alles dat je kan zien op de website: tekst, afbeeldingen...

Text align

align center

Link

<a href="url" target="_blank">link text</a>
<body link="blue">
Lists
<ul>&<li>
<ul style="list-style-type:circle">
<ul style= "list-style-position: inside">

Heel nuttig: div (division)

In de <head><style>

div {
display: block;
margin: 20px 12px 0 12px;
max-width: 500px;
height: 200px;
border: 3px;
border-style: solid;
border-color: #3f3f3f;
position: relative;
margin: 50px auto;
background-size: cover;
overflow-y: scroll;
}

div classes

informatie specifiek aan deze div:
.naamDiv{background-color: #f8eadf;}

In de <body>

<div>
of: <div class="naamDiv"></div>
alle inhoud van de div: h1, h2, p, img...

Meer:

border

Opfleuring van de website

Kleuren in RGB waarden; kijk in photoshop

Opacity

dropdown

indeling website (header...)

monochrome

De background image opacity geven

Navigation side bar/li>

Mobile Friendliness

In de <head><style>

@media (max-width: 500px) {

h1 {
font-size: 50px;
margin-top: 20px;
line-height: 40px;
}
h2 {
font-size: 20px;
margin: 20px 0 30px 0;
}
div {
margin: 20px 12px 0 12px;
}
p {
font-size: 20px;
line-height: 24px;
}
small {
font-size: 16px;
}
}

Om af te sluiten:

</body>
</html>

List of websites to learn front end development:

Neocity tutorials
Dash
w3schools