HTML & CSS Les 1 – Programma’s installeren en HTML

Het doel van de Next Web Coding lessen is het maken van een simpele website in HTML/CSS. We zullen leren hoe je HTML en CSS codeert in Visual Studio Code. Vervolgens maken we met ‘mediaqueries’ de website responsive, waardoor de site verandert afhankelijk van het apparaat, mobiel of desktop.

In deze video wordt de les stapsgewijs doorlopen. Dezelfde stappen lees je ook hieronder.

Visual Studio Code installeren

Download het pakket voor jouw besturingssysteem op https://code.visualstudio.com/Download.

Mac gebruikers let op: Op de site van VSCode download je een zip bestand. Dit bestand kun je uitpakken door er op dubbel te klikken. Vergeet niet om het nieuwe Visual Studio Code icoontje vervolgens naar je Applications folder te verplaatsen. Kijk de video als je niet weet hoe dit moet.

Als je VSCode voor het eerst opstart zie je een scherm dat er zo uit ziet:

Je ziet dat het ‘Welcome’ tabblad geopend is. Klik onderaan op het vinkje voor ‘Show welcome page on startup’. Als je met de muis over de titel van de tab beweegt zie je een x om de tab te sluiten. Sluit deze tab.
We doen een kleine aanpassing in de instellingen zodat een aantal overbodige menu’s verborgen worden.
Ga naar File > Preferences > Settings (Windows) of Code > Preferences > Settings.
Zoek op workbench.activityBar.visible en zet het vinkje uit:

Zoek daarna op explorer.openEditors.visible en verander het getal naar 0:
Klik bovenaan het scherm op View. Zet daar Show minimap en Show breadcrumbs uit.

Extensies installeren

Visual Studio Code is op zich al een compleet programma, maar doordat enthousiastelingen nóg meer mogelijkheden maken, kunnen we allemaal handigheidjes toevoegen. Dit noemen we extensions.

Ga in VSCode naar View > Extensions.
Typ in het zoekveld Live Server.
Klik bij het eerste resultaat (gemaakt door Ritwich Dey) op Install.
Installeer op dezelfde manier Beautify (gemaakt door HookyQR)
Ga weer naar File > Preferences > Settings (Windows) of Code > Preferences > Settings
Zoek op format.
Stel in als onderstaande screenshot.
Het Extensions menu kun je weer sluiten door te klikken op View > Explorer.

Chrome installeren

Als je Chrome nog moet installeren, volg dan de aanwijzingen op
Chrome downloaden
Chrome instellen als uw standaardbrowser

Hello World!

We gaan nu ons eerste project maken. Maak daarvoor in je finder of verkenner een nieuwe map aan. Het is erg belangrijk om meteen vanaf de eerste dag een goede bestandsstructuur aan te houden. Dit voorkomt – niet overdreven – minstens 50% van de problemen later. Wij raden aan om bijvoorbeeld de volgende structuur te gebruiken:
```
📂 CMD
 ┃
 ┗ 📂 websites
      ┃
      ┣ 📂 les1
      ┃    ┃
      ┃    ┗ 📄 bestandenvoorles1
      ┃
      ┣ 📂 les2
      ┣ 📂 les3
      ┗ ...
```
Leer jezelf ook aan om NOOIT hoofdletters, spaties of bijzondere leestekens te gebruiken in de namen van bestanden en mappen die je gebruikt voor websites. Gebruik alleen kleine letters en cijfers

Als je de map hebt aangemaakt, kun je deze in Visual Studio Code openen.
Klik op File > Open (mac) of File > Open Folder… (windows). Selecteer je map en klik op Open (mac) of Select Folder (windows).

Je ziet nu dat de lege map in het Explorer menu (zie plaatje) van VSCode zichtbaar is.
Klik op het icoontje voor New File. Je wordt gevraagd om de bestandsnaam van je nieuwe bestand. Typ daar index.html

index.html is de standaard bestandsnaam van de eerste pagina van je website. Noem je eerste bestand daarom altijd zo.
Typ in het bestand html:5 en druk op enter. Je ziet nu code verschijnen. Druk op tab totdat Document geselecteerd is. Vervang die tekst door Welkom! Druk nog een keer op tab, nu staat de cursor tussen <body> en </body>. Typ hier Hello World!

Sla het bestand op met ⌘-S (mac) of Ctrl-S (windows).

Rechtsklik in de Explorer op een HTML bestand en kies Open with Live Server. De pagina opent in je standaard browser.
Maak een wijziging in je HTML of CSS bestand en sla op. De browser wordt automatisch ververst, je hoeft de pagina niet opnieuw te openen.

HTML Tags

Verwijder alle inhoud uit de body van je pagina. Dus alles wat tussen <body> en </body> staat.
Ga naar http://www.blindtextgenerator.com/lorem-ipsum, kies 50 words en 3 paragraphs en kopieer de tekst die je rechts ziet. Plak het in je body.
Zonder verder iets te veranderen sla je nu je bestand op, en bekijk je het in Chrome. Als het goed is zie je nu de tekst die je geplakt hebt, maar zonder enters ertussen.

Paragraphs and line breaks

Zoals je ziet negeert HTML enters. Het maakt voor de browser niet uit of je alle code op één regel zet, of dat je alles netjes onder elkaar zet. Natuurlijk is het voor de leesbaarheid van de code wel handig om enters te gebruiken.
Als je een paragraaf (een stuk tekst met een witregel erna) wilt maken, zet je de tekst tussen <p> en </p> tags.

<p>Dit is een paragraaf.</p>
<p>En dit is de volgende paragraaf.</p>

Dit is een regel paragraaf.
En dit is de volgende paragraaf.

Als je nieuwe regel wilt beginnen zonder witruimte (een line break), gebruik je de <br> tag aan het eind van de zin. De <br> tag heeft geen sluittag.

<p>Dit is een paragraaf <br> met een enter er in.</p>

Dit is een paragraaf
met een enter er in.

Verander je code zodat je Lorem Ipsum verdeeld wordt over drie paragrafen. Gebruik op een willekeurige plek in de tekst ook een line break.
Zoek op http://www.w3schools.com/tags/ op wat de <strong> en <em> tags doen en hoe je ze gebruikt. Maak één woord in je tekst dikgedrukt en een aantal woorden cursief. Doe hetzelfde met <sub> en <sup>.
<h1> t/m <h6> zijn elementen die niet in een paragraaf, maar daarbuiten worden gebruikt. Zoek uit hóe en maak een koptekst boven je pagina.

Attributen

Eigenschappen van elementen
Soms heeft een element meer informatie nodig. Bijvoorbeeld een hyperlink, die link moet niet alleen weten welke tekst hij moet tonen, maar ook naar welke pagina of site hij je moet brengen nadat je er op klikt. Die extra informatie geven we met een attribuut.
• Attributen staan altijd in de begintag.
• Attributen zijn altijd een combinatie van een naam en een waarde: naam="waarde"

De tag voor een hyperlink is <a>. De naam van het attribuut die aangeeft waar de link je heen stuurt is href. Een hyperlink maak je dus als volgt:

<a href="http://www.google.com">Klik hier!</a>
 ┃ ┗━━━━━━━━━━━━┳━━━━━━━━━━━━━┛
a-tag     href-attribuut

Voeg aan je pagina twee hyperlinks toe, naar websites van je eigen keuze. Let op: vergeet niet http:// voor je link te zetten, anders denkt de browser dat het een link naar een pagina op je eigen site is.
Maak ook een email link naar je eigen email-adres. Zoek op internet op hoe dat moet.

Afbeeldingen

Ook een afbeelding is een voorbeeld van een HTML-tag met attributen.

Klik in VSCode op New Folder. Noem je nieuwe map img
Zoek op internet een niet al te groot (maximaal 500 x 400 pixels) plaatje en bewaar het op je computer in de img map die je zojuist gemaakt hebt. Als het goed is verschijnt het bestand nu vanzelf in je img map in VSCode.
Open index.html en voeg in je body een tag toe:
<img src="img/jouwafbeelding.jpg" alt="een beschrijving">
Sla op en controleer of je webpagina inclusief afbeelding werkt. Als het niet werkt heb je waarschijnlijk de naam van het bestand niet goed getypt (let ook vooral op de bestandsextensie).
Je kunt ook van een afbeelding een hyperlink maken. Experimenteer of zoek op hoe dit werkt.