Een website maken met HTML en CSS (volledige bouw) | We.Inc
Bouw een complete website van één pagina met HTML en CSS: basisstructuur, header, hero, secties, contactformulier, footer, responsive layout en publiceren, met een live voorbeeld.
Een website maken met HTML en CSS
Maak een map met twee platte tekstbestanden: index.html voor de inhoud en styles.css voor het uiterlijk. Begin index.html met de standaard basisstructuur (doctype, html, head, body), link het stylesheet in de head, voeg een header, hoofdsecties en een footer toe en open het bestand dan in een browser. Upload de map naar een willekeurige statische host om hem te publiceren.
De volledige bouw in zes stappen
Stap
Bestand
Wat u toevoegt
1. Basisstructuur
doctype, html lang, head met charset, viewport en title
2. Structuur
header, nav, main met secties, footer
3. Inhoud
Koppen, alinea's, een afbeelding met alt-tekst, een formulier
4. Stijl
Lettertype, kleuren, witruimte, een gecentreerde inhoudsbreedte
5. Layout
Flexbox voor de header, grid voor kaarten, één media query
6. Publiceren
Beide
Upload de map naar een statische host
Dit is de hele bouw, niet alleen het eerste bestand. U schrijft een pagina voor een klein bedrijf, van een lege map tot een responsive layout, en met de builder hieronder typt u uw eigen naam en gegevens en ziet u de afgewerkte pagina meteen bijwerken. Elk fragment is compleet, dus u kunt de twee eindbestanden kopiëren en direct openen.
Maak een nieuwe map op uw computer en maak daarin index.html en styles.css aan met een willekeurige teksteditor.
Vul de velden van de builder hieronder in om de pagina vorm te geven en kopieer dan de twee gegenereerde bestanden naar uw map.
Dubbelklik op index.html om het in uw browser te openen. Bewerk, sla op en ververs om elke wijziging te zien.
Lees de stappen om te begrijpen wat elk deel van de code doet, zodat u het met vertrouwen kunt aanpassen.
Bent u tevreden, publiceer de map dan met een van de hostingopties aan het eind.
Gebruik een code-editor zoals VS Code in plaats van een tekstverwerker, die opmaak toevoegt die browsers niet kunnen lezen.
Noem de startpagina index.html. De meeste hosts serveren dat bestand automatisch als iemand het adres van de map bezoekt.
Houd bestandsnamen in kleine letters zonder spaties, bijvoorbeeld about-us.html, want veel servers zijn hoofdlettergevoelig.
Controleer uw werk in de apparaatwerkbalk van de ontwikkelaarstools van de browser op een smalle telefoonbreedte voordat u publiceert.
Haal de pagina door een HTML-validator. Die vindt niet-gesloten tags waar browsers stilletjes omheen gokken.
Veelgestelde vragen
Moet ik ergens voor betalen om een HTML-website te maken?
Nee. Voor het schrijven van de bestanden hebt u alleen een teksteditor en een browser nodig, allebei gratis. Diverse statische hosts hebben gratis abonnementen voor kleine sites; een eigen domeinnaam is meestal de enige kostenpost als u die wilt.
Waarom heb ik de viewport-metatag nodig?
Zonder die tag zetten telefoonbrowsers de pagina op een brede desktopbreedte en verkleinen ze hem, zodat tekst piepklein wordt. width=device-width zegt ze de echte schermbreedte te gebruiken, en daardoor gedragen media queries zich zoals bedoeld.
Kan een website met alleen HTML een contactformulier hebben?
HTML tekent het formulier, maar iets moet de inzending ontvangen. Laat op een statische host de action van het formulier wijzen naar een dienst voor formulierverwerking of de ingebouwde formulierfunctie van uw host. Een mailto:-link is de eenvoudigste noodoplossing.
Hoe voeg ik meer pagina's toe?
Maak een ander bestand zoals about.html met dezelfde header en footer, link ernaar met <a href="about.html">About</a> en deel dezelfde styles.css tussen de pagina's. Elke pagina hoort een eigen title en h1 te hebben.
Moet ik in plaats daarvan een framework gebruiken?
Niet voor een eerste site. Gewone HTML en CSS laden snel, hebben geen buildstap nodig en leren u wat elk framework onder de motorkap produceert. Grijp naar een framework als u gedeelde componenten over veel pagina's nodig hebt of app-achtig gedrag.
Semantische tags doen echt werk
header, nav, main, section en footer zijn niet alleen nettere namen voor div. Screenreaders tonen ze als landmarks waartussen mensen kunnen springen, en zoekmachines gebruiken ze om de hoofdinhoud te onderscheiden van herhaalde menu's.
Gebruik één h1 voor het onderwerp van de pagina en een h2 voor elke sectie. De kopstructuur hoort als een inhoudsopgave te lezen als u hem los op een rij zet.
Een layout die eerst op telefoons werkt
Schrijf de telefoonlayout met één kolom als standaard, omdat blokken al verticaal stapelen. Voeg daarna één media query met min-width toe om kolommen aan te zetten zodra er ruimte is.
Begrens de leesbreedte met max-width op een wrapper en centreer die met margin-inline: auto. Regels blijven zo prettig leesbaar op brede schermen zonder extra regels CSS.
Uw map publiceren
Een statische host serveert uw bestanden zoals ze zijn, en meer heeft een site met HTML en CSS niet nodig. Bij de gangbare opties sleept u de map naar een dashboard of koppelt u een Git-repository zodat elke push de live site bijwerkt.
Open na het uploaden het live adres op uw telefoon, klik op elke link en verstuur het formulier één keer om te controleren dat het bij u aankomt.
Stap 1: de basisstructuur van de pagina
Elke HTML-pagina begint met dezelfde paar regels. Het doctype houdt browsers in standards mode, lang vertelt screenreaders welke taal ze moeten spreken, en de viewport-tag laat telefoons hun echte breedte gebruiken.
Beginpunt voor index.html
Sla dit op, open het in een browser en u hebt al een geldige pagina met een titel in het tabblad.
Stap 2 en 3: structuur en inhoud
Binnen body bevat een header de naam en het menu, bevat main de secties en sluit een footer de pagina af. Het live resultaat hieronder heeft nog geen stijlen, wat laat zien hoe leesbaar goede HTML op zichzelf al is.
Header, hero, kaarten, contactformulier en footer
Bewerk de tekst en het resultaat werkt mee. Let op de formulierlabels: klikken op een label zet de focus op het bijbehorende veld.
Zet dit in styles.css naast index.html. Het zorgt voor leesbare tekst, een gecentreerde kolom, een flex-header en een kaartenraster dat op bredere schermen drie kolommen wordt.
Het complete stylesheet
Zet de inhoud van header, main en footer in <div class="wrap"> om de inhoud te centreren, zoals de uitvoer van de builder doet.
Stap 6: publiceren
Manieren om een statische map online te zetten
Route
Geschikt voor
Wat u doet
Statische host met slepen en neerzetten
Uw eerste site
Upload de map in het dashboard van de host
Statische host gekoppeld aan Git
Sites die u blijft bewerken
Push naar een repository; de host publiceert opnieuw
Gedeelde webhosting
Sites die ook e-mail of PHP nodig hebben
Upload met de bestandsbeheerder of SFTP naar de publieke map
Een websitebouwer
Code helemaal overslaan
Beschrijf de site en bewerk visueel
Bakkerij De Haven
Vers zuurdesembrood, gebakken voor zonsopgang.
Boerenzuurdesem
Roggebrood met zaden
Weekendgebak
Bouw uw pagina
Typ uw bedrijfsnaam, slogan en drie producten. Het voorbeeld en beide bestanden werken mee terwijl u typt, klaar om te kopiëren.