Repository navigation
Expand file tree
/
Copy pathhtml-css.html
More file actions
122 lines (112 loc) · 7.56 KB
/
Copy pathhtml-css.html
File metadata and controls
122 lines (112 loc) · 7.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Twan Mellink - HTML & CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!-- Navigatie balk en links naar items -->
<section class="ontwerp">
<nav>
<div class="logo">
<a href="index.html"><img src="static/img/png/logo.png" alt="Logo Image"></a>
</div>
<div class="hamburger">
<div class="bars1"></div>
<div class="bars2"></div>
<div class="bars3"></div>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="ontwerp.html">Ontwerp</a></li>
<li><a href="ux-testing.html">UX Testing</a></li>
<li><a href="design.html">Design & Toegankelijkheid</a></li>
<li><a href="html-css.html" class="active">HTML & CSS</a></li>
<li><a href="dns-uploaden.html">DNS & Uploaden</a></li>
<li><button class="contact-button" onclick="window.location.href='contact.html';">Neem contact op</button></li>
</ul>
</nav>
<svg class="ontwerp-image" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(121, 63, 243, 1)" offset="0%"></stop><stop stop-color="rgba(24, 170, 253, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,10L30,11.7C60,13,120,17,180,30C240,43,300,67,360,78.3C420,90,480,90,540,88.3C600,87,660,83,720,81.7C780,80,840,80,900,76.7C960,73,1020,67,1080,56.7C1140,47,1200,33,1260,28.3C1320,23,1380,27,1440,35C1500,43,1560,57,1620,66.7C1680,77,1740,83,1800,76.7C1860,70,1920,50,1980,40C2040,30,2100,30,2160,38.3C2220,47,2280,63,2340,68.3C2400,73,2460,67,2520,56.7C2580,47,2640,33,2700,38.3C2760,43,2820,67,2880,68.3C2940,70,3000,50,3060,48.3C3120,47,3180,63,3240,60C3300,57,3360,33,3420,28.3C3480,23,3540,37,3600,41.7C3660,47,3720,43,3780,41.7C3840,40,3900,40,3960,48.3C4020,57,4080,73,4140,71.7C4200,70,4260,50,4290,40L4320,30L4320,100L4290,100C4260,100,4200,100,4140,100C4080,100,4020,100,3960,100C3900,100,3840,100,3780,100C3720,100,3660,100,3600,100C3540,100,3480,100,3420,100C3360,100,3300,100,3240,100C3180,100,3120,100,3060,100C3000,100,2940,100,2880,100C2820,100,2760,100,2700,100C2640,100,2580,100,2520,100C2460,100,2400,100,2340,100C2280,100,2220,100,2160,100C2100,100,2040,100,1980,100C1920,100,1860,100,1800,100C1740,100,1680,100,1620,100C1560,100,1500,100,1440,100C1380,100,1320,100,1260,100C1200,100,1140,100,1080,100C1020,100,960,100,900,100C840,100,780,100,720,100C660,100,600,100,540,100C480,100,420,100,360,100C300,100,240,100,180,100C120,100,60,100,30,100L0,100Z"></path></svg>
<div class="ontwerp-message">
<h1>HTML & CSS</h1>
<h3><a class="tekst-wit" href="#html">HTML</a> | <a class="tekst-wit" href="#css">CSS</a> | <a class="tekst-wit" href="#frameworks">CSS Frameworks</a> | <a class="tekst-wit" href="#w3c">W3C Validation</a></h3>
</div>
</section>
<!-- Categorie/blok HTML -->
<section id="html" class="about_us grijs-section">
<div class="row nomargin">
<h2 class="section_title">HTML</h2>
</div>
<div class="row row2">
<div>
<h2>Html</h2>
<p class="tekst-wit">HTML staat voor Hypertext Markup Language. HTML gebruik je om alle elementen te plaatsen en verdelen in je website. Er zijn meer dan 100 verschillende elementen waar je gebruikt van kan maken. Deze variëren van elementen voor tekst tot elementen die een plaatje laten zien. Een HTML bestand heeft in de meeste gevallen een vrij standaard indeling waar je eerst aangeeft welk type bestand het is. Vervolgens een head elementen waar je belangrijke details van je website in verwerkt, zoals de titel van de pagina, favicon, beschrijving en een link naar je CSS stylesheet. Veel van data is allemaal niet te zien als code op de website, maar zorgt er wel voor dat de CSS juist werkt, en je site een duidelijke titel heeft.</p>
</div>
<div>
<figure>
<img src="static/img/png/html.png" alt="foto van html code">
</figure>
</div>
</div>
</section>
<!-- Categorie/blok CSS -->
<section id="css" class="about_us grijs-section">
<div class="row nomargin">
<h2 class="section_title">CSS</h2>
</div>
<div class="row row2">
<div>
<h2>Css</h2>
<p class="tekst-wit">CSS staat voor Cascading Style Sheets. Met CSS maak je als het ware het uiterlijk van de website. Denk hierbij aan kleuren, lettertypes. Maar de plaats van bepaalde elementen. Om een element bijvoorbeeld rechts op de pagina te tonen kan je gebruik maken van Flexbox. CSS kan je zo simpel of moeilijk maken als je eigenlijk zelf wilt. Je kan heel simpel je hele site 1 lettertype laten gebruiken, en alles in het midden plaatsen. Maar ook een titel een andere grootte, lettertype en kleur geven als de rest van de tekst. Je kan met CSS eigenlijk oneindig veel opties veranderen, en zo je site zo uniek maken als je zelf wilt. Samengevat geef je dus je website vorm en kleur met CSS.</p>
</div>
<div>
<figure>
<img src="static/img/png/css.png" alt="foto van css code">
</figure>
</div>
</div>
</section>
<!-- Categorie/blok Frameworks -->
<section id="frameworks" class="about_us grijs-section">
<div class="row nomargin">
<h2 class="section_title">CSS FRAMEWORKS</h2>
</div>
<div class="row row2">
<div>
<h2>Css Frameworks</h2>
<p class="tekst-wit">Omdat CSS nogal een gedoe kan zijn om je uiteindelijke doel te bereiken zijn er Frameworks ontworpen. Dit zijn eigenlijk bouwstenen voor CSS. Hierdoor hoef je niet alles zelf te maken en bedenken maar kan je bouwsteentjes van de CSS framework gebruiken. Een voorbeeld hiervan is het veel gebruikte Bootstrap. Bootstrap kan gebruikt worden om bijvoorbeeld je site makkelijker in te delen door gebruik te maken van de column en rows bouwsteentjes. Zo hoef je niet zelf alles te positioneren met flex boxes maar kan je kolommen plaatsen om zo heel eenvoudig elementen te organiseren op een website.</p>
</div>
<div>
<figure>
<img src="static/img/png/bootstrap.png" alt="foto van bootstrap logo met info over bootstrap">
</figure>
</div>
</div>
</section>
<!-- Categorie/blok W3c -->
<section id="w3c" class="about_us grijs-section">
<div class="row nomargin">
<h2 class="section_title">W3C VALIDATION</h2>
</div>
<div class="row row2">
<div>
<h2>W3C Validation</h2>
<p class="tekst-wit">Omdat we allemaal mens zijn, en dus af een toe fouten kunnen maken bestaan er tools zoals W3C Validator. Deze website check je code van de HTML en CSS op eventuele fouten die je hebt gemaakt. Je kan een file of een website laten checken door deze website, en vervolgens krijg je een rapport. In dit rapport is te zien welke fouten er zijn en op welke regel van de code deze fout zit. Op deze manier kan je de fouten er makkelijker uithalen en je code "foutloos" krijgen. Zoals in de afbeelding hiernaast te zien, is het gelukt om na aardig wat puzzelen en fouten verbeteren zowel de HTML als CSS check uit te voeren zonder errors.</p>
</div>
<div>
<figure>
<img src="static/img/png/w3c.png" alt="foto van bootstrap logo met info over bootstrap">
</figure>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer">
<b class="tekst-wit">Twan Mellink / 220979 - FDD 2022-2023</b>
</div>
</body>
<script language="JavaScript" type="text/javascript" src="static/js/script.js"></script>
</html>