Hvad er HTML?
På Code.org er der en træningskonsol man kan bruge:
https://code.org/educate/weblab
Og på W3Schools hjemmeside er der både en træningskonsol og tutorials:
W3Schools html-tutorial
W3Schools CSS-tutorial
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html> - altid øverst i html-dokument<html></html> - start derefter med <html> øverst i dokumentet under DOCTYPE. Og nederst i dokumentet: </html><head></head> - efter starten på html-dokumentet, skal vi så have en 'head' i toppen af vores -html-dokument. Inde i 'head' indsætter man alt hvad der skal kodes til hjemmesiden, som ikke skal ses direkte. Det kunne være titlen på hjemmesiden, som ses øverst i fanen. Det lille icon, der ses i fanen. Download af en Google typografi. Henvisning til et CSS-dokument osv.<title></title> - inde i 'head'-elementet, kan vi som nævnt, skrive titlen på hjemmesiden, som også vil figurere i fanen i browseren. Titlen skriver inde mellem de to title-tags.<body></body> - efter 'head'-elementet, kommer 'body'-elementet. Det er inde i vores body-element, at vi kommer til at have hovedparten af vores html-kode.<h1></h1> - Overskrift 1. Bruges til den største af de overskrifter der findes indbygget i html. Der findes 6 overskriftsstørrelser i html. Fra h1 til h6. Hvis man ønsker en større overskrift, kan man med hjælp fra CSS (style), selv definere størrelsen på teksten. Se her: <h1 style="font-size:60px;">Heading 1</h1><p></p> - P-elementet bruges omkring tekst. P står for paragraf. P-elementet pakkes rundt om al' brødtekst.<br> - Br-elementet bruges til mellemrum. Det er en forkortelse for 'break' (pause). Br-elementet er et af de få elementer, der ikke bruger slut-tags. Der skrives bare <br> og så bliver der lavet et mellemrum.<a href="https://www.w3schools.com">Visit W3Schools</a> - link. Kan tilføjes ekstra efter link-adressen. Fx taget="_blank", for at åbne linket automatisk på en ny fane. Se her: <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a><img src="img_girl.jpg"> - Billede. Ikke brug for slut-tag. Formentlig nødvendigt at hjælpe billedets størrelse lidt på vej. Fx. ved at tilføje bredde eller højde. Kan blot nøjes med at definere en højde eller bredde. Se her: <img src="img_girl.jpg" width="100"><b></b> - Bold. Sæt elementet omkring tekst, der skal være med fed.<i></i> - Kursiv. Sæt elementet omkring tekst, der skal være i kursiv.<mark></mark> - Markeret. Sæt elementet omkring tekst, der skal være markeret med en farve.<ins></ins> - Understreget tekst. Sæt elementet omkring tekst, der skal være understreget.<sub></sub> - Nedsunket tekst. Sæt elementet omkring tekst, der skal være rykket en smule under resten af teksten.<sup></sup> - Ophævet tekst. Sæt elementet omkring tekst, der skal være hævet en smule over resten af teksten.
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="https://mdmensing.dk/itk/c.ico" type="image/x-icon">
<title>Alt om HTML (og CSS)</title>
<style>
body {
font-family: "Courier New";
margin: 20px;
}
mark {
background-color: #b8f9eb;
color: black;
}
a {
color: hotpink;
}
hr {
color: #6a0ad1;
background-color: #6a0ad1;
height: 3px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
...
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> <title>
<link rel="stylesheet" href="style.css">
<head>
<body>
...
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}