Gratis website maken ? Alles wat je nodig hebt is een computer en een kladblok.
Als u een statische HTML-website maakt, heeft u eigenlijk geen software nodig. U kunt de site gratis vanaf uw computer maken met behulp van Notepad of TextEdit (Mac).
Een basis HTML-webpagina maken
Open uw tekstverwerker en voeg de volgende code in. Kopieer en plak de onderstaande informatie in uw lege bestand.
Sla nu op als en zorg ervoor dat u alle bestanden selecteert onder "Opslaan als type" en sla het bestand op met een .HTML-extensie zodat het eruit ziet als index.html. Dit wordt uw homepage.
Open dit bestand nu met een willekeurige webbrowser en u zou een schone witte pagina moeten zien waarop staat dat dit de body van uw website is.
Geloof het of niet, dat is alles wat u nodig heeft om een basis webpagina te maken. Nu, natuurlijk gaat het ongelooflijk duidelijk en onaantrekkelijk zijn, maar je krijgt het idee.
Let op de regel die zegt "Search Engine Title Goes Here." Dat is de titel die de zoekmachine weergeeft als uw site in Google, Bing, enz. wordt vermeld en gerangschikt.
Dit is waar u de zin wilt invoegen die u probeert te targeten en waarvoor u gerangschikt wilt worden. Controleer de bovenstaande link voor hulp bij het optimaliseren van zoekmachines.
Toevoegen van CSS
Nu om je pagina op te vrolijken, je zult CSS willen gebruiken. Dit staat voor Cascading Stylesheets en het is een zeer goede manier om ervoor te zorgen dat je consistente stijlen gebruikt in je hele website.
Het maakt het ook gemakkelijk om je lettertypes, kleuren, enz. in één keer bij te werken op al je pagina's.
Maak je geen zorgen. Ik weet dat het ingewikkeld klinkt, maar ik ga je de code geven en je zult zien hoe gemakkelijk het is om het te tweaken.
Om je stylesheet te maken, open je gewoon een ander leeg tekstbestand en noem je het style.css. Zorg ervoor dat u het op dezelfde locatie (map) op uw computer opslaat als uw startpaginabestand.
Voeg nu een regel toe voor de </hoofd> in uw HTML-pagina die leest...
<link rel="stylesheet" type="tekst/css" href="style.css">
Dus de code voor uw index.html pagina zal er nu zo uitzien...
Een 2-koloms-webpagina maken
Laten we nu een 2-kolomspagina maken met behulp van CSS. Hieronder staat de code die u in uw style.css bestand zult plakken.
Merk op dat er 5 secties op uw website staan...
1) Container
2) Kop
3) Zijbalk (linker kolom)
4) Inhoud
5) Voetnoot
De meeste secties zijn waarschijnlijk zelfverklarend. De Container is het gebied waar uw site zich bevindt.
Als u wilt dat de gehele breedte van uw site 1000px is, zou u de 900px veranderen in 1000px. Vergeet niet om de grootte van de rest van de variabelen te veranderen, zodat alles op één lijn ligt.
En het stylesheet definieert de breedte en andere variabelen voor elke sectie. Als je de achtergrondkleur van de body wilt veranderen, verander je #ffffff naar een andere kleur.
Neem de tijd om het stylesheet aan te passen zoals u dat wilt.
Dus nu kunt u de volgende code toevoegen aan uw bestandsnaam.html (homepage) en <p>Dit is de body van uw homepage</p> vervangen door deze...
Lettertypes toevoegen
Als u geen lettertypes of -groottes toevoegt, zal de browser gewoon de standaardlettertypes van de persoon op zijn of haar computer weergeven (meestal Times New Roman).
Met CSS kunt u de browser echter wel vertellen welke lettertypestijl en -grootte u wilt voor elk onderdeel van uw website.
Dus als u wilt dat de alinea tekst in uw inhoudsruimte 14px is en het Arial lettertype gebruikt, dan zou u de volgende code aan uw stylesheet toevoegen direct na de #content sectie.
Het veranderen van de link kleuren
Standaard zijn de links blauw, maar u kunt het bovenstaande formaat volgen en de kleur veranderen naar wat u wilt.
Dus als u wilt dat uw links rood worden weergegeven in uw inhoudsopgave, zou u dit toevoegen aan uw style.css-bestand...
#content een {kleur: rood;} of u kunt de hex-waarde gebruiken en het zo verklaren...
#content a {kleur: rood;} of u kunt de hex-waarde gebruiken en het zo declareren..: #ff0000;}
De a staat voor de link kleur. Als je nu een link toevoegt aan het inhoudsgebied met deze code...
<a href="http://www.website.com">Dit is een link</a>, de link zal rood zijn.
Spoelen en herhalen
Dus nu je een beetje weet over het maken van stijlen voor je stylesheet, kun je deze tutorial toepassen op elk onderdeel van je site.
Dat betekent dat als u de kleur van het lettertype en de grootte van uw koptekst, navigatie, voettekst, enz. wilt wijzigen, u het voorbeeld moet volgen dat ik voor de inhoudsopgave heb gebruikt.
Bekijk wat meer html sjablonen die je kunt downloaden.
Wil je een Meer Gevorderde Cursus?
Deze pagina behandelt de basis, maar als je je webontwikkelingsvaardigheden echt wilt verbeteren, kun je overwegen om een cursus te volgen. Dit is een van de meest populaire online webontwikkelingscursussen. Je kunt je hier aanmelden.
Hoe publiceer je je site op het internet
Als uw website eenmaal is gemaakt, heeft u een webhost nodig om het te publiceren op het internet, zodat de wereld het kan zien.
Om dat te doen moet u uw eigen domein registreren en een webhost selecteren.
Vervolgens kunt u uw pagina's FTP (uploaden) naar uw site. Als u echter gebruik maakt van WordPress (hieronder) dan hoeft u dat niet te doen omdat het een eigen publicatieplatform heeft ingebouwd.
Andere aanmaakopties
Als u niet van plan bent om handmatig een website te maken, zijn er andere manieren waarop u niet zoveel code hoeft aan te passen of handmatig pagina's kunt uploaden.
1) Artisteer is een ontwerptool die je helpt bij het bouwen van een website door gebruik te maken van een zeer gebruiksvriendelijke interface. U hoeft alleen maar de vooraf geladen sjablonen te tweaken en er is geen codering nodig.
Dit is zeker voor mensen die niet veel willen leren over HTML en liever in een meer visuele modus willen werken.