CSS en HTML opzetten voor je website: een handleiding

Preslav Dobrev2022-10-28 · 5 min read

CSS en HTML opzetten voor je website: een handleiding

Het bouwen van websites is de eerste stap om aan de slag te gaan met webontwikkeling. Een van de eerste dingen die liefhebbers van webontwikkeling moeten leren, is hoe ze CSS en HTML opzetten voor een website. Door de basisintroductiepagina op te zetten, kan een beginner zich voorbereiden op de basisprincipes van website-ontwerp, zijn webontwikkelingsvaardigheden aanscherpen en leren samenwerken met ontwikkelaars.

Deze handleiding zal je door de basisbeginselen leiden van het opzetten van HTML- en CSS-bestanden voor je website. Laten we beginnen!

Vereisten

Een basisbegrip van HTML en CSS.

Stap 1 - Eerste installatie

Eerst maken we een nieuwe projectmap aan en noemen deze een demo-project :

mkdir demo-project

1	mkdir demo-project

Ga vervolgens naar de huidige map met behulp van het cd -commando:

cd demo-project

1	cd demo-project

Laten we in de projectmap de volgende bestanden toevoegen die we nodig hebben om onze basiswebsite te lanceren:

index.html : Dit bestand zal alle HTML-codes bevatten.
styles.css : We bewaren hier alle CSS-bestanden voor de styling van onze website.
images : Alle benodigde afbeeldingen moeten in deze map worden bewaard.

Nu we onze projectmap hebben gemaakt en de benodigde bestanden hebben toegevoegd, gaan we verder en voegen we de HTML-inhoud toe aan onze index.html in de volgende stap.

Stap 2 - HTML-inhoud toevoegen aan het index.html -bestand

In het index.html -bestand dat we in de vorige stap hebben gemaakt, voegen we de inleidende HTML-codes toe. Deze basis HTML-regels dienen als instructies voor de browser, maar worden niet op de webpagina weergegeven.

Voeg het volgende codeblok toe aan je index.html -bestand:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welkom bij CloudSigma!</title>

</head>

<body>

</body>

</html>

Note: Zorg ervoor dat het index.html -bestand leeg is voordat je deze codeblokken toevoegt. Overweeg ook om de titel te wijzigen zoals gemarkeerd in de <title> -sectie.

Laten we de gebruikte termen begrijpen:

<!DOCTYPE html> : Het is een declaratie die de browser informeert over het type HTML dat in het HTML-document wordt gebruikt.
- Aangezien er meerdere versies van HTML-standaarden beschikbaar zijn, maakt het specificeren van de DOCTYPE het voor browsers eenvoudig om de HTML-versie moeiteloos te identificeren. In deze handleiding gebruiken we bijvoorbeeld de nieuwste versie van HTML5.
<html> : Deze tag informeert de browser dat de inhoud die erin staat als HTML moet worden behandeld. Zorg er bij het openen van een <html> -bestand, zorg er dan voor dat je dit sluit met de </html> -tag. Deze tag ondersteunt lang -attributen, en je kunt de taal van de webpagina specificeren. We hebben de taal in onze handleiding op Engels ingesteld met behulp van de en -taaltag.
- Bezoek het IANA Language Subtag Registry om de andere talen te bekijken die beschikbaar zijn voor gebruik.
<head> : Dit maakt een sectie aan in het HTML-document en bevat informatie over de webpagina. Er zijn echter geen inhoudsdetails en de browser geeft hier in de head-sectie geen informatie weer.
<meta charset="utf-8"> : Specificeert de tekenset van het document. Deze moet in een Unicode-indeling zijn, d.w.z. UTF-8, die de meeste erkende geschreven talen ondersteunt.
<title> : De <title> -tag informeert de browser over de naam van de webpagina. De titel verschijnt op het browsertabblad wanneer de website in de zoekresultaten wordt vermeld.
<link rel="stylesheet" href="css/styles.css"> : Informeert de browser om het stylesheet te identificeren dat de CSS-stijlen bevat.
<body> : Deze tag bevat de belangrijkste inhoud van de webpagina. Zorg er bij het gebruik van een <body> -tag, zorg er dan voor dat je deze sluit met de </body> -tag.

Stap 3 - Styling met behulp van CSS

In het styles.css -bestand, voeg styling toe volgens de behoeften van je project. Voeg in dit voorbeeld de volgende regels code toe aan je styles.css -bestand:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

We hebben eindelijk de basis HTML- en CSS-bestanden gemaakt die we nodig hebben om onze website te lanceren. Daarnaast kun je afbeeldingen toevoegen en deze in de map 'images' bewaren. Sla het bestand op en sluit het. Open daarna het index.html -bestand in je favoriete webbrowser, en je zult een basispagina op je scherm zien.

Conclusie

In deze inleidende handleiding hebben we de basis geleerd van het opzetten van HTML en CSS en hebben we een rudimentaire website gemaakt. Nu is het tijd om nieuwe pagina's te maken, ze te verfijnen, inhoud toe te voegen en alles te koppelen vanaf de navigatiebalk. Probeer als volgende stap meer inhoud toe te voegen aan het index.html -bestand en style het met behulp van CSS.

Daarnaast zijn er nog andere HTML- en CSS-handleidingen die je kunt vinden op onze blog:

Veel computerplezier!

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev is een creatief ontwerper bij CloudSigma, met de nadruk op een consistente bedrijfsidentiteit door middel van traditionele en innovatieve marketingkanalen. Hij is bedreven in het samenvoegen van artistieke visie met strategische marketing om impactvolle merkverhalen te creëren.