-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog_1.html
172 lines (169 loc) · 7.89 KB
/
blog_1.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
<title>Door een rose bril...</title>
<meta charset="UTF-8" />
<meta name="description" content="css html blog" />
<meta name="keyword" content="blog css html" />
<meta name="author" content="Frieda Haringsma XaCi development" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/style/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter&family=The+Girl+Next+Door&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<h1>XaCi development</h1>
<nav class="flex-container-1">
<button class="flex"><a href="/index.html">Home</a></button>
<button class="flex"><a href="/aboutme.html">About me</a></button>
<button class="flex"><a href="/blog.html">Blog</a></button>
<button class="flex"><a href="/contact.html">Contact</a></button>
</nav>
</header>
<div class="grid-container-1">
<div class="grid-1 header">
<h1>Door een rose bril...</h1>
</div>
<div class="grid-1 flex-container-sidebar">
<div class="sidebar">
<a href="/blog_1.html"
><img src="/images//blog_001.a.jpg" alt="foto van een puppy" />HTML,
het begin.
</a>
</div>
<div class="sidebar">
<a href="/blog_2.html"
><img src="/images/blog_002.a.jpg" alt="foto van css code" />Er is
ook css.
</a>
</div>
<div class="sidebar">
<a href="/blog_3.html"
><img
src="/images/blog_003.a.jpg"
alt="foto van Tante Til van de familie Knots"
/>Een div-je hier.
</a>
</div>
<div class="sidebar">
<a href="/blog_4.html"
><img
src="/images/blog_004.a.jpg"
alt="foto van handen die papier verfrommelen"
/>Opnieuw beginnen.
</a>
</div>
<div class="sidebar">
<a href="/blog_5.html"
><img
src="/images/blog_005.a.jpg"
alt="foto van iemand die een mobiele telefoon houd voor een personal computer"
/>Mobile first.
</a>
</div>
<div class="sidebar">
<a href="/blog_6.html">
<img
src="/images/blog_006.a.jpg"
alt="foto van code op een beeldscherm"
/>
Flex to the max.
</a>
</div>
</div>
<!----einde flex-container-sidebar-->
<main>
<div class="content background">
<article>
<h1> HTML, het begin</h1>
<h2> Wat is HTML?</h2>
<section>
<img src="/images/blog_001.a.jpg" alt="foto van een puppy">
</section>
<p>
Om een website te maken, moet ik leren praten met mijn computer. Ik ga hem immers vertellen wat hij
moet
doen.
</p>
<p>
De taal die hij spreekt is code en zeker in het begin is het code en lijkt het op een zeer geheime
taal. Hij
bestaat uit leestekens, cijfers en letters.
Ook moet ik deze taal precies leren spreken, anders begrijpt de computer nog niet wat hij moet doen.
</p>
<p>Eén van de talen die de pc spreekt is: 'Hyper Text Markup Language' afgekort HTML. Dit is de
communicatietaal
tussen de webpagina en de webbrowser.
Hyper text, zou je kunnen vertalen naar: 'tekst waarin verwezen word naar aanvullende informatie'.
Markup language kunnen we vertalen als 'opmaaktaal'.
</p>
<p>Met HTML kan je dus een webpagina indelen en leesbaar maken.
</p>
<p>Een webpagina is opgemaakt in platte tekst, hiervoor kan ik gewoon een simpele tekst editor zoals
kladblok.
gebruiken. Gelukkig zijn er ook çode-editors waarmee je deze kan bewerken, bv 'Visual-Code'.
Omdat het werken vanuit kladblok niet ideaal is, gebruikt elke developer een
code-editor.
</p>
<p>HTML bestaat uit elementen en tags. De tag omvat het element wat je wilt gebruiken.
</p>
<p>Er zijn blok- en inline-elementen en onzichtbare elementen. De laatste geven de browser door wat ze
moeten
doen met de tekst. Dit is handig voor spraakgestuurde browsers.
De blok- en inline-elementen worden gebruikt om de structuur en lay-out weer te geven. Denk bv aan
een
paragraaf in de tekst of een kop boven de tekst.
</p>
<p>De tag is het begin en einde van een element, deze bestaat uit een begin- < element > en
eind-tag. < \ element>
.
</p>
<p>
Ik kan ook elementen in elementen plaatsen en zo eindeloos gebruiken en combineren. Dit heet:
'nesting'.
Ik kan oneindig doorgaan, bv een lijst in een lijst of een tekst op een foto.
Een goed voorbeeld van pagina's opmaken zien we dagelijks in de krant. Deze heeft een bepaald
formaat en
binnen dat formaat moet alles passen, de artikelen, koppen maar ook de foto's en andere elementen.
</p>
<p>Binnen mijn pagina kan ik links en paths gebruiken. met een link kan ik mijn bezoeker doorsturen naar een
andere pagina
op het web of naar een ander deel op mijn eigen pagina.
Een path gebruik ik om te linken naar bv de foto's of video's die direct zichtbaar zijn op mijn
pagina.
Ik haal deze dan op vanuit een andere directory, deze kan op mijn pc staan of ergens op het web.
Als ik het path gebruik dan krijgt mijn bezoeker direct de foto of video te zien.
</p>
<p>Dan heb ik ook nog semantic elements (de onzichtbare elementen). Deze gebruik ik om de browser te
vertellen,
wat de functie is van het element. Een voorbeeld hiervan is een spraakgestuurde browser. Stel je
voor dat ik
niet vertel wat de functie is van mijn element. Als ik dan een voettekst gebruik, wordt deze bij
elke
pagina opgelezen. Dat wil ik niet. Als ik hiervoor het element
< footer > gebruik weet de browser dat hij dit element niet hoeft op te lezen.
</p>
<p>Dit is in het kort wat HTML inhoud, een taal die communiceert met de browser. </p>
<p>maar.... er is nog meer, lees hierover in mijn volgende blog: <a href="/blog_2.html">er is ook
CSS..</a>
</p>
</article>
</div>
</main>
<div class="footer">
<footer>
<h6>copyrights by owner </h6>
<nav class="flex-container-1">
<button class="flex"><a href="/index.html">Home</a></button>
<button class="flex"><a href="/aboutme.html">About me</a></button>
<button class="flex"><a href="/blog.html">Blog</a></button>
<button class="flex"><a href="/contact.html">Contact</a></button>
</nav>
</footer>
</div>
</div>
</body>
</html>