-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
185 lines (179 loc) · 8.01 KB
/
index.html
File metadata and controls
185 lines (179 loc) · 8.01 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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="sv">
<head>
<title>HTML & CSS Guide</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: rgb(36, 40, 42);">
<div class="Inner">
<a href="en/index.html" class="lang-button">English</a>
<a href="github.html" class="Github">Github</a>
<div class="Heading">
<h1 style="text-align: center; color: #f5f5f5;">HTML & CSS Guide</h1>
</div>
<div class="Intro">
<p>
Tänk på att det alltid ska vara "<>" för att det ska räknas som en "tag" i HTML.
</p>
<p>
Sedan när man stänger en linje där C# det vi gör i programmering har ; här är det samma
som start blocket fast ett / innan ordet exempel visas nedanför.
</p>
<p>
En tag är en funktion, precis som i C# finns det int, double, string, osv, medans i html
finns det p, h1, h2, h3, img, och mer.
</p>
</div>
<div class="Introduktion">
<div class="Stycke1">
<p>
Det är viktigt att det alltid finns DOCTYPE vid toppen av din html fil,
Det gör så att filen du skriver vet om att språket du skriver i är HTML.
</p>
<p>
En till viktig sak är att efter man har skrivit så ska man öppna med html.
Det berättar samt för programmet att all kod inom <html> är html språket.
</p>
<p>
En sak man kan lägga till i <html> är lang="sv", det säger till webbläsaren att din hemsida är skriven
i det språket, sv står för svenska, en står för engelska. Det finns olika förkortningar för alla språk
men dessa är de viktiga.
</p>
</div>
<div class="kodBlock1">
<code>
<pre><!DOCTYPE html>
<html lang="sv">
Input Code:
</html></pre>
</code>
</div>
</div>
<div class="HeaderParagraph">
<div class="Stycke2">
<p>
Det finns flera olika "text typer", bland annat H1, H2, H3, p, H1-H3 är Headers som på svenska är rubriker.
Medans p står för Paragraf, som är om du ska skriva ett stycke, exempel är denna rutan jag skriver
just nu. Skillnaden på H1-H3 är hur stor Headern är, Header kan också kallas som rubrik, underrubik.
</p>
<div class="HeaderExamples">
<h1>H1</h1>
<h2>H2</h2>
<H3>H3</H3>
<p>P</p>
</div>
</div>
<div class="kodBlock2">
<code>
<pre><!DOCTYPE html>
<html>
<h1> Hej </h1>
<h2> Hej </h2>
<h3> Hej </h3>
<p> Hej </p>
</html></pre>
</code>
</div>
</div>
<div class="BodyHeadParagraph">
<div class="Stycke3">
<p>
Det finns 2 saker som ska vara inuti <html>, Body och Head.
Skillnaden mellan dessa är att body är det som syns, Head är det som händer i bakgrunden,
fortfarande viktigt men syns inte på samma sätt som body, exempel på en sak det kan göra är
<title> som skriver titeln på fliken när du har hemsidan uppe. Body är där du lägger
alla Headers, Paragrafer, och allt annat som du kanske vill ha på hemsidan som syns.
</p>
</div>
<div class="kodBlock3">
<code>
<pre><!DOCTYPE html>
<html>
<head>
<title>Flikens Titel</title>
</head>
<body>
<h1>Hej</h1>
</body>
</html></pre>
</code>
</div>
</div>
<div class="CSSParagraph">
<div class="Stycke4">
<p>
Som jag sa innan finns det 3 typer av CSS, det finns inline,
internal, external, inline som det heter är I linjen, du säger
vad den specifika linjen ska ha för konfigurationer
internal är som external skillnaden är att external är
en extern fil som den hämtar information från, medans internal
öppnas med <style> i <head>.
</p>
<p>
Exemplet bredvid säger till att header 1 ska vara färgen svart,
tänk på att färger måste skrivas på engelska om du vill använda de
som redan finns.
</p>
<p>
Det andra exemplet sätter body backgrunds färg till vit.
</p>
<p>
External är exakt som internal i hur koden fungerar fast man måste hämta information från en annan fil,
exempel på filnamn kan vara style.css <br>
exempel visar också hur man importerar data från en annan fil,
vid tiden jag skriver detta är det överkurs, kanske ändras i framtiden.
</p>
</div>
<div class="kodBlock4">
<code>
<pre><!DOCTYPE html>
<html>
<head>
<title>Flikens Titel</title>
<link rel="stylesheet" href="style.css">
<style>
body {
background-color: white;
}
</style>
</head>
<body>
<h1 style="color:black;">Hej</h1>
</body>
</html></pre>
</code>
</div>
</div>
<div class="ImageParagraph">
<div class="Stycke5">
<p>
När det kommer till att lägga in bilder så finns det bara ett simpelt sätt,
Det exemplet visas undertill, en viktig sak är att skapa en mapp där du kan
ha dina bilder för att det ska vara organiserat, i detta exemplet kommer mappen
heta "images" där vi lägger in våra bilder, tänk på att bilden ska ha ett
simpelt och kort namn så det blir enklare.
</p>
<p>
Man öppnar en bild med <Img> där som inline skriver man inom <>,
src="" Betyder vart bilden är lokaliserad, i detta fallet har vi lagt det
i mappen "images" och sen vad bilden heter som skapar "images/Fladdermus.png"
Det är viktigt att inkludera filtypen vid slutet, om det är en jpg, png, jpeg, gif, eller
vad det nu kan vara. Sedan är alt="" en text som byter ut bilden om bilden inte finns,
eller laddas eller någon där bilden inte vill ladda och en text behöver byta ut
bilden.
</p>
</div>
<div class="kodBlock5">
<code>
<pre><!DOCTYPE html>
<html>
<body>
<img src="images/Fladdermus.png" alt="Fladdermus">
</body>
</html></pre>
</code>
</div>
</div>
</div>
</body>
</html>