HTML leren
Cursus HTML
HTML LEREN
Lessen
1.Inleiding
2.De basisstructuur
3.Toevoegen van tekst
4.Creëren van hyperlinks
5.Tekst vormgeven met CSS
6.Navigatie toevoegen
7.Navigatie verfraaien met CSS
8.Elementen positioneren
9.Website uploaden
1.Inleiding
1. Inleiding
Deze online Learnit cursus is gemaakt om u een indruk te geven van de mogelijkheden van HTML en CSS. In deze cursus zullen zoveel mogelijk de Nederlandse termen gehanteerd worden en tevens zullen enkele populaire sneltoetsen aan bod komen. De cursus bestaat voornamelijk uit uitleg, tips en opmerkingen waarmee u direct aan de slag kunt.
Opzet van de cursus
De cursus begint met het uitleggen van de basisbeginselen van HTML. We laten u zien hoe u eenvoudig een begin kunt maken met een nieuwe website. Ook kijken we naar het vormgeven van teksten, afbeeldingen en hyperlinks met behulp van CSS. Uiteindelijk zal het daadwerkelijk online zetten van de gemaakte website behandeld worden.
Het resultaat
Klik hier om een voorbeeld te zien van het uiteindelijke resultaat na het doorlopen van deze gratis online training.
Software
Voor het maken van een website en dus voor het volgen van deze online training is een eenvoudige teksteditor nodig. Gelukkig zit op elke computer zo'n eenvoudige teksteditor. Op een Windows computer zit in het startmenu onder het kopje bureauaccessoires het programma kladblok/notepad. Deze is heel geschikt om code in te typen omdat het geen opmaak mogelijkheden heeft zoals vet of cursief in tegenstelling tot Microsoft Word. Tevens zijn er allerlei gratis teksteditors te downloaden voor zowel Windows als voor Apple computers. Een bekend programma voor Windows is Notepad++ en een bekend programma voor de Apple is Textwrangler. De gebruikte afbeeldingen in deze cursus zijn van een Apple computer maar voor het leren werken met HTML en CSS maakt het geen verschil of er gewerkt wordt op een Apple computer of op een Windows computer.
Tip: als u enthousiast bent geworden na het doorlopen van deze online HTML en CSS cursus, is het wellicht een goed idee om uw enthousiasme vast te houden. U kunt u dan direct inschrijven voor de cursus HTML en CSS basis of de HTML en CSS vervolg om uw vaardigheden uit te bereiden. Uiteraard met professionele ondersteuning.
Learnit wenst u alvast veel succes maar vooral veel plezier
2.De basisstructuur
Beginnen met coderen
Op de onderstaande afbeelding ziet u de basisstructuur die geldt voor elke website. U kunt deze code rustig overnemen om u website mee te beginnen. De code begint met een zogenaamde html-open-tag en uiteindelijk sluit de code met de html-sluit-tag. Een tag kunt u het beste zien als een label en alles wat als een tag staat genoteerd in de HTML code zal niet zichtbaar worden voor de bezoekers van uw website. De html-sluit-tag wordt gekenmerkt door de slash ('/') die in de tag staat en zodoende is er door de open- en sluit-tag een zogenaamde HTML-container gevormd. Het is de bedoeling dat de website zich volledig bevindt binnen de HTML-container.
Binnen de HTML-container bevinden zich nog twee andere containers. Als eerste zien we de head-container gevolgd door de body-container. De inhoud van de head-container wordt niet getoond op de website. De head wordt onder andere gebruikt om de website te omschrijven, wat vervolgens interessant is voor zoekmachines. De body-container is wél het zichtbare gedeelte van de website. Hier zal de inhoud van de website zoals paragrafen, afbeeldingen en andere media getoond worden.
Om de basisstructuur volledig te maken is het ook nodig om de gebruikte HTML versie te definiëren. Tijdens deze cursus gaan we aan de slag met HTML5 en dat kunnen we aangeven door <!DOCTYPE html> direct boven de HTML container te zetten. Naast deze toevoeging zijn er nog enkele toevoegingen nodig om de basisstructuur te voltooien.
Als eerst is het verstandig een titel-container te plaatsen in de head van de website.
<title>Een website over bloemen.</title> (let op de Engelse spelling). Het is een belangrijke container omdat hiermee aangegeven wordt waar de website over gaat. Onder andere Google hecht ook aardig wat waarde aan de inhoud van deze container: dus vergeet hem niet.
Vervolgens dient er nog aangegeven te worden welke karakters gebruikt worden op de website. Door de code <meta charset="utf-8"> te plaatsen in de head van de website geeft u aan dat u alleen karakters gebruikt die in de utf-8 verzameling zitten. Deze verzameling omvat onder andere het Latijnse alfabet.
Uiteindelijk ziet de HTML code eruit zoals op onderstaande afbeelding:
Opslaan
Nu het begin gemaakt is kan het geen kwaad om de website (het tekstbestand met de code) op te slaan met de naam index.html. Het is handig om een map op het bureaublad te plaatsen waar alle onderdelen van de website in worden geplaatst. (Denk hierbij bv. aan alle html-, jpg-, pdf-, en mp3-bestanden.) De naam van de map mag u zelf bedenken. Wanneer u uiteindelijk de inhoud van de map gaat uploaden naar het internet zal de volledige (complete) website online staan.
Als laatste is het nog belangrijk om te weten dat de eerste pagina van een website (de homepage) altijd de naam index.html heeft. Alle andere pagina's van uw website mag u zelf een naam geven.
3. Toevoegen van tekst
Een logische volgende stap bij het maken van een website is het toevoegen van content. In dit hoofdstuk zullen we ons beperken tot het toevoegen van een paragraaf met tekst en een bijbehorende titel.
Een titel
Het plaatsen van een titel boven een paragraaf gaat als volgt. Binnen de body-container in de HTML code plaatst u de volgende code <h1>The flower of life</h1>. De h1-tag zorgt ervoor dat de tekst in de h1-container wordt gezien als een titel (de h van deze tag staat voor header). Zoals de h1-container is bedoeld voor een hoofdstuk titel zo kunt u de h2-tag gebruiken voor een subparagraaf van dat hoofdstuk. Uiteindelijk kunt u subparagrafen plaatsen tot het niveau van de h6.
Een paragraaf
Het plaatsen van de paragraaf met tekst onder onze vers gemaakte titel gaat op een soortgelijke wijze als de titel. Het verschil is alleen dat er nu niet gebruikgemaakt wordt van de h1-tag maar juist van de p-tag (de p staat hier voor paragraaf). Plaats daarom deze <p>...</p> container onder de titel. U kunt de drie puntjes vervangen voor deze interessante tekst.
Het eindresultaat zal er ongeveer uitzien zoals op onderstaande afbeelding. De gebruikte tabs voor het inspringen van de regels kunt u ook overnemen om de code meer leesbaar te maken, maar het is niet verplicht.
Bekijk het resultaat in een browser
Aan het einde van dit hoofdstuk is het moment daar om uw inspanning te bewonderen. Het index.html bestand die u heeft geschreven in de teksteditor kan bekeken worden in uw browser. Open hiervoor de website-map op het bureaublad en dubbelklik op het index.html bestand om het vervolgens te openen met uw favoriete browser. Onderstaande afbeelding laat het resultaat zien.
Tip: als u een wijziging aanbrengt in de code dient u eerst de code op te slaan alvorens op de refresh-knop (of de F5 toets op uw toetsenbord) te drukken in uw browser om de wijzigingen ook daadwerkelijk te zien.
4.Creëren van hyperlinks
De letters HT in de afkorting HTML staan voor Hypertext. En met het woord hypertext worden klikbare woorden (links) bedoelt in een stuk tekst. Deze hyperlinks zorgen ervoor dat het World Wide Web vanaf verschillende locaties aan elkaar gekoppeld is. Laten we ook een hyperlink toevoegen aan onze website.
Het anker
Het plaatsen van de code voor een hyperlink is relatief eenvoudig wanneer je de code weet. Maar voordat we de code gaan plaatsen is het verstandig eerst vast te stellen wat het klikbare gedeelte wordt (het zichtbare gedeelte van de link). Ik stel voor dat we binnen onze eerder geplaatste paragraaf container een extra stukje tekst opnemen. Achter de laatste zin van de paragraaf die eindigt met de woorden we will end up with the structure called the Flower of Life. kunt u de tekst Learn Moretoevoegen. Van deze laatste twee woorden is het de bedoeling dat ze een hyperlink worden. Om dat te doen plaats u een a-container om de twee woorden heen, zie onderstaande afbeelding.
Als laatste is het nog nodig om deze hyperlink (de a-tag staat voor een anker) ook daadwerkelijk ergens naar verwijst. Dat kunt u doen door een extra zogenaamd attribuut te plaatsen binnen de open-tag van het anker. Net na de a maar nog binnen het groter dan teken > voegt u een spatie toe en typt u deze code href="https://www.learnit.nl". U kunt het toegevoegde attribuut href aan de open-tag van het anker lezen als "het anker refereert naar". Houdt er tevens rekening mee dat het volledige webadres moet worden opgegeven incl. de tekst https://
Uiteindelijk ziet de code er als volgt uit.
Een extra target attribuut
Wanneer u de website bekijkt in de browser en u klikt op de link dan zult u de huidige website verlaten om op de website van Learnit te belanden. Soms is het niet prettig dat u op een dergelijke manier bezoekers kwijt raakt. Het is soms dus wenselijk dat de nieuwe website wordt geopend in een nieuw tabblad of venster. Om dit voor elkaar te krijgen kunt u nog een attribuut toevoegen aan de open-tag van het anker. Wanneer u achter het laatste aanhalingsteken van het href-attribuut wederom een spatie plaatst gevolgd door deze code target="_blank" dan zal, waneer u de webpagina opnieuw laadt in uw browser, de link openen in een nieuw tabblad. Deze code ziet er dan als volgt uit.
Test het resultaat in uw browser:
5.Tekst vormgeven met CSS
Tot nu toe hebben we te maken gehad met de standaard vormgeving van de browser wanneer deze HTML code kreeg voorgeschoteld. Deze standaard vormgeving heeft er waarschijnlijk voor gezorgd dat de geplaatste content links is uitgelijnd, alles onder elkaar staat, de tekst zwart is en het lettertype een schreef heeft. Wanneer we iets meer willen dan de standaard vormgeving is het gebruik van CSS code de beste oplossing. In de onderstaande oefening gaat u met deze CSS code aan de slag.
Een externe stylesheet aanmaken
De code die we gebruiken voor de vormgeving plaatsen we in een aparte tekst bestand. U kunt met uw teksteditor een nieuw document aanmaken en deze vervolgens in een sub-map van uw website-map op het bureaublad opslaan. Een logische naam voor de sub-map zou css zijn. U mag de naam voor het css bestand zelf kiezen. In het voorbeeld heet het css bestand layout.css. In dit nieuwe tekst bestand plaatst u de onderstaande code.
Omdat de teksteditor (TextMate) in het voorbeeld kleur geeft aan bepaalde elementen is het eenvoudig om de verschillende onderdelen te omschrijven. De CSS code begint met het rode woord body. Alle rode tekst in de CSS file worden kiezers genoemd en ze verwijzen naar de HTML elementen die u eerder heeft getypt in het HTML bestand. Het woord body verwijst dus naar de body-container in de HTML en dat is het volledige, zichtbare vlak in uw browser. Door aan die body-kiezer een eigenschap background-color toe te voegen is het mogelijk de achtergrondkleur van de website te veranderen van wit naar licht grijs. De gele waarde die toegekend is aan de eigenschap achtergrondkleur is een hexadecimale kleurcode. U kunt deze kleurcode bij Google opzoeken.
Tussen de eigenschap en de toegekende waarde wordt altijd een dubbele punt geplaatst en na elke toegekende waarde wordt altijd een puntkomma geplaatst om onderscheid te maken met de volgende eigenschap. Tot slot kunt u aan de body-kiezer meerdere eigenschap-regels toevoegen en al die regels worden door middel van de accolades { } bij elkaar gehouden.
Tip: de komma tussen de h1 en de p-kiezer kunt u het beste lezen als een "en". Als u de komma in dit voorbeeld weglaat zal geen enkele tekst Arial worden en zal de paragraaf niet inspringen met 10 pixels.
Een externe stylesheet koppelen aan de HTML
Als u wilt dat het nieuwe CSS bestand ook daadwerkelijk wordt meegenomen (ingelezen) tijdens het openen van het HTML bestand dan is het nodig dat u in de head van het HTML bestand een verwijzing opneemt naar het nieuwe CSS bestand. De code hiervoor ziet er als volgt uit.
Er wordt een link-tag geplaatst in de head. Hiermee wordt er een koppeling gelegd naar een ander bestand. Vervolgens heeft u het attribuut href al eerder gezien bij het maken van een link in het vorige hoofdstuk. Belangrijk in dit geval is dat u naast de bestandsnaam van de CSS bestand ook het zogenaamde pad naar dit bestand opgeeft. In dit voorbeeld wordt de bestandsnaam voorafgegaan door de map-naam waar het bestand zich in bevindt. Uiteindelijk is er nog een tweede attribuut toegevoegd, namelijk het rel attribuut. Dit attribuut kunt u het beste lezen als "relatie". De waarde die aan het rel-attribuut is toegekend is "stylesheet". M.a.w. de link/relatie die gemaakt wordt is naar een CSS bestand. (U kunt ook een link leggen naar een javascript bestand en dan zal de waarde van het attribuut rel geen stylesheet meer zijn.) Bekijk het resultaat in uw browser, als het goed is komt het overeen met onderstaande afbeelding.
6.Navigatie toevoegen
Wanneer u een website maakt zal deze waarschijnlijk niet bestaan uit één pagina. In een later hoofdstuk gaan we daarom een aantal pagina's toevoegen. Om vervolgens op een van die andere pagina's terecht te komen hebben we behoefte aan een navigatiemenu. En dat is wat we in de volgende oefening gaan maken.
Een lijst opstellen
HTML heeft de mogelijkheid om een opsommingslijst te maken net als in Microsoft Word. Neem de onderstaande code over als u ook een navigatiemenu wilt maken.
Zoals u in de bovenstaande code kunt zien is er een lijst gemaakt bestaande uit vier items. Deze lijst begint met de ul-open-tag en eindigt met de ul-sluit-tag. Deze ul staat voor "unordered list" (ofwel een niet genummerde lijst). In deze ul-container zitten li-open- en li-sluit tags. Li staat in dit geval voor "list-item". Wanneer u het resultaat in de browser bekijkt ziet u een opsommingslijst bovenaan de pagina. Van deze lijst gaan we het navigatiemenu maken.
Ankers toevoegen aan het navigatiemenu
Om de menulijst ook daadwerkelijk te laten functioneren is het toevoegen van ankers noodzakelijk. Binnen de li-container plaatsen we een a-container zodat alle items in de lijst klikbaar worden. Zie de onderstaande afbeelding voor de code.
- Wanneer er display:inline; wordt opgegeven voor een li in de stylesheet dan zorgt dat ervoor dat de bullet-lijst niet onder elkaar komt te staan maar naast elkaar. Tevens verdwijnen de bullets.
- De margin-left:20px; zorgt ervoor dat de items onderling niet tegen elkaar staan maar links nu 20 pixels afstand houden.
- De kleur die opgegeven is bij de a-kiezer (geldt voor alle ankers/links) maakt alle ankers/links wit.
- Bij dezelfde a-kiezer is ook nog een eigenschap text-decoration opgegeven wat ervoor zorgt dat de standaard streep onder elke link verdwijnt.
- Tot slot is er nog een a:hover-kiezer toegevoegd die ervoor zorgt dat wanneer een bezoeker met de muis over de link beweegt de link een andere (oranje in dit geval) kleur krijgt
7. Navigatie verfraaien met CSS
Momenteel staat er bovenaan onze pagina een aantal links in een lijst. Voor de lijst staan bullets en de items staan onder elkaar. Voor ons navigatiemenu is een andere opmaak gewenst. Voeg de onderstaande code toe onder de laatste regel van uw CSS bestand en bekijk het resultaat.
- Wanneer er display:inline; wordt opgegeven voor een li in de stylesheet dan zorgt dat ervoor dat de bullet-lijst niet onder elkaar komt te staan maar naast elkaar. Tevens verdwijnen de bullets.
- De margin-left:20px; zorgt ervoor dat de items onderling niet tegen elkaar staan maar links nu 20 pixels afstand houden.
- De kleur die opgegeven is bij de a-kiezer (geldt voor alle ankers/links) maakt alle ankers/links wit.
- Bij dezelfde a-kiezer is ook nog een eigenschap text-decoration opgegeven wat ervoor zorgt dat de standaard streep onder elke link verdwijnt.
- Tot slot is er nog een a:hover-kiezer toegevoegd die ervoor zorgt dat wanneer een bezoeker met de muis over de link beweegt de link een andere (oranje in dit geval) kleur krijgt.
8.Elementen positioneren
Het positioneren van de verschillende elementen kan soms een hele uitdaging zijn. Wanneer u het positioneren van de verschillende elementen volledig in de vingers heeft dan bent u een behoorlijk eind op weg met het maken van websites. In de onderstaande oefening komen een aantal belangrijke technieken voorbij.
Een afbeelding in de tekst uitlijnen
Om de afbeelding onder de tekst te verplaatsen tot rechts naast de tekst moeten we twee wijzigingen doorvoeren. Verplaats in het HTML bestand de <img> -tag van onder de paragraaf nu voor (boven) de tekst nog wel binnen de <p> -tag.
En vervolgens voegen we onderop een extra regel toe in het CSS bestand, zie afbeelding.
De HTML code
De CSS code
Het geheel positioneren
Om de totale content beter te presenteren wordt er in de onderstaande code een nieuw HTML-element in de body geplaatst. Deze nieuwe HTML-container heet div (een div staat voor division (gebied)). Door een div direct na de body-open-tag te plaatsen en hem vervolgens af te sluiten vlak voor de body-sluit-tag hebben we nu alle content in een nieuwe container gezet. Deze nieuwe container kunnen we met behulp van de CSS stylesheet positioneren en vormgeven. U kunt de onderstaande code overnemen voor een mooier resultaat.
De HTML code - Er is hier een extra div-container om de content gezet.
De CSS code - De div wordt gepositioneerd en vormgegeven.
Meer CSS code - Een toevoeging bij de paragraaf en een extra kiezer voor de ul
Het eindresultaat zal er dan zo uitzien
9.Website uploaden
Een website maken is leuk maar waneer de website niet online staat heeft het weinig effect. Daarom gaan we in dit hoofdstuk de gemaakte website uploaden. Om een website te kunnen uploaden heeft u een aantal gegevens nodig van uw hosting provider. (Een hosting provider is een bedrijf dat ruimte op het internet beschikbaar stelt voor zijn klanten om een website op te plaatsen.) Om toegang te krijgen, voor u als beheerder, tot uw hosting ruimte is het nodig dat u beschikt over drie zaken (FTP gegevens). Ten eerste heeft u het server-adres nodig vervolgens nog een gebruikersnaam en als laatste een bijbehorend wachtwoord. Deze gegevens zullen verstrekt worden door uw hosting provider. Naast de hosting ruimte is het tevens noodzakelijk dat u beschikt over een domeinnaam. De registratie van die domeinnaam kan bij hetzelfde bedrijf als waar u uw website host maar het kan ook een ander bedrijf zijn. De domeinnaam zal moeten wijzen naar uw hosting ruimte. Het daadwerkelijk overzetten van de bestanden van uw computer naar de server wordt gedaan via FTP. FTP is een transport protocol (File Transfer Protocol).
11.1 Een FTP programma downloaden
Er zijn verschillende gratis FTP programma's die u kunt downloaden. Zowel voor Windows als voor Apple kunt u bijvoorbeeld gebruik maken van Cyberduck. Uiteindelijk maakt het niet uit welk FTP programma u gebruikt.
Na het installeren van Cyberduck kunt u verbinding maken met uw webserver door links onderop op het plus teken te klikken. Hiermee maakt u een nieuwe bladwijzer aan. In het dialoogscherm wat geopend wordt kunt u een naam voor de snelkoppeling opgeven gevolgd door de servernaam en een gebruikersnaam (zie afbeelding).
Als u deze gegevens heeft ingevuld kunt u het dialoogscherm weer sluiten. Er is nu een bladwijzer aangemaakt waarop u kunt klikken om de verbinding tot stand te brengen. Vervolgens zal er een popup-scherm geopend worden waar u het wachtwoord dient in te vullen. Bevestig het wachtwoord en u zal als alles goed is gegaan ingelogd zijn op de webserver (zie afbeelding).
In de schermafbeelding hierboven staan een aantal mappen op de server. Mogelijk staan deze mappen niet op uw server omdat het per hosting provider kan verschillen. In dit geval is de map httpdocs de map waar het om gaat. Als in de map httpdocs een index.html staat zal deze geopend worden wanneer een bezoeker uw website wil openen. Wanneer u geen httpdocs map heeft kunt u het beste even proberen om te bepalen welke map bedoeld is voor de website. Om bestanden op de server te plaatsen hoeft u alleen de bestanden te slepen uit de websitemap op uw bureaublad naar de externe server. Op onderstaande afbeelding is het eind resultaat op de server te zien.
Het eindresultaat in de browser bekijken
Als alles goed gegaan is dan kunt u nu een nieuwe browser openen en uw domeinnaam intypen in de adresbalk (Zie onderstaande afbeelding).
