Sprint 1: HTML, CSS & FTP

In software ontwikkelingsteams wordt vaak de Agile filosofie toegepast, wat in de praktijk betekent dat er met Scrum gewerkt word. Scrum betekent dat je in korte, intensieve sprints werkt, waarin je gefocust een aantal doelen probeert waar te maken. Deze cursus bestaat uit 5 sprints die elk 2 tot 5 weken duren. Deze eerste sprint duurt twee weken.

Deze sprint bestaat daarom uit 5 uur klassikaal les (2x2x1.25). Per lesuur wordt verwacht dat je zelfstandig nog eens 3 uur thuis werkt (of 1 uur full focus)

In de les krijg je achtergrondinformatie, gelegenheid om vragen te stellen of om hulp te vragen en gaan we aan het werk.

HTML

1. HTML-tags moet je openen en sluiten

Bekijk de Powerpoint van les 1. Die begint met een dictee. Het punt is dat HTML net zo werkt als aanhalingstekens (“”) en tussen haakjes (…). En de meeste mensen hebben geen probleem om die te gebruiken. HTML- tags hebben namelijk een opening-tag (<…>) en je moet ze afsluiten (</…>). Er zijn een aantal HTML-tags die op zichzelf staan, en dus niet nog eens hoeven worden afgesloten. Deze tags kunnen nooit inhoud bevatten, vandaar dat ze niet afgesloten hoeven worden. In het Engels heten ze self-closing tags. Deze hebben de vorm <… />

2. HTML bestaat uit objecten met een naam, attributen en kinderen

Kijk maar naar (1) op onderstaande cheatsheet. In de linker kolom zie de syntax van normale tags en self-closing-tags. Een tag heeft een naam, eventueel ook attributen die elk een waarde hebben, en eventuele kinderen die tussen de HTML-tags in staan (in de innerHTML). HTML tags kunnen oneindig genest worden. Je kunt ze dus oneindig in elkaar plaatsen. De browser ziet alle html-elementen als objecten die in een boomstructuur aan elkaar gerelateerd zijn. Deze boom-structuur noemen we de DOM: de Document Object Model.

MAAR: Sommige HTML-tags mogen alleen op bepaalde plaatsen voorkomen, of mogens zelfs maar 1x voorkomen. Dit geldt met name voor een paar top-level tags die de HTML-pagina maken. Kijk naar (2) in bovenstaande cheatsheet. Merk op dat:

3. Elke HTML-pagina begint met een DTD: een Doctype Declaration

<!DOCTYPE html>


De DTD vertelt de computer en de browser dat water volgt een HTML-document is. De browser verwacht daarom HTML-tags en een document die voldoet aan hoe een HTML-pagina eruit hoort te zien. Er zijn veel verschillende DTD’s voor verschillende bestanden. HTML is namelijk een speciaal soort XML en al die XML-achtige bestanden hebben een DTD. Bijvoorbeeld: KML, e-mail, excel-documenten (als je ze unzipped). Merk op dat de DTD geen tag is en dus niet afgesloten wordt.

4. Elke HTML pagina bestaat uit 4 tags die MOETEN voorkomen, en die niet meer dan 1x mogen voorkomen:

  1. de <html> -tag omsluit alle HTML in het document. Het is daarom de meest buitenste tag van het document.
  2. <html> bevat altijd als eerste een <head> die meta-informatie over het document bevat. Dit is informatie die niet perse zichtbaar is op de pagina, maar die wel beschikbaar is voor zoekmachines, de browser of andere software.
  3. De <head> bevat op zijn beurt altijd 1 <title>, die de pagina-titel bevat welke in de tab van je browser wordt getoond. De <head> bevat ook links naar externe scripts (o.a. css en javascript) die geladen moeten worden alvorens de pagina geladen kan worden. Indien stijl in het document zelf is opgeslagen, dan staat dit ook als 1 <style>-tag in de head.
  4. De head wordt gevolgd door de <body> – het zichtbare deel van de site. In de body kunnen tags oneindig genest worden.

In kolom (3) van bovenstaande cheatsheet zie je de meestgebruikte HTML-tags. Een uitgebreidere lijst met meestgebruikte tags gaan we in de opdrachten gebruiken en vind je hier: meestgebruikte HTML-tags.

Implementatie: van HTML-pagina tot online website

Bovenstaande cheatsheet geeft genoeg informatie om je eerste HTML-document te maken, welke direct in je browser bekeken kan worden.

Om HTML te schrijven, heb je wel nog een programma nodig. Niks ingewikkelds, je kunt hier elke tekst-editor voor gebruiken, zoals het kladblok/notepad wat standaard bij windows zit. Bij het extra materiaal vind je een paar alternatieve tekst-editors. In deze cursus gaan we een editor gebruiken die speciaal ontwikkeld is voor web-ontwikkelaars. Ideaal dus voor wat wij aan het doen zijn.

Maak nu Opdr 1. Je eerste webpagina:

  • Je leert Brackets te installeren en een bestaande html-pagina als template gebruiken. Je kunt natuurlijk ook met een lege pagina beginnen, maar in de praktijk is een template gebruiken vaak handiger.
  • In Opdracht 1 moet je vervolgens alle veelgebruikte HTML-tags aan je document toevoegen. Zoek ze stuk voor stuk op op W3schools en voeg ze toe aan het document. Kijk wat er gebeurt. Als je klaar bent heb je een document waar je altijd in kunt afkijken: een cheatsheet.
  • Gebruik de HTML cheatsheets uit het extra materiaal

Opdr 2. Je eerste website

  • In deze opdracht begin je het best met een leeg document .
  • Maak 3 html-pagina’s die naar elkaar linken.
  • Voeg een afbeelding toe. Sla deze in dezelfde map op als je html-documenten.
  • Onderzoek hoe relatieve vs absolute links werken.

Van Stijl-attribuut naar CSS

In opdracht 1 heb je al wat stijl aan je HTML-documenten toegevoegd. Je hebt tekst bijvoorbeeld een kleurtje gegeven, of misschien de achtergrond van een blok. Ook heb je lettertypes aangepast. Bekijk nu de powerpoint over CSS. Dit is een korte powerpoint, want CSS is niet ingewikkeld:

Wat je als <style>attribuut bij de HTML-tags schreef, kun je namelijk ook in de <head> plaatsen, binnen de <style>tags. Je gebruikt dan een iets andere syntax om aan te geven op welke HTML-tags de stijl van toepassing is, maar hoe de eigenschappen (of parameters) en waardes beschreven worden blijft hetzelfde. Een HTML-document bevat maar 1 style-tag en die zit altijd in de <head>. Meestal is het de laatste tag in de <head>. In de <style> tag wordt alle stijl verzameld die voor deze pagina geldt. Als je de inhoud van deze tag naar een apart bestand kopieert, heb je een .css-bestand. Je moet dan een <link> tag gebruiken om de HTML en de CSS weer met elkaar te verbinden. Het voordeel hiervan is dat je dezelfde code dan op meerdere pagina’s kan toepassen, liefst zelfs voor de hele website.

1 Een voorbeeld van stijl in de html-tag <p style=”color: black; size: 1em”> Maakt de tekst van 1 paragraaf zwart en formaat 1 em
2 wordt css in de style-tag (in de <head>): <style> p {color: black; size: 1em} </style> Maakt de tekst van ALLE paragrafen op de pagina zwart en van formaat 1em, tenzij deze regel wordt gevolgd door een css-tag of html-stijl-attribuut die iets anders voorschrijft.
3 wordt in een css-document: p {color: black; size: 1em} Maakt de tekst van ALLE paragrafen op de website zwart en van formaat 1em, tenzij ze niet hetzelfde css-document gebruiken, of tenzij deze regel wordt gevolg door een css-regel of html-stijl-attribuut die iets anders voorschrijft.

Bovenstaande tabel laat een aantal dingen zien:

  1. Stijl kan op drie plekken gedefinieerd worden, namelijk als attribuut van een html-tag, in de <style> tag in de <head>, of als een extern css-document.
  2. CSS heeft de volgende syntax: selector {eigenschap: waarde}

    De Selector en { } zijn eigen aan css, maar de inhoud van de haakjes blijft altijd hetzelfde, waar en op welke manier de stijl ook gedefinieerd is. De combinatie “eigenschap: waarde” is een statement, of een css-regel. CSS kan oneindig veel regels bestaan welke van elkaar gescheiden worden door punt-komma’s (;). Voor leesbaarheid horen css-regels elk op een nieuwe regel geschreven te worden, maar om je document zo klein mogelijk te houden schrijf je ze juist allemaal achter elkaar (minify).

    Met de selector selecteer je op welke tag(s) de stijl van toepassing is. De meestgebruikte selectoren zijn html-tags, de Class of ID-attributen en de a:hover selector. Lees meer meer over (complexe) selectoren op deze pagina over CSS selectoren.

  3. Precedence: Als er meerdere stijl-regels voor een element bestaan, dan overschrijven ze elkaar volgens een bepaalde hierarchie: er zijn voorrangsregels. Je moet je indenken dat een computer code net als wij van boven naar beneden leest en interpreteert. Hij doorloopt dus eerst het CSS-document, daarna de <style>-tag van het document dat hij gaat afbeelden en als laatste de stijl-attributen van individuele html-tags in het document. Elke keer als hij een nieuwe stijl-regel tegenkomt, past hij die toe. Het effect is dat regels die vroeg in de verwerking zijn tegengekomen worden overschreven door regels die laat worden tegengekomen. Deze waterval-structuur geeft CSS ook zijn naam: Cascading Style Sheets.

Implementatie: stijl scheiden van html

Je weet nu genoeg over CSS om het toe te passen in je eigen webpagina of website. Om van HTML naar HTML+CSS te gaan moet je stijl van je inhoud/HTML scheiden. Hoe je dit doet staat hieronder. Je oefent het ook in Opdr 3. Je eerste online site.

  1. Verwijder alle stijl die als attribuut in je html-tags staat, en verplaats dit naar een <style> tag in de <head>.
  2. Verwijder vervolgens de hele <style> tag, en kopieer de INHOUD van die tag (dus zonder de tags zelf) naar een tekst-document. Sla dat document op met de extensie .css, ergens in de buurt van (liefst naast) je html-documenten.  
  3. Plaats nu een link-attribuut in elke html-pagina die van dezelfde css gebruik moet maken:  
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
  4. Heb je uitzonderingen in je pagina, of in een bepaald element? Plaats de bijbehorende stijl dan alsnog in de <head> van de pagina, of als attribuut bij het element.

Online met FTP

Je hebt nu een simpele website gemaakt die op je computer staat. Bekijk hem eens in de browser zonder Brackets te gebruiken.

Je kunt je website nu online gaan zetten. Of hij nu ‘af’ is of niet, je kunt ook aan je site verder werken als hij al online staat.

Online zetten doen we met FTP: de File Transfer Protocol. Met dit protocol kunnen computers bestanden uitwisselen. Je kunt hiermee dus bestanden op een remote server plaatsen, bewerken of ze van de server deleten. Meestal doe je dit door twee mappen te synchroniseren. De lokale en remote map zijn dan elkaars spiegelbeeld en hebben dezelfde inhoud, die liefst exact hetzelfde is. Je kunt ook individuele bestanden uploaden, downloaden of bewerken.

Maak nu Opdr 3. Je eerste online site af:

  • Installeer de FTP-extensie voor Brackets (of een alternatief uit het extra materiaal)
  • Maak connectie met de FTP-server van de host
  • Upload je bestanden (let op dat de ‘home’-pagina ALTIJD index.html heet. Dit is de pagina die browsers standaard tonen als je naar een map browst.

Hoe werkt het internet?

Je hebt nu een website gebouwd en online gezet, maar hoe werkt het internet eigenlijk? En hoe is het ontwikkeld?

Maak de volgende twee huiswerk-opdrachten:

Extra materiaal

  • Cheatsheets & Naslagwerken (komt)
  • Veelvoorkomende HTML-tags (komt)
  • CodeCademy & Udemy cursussen (komt)
  • StudyStack (komt)
  • FTP-alternatieven (komt)
  • tekst editors & alternatieven (komt)