Hoe een website te coderen

Hoe een website te coderenWil je leren hoe je een website maakt met HTML en CSS?


Je bent op de juiste plek. In deze gids laten we u alle stappen zien om van een leeg scherm naar een werkende website te gaan die is geoptimaliseerd en er tegelijkertijd best goed uitziet.

Maar eerst, wat zijn HTML en CSS?

Je kunt beide termen gewoon opzoeken in Wikipedia, maar die definities zijn niet erg leesvriendelijk. Laten we de zaken een beetje vereenvoudigen:

  • HTML (Hypertext Markup Language) definieert de structuur en inhoud van een webpagina – waar dingen gaan, hoe ze zijn aangelegd, en wat is op de pagina
  • CSS (Cascading Style Sheets) definieert de styling / presentatie van een webpagina en de elementen erop

Je kunt de een niet echt zonder de ander hebben – de twee werken samen om de uiteindelijke webpagina, het ontwerp en de inhoud die erop staat te vormen.

Notitie; wanneer we ‘een webpagina’ zeggen, bedoelen we een enkel HTML-document – een enkele pagina die deel uitmaakt van uw website. Terwijl “een website” het complete is – uw hele site met al zijn individuele webpagina’s.

Een website maken met HTML en CSS (inhoudsopgave):

  1. Leer de basis van HTML
  2. Begrijp de HTML-documentstructuur
  3. Maak kennis met CSS-kiezers
  4. Stel een CSS-stylesheet samen
  5. Koop Bootstrap
  6. Kies een ontwerp
  7. Pas uw website aan met HTML en CSS
  8. Voeg inhoud en afbeeldingen toe
  9. Verfijn kleuren en lettertypen
  10. Maak extra pagina’s

Totale tijd om een ​​website te maken: 4-5 uur
Vaardigheidsniveau: Gemiddeld

Als u denkt dat dit te ingewikkeld is, raden we u aan een website te maken met WordPress of een van de websitebouwers te kiezen. Je kunt ook een lijst met geselecteerde beste IDE bekijken voor webontwikkeling. 

Contents

Verzamel voordat u begint uw bronnen:

Dus het eerste dat u nodig heeft, zelfs voordat u een website met HTML en CSS maakt, is een webserver (hosting). Maar maak je geen zorgen; u hoeft geen eigen machine te kopen. Veel webhostingbedrijven verkopen u een eenvoudige hostingservice op hun machines. Google gewoon voor ‘webhosting’ en kies iets dat niet te duur is.

Nu de server is gesorteerd, is het volgende dat u nodig heeft een domeinnaam. De domeinnaam is wat de website op internet identificeert. De domeinnaam van deze site is bijvoorbeeld websitesetup.org.

Wanneer u zowel een domeinnaam als een server heeft, kunt u beide met elkaar verbinden.

Totale openheid: We verdienen een commissie als u uiteindelijk Bluehost koopt via onze verwijzingslinks in deze handleiding. Dit helpt ons om WebsiteSetup up-to-date en up-to-date te houden. Bedankt voor jullie steun.

Om dit probleemloos te laten oplossen, raden we je aan je aan te melden bij een bedrijf als Bluehost.

Ze zullen alle instellingen voor je afhandelen. Dit betekent dat ze: (een) een hostingaccount voor je aanmaken, (b) registreer namens u een domeinnaam, (c) alles configureren om samen te werken, en (d) geeft u toegang tot een eenvoudig te gebruiken dashboard.

Ga je gang en meld je aan Bluehost, we wachten. Als u terug bent en uw webserver is geconfigureerd en klaar voor gebruik, bladert u naar de volgende stap.

P.S. Als je gewoon wilt experimenteren met een HTML-website op je computer, en niet van plan het openbaar te maken, gebruik een lokale webserversoftware. Degene die we aanbevelen en graag gebruiken, wordt genoemd XAMPP. Het heeft versies voor zowel Mac als pc en het is gemakkelijk te gebruiken. Hier is een gids over hoe u het op uw computer kunt installeren.

1. Leer de basis van HTML

Het belangrijkste element van een HTML-structuur is een HTML label.

Een tag ziet er bijvoorbeeld als volgt uit:

IETS

Hier hebben we te maken met een label. Deze zal stoutmoedig een stuk tekst tussen de openingstag () en de afsluitende tag (). In dit geval is dat stuk tekst IETS.

Maar er zijn nog andere tags, om er maar een paar te noemen:

  • ... zal de tekst cursief maken tussen de openings- en sluitingstags
  • ... zal het onderstrepen
  • ...

    is een alinea met tekst


  • ...

    is de belangrijkste koptekst op de pagina

Naast die simpele tags zijn er ook complexere tags. Als u bijvoorbeeld een lijst als volgt wilt samenstellen:

  • Item 1
  • Punt 2
  • Punt 3

… Je kunt dat doen met de volgende HTML-code:

  • Item 1
  • Punt 2
  • Punt 3

Of, als u een link naar een andere pagina wilt toevoegen, zoals deze:

Dit is een link naar onze homepage

… je kunt dat doen met dit stukje code:

Dit is een link naar mijn homepage

Lees dit om de volledige lijst met HTML-tags. Het wordt handig wanneer u een website maakt met HTML en CSS.

2. Begrijp de HTML-documentstructuur

Denk aan uw HTML-pagina alsof deze is gemaakt van lego’s. Je legt verschillende stenen op elkaar om een ​​grotere structuur te krijgen.

Maar in plaats van legoblokjes krijg je HTML-tags …

Dit is de eenvoudigste HTML-documentstructuur:





Hallo Wereld!


Hallo Wereld!

Mijn eerste webpagina.

U kunt de bovenstaande code nemen, kopiëren en in een nieuw bestand plakken, het document opslaan als index.html, en het wordt een perfect geldige HTML-pagina.

Laten we de afzonderlijke delen van deze code uitleggen:

  • – de eerste verklaring van het document
  • – nog een verklaring; zegt dat wat volgt, een in het Engels geschreven HTML-document is
  • – markeert het begin van de hoofd sectie; de hoofd sectie is waar alle basisparameters van de pagina naartoe gaan; de meeste worden niet op het scherm getoond; ze definiëren gewoon wat er onder de motorkap gebeurt
  • – definieert welke tekenset wordt gebruikt om het document te schrijven; u hoeft hier niet teveel tijd aan te besteden; gebruik deze verklaring gewoon zoals ze is
  • Hallo Wereld! – de titel van de pagina; dit is wat mensen zullen zien in de titelbalk van hun browser, bijvoorbeeld:

titel in webbrowser bij het maken van een website met HTML en CSS

  • – markeert het begin van de lichaam sectie; dit is waar alle inhoud van de pagina naartoe gaat; het is het grootste deel van een HTML-document; laten we dit benadrukken, dit gedeelte is waar u alle inhoud gaat opnemen die bedoeld is om op de pagina te verschijnen

  • Hallo Wereld!

    – de hoofdkop op de pagina

  • Mijn eerste webpagina.

    – een simpele paragraaf tekst

  • – de afsluitende tag van het hele HTML-document

Een belangrijke opmerking hier. Werken aan een HTML-bestand in een eenvoudige tekstapp of een complexe tekstverwerker zoals MS Word is geen goede ervaring. Om het jezelf gemakkelijk te maken, installeer je een tool genaamd Sublieme tekst. Het heeft versies voor zowel Mac als pc en het is gratis.

Waarom is het beter? Het kleurt onder meer de syntaxis van een HTML-bestand. Dit betekent dat het uw HTML-tags visueel onderscheidt van tekstinhoud, tagparameters en andere waarden. In principe wordt het allemaal leesbaar. Zo ziet onze eenvoudige HTML-structuur eruit in Sublime Text:

sublieme syntaxis is geweldig bij het maken van een website met HTML en CSS

Ok, terug op onderwerp. Je kunt die nieuwe nemen index.html bestand van u, kopieer het naar de plaats waar de hoofddirectory van uw webserver zich bevindt en bekijk die pagina door ernaar te navigeren via een webbrowser. Raak echter niet te opgewonden; deze pagina zal nogal lelijk zijn (zie hieronder).

deze pagina is lelijk

Oké, dus de pagina is lelijk, hoe je het niet zo kunt maken?

3. Maak kennis met CSS Selectors

Net zoals HTML zijn tags heeft, heeft CSS kiezers.

Selectors beschrijven hoe een bepaald element zich uiterlijk moet gedragen. Hier is een voorbeeld van een CSS-selector:

p {
lettergrootte: 18px;
}

Deze selector geeft aan dat alle HTML

tags in het document hebben een lettergrootte van 18 px.

Een meer praktische manier om CSS-kiezers te gebruiken, is niet om alle tags van een bepaald type te beperken tot een bepaalde stijl, maar om verschillende ‘klassen’ te maken en ze een voor een aan tags toe te wijzen.

Een klassenselector in CSS ziet er bijvoorbeeld als volgt uit:

.normale tekst {
lettergrootte: 18px;
}

Let op de stip (.) voor de naam van de klas (normale tekst). Met de klasse “normale tekst” gedefinieerd, kunnen we die klasse nu toewijzen aan die specifieke HTML-tags die we 18px groot willen maken.

Bijvoorbeeld:

Deze tekst wordt 18px.

Laten we nog even de tijd nemen om alle elementen van dat stukje CSS-code hierboven uit te leggen:

  • .normale tekst – klasse definitie; alles achter de naam van de klas en tussen de openings- en sluitingshaken {} definieert hoe de elementen die aan deze klasse zijn toegewezen eruit zullen zien
  • lettertypegrootte – een voorbeeld CSS-eigenschap
  • 18 px – een waarde toegekend aan het pand

Afgezien van het bovenstaande zijn er een heleboel CSS-eigenschappen lettertypegrootte. Hier is de complete lijst als je nieuwsgierig bent.

4. Stel een CSS-stylesheet samen

Een HTML-document is zeer structureel – elk element heeft zijn plaats en de volgorde van elementen is cruciaal voor de uiteindelijke constructie en het uiterlijk van de webpagina in kwestie. Een CSS-document is veel minder.

CSS-documenten worden vaak aangeduid als stylesheets. Kortom, een CSS-stylesheet is een lijst met alle klassendefinities die worden gebruikt in het bijbehorende HTML-document. De volgorde van de klassendefinities is meestal niet zo cruciaal (althans voor eenvoudige ontwerpen).

De manier waarop u een CSS-stylesheet samenstelt, is door elke klasse één voor één te definiëren en vervolgens te testen of het resultaat in uw paginaontwerp is wat u wilde.

Dit klinkt als vervelend werk, en dat is het ook.

Maar we zullen het u gemakkelijker maken en u niet dwingen om handmatig HTML- en CSS-ontwerpen te leren. In plaats van je alles vanaf nul te leren, nemen we een levend organisme en ontleden we de elementen ervan.

Dit is waar iets genaamd Bootstrap in het spel komt.

5. Download / installeer Bootstrap

Bootstrap is een open source toolkit voor het maken van een website met HTML en CSS.

In gewoon Engels zorgt Bootstrap voor u voor de basisstructuur van een HTML-document en CSS-stylesheet. Het levert een raamwerk dat ervoor zorgt dat de hoofdsteiger van uw webpagina klaar is en geoptimaliseerd voor verdere ontwikkeling.

Kortom, met Bootstrap kun je niet helemaal opnieuw beginnen, maar in plaats daarvan rechtstreeks naar het leuke gedeelte gaan. Hiermee hoef je niet te werken aan de vaak saaie vroege stadia van het maken van een website met HTML en CSS.

Er zijn twee wegen die je kunt volgen:

  • Keuze (een): leer Bootstrap – ga naar de Bootstrap-startpagina, download het belangrijkste Bootstrap-pakket en begin er bovenop te bouwen.
  • Keuze (b): neem een ​​snelkoppeling – ontvang een starterspakket voor Bootstrap met een goed uitziend ontwerp en een reeds gebouwde demo-webpagina.

Keuze (een) heeft in het begin misschien een leercurve, maar het is op geen enkele manier de slechtste manier om een ​​website met HTML en CSS te maken. Zodra u de kern van de Bootstrap-structuur onder de knie heeft, is het misschien gemakkelijker voor u om nieuwe pagina’s te bouwen en ze er precies zo uit te laten zien als u ze wilt. De Bootstrap-documentatie is een geweldige plek om met dit pad te beginnen.

We gaan voor Option (b) voor deze gids. We doen dit om een ​​aantal redenen, chef van hen:

Beginnen met een kant-en-klare structuur bespaart veel pijn bij het proberen de basisbehoeften van een HTML-document te achterhalen. Hiermee kunt u zich concentreren op de interessante dingen, zoals het opmaken van inhoud en het er goed uit laten zien.

Kortom, door dingen op deze manier te leren, krijgt u sneller een mooier resultaat, wat volgens ons is wat u wilt.

6. Kies een ontwerp

Wanneer je een website met HTML en CSS maakt, ben je vrij om elke Bootstrap-sjabloon te gebruiken die je leuk vindt. Ze zouden allemaal op dezelfde manier moeten werken.

Voor deze handleiding gebruiken we echter een van de sjablonen per Start Bootstrap. Ze hebben een mooie selectie gratis sjablonen die zijn geoptimaliseerd, probleemloos werken en ook erg goed zijn ontworpen.

Het thema dat we gaan gebruiken, heet Creatief. Het uiteindelijke effect waar we voor gaan ziet er ongeveer zo uit:

laatste homepage na het maken van een website met HTML en CSS

Klik om te beginnen op de creatieve sjabloon op de Gratis download knop aan de rechterkant (aan deze pagina) en sla het zip-pakket op uw bureaublad op.

Pak het pakket uit en verplaats de inhoud naar de hoofddirectory van uw lokale webserver of uw webhostingaccount.

Open die locatie nu via uw webbrowser. U ziet de standaardversie van de sjabloon:

start bootstrap-sjabloon

Het ziet er al best goed uit, maar nu is het tijd om te leren hoe je HTML en CSS kunt gebruiken om er precies van te maken wat je wilt.

7. Pas uw website aan met HTML en CSS

Laten we eerst aan de startpagina van het ontwerp werken. Dit zal ons laten zien hoe we de afbeeldingen, teksten kunnen vervangen en alles in het algemeen kunnen afstemmen.

We hebben het hierboven kort gehad over het hoofdgedeelte van een HTML-document. Laten we er hier dieper op ingaan.

Wanneer u de index.html bestand van uw Bootstrap-site in Sublime Text, ziet u een hoofdgedeelte als dit (we hebben alle niet-cruciale dingen uit deze code verwijderd voor de duidelijkheid *):






Creatief - Start Bootstrap-thema





* Afgezien van het bovenstaande was er ook code om Google Fonts, Font Awesome-pictogrammen en een lightbox-module te laden voor de afbeeldingen die op de pagina worden weergegeven.

De meeste verklaringen hier zijn we al bekend, maar er zijn een paar nieuwe:

  • Allereerst alles tussen de haakjes is een HTML-opmerking. Het wordt niet weergegeven op de laatste pagina.
  • – het is een van Bootstrap’s eigen aangiftetags. Het definieert de grootte van de viewport van de website.
  • – deze regel laadt het CSS-stylesheet van de Creative-sjabloon en bevat ook het standaard stylesheet van Bootstrap.

Laten we die laatste verklaring – de regel die de CSS laadt – wijzigen om het later gemakkelijker te maken om mee te werken.

Verander die regel in:


Dit is slechts een klein verschil: het laadt de niet-verkorte versie van hetzelfde CSS-blad. Deze versie is gewoon eenvoudiger aan te passen.

Blader nu naar de onderkant van de index.html het dossier. Je ziet de volgende regels vlak voor de sluiting lichaam label:

        

Ze zijn verantwoordelijk voor het laden van JavaScript-bestanden die een aantal van de meer visuele interacties van het ontwerp verwerken. Als u bijvoorbeeld op de klikt Over link in het bovenste menu, je wordt vlot naar het blok over op dezelfde pagina geleid – dit gebeurt onder andere via JavaScript. We hoeven deze code nu niet zelf te begrijpen. Laten we dit een andere keer laten.

Laten we in plaats daarvan onze eigen inhoud aan de pagina toevoegen:

8. Voeg inhoud en afbeeldingen toe

Het eerste dat u wilt doen, is de titel van de pagina wijzigen.

1. Wijzig de titel

Vind de titel tag in het hoofdgedeelte en vervang de tekst tussen de tags door iets van jezelf:

Mijn HTML-site

2. Pas de Hero-sectie aan

Het heldengedeelte is wat we dit blok noemen:

held sectie

Het zou cool zijn om onze eigen inhoud erin te hebben. Om dit blok te wijzigen, ga terug naar je index.html bestand en zoek deze sectie:

...


...

Meer te weten komen

Dit hele codeblok bepaalt wat er in het heldengedeelte staat.

Er zijn hier enkele nieuwe tags:


  • – dit is een tag die aangeeft dat deze hele sectie de koptekst van de pagina is; deze tag heeft een paar broers en zussen in de vorm van de
    tag en
    label
  • – is een algemene CSS-tag die aangeeft dat wat volgt een afzonderlijke sectie is (ook bekend als afdeling) in het HTML-document; het gebruik ervan maakt het gemakkelijker om afzonderlijke secties op de pagina visueel te onderscheiden

Je zult ook merken dat sommige van de andere tags (die we al kennen) er iets complexer uitzien, waaraan meerdere CSS-klassen zijn toegewezen. Bijvoorbeeld:

...

De klassen die zijn toegewezen aan de

tag is hier tekst-hoofdletter tekst-wit lettertype-vet-vet.

Deze lessen zijn gemaakt door Bootstrap en door de ontwikkelaar van het creatieve thema. Het goede nieuws is dat u ze ook vrij kunt gebruiken bij het maken van een website met HTML en CSS.

Eerlijk gezegd kunt u elke tag die u aan de structuur van uw pagina toevoegt, aanpassen door er een willekeurig aantal klassen aan toe te wijzen.

Als je de volledige lijst met beschikbare lessen wilt zien, kun je de hoofdpagina openen creative.css bestand in het css subdirectory van het Creative-thema.

Het begrijpen van al deze lessen kan in het begin intimiderend lijken, maar het is eigenlijk veel gemakkelijker dan het lijkt.

Bijvoorbeeld een van de klassen die zijn toegewezen aan enkele van de alinea’s in onze index.html bestand is font-weight-light. Als je in de. Springt creative.css bestand en ctrl + f Als je naar die klassenaam zoekt, zul je zien dat het gewoon de lettertype dikte parameter zoals:

.font-weight-light {
font-weight: 300;
}

Het wijzigen van de standaardteksten in de index.html bestand is heel eenvoudig. Zoek gewoon de tag die u wilt bewerken en wijzig wat er tussen de openings- en sluitingstags zit.

Als u bijvoorbeeld de hoofdkop wilt wijzigen, wijzigt u dit gewoon:

Je favoriet ...

Zoiets als het volgende:

Bewonder mijn HTML-website!

U kunt hetzelfde doen voor alle alinea’s en andere tags op de pagina.

Wat belangrijk is, is dat je ook gratis nieuwe alinea’s kunt toevoegen. We kunnen bijvoorbeeld de alinea nemen die al op de pagina staat, er een kopie van maken en deze direct onder de oorspronkelijke alinea plakken; zoals zo:

Start Bootstrap kan ...

Paragraaf 2

Laten we nu, met de goed verzorgde teksten, de afbeelding op de achtergrond vervangen.

Dit is een beetje ingewikkelder om te doen, omdat het vereist dat we naar het CSS-stylesheet-bestand gaan en daar de wijziging aanbrengen. Zoals je kunt zien in de HTML-code van de Masthead sectie, zou geen enkele tag aangeven dat een afbeelding op een of andere manier aan de pagina moet worden toegevoegd. Dit gebeurt allemaal via CSS.

Als je nog een keer kijkt naar het hele blok code dat de Masthead sectie, zult u zien dat het is toegewezen aan een klas genaamd masttop. Deze coderegel behandelt de klassentoewijzing:

De masttop klasse is degene die een afbeelding op de achtergrond van het hele blok plaatst.

Laten we het openen creative.css bestand opnieuw en zoek naar de “masthead” klasse:

header.masthead {
opvulling: 10rem;
opvulling-onderkant: calc (10rem - 72px);
achtergrond: lineair verloop (naar beneden, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
achtergrondpositie: midden;
achtergrondherhaling: geen herhaling;
achtergrond-bijlage: scroll;
achtergrondformaat: omslag;
}

Deze code doet allerlei leuke dingen aan onze afbeelding (zoals het toevoegen van een overlay, schaduw enz.), Maar het belangrijkste is dit: url ("../ img / bg-masthead.jpg"). Dit is de lijn die aangeeft waar de achtergrondafbeelding te vinden is. Het zal in de Afb submap.

Als u deze achtergrondafbeelding wilt wijzigen, neemt u een eigen afbeelding en kopieert u deze naar de Afb submap en kopieer en plak de naam in plaats van het origineel bg-masthead.jpg het dossier. Kortom, verander dit: url ("../ img / bg-masthead.jpg") hieraan: url ("../ img / YOURFILE.jpg").

3. Pas de andere blokken op de pagina aan

Als je door de index.html bestand, zult u merken dat er al veel verschillende secties op de pagina staan. We hebben een sectie voor de navigatie, en over een blok, sommigen Diensten, een portefeuille, een oproep tot actie, een contact blok, en een voettekst.

Hoewel er in al deze secties verschillende inhoud is, zijn de secties zelf qua structuur vergelijkbaar. Ze hebben allemaal ongeveer dezelfde set HTML-tags – alleen verschillende CSS-klassen die eraan zijn toegewezen.

De beste manier om de pagina aan te passen aan uw behoeften, is door de blokken een voor een te doorlopen en te experimenteren door dingen te veranderen.

Naast het wijzigen van de teksten, kunt u ook hele secties verplaatsen (de delen tussen de

tags). Toegegeven, je moet dat met de hand doen (door elementen op hun plaats te knippen en te plakken), het is nog steeds eenvoudig om te doen.

Dat gezegd hebbende, zijn er twee vrij basale aanpassingen waar we het nog niet over gehad hebben. Laten we deze volgende bespreken:

9. Verfijn kleuren en lettertypen

Het wijzigen van kleuren of lettertypen is heel eenvoudig in HTML en CSS. Het eenvoudigste dat u kunt doen, is een in-line stijl toewijzen aan een HTML-tag. Bijvoorbeeld:

Rode tekst

In HTML worden kleuren weergegeven door hun hexadecimale waarden; “# FF0000” is rood. Hier is een tabel van alle andere standaard kleuren.

Een betere manier om kleuren toe te wijzen, is door het te doen via de CSS-stylesheet. Om bijvoorbeeld hetzelfde effect te krijgen als de bovenstaande code, kunnen we dit in onze CSS-stylesheet plaatsen:

p.red {
kleur: # FF0000;
}

En gebruik dan het volgende stuk HTML-code in het hoofddocument:

Rode tekst

Die tweede methode is eigenlijk hoe dingen in Bootstrap worden gedaan.

Om de kleur van een tekst op de pagina te wijzigen, zoekt u eerst de tag die verantwoordelijk is voor het opmaken van die tekst, gaat u vervolgens naar het stijlblad en wijzigt u de bijbehorende klasse of maakt u een nieuwe klasse.

Hier is een voorbeeld; Stel dat u de kleur van de koptekst wilt wijzigen en zegt ‘Tot uw dienst’. Momenteel is het zwart en dit is de code die het verwerkt:

Tot uw dienst

Om de kleur te veranderen, is de beste manier om bijvoorbeeld een nieuwe klasse te maken, .tekst-oranje en stel de kleurwaarde daar als volgt in:

.tekst-oranje {
kleur: # f4623a! belangrijk;
}

* De !belangrijk zorgt ervoor dat deze kleurinstelling alle andere kleureninstellingen overschrijft die eraan voorafgingen.

Nu kunnen we teruggaan naar onze koptekst en de code wijzigen in:

Tot uw dienst

Met deze wijzigingen is de koptekst nu oranje:

oranje h2

Om het lettertype en de grootte ervan te wijzigen, kunt u iets soortgelijks doen. Maar eerst een voorbeeld van hoe een lettertype-definitieblok eruit ziet in CSS:

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
lettergrootte: 18px;
}
  • laad lettertypen Merriweather, Roboto, en een systeemstandaard schreefloos lettertype (lees dit om meer te weten te komen over webveilige lettertypen)
  • stel de lettergrootte in op 18px

Dit soort definitie kan in elke CSS-klasse worden geplaatst, net als de kleurdefinitie. Eigenlijk zijn font- en kleurdefinities vaak te vinden in dezelfde klasseverklaringen.

Terug naar ons vorige voorbeeld, om de lettergrootte voor die koptekst met de tekst “Tot uw dienst” te wijzigen, kunnen we eerst een klasse als deze maken:

.text-xxl {
lettergrootte: 50px;
}

En wijs deze klasse vervolgens toe aan de koptekst:

Tot uw dienst

�� Als u de kleuren of lettertypen in uw door Bootstrap gemaakte sjabloon wijzigt, moet u eerst door de CSS-stylesheet kijken voor klassen die u mogelijk al alternatieve formaten of kleuren bieden. Gebruik die waar beschikbaar.

10. Maak extra pagina’s

Nu je de startpagina hebt aangepast, is het tijd om aan een aantal extra pagina’s te werken en ze vervolgens aan de startpagina te koppelen.

Wanneer u een website met HTML en CSS maakt, kunt u een onbeperkt aantal subpagina’s bouwen en ze vervolgens allemaal aan elkaar koppelen.

Hier zijn enkele van de veelvoorkomende pagina’s die de meeste websites nodig hebben:

  • over pagina
  • contact
  • portefeuille
  • producten en diensten
  • team
  • beleid (privacybeleid, voorwaarden, etc.)

1. Begin met de layout

Bij het bouwen van een nieuwe webpagina is de eerste beslissing die u moet nemen, wat u wilt dat de lay-out is.

Bij het maken van een website met HTML en CSS houdt niets u tegen om te knutselen wat dan ook gewenste indeling. De enige moeilijkheid is het eigenlijk in elkaar zetten.

HTML en CSS kunnen moeilijk zijn om mee om te gaan als je begint met een leeg scherm, dus we gaan Bootstrap hier ook gebruiken. Eerst laten we u enkele principes zien van het maken van een lay-out en laten we vervolgens zien hoe u dit doet met Bootstrap.

De manier waarop u de lay-out van uw webpagina kunt bedenken, is door deze als een reeks afzonderlijke blokken te beschouwen – de ene bovenop de andere. Zoiets als dit (let op de vier verschillende blokken):

de lay-out bij het maken van een website met HTML en CSS

Het mooie van Bootstrap is dat het de basislay-outprincipes en uiterlijkdetails voor je verwerkt, zodat je je kunt concentreren op het plaatsen van die blokken op de juiste plaatsen.

In dit gedeelte van de gids gaan we een nieuwe ‘over’-pagina maken.

Om te beginnen maken we een heel eenvoudig project van de lay-out. Zoiets als hierboven.

  • er is een navigatiemenu bovenaan,
  • een kopregel over de volledige breedte onder het menu,
  • het hoofdgedeelte van de inhoud in het midden, in het midden van het scherm (niet op volledige breedte),
  • en een voettekst.

Laten we deze layout nu in HTML bouwen.

2. Bouw een nieuwe pagina

De eenvoudigste manier om aan een nieuwe pagina te werken, is door een bestaande pagina te dupliceren en deze als sjabloon te gebruiken. Dat is wat we gaan doen.

Maak een kopie van de index.html bestand en hernoem het about.html.

Bewerk het nieuwe alleen om de pagina’s in dit vroege stadium gemakkelijker te kunnen onderscheiden about.html bestand en verander wat er in de </code> label. Bijvoorbeeld, <code><title>Over mij.

Laten we nu regel voor regel door het bestand gaan en beslissen wat we achterlaten en wat we verwijderen:

  • De navigatie menu (hieronder ). U wilt deze sectie waarschijnlijk intact houden, alleen om de navigatie-ervaring op alle pagina’s uniform te maken.
  • De belangrijkste held sectie (hieronder ). Deze hebben we volgens ons lay-outproject niet nodig. U kunt doorgaan en de hele sectie wissen.
  • De over sectie (hieronder ). We gaan deze sectie hergebruiken als ons belangrijkste kopblok.
  • De Diensten sectie, portefeuille sectie, oproep tot actie sectie, en contact sectie (alles tussen en ). We hebben deze secties helemaal niet nodig. Je kunt doorgaan en ze wissen.
  • De voettekst sectie en alles daaronder (hieronder ). Dit moeten we bewaren.

Dit maakt onze huidige code vrij eenvoudig. Het is in feite precies dit:



























Wat we hier missen, is de belangrijkste inhoud sectie. Om het te bouwen, gaan we de sectie over hergebruiken.

Ga je gang en maak een kopie van het gedeelte over. Deze:

...


...

Verander nu de eerste twee regels in dit:

Aangezien we de

header daar en de

element, laten we ze gewoon verwijderen. Het enige dat in dit hele blok achterblijft, is een alinea met tekst. Zoals zo:

Een paragraaf met tekst.

Wanneer je het bestand opslaat en ernaar navigeert via je browser, zul je zien dat je in feite twee zeer vergelijkbare blokken onder elkaar hebt, met dezelfde kleur achtergrond:

over paginakop

Het is beter om een ​​witte achtergrond te hebben in het hoofdgedeelte van de inhoud. Om het te veranderen, is het enige dat we hoeven te doen de verwijderen bg-primair klasse van de belangrijkste

label. Met andere woorden, maak hier de tag van:

Dat is beter:

over paginakop 2

Laten we een paar dummy-alinea’s aan de pagina toevoegen om er wat meer in te vullen, plus misschien een subkop:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subkop

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Zo ziet dit eruit op de pagina:

ongeveer ver 1

Als je niet wilt dat de tekst gecentreerd wordt, verwijder dan gewoon de tekstcentrum klasse van een van de

tags.

ongeveer ver 2

Als u deze tekstblokken wat meer flair wilt geven, kunt u nieuwe CSS-klassen maken (zoals voorheen) en deze toewijzen aan de alinea’s in het blok. Of u kunt een kijkje nemen in het huidige stylesheet en zien welke klassen er al zijn voor dit doel. Dit zijn degenen die we hebben toegewezen aan de

en

tags:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subkop

En hier is het effect:

ongeveer ver 3

Nog een ding dat we hier gaan doen, is ergens op de pagina een afbeelding toevoegen.

Zo ziet een voorbeeld van een afbeeldingstag in HTML eruit:


Vrij eenvoudig, toch? De enige parameter is het pad naar het afbeeldingsbestand. Om het overzichtelijk te houden, kun je je afbeelding in de Afb map opnieuw (net zoals je dat een tijdje geleden deed met die achtergrond). In dat geval is de afbeeldingstag:


Dat gezegd hebbende, is de afbeeldingstag in deze specifieke configuratie vrij beperkt. Om het wat verfijnder te maken, laten we er enkele Bootstrap-klassen aan toewijzen. In het bijzonder:


Deze twee klassen geven uw afbeelding afgeronde hoeken en zorgen er ook voor dat de grootte van de afbeelding niet groter is dan de grootte van het blok waar het zich bevindt.

U kunt nu zo’n tag ergens in het hoofdinhoudgedeelte van uw over-pagina toevoegen. Hier bijvoorbeeld:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subkop

En hier is het laatste effect op de pagina:

ongeveer ver 4

Hier is onze over-pagina in al zijn glorie:

ongeveer pagina compleet

3. Link naar de nieuwe pagina

Nu de nieuwe pagina klaar is, laten we deze nu linken vanaf de startpagina (de index.html het dossier). Uiteraard is de beste plaats om deze link toe te voegen in het navigatiemenu (hieronder ).

Zoek in het bijzonder naar deze regel:

Over

We gaan het hierin veranderen:

Over

Hier hebben we het nog niet over gehad, maar de tag is een link-tag in HTML. Hiermee kunt u naar elke webpagina linken door het adres van die pagina op te geven in de href parameter. De tekst van de link – het klikbare deel van de link – is de tekst tussen het openen en sluiten tags.

Wanneer u de startpagina nu vernieuwt, ziet u dat uw nieuwe link naar de pagina over verwijst.

Verder lezen:

In dit stadium heb je in feite een eenvoudige website gebouwd die uit twee pagina’s bestaat – een Startpagina en een over bladzijde.

Wat u nu moet doen, is spoelen en herhalen door nieuwe pagina’s te maken, ze af te stemmen, inhoud eraan toe te voegen en vervolgens alles te linken vanuit het navigatiemenu.

Andere dingen die het waard zijn om te doen terwijl u deze stappen doorloopt, zijn het verder leren van HTML- en CSS-principes, het doorlopen van de checklist en het leren van Bootstrap en zijn structuren en klassen. Enkele bronnen daarvoor:

  • HTML5-spiekbriefje
  • CSS-spiekbriefje
  • Javascript spiekbriefje
  • HTML-zelfstudie
  • Bootstrap-zelfstudie
  • Bootstrap spiekbriefje

Mastering Bootstrap, hoogstwaarschijnlijk het beste pad dat momenteel beschikbaar is voor het bouwen van geoptimaliseerde en mooie websites met HTML en CSS.

Als je vragen hebt over het maken van een website met HTML en CSS, aarzel dan niet om deze in de reacties te plaatsen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map