Drie eenvoudige manieren om een ​​website te maken: stap-voor-stap handleiding voor beginners

Artikel geschreven door:
  • Hostinggidsen
  • Bijgewerkt: mei 10, 2019

Een website maken is supereenvoudig in 2019.

Je hoeft geen techneut of programmeur te zijn.

Volg de juiste methode. Selecteer de juiste platforms. Gebruik de juiste hulpmiddelen. Je bent 100% prima.

Ik had geen kennis van webontwikkeling toen ik mijn online bedrijf voor het eerst startte in 2004. Ik huurde geen webontwikkelaar in tot elf jaar later. En ik deed het goed.

Vandaag hebben we innovatieve ontwikkeltools en betere webpublicatieplatforms.

Drie eenvoudige manieren om een ​​website te maken:

Snelle link:

  1. Creëren vanaf nul
  2. Een contentmanagementsysteem (CMS) gebruiken
  3. Een website builder gebruiken

U krijgt meer flexibiliteit in ontwerpen en sitefuncties met methode #1, maar het vereist een goede kennis van webtalen.

Het maken en beheren van websites is veel eenvoudiger met methode #2 en #3. U moet een van deze methoden kiezen, afhankelijk van uw competentie.

We zullen binnenkort naar elk van deze drie methoden kijken.

Maar voordat je begint ...

Voordat we beginnen, hebben we twee dingen nodig voor uw website: 1- Een domeinnaam en 2- Webhosting.

1- Registreer een domein

Een domein is de naam van uw website. Het moet uniek zijn en het merk van uw bedrijf overbrengen.

De eenvoudigste manier om een ​​domein te doorzoeken en te registreren, is door naar een domeinregistreerder te gaan.

Een domeinregistrar laat u uw domeinnaam registreren via jaarlijkse contracten of een langetermijncontract.

Zoek en registreer uw domeinnaam op NameCheap
Zoek en registreer domeinnamen op Goedkoop.

Hier zijn enkele gerenommeerde domeinregistreerders die u kunt overwegen.

registrarsBeginprijs
.com .net
123 Reg£11.99£ 11 .99
Domain.com$ 9.99 / jaar$ 10.99 / jaar
Gandi€ 12.54 / jaar€ 16.50 / jaar
GoDaddy$ 12.17 / jaar$ 12.17 / jaar
Goedkoop$ 10.69 / jaar$ 12.88 / jaar
Netwerk oplossingen$ 34.99 / jaar$ 32.99 / jaar

Lees ook - Domeinnaam voor dummies.

2- Koop een webhosting

A webhost is een grote computer (aka, server) die uw websites opslaat. Sommige gigantische bedrijven - zoals Amazon, IBM en FB - bezitten en beheren hun webservers; andere bedrijven huren eenvoudig hun servers bij een hostingprovider (wat een stuk goedkoper en gemakkelijker is).

Opmerking: sla deze stap over als u kiest voor een websitebouwer om uw site te maken (zie stap #3).

Website Hosting

Een aantal nieuwkomersvriendelijke hosting om uit te checken.

WebhostAanmeldenOpmerkingen
A2-hosting$ 4.90 / maandSnelle webhost, newbies vriendelijk.
BlueHost$ 3.95 / maandGoedkope inschrijfprijs, vriendelijke newbies.
Hostgator Cloud$ 8.95 / maandRedelijke prijs, betrouwbare server.
HostPapa$ 3.36 / maandEco-vriendelijke webhost, exclusieve korting.
InMotion Hosting$ 3.49 / maandGoedkope inschrijfprijs, betrouwbare server.
SiteGround$ 5.95 / maandOndersteuning voor industrie #1 live chat, solide webhost.

Tot op heden hebben we meer dan alleen 60-hostingbedrijven aangemeld, getest en beoordeeld. Zie onze top 10 hosting selecties or de volledige lijst met hostingrecensies.

Lees ook - Hoeveel kost het om een ​​website te bouwen.


FTC Disclosure

WHSR ontvangt verwijzingsvergoedingen van enkele van de bedrijven die in dit artikel worden genoemd. Het kost veel moeite en geld om bruikbare inhoud zoals deze te maken - uw steun wordt zeer op prijs gesteld.


Zodra u uw domeinnaam en webhosting op zijn plaats heeft, is het tijd om uw mouwen op te stropen en te beginnen met creëren!

Methode #1: een geheel nieuwe website maken

Vereiste vaardigheden en hulpmiddelen

U kunt uw unieke en unieke website geheel zelf maken als u de belangrijkste webtalen en de grond van een website kent.

Anders is het raadzaam om door te gaan naar methode #2 / 3; of neem contact op met een webontwikkelaar.

Basis webtalen / tools die u moet kennen:

  • HTML (Hyper Text Markup Language)
    HTML is de basisstructuur van webpagina's en webtoepassingen die de inhoud semantisch maakt voor de webbrowser. Het bestaat uit sequentiële tags met een opening en een afsluiting en structureel een sleutelwoord ingesloten door Angle Brackets. Voorbeeld: <strong> </ strong>
  • CSS (Cascading Style Sheets)
    CSS is de stijltaal die wordt gebruikt om de HTML-opmaak van een webpagina te versieren. Zonder CSS zou een webpagina er alleen uitzien als een grote witte pagina met een ongeordende tekst en afbeelding erop. CSS is het ding dat de pagina ideaal maakt zoals we dat willen.
  • Scripting Languages
    HTML en CSS zijn niets zonder scripttalen omdat ze niet interactief zijn. Om een ​​dynamische webpagina te maken die op gebruikers reageert, hebt u talen zoals JavaScript en jQuery nodig. Server-side talen zoals PHP, Python en Ruby kunnen ook in de loop van de tijd nodig zijn.
  • Database Management
    Om gebruikersinvoergegevens van een website op te slaan, te beheren en te openen, wordt een grote tabel met informatie overwogen, die database wordt genoemd. Een databasebeheersysteem zoals MySQL, MongoDB en PostgreSQL wordt aan de serverkant gebruikt om deze taak efficiënt uit te voeren.
  • FTP (File Transfer Protocol)
    FTP wordt gebruikt om de bronbestanden van een website gemakkelijker naar de gehoste server over te zetten. Er zijn zowel webgebaseerde als op computersoftware gebaseerde FTP-clients die kunnen worden gebruikt om iemands bestanden naar de servercomputer te uploaden.

Stapsgewijze creatie van websites met behulp van IDE

Hier is het overzicht van het proces hoe u een website uit de eerste hand kunt maken, ervan uitgaande dat u de basiswebtalen en de belangrijkste websites die hierboven zijn genoemd kent.

Stap 1: een lokale werkomgeving instellen

Een site maken met Subline-tekst
Schermafbeelding van de werkomgeving van Subline Text.

Om bronbestanden van een website te maken en te ordenen, is een goede lokale werkomgeving belangrijk. U kunt een webontwikkelingsomgeving op uw computer maken door een IDE (Integrated Development Environment) te installeren. Een IDE bestaat in wezen uit een teksteditor, een build-automatisering en een debugger.

Sublime Text Atoom zijn enkele van de standaard IDE's voor webontwikkeling die HTML, CSS, JS, PHP, Python en vergelijkbare webtalen ondersteunen.

Aan de andere kant zijn er uitgebreide IDE's zoals Adobe Dreamweaver die een handvol andere functies biedt (Ex: Server Connectivity, FTP).

Stap 2: Plan en ontwerp uw website met behulp van Adobe Photoshop

Het plannen van de website-structuur en het navigatiesysteem zijn van groot belang. Eerst moet je begrijpen hoe je je inhoud wilt leveren. Plan hoeveel navigatiemenu's, hoeveel kolommen of inhoudvelden, hoeveel afbeeldingen u wilt opnemen en waar.

De beste werkwijze is het openen van Adobe Photoshop en het maken van een ruwe tekening van uw webpagina's. U moet mogelijk verschillende ruwheden maken voor verschillende pagina's, bijvoorbeeld de startpagina, over pagina, contactpagina, servicepagina, enzovoort.

Ontwerp mockup die we hebben gebruikt bij het maken van deze website
Voorbeelden - ontwerp-mock-ups die we deden tijdens het vernieuwen van de site in december 2016.

Stap 3: codificeer het ontwerp met behulp van HTML en CSS

Nadat u klaar bent met het maken van ruwe ontwerpen voor uw webpagina's in Adobe Photoshop, kunt u beginnen met het schrijven van de broncodes.

Dit is het gemakkelijkste gedeelte. Maak HTML-markeringen voor de webelementen die u wilt opnemen en gebruik CSS om ze te versieren volgens de ontwerpen die u hebt gemaakt.

Stap 4: Maak het dynamisch met JavaScript en jQuery

Alleen HTML- en CSS-gebaseerde websites bestaan ​​tegenwoordig niet omdat interacties tussen front-end gebruikers niet kunnen worden beheerd via HTML of CSS.

U kunt scriptalen gebruiken, zoals JavaScript en mogelijk de verbeterde bibliotheek, jQuery om gebruikersactiviteit voor formulieren, aanmeldingen, slider, menu's of waar dan ook te beheren.

Stap 5: upload lokale bestanden naar de server met behulp van FTP-client

FTP-software voor het maken van sites

De laatste stap is het uploaden van al uw bronbestanden naar de webserver. De beste en gemakkelijkste manier om dit te doen, is via een FTP-client.

Download eerst een FTP-client op uw computer en verbind hem met een FTP-account met uw webserver. Nadat u het met succes hebt verbonden met het FTP-account, kopieert u al uw lokale bestanden naar de hoofdmap van uw webdirectory. Sommige goede FTP-clients zijn FileZilla, WinSCP Cyberduck.


Methode #2: een website maken met CMS

Vereiste vaardigheden en hulpmiddelen

  • Knwoledge: Basiswerking van computer en internet; HTML, CSS en PHP (niet verplicht maar beter als je de basis kent)
  • Tools: WordPress, Joomlabeheren en Drupal

Een CMS of een Content Management Systeem is zo tactisch gebouwd dat het geschikt is voor beginnende beginners voor ervaren webontwikkelaars.

Het is een softwaretoepassing waarmee u eenvoudig online inhoud kunt maken en beheren. De meeste zijn open-source en gratis te gebruiken.

Als je de basiskennis van HTML, CSS of PHP kent, is het voordelig voor jou. Het is geen groot probleem als je het niet weet, want deze platforms zijn erg intuïtief. Hier zijn top drie vrije keuzes van CMS-platforms die u kunt kiezen op basis van uw behoefte.

Snelle vergelijkingen

WordPressJoomlaDrupal
KostenGratisGratisGratis
Gebruik311,682 miljoen26,474 miljoen31,216 miljoen
Gratis thema's4,000 +1,000 +2,000 +
Gratis plug-ins45,000 +7,000 +34,000 +

Lees ook - Top CMS vergeleken (2018) - WordPress vs Joomla vs Drupal

WordPress

WordPress wordt volgens verschillende statistieken gebruikt in het maximale aantal blogs en kleine tot middelgrote websites. Desondanks geven veel machtige grote websites de voorkeur aan WordPress vanwege zijn eenvoud. WYSIWYG Editor is het enige dat je moet leren om je eerste content te plaatsen.

Dit platform is een instituut voor beginners, maar ook sterk ontwikkelbaar voor verschillende klassen van webontwikkelaars. Het heeft veel gratis plug-ins en thema's op hun eigen repository. Omdat het de #1 CMS-keuze is, zijn er veel bronnen van derden beschikbaar aan de zijkant.

thema&#39;s
Keuzes van WordPress-thema's.

VOORDELEN

  • Zeer flexibel en aanpasbaar
  • Makkelijk te gebruiken,
  • Tal van leermiddelen,
  • Uitstekende gemeenschap en ondersteuning

NADELEN

  • Heeft code nodig voor belangrijke visuele aanpassingen
  • Updates kunnen problemen met plug-ins veroorzaken

Bekijken

Joomla

Joomla lijkt in veel opzichten op WordPress. Het is ook gemakkelijk te gebruiken, eenvoudig te installeren en kan eenvoudig worden uitgebreid met behulp van modules - het equivalent van WordPress-plug-ins. Als gevolg hiervan zijn dit de op een na beste opties voor beginners.

Beginners kunnen echter meer geïntimideerd zijn om Joomla te verkennen vanwege het aantal beschikbare opties. Naast het linkermenu is er ook een menu op de bovenste balk direct boven het "Control Panel" -logo. Om verwarring te voorkomen, onthoud dat sommige items in de linker en bovenste balkmenu's vergelijkbaar zijn, inclusief 'Inhoud', 'Gebruikers' en 'Extensies'.

Net als WordPress heeft Joomla enkele stijlen en sjablonen die uw site snel een onderscheidende uitstraling kunnen geven. Maar van alle drie de contentbeheersystemen biedt Joomla de eenvoudigste oplossing als het gaat om het creëren van een sociaal netwerk. Met platforms als EasySocial en JomSocial ben je slechts enkele minuten verwijderd van je eigen sociale netwerkwebsite.

scheutje
Binnen Joomla-systeem.

VOORDELEN

  • Meer technisch geavanceerd
  • Websites presteren over het algemeen beter
  • Beveiliging op bedrijfsniveau

NADELEN

  • Modules zijn moeilijk te onderhouden
  • Middle-ground CMS - Niet zo eenvoudig als WordPress, niet zo geavanceerd als Drupal

Meer informatie

Drupal

Ervaren webontwikkelaars verklaren dat Drupal het krachtigste CMS is.

Het is echter ook het moeilijkst om te gebruiken. Vanwege de flexibiliteit is Drupal het op één na meest gebruikte CMS ter wereld, maar het is geen favoriet onder beginners. Om met Drupal een "complete" website te bouwen, moet je je handen vies maken en de basisprincipes van coderen leren. Het is een uitdaging voor beginners om je weg in het CMS te kennen.

counter
Een nieuwe Drupal installeren - ondanks de gecompliceerde functies in Drupal biedt de CMS een eenvoudige, minimalistische interface.

VOORDELEN

  • Makkelijk te leren
  • Geweldige help-portal
  • Updates kunnen naadloos worden geïntegreerd
  • Meer ingebouwde opties

NADELEN

  • Steile leercurve in startfase - aanbevolen voor gevorderde gebruikers

Meer informatie

Stapsgewijze creatie van websites met behulp van WordPress

Voor deze methode gebruiken we WordPress als ons voorbeeld. Inmiddels zou je dat al moeten doen een webhostingaccount en een geregistreerde domeinnaam.

Stap 1: Zoek het WordPress-installatieprogramma in uw webhostingpaneel

Webhostingservices bevatten meestal een snel installatieprogramma voor het installeren van WordPress en andere veelvoorkomende platforms.

Log dus in op uw webhostingaccount en ontdek welk installatieprogramma u hebt. De populaire namen waarnaar u moet zoeken, zijn Softaculous, QuickInstall of Fantastico.

Sommige hostingproviders (bijvoorbeeld: SiteGround) gebruik geïntegreerde installatieprogramma's in hun gebruikersdashboard (het scherm dat u ziet na inloggen bij cPanel). Zoek in dat geval alleen de titel met 'WordPress'.

Voorbeeld: SiteGround cPanel-dashboard.

Stap 2: installeer WordPress via het installatieprogramma

Softaculous is het meest populaire auto-installatieprogramma en is te zien op cPanel. Ik begeleid je via Softculous door de installatie. De andere installatieprogramma's zijn vrijwel hetzelfde.

Klik op Softaculous en klik vervolgens op 'Installeren' via WordPress om met de installatie te beginnen.

Installeren van WordPress om uw website te maken

Hier komt het belangrijke deel.

Siteconfiguratie

Configureer de opties als volgt, laat andere velden over aan de standaardconfiguratie (wordt later gesorteerd) en klik op Installeren.

  • Protocol: u moet beslissen of u de http: // of de http: // www. versie van URL. Wat je ook kiest, je zult niet veel verschil zien. Vanuit technisch oogpunt, http: // www. is beter in termen van flexibiliteit en cookiebeheer. Merk op dat als u een geldig SSL-certificaat heeft en WordPress erop wilt installeren, u gewoon https in plaats van http selecteert.
  • Domein: Selecteer het domein waarop u de website wilt installeren.
  • Directory: geef op waar u de WordPress-site wilt installeren. Als u het op uw root-URL (bijv .: http://www.yourwebsite.com/) wilt installeren, houdt u dit veld leeg. Als je het op een sub-URL wilt (bijv .: http://www.yourwebsite.com/myblog/), specificeer dan de map in het veld.
  • Beheerdersaccount: stel uw gebruikersnaam, wachtwoord en e-mailadres in waarmee u zich aanmeldt bij uw WordPress-site.

Als het je gelukt is in de laatste stappen, goed gedaan. Uw website is live!

Meld u nu aan bij uw WordPress-site. De aanmeldingspagina van uw site ziet eruit als wp-login.php na de URL van de website die u hebt ingesteld.

Stap 3: installeer een thema en enkele belangrijke plug-ins

Vervolgens moet u een thema en de vereiste plug-ins installeren. Bekijk de linkerzijbalk van uw WordPress-dashboard.

Er zijn tal van gratis kant-en-klare thema's beschikbaar in de WordPress-map.

Als u door deze gratis thema's wilt bladeren, gaat u naar 'Vormgeving> Thema's> Nieuwe toevoegen', zoekt u naar het thema dat aan uw vereisten voldoet en klikt u op de knop Installeren.

WordPress thema&#39;s directory
WordPress themabestand.

U kunt ook thema's van derden installeren in het gedeelte 'Thema uploaden'. Voor betaalde, professioneel ontworpen WordPress-thema's, raad ik aan elegante thema's (voor zijn efficiënte code en prachtige front-end ontwerpen).

Voor plug-ins, blader 'Plugins> Add New'.

Zoek en installeer de plug-ins die je alleen maar nodig hebt. 3rd Party-plug-ins kunnen ook worden geïnstalleerd vanuit het gedeelte 'Plug-in uploaden'.

WordPress Plugin-map
WordPress plugin-map.

Hier wil ik een paar belangrijke gratis plug-ins voorstellen. Zoek op naam in de map WordPress plug-ins om ze te achterhalen. Merk op dat het installeren van slechts één plug-in uit elke categorie voldoende is.

  • Voor SEO: Yoast SEO, alles in één SEO-pakket
  • Voor beveiliging: iThemes-beveiliging, Wordfence-beveiliging
  • Voor sitestatistieken: Jetpack door WordPress.com, Google Analytics voor WordPress door Monster Insights
  • Voor het maken van formulieren: contactformulier 7
  • Voor prestaties: W3 Total Cache, WP Super Cache

Lees ook - 9 Essentiële WordPress-plug-ins voor nieuwe WP-sites

Stap 4: U bent klaar!

Uw site moet bij de laatste stap worden gebruikt. Maar er zijn nog een paar dingen die moeten worden opgelost.

  • Onder 'Instellingen> Algemeen': stel de titel van uw site en de slogan in.
  • Onder 'Instellingen> Lezen': wat uw startpagina moet weergeven en hoeveel blogberichten u op één pagina wilt weergeven.
  • Onder 'Instellingen> Permalinks': stel in wat de URL-structuur van uw blogpost zal zijn.

Basisinstelling voor een nieuwe WP-site
Basisinstellingen voor nieuwe WordPress-site.


Methode #3: een website maken met sitebouwers

Vereiste vaardigheden en hulpmiddelen

  • Knwoledge: basisbediening van computer en internet
  • Tools: Wix weebly

Sitebouwers hebben het moeiteloos en direct gemaakt om een ​​website op te zetten. Zonder kennis van webtalen kan men zijn volledig functionele website in enkele minuten lanceren. Ze bieden Drag & Drop-websitebouwers waarvoor kennis van codering vereist is.

Er zijn veel bouwers van sites verspreid over internet - Disha bedekt 26 gratis site builders in deze blogpost; maar niet iedereen kan aan de behoeften voldoen.

De volgende drie zijn de meest besproken en potentiële websitebouwers die u kunt gebruiken.

Wix

Wix gebruiken om een ​​website te maken

Wix is ​​een van de gemakkelijkste site-builders op de markt met 500 + volledig aanpasbare sjablonen die zijn gesorteerd in verschillende categorieën. Dus het is vrijwel zeker dat je er een zult vinden die bij je past.

Ze bieden een flexibele Drag & Drop website-editor die altijd zichtbaar is over de inhoud. U kunt een item uit de lijst slepen en het overal op de website neerzetten om toe te voegen. Elk zichtbaar item erop kan worden verplaatst of bewerkt.

Het enige nadeel is dat er on-site advertenties op Wix-vrij plan zijn. Je kunt het verwijderen door het te upgraden naar hun Combo-abonnement, waarmee je weer een minimum van $ 12 per maand haalt.

Lees ook - Onze diepgaande Wix-recensie.

weebly

Weebly gebruiken om een ​​website te maken

Weebly is op veel manieren eenvoudiger, zoals navigatie, gebruikersvriendelijkheid. Ze bieden honderden sjablonen om uit te kiezen, maar personalisatieopties kunnen beperkt lijken.

Ze hebben een goed aantal vooraf ontworpen paginalay-outs (bijvoorbeeld: over pagina, prijspagina, contactpagina) die kunnen worden gebruikt en gewijzigd.

De Drag & Drop-builder is gemakkelijker te gebruiken, maar u bent soms beperkt tot de aangewezen gebieden voor aanpassing. De beschikbaarheid van extensies en apps van derden is ook beperkt.

Lees ook - Onze diepgaande Weebly-beoordeling.

Stapsgewijze creatie van websites met behulp van Wix

Stap 1: Meld je aan voor Wix

Maak een account op Wix.com.

Er zijn 5 premium-abonnementen en 1-gratis abonnement (prijzen variëren van $ 0 - $ 24.50 / mo). U zult upgrade-opties zien na het succesvol maken van een site.

Zie Wix-plannen en prijzen hier.

Wix-aanmelding
Wix-aanmeldingspagina.

Ik raad Wix Basic Pay Plan - Combo aan. Wix Combo-abonnement ($ 8.50 / mo) heeft een gratis domeinnaam, meer CPU-bronnen en geen Wix-advertenties.

Stap 2: kies een sjabloon

Wix zal je vragen hoe je een website wilt maken. De snelste manier waarop ze zouden voorstellen is Wix ADI (Artificial Design Intelligence), dat aan het eind niet erg vruchtbaar is.

Dus ik zal je een beetje langer doorlaten, maar de betere manier, de website-bouwer!

U zult zien dat er sjablonen zijn onder verschillende labels. Blader door uw toekomstige categorie en kies degene die bij u past.

Nadat je een Wix-thema hebt gevonden dat je leuk vindt, klik je op 'bewerken' om door te gaan.

Een webpagina bewerken op Wix
De knop "Bewerken" wordt weergegeven wanneer u uw muis op een thema plaatst.

Stap 3: ontwerp uw website met Wix Website Builder

Na een paar momenten belandt u direct op hun intuïtieve website builder.

Het ontwerpen van een website is eenvoudig. Je ziet verschillende tools aan de linker- en rechterkant van je scherm. Klik ook ergens op de website om het blok te bewerken of naar een andere plaats te verplaatsen.

Wix-elementen
Bouw uw webpagina-elementen met behulp van de Wix-editor voor slepen en neerzetten.

Stap 4: publiceer de website

Wanneer u op de knop Publiceren klikt, wordt u gevraagd of u een gratis subdomein of een volledig domein wilt. Jij moet kiezen.

Een paar meer tweaks worden aanbevolen.

Ga naar je 'Wix Dashboard> Site beheren en bewerken' en configureer SEO, Favicon, Social en Upgrades indien nodig.

Wix-siteconfiguratie
Configureer uw Wix-site. Klik om de afbeelding te vergroten.

En als u eenmaal klaar bent met deze basisinstellingen - uw website is klaar.

Over Jerry Low

Oprichter van WebHostingSecretRevealed.net (WHSR) - een hostingreview die wordt vertrouwd en gebruikt door gebruikers van 100,000. Meer dan 15 jaar ervaring in webhosting, affiliate marketing en SEO. Bijdrager voor ProBlogger.net, Business.com, SocialMediaToday.com en meer.