Een website maken: voor beginners

Een website maken: voor beginners

Altijd al een website willen maken? Misschien heb je wat van onze HTML gelezen ( HTML begrijpen ) en CSS-tutorials , maar weet niet hoe ze die talen moeten gebruiken in een groter project.





Vandaag begeleid ik je door het proces van het maken van een complete website vanaf het begin. Maak je geen zorgen als dit een moeilijke taak lijkt, ik zal je er bij elke stap doorheen begeleiden.



Je maakt deze website met HTML, CSS en JavaScript met een vleugje jQuery (gids voor jQuery). Je gaat niets doen Echt bloedend, dus deze code zou redelijk goed moeten werken in de meeste moderne browsers.





Als je niet zeker bent van een CSS, kijk dan eens naar de CSS-gids Bij W3Schools.com .

Het ontwerp

Hier is het ontwerp voor deze website. Bekijk een afbeelding met een hoge resolutie als je het beter wilt zien, of nog beter, download het volledige project hier.



Ik ontwierp deze website voor een fictief bedrijf in Adobe Photoshop 2017. Als je geïnteresseerd bent, zorg er dan voor dat je het .PSD-bestand uit de bundeldownload haalt. Dit is wat je krijgt in het photoshop-bestand:

In de PSD vind je alle lagen gegroepeerd, benoemd en kleurgecodeerd:



Je hebt een paar lettertypen nodig om er goed uit te zien. De eerste is Lettertype geweldig , gebruikt voor alle pictogrammen. De andere twee lettertypen zijn: PT Serif en Myriad Pro (meegeleverd met Photoshop). Als je niet zeker weet hoe je lettertypen moet installeren, lees dan onze handleiding.

Maak je geen zorgen als je die niet hebt Adobe Photoshop , je hebt het niet nodig om verder te gaan.



Initiële code

Nu het ontwerp duidelijk is, gaan we beginnen met coderen! Maak een nieuw bestand in je favoriete teksteditor (ik gebruik Sublieme tekst 3 ). Bewaar dit als index.html . Je kunt dit alles noemen wat je wilt, de reden dat veel pagina's index worden genoemd, is te wijten aan de manier waarop webservers werken. De standaardconfiguratie voor de meeste servers is om de index.html-pagina weer te geven als er geen pagina is opgegeven.

Als je de details niet wilt weten, pak dan de volledige code uit de download.

Hier is de code die je nodig hebt:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Dit doet verschillende dingen:

  • Definieert de minimale vereiste HTML.
  • Definieert een paginatitel van 'Noise Media'
  • Bevat jQuery gehost op Google CDN (wat is een CDN).
  • Inclusief Font Awesome gehost op Google CDN.
  • definieert a stijl tag om uw CSS in te schrijven.
  • definieert a script tag om uw JavaScript in te schrijven.

Sla uw bestand opnieuw op en open het in uw webbrowser. Je zal er waarschijnlijk niet veel van merken, en het zal er zeker nog niet uitzien als een website.

Let op hoe de paginatitel is Ruismedia . Dit wordt gedefinieerd door de tekst in de titel label. Dit heeft binnen zijn hoofd labels.

hoe de speciale video-ram te vergroten

De kop

Laten we de koptekst maken. Hier is hoe dat eruit ziet:

Laten we beginnen met dat kleine grijze stukje bovenaan. Het is een lichtgrijs met een licht donkergrijs eronder. Hier is een close-up:

Voeg deze HTML toe aan de lichaam tag bovenaan:

Terwijl je hier bent, laten we dit opsplitsen. EEN div is als een container om andere dingen in te plaatsen. Deze 'andere dingen' kunnen meer containers, tekst, afbeeldingen, echt alles zijn. Er zijn enkele beperkingen op wat in bepaalde tags kan, maar div's zijn vrij algemene dingen. Het heeft een ID kaart van bovenste balk . Dit zal worden gebruikt om het op te maken met CSS en het indien nodig te targeten met JavaScript. Zorg ervoor dat je maar één element met een bepaalde id hebt -- ze moeten uniek zijn. Als u wilt dat meerdere elementen dezelfde naam hebben, gebruik dan a klas in plaats daarvan -- daar zijn ze voor ontworpen! Hier is de CSS die je nodig hebt om het te stylen (zet bovenaan in je stijl label):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

Merk op hoe het hekje (#, hashtag, hekje) voor de naam wordt gebruikt. Dit betekent dat het element een ID is. Als u een klasse a zou gebruiken, zou u in plaats daarvan een punt (.) gebruiken. De html en lichaam tags hebben hun opvulling en marge ingesteld op nul. Dit voorkomt ongewenste spatiëringsproblemen.

Het is tijd om verder te gaan met het logo en de navigatiebalk. Voordat je begint, heb je een container nodig om deze inhoud in te plaatsen. Laten we hier een klasse van maken (zodat je hem later opnieuw kunt gebruiken), en aangezien dit niet een responsive website, maak deze 900 pixels breed.

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Het kan moeilijk zijn om te zien wat er aan de hand is totdat je de code hebt voltooid, dus het kan handig zijn om een ​​(tijdelijke) gekleurde achtergrond toe te voegen om te zien wat er gebeurt:

background: red;

Het is nu tijd om het logo te maken. Lettertype geweldig is nodig voor het pictogram zelf. Font Awesome is een set pictogrammen verpakt als een vectorlettertype -- geweldig! De eerste code hierboven heeft Font Awesome al ingesteld, dus het is allemaal klaar voor gebruik!

Voeg deze HTML toe binnenkant de normaal-wrapper div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Maak je geen zorgen over de andere lettertypen die niet overeenkomen met het ontwerp - je ruimt dat later op. Als je andere pictogrammen wilt gebruiken, ga dan naar de Lettertype Awesome-pictogrammen pagina, en dan wijzigen fa-volume-omlaag naar de naam van het pictogram dat u wilt gebruiken.

Als u naar de navigatiebalk gaat, gebruikt u een ongeordende lijst ( de ) voor deze. Voeg deze HTML toe na de logo-container (maar nog steeds in de normaal-wrapper ):

De href wordt gebruikt om naar andere pagina's te linken. Deze zelfstudiewebsite heeft geen andere pagina's, maar u kunt hier de naam en het bestandspad (indien nodig) plaatsen, b.v. beoordelingen.html . Zorg ervoor dat u dit tussen beide dubbele aanhalingstekens plaatst.

Hier is de CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

Deze CSS begint met een ongeordende lijst . Vervolgens worden de opsommingstekens verwijderd met lijst-stijl-type: geen; . Links staan ​​een beetje uit elkaar en krijgen een kleur als je er met je muis overheen gaat. De kleine grijze scheidingslijn is een rechterrand op elk element, die vervolgens wordt verwijderd voor het laatste element met behulp van de laatste link klas. Hier is hoe dat eruit ziet:

Het enige dat overblijft voor dit gedeelte is de rode horizontale kleurmarkering. Voeg deze HTML toe na de normaal-wrapper :

En hier is de CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

Dat is het bovenste gedeelte gedaan. Hier is hoe het eruit ziet - vergelijkbaar met het ontwerp, toch?

Hoofdinhoudsgebied

Het is nu tijd om naar het hoofdinhoudsgebied te gaan - het zogenaamde 'boven de vouw'. Zo ziet dit onderdeel eruit:

Dit is een vrij eenvoudig onderdeel, wat tekst van links met een afbeelding aan de rechterkant. Dit gebied wordt losjes verdeeld in drieën, ongeveer bij benadering de Gouden ratio .

Voor dit onderdeel heeft u de voorbeeldafbeelding nodig. Het is bij de download inbegrepen. Deze afbeelding is 670px breed en komt uit onze Panasonic Lumix DMC-G80/G85 Review.

Voeg de HTML toe na de top-kleur-splash element:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

hoe maak je Windows 10 opstartbare usb

Alternatively, check out our review of the Panasonic G80 shown on the right!






Merk op hoe de normaal-wrapper element is teruggekeerd (dat is het leuke aan het gebruik van klassen). Je vraagt ​​je misschien af ​​waarom de afbeelding ( img ) tag sluit niet. Dit is een zelfsluitende tag. De schuine streep ( /> ) geeft dit aan, omdat het niet altijd zin heeft om een ​​tag te sluiten.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

Het belangrijkste kenmerk hier is: box-sizing: border-box; . Dit zorgt ervoor dat de elementen altijd 40% of 60% breed zijn. De standaardwaarde (zonder dit kenmerk) is uw opgegeven breedte plus eventuele opvulling, marges en randen. De afbeeldingsklasse ( uitgelichte afbeelding ) heeft een Maximale wijdte van 500px . Als u slechts één dimensie opgeeft (een breedte of een hoogte), en de andere leeg laat, zal css het formaat van de afbeelding wijzigen terwijl de hoogte-breedteverhouding behouden blijft.

Offertegebied

Laten we het citaatgebied maken. Hier is hoe dit eruit ziet:

Dit is een ander eenvoudig gebied. Het bevat een donkergrijze achtergrond, met witte gecentreerde tekst.

Voeg deze HTML toe na de vorige normaal-wrapper :



makeuseof is the best website ever


Joe Coburn



En dan deze CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

Er gebeurt hier niet veel. Grootte is de belangrijkste aanpassing die nodig is - lettergrootte, spatiëring, enzovoort. Zo ziet het geheel er nu uit -- het begint op een website te lijken!

Pictogramgebied

Laten we doorgaan -- het is bijna klaar! Dit is het volgende gebied dat moet worden gemaakt:

Dit onderdeel zal gebruik maken van verschillende klassen. De drie pictogrammen zijn grotendeels hetzelfde, met uitzondering van de inhoud, dus het is logisch om klassen te gebruiken in plaats van id's. Voeg deze HTML toe na de vorige quote-gebied :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Deze drie pictogrammen zijn ook: Lettertype-geweldig . De HTML gebruikt opnieuw de normaal-wrapper klas. Hier is de CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

Er zijn een paar nieuwe dingen gaande in de CSS. De afgeronde hoeken worden gezet door grensradius: 200px; . Als u deze waarde hetzelfde instelt als de breedte, krijgt u een perfecte cirkel. Je kunt dit verkleinen als je liever een vierkant met afgeronde hoeken hebt. Merk op hoe zweefacties worden toegepast op de divs -- het is niet beperkt tot alleen links. Dit is hoe dit gedeelte er nu uitziet:

Het laatste wat je moet doen is de footer! Dit is heel eenvoudig, want het is gewoon een grijs gebied zonder tekst. Voeg deze HTML toe na de pictogramgebieden' normaal-wrapper :

Hier is de CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Kijk - echt simpele dingen.

Voeg wat pizza toe

Dat is alles, de codering is klaar! Je kunt de dingen absoluut laten zoals ze zijn, het is een voltooide webpagina. Je hebt misschien gemerkt dat het er niet uitziet precies zoals het ontwerp. De belangrijkste reden hiervoor zijn de gebruikte lettertypen. Laten we dat regelen.

Het lettertype dat voor de meeste titels wordt gebruikt is Myriad Pro . Dit komt met Adobe Maak Cloud, maar het is niet beschikbaar als een webfont. Het lettertype dat momenteel op de webpagina wordt gebruikt, is Helvetica . Dit ziet er goed uit, dus je zou het kunnen laten zoals het is PT Sans is beschikbaar als een webfont. Het lettertype dat voor alle tekst wordt gebruikt, is PT Serif , die beschikbaar is als een webfont.

Webfonts zijn een eenvoudig proces. Net zoals het laden van een nieuw lettertype op uw computer, kunnen webpagina's lettertypen op aanvraag laden. Een van de beste manieren om dit te doen is door middel van Google-lettertypen .

Voeg deze CSS toe om over te schakelen naar de betere lettertypen:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

Pas nu uw html- en body-elementen aan om de nieuwe lettertypen te gebruiken:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Merk op hoe het h3-element niet in de lijst is opgenomen -- dit is standaard PT-Serif in plaats van PT-Sans .

Laten we als laatste stukje schoonheid wat JavaScript gebruiken om door drie verschillende aanbevolen afbeeldingen te bladeren. Je zal nodig hebben Afbeelding_2 en Afbeelding_3 voor dit deel, en nogmaals, het is optioneel. De website is op dit moment volledig functioneel zonder deze functie. Dit is hoe het eruit zal zien (versneld):

Pas uw HTML aan om drie aanbevolen afbeeldingen op te nemen. Merk op hoe twee van deze een CSS-klasse hebben van verborgen . Elke afbeelding heeft een ID gekregen, zodat JavaScript ze elk afzonderlijk kan targeten.





Hier is de CSS die nodig is om de extra aanbevolen afbeeldingen te verbergen:

.hidden {
display: none;
}

Nu de HTML en CSS geregeld zijn, gaan we over op JavaScript. Het is handig om het Document Object Model (DOM) voor dit onderdeel te begrijpen, maar het is geen vereiste.

Vind de script gebied onderaan de pagina:


/* JavaScript goes here, at the bottom of the page */

Voeg het volgende JavaScript toe in de script label:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

Er gebeuren hier een paar dingen. De code bevindt zich binnenin $(document).klaar() . Dit betekent dat het wordt uitgevoerd zodra uw browser klaar is met het weergeven van de pagina - dit is een goede gewoonte. De setInterval() functie wordt gebruikt om de . aan te roepen veranderAfbeelding () regelmatig functioneren met een vooraf gedefinieerd interval in milliseconden (1000 milliseconden = 1 seconde). Dit wordt opgeslagen in de tijd variabel. U kunt dit verhogen of verlagen om het scrollen te versnellen of te vertragen. Ten slotte wordt een eenvoudige casusverklaring gebruikt om verschillende afbeeldingen te tonen en de momenteel getoonde afbeelding bij te houden.

Codeeruitdaging

Dat is het! Hopelijk heb je veel geleerd tijdens het proces. Als je zin hebt in een uitdaging en je nieuw gevonden vaardigheden op de proef wilt stellen, waarom probeer je dan niet deze aanpassingen door te voeren:

Voeg een voettekst toe: Voeg wat tekst toe aan de voettekst (hint: je zou de . kunnen hergebruiken normaal-wrapper en een-derde/twee-derde klassen.).

Verbeter het scrollen van afbeeldingen: Pas het JavaScript aan om de afbeeldingswijzigingen te animeren (hint: kijk naar jQuery vervagen en geanimeerd ).

Implementeer meerdere offertes: Pas de aanhalingstekens aan om tussen een van de verschillende aanhalingstekens te wisselen (hint: kijk naar de code voor het scrollen van de afbeelding voor een startpunt).

Een server instellen: Stel een server in en stuur gegevens tussen de webpagina en de server (hint: lees onze handleiding voor JSON en Python).

hoe ram-gebruik te verminderen windows 10

Als je eenmaal vertrouwd bent met het gebruik van JavaScript of ervaring hebt met Ruby, kun je proberen een website te maken met een statische websitebouwer zoals GatsbyJS of Jekyll.

Deel Deel Tweeten E-mail Hoe u het uiterlijk van uw Windows 10-bureaublad kunt wijzigen

Wilt u weten hoe u Windows 10 er beter uit kunt laten zien? Gebruik deze eenvoudige aanpassingen om Windows 10 uw eigen te maken.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • HTML
  • Webdesign
  • CSS
Over de auteur Joe Coburn(136 gepubliceerde artikelen)

Joe is afgestudeerd in computerwetenschappen aan de Universiteit van Lincoln, VK. Hij is een professionele softwareontwikkelaar en als hij niet met drones vliegt of muziek schrijft, is hij vaak te vinden om foto's te maken of video's te maken.

Meer van Joe Coburn

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren