Hoe maak je een eenvoudige HTML-website?

01.06.2020
Artikelen & meer ... 'Hoe maak je een eenvoudige HTML-website?
0 8 мин.


HTML of HyperText Markup Language is, zoals de naam al zegt, een Markup-taal. Het wordt niet beschouwd als een programmeertaal in traditionele zin. Het is een taal waarin de maker documenten kan maken en verschillende delen kan markeren met HTML-tags. HTML werd geïnspireerd door SGML, en de eerste versie verscheen in het jaar 1990 bij CERN.

HTML was oorspronkelijk ontworpen voor eenvoudige statische documenten, toen het World Wide Web werd beschouwd als een systeem voor het ophalen van documenten. Momenteel gebruikt bijna elke webpagina HTML en het werd de taal van het web. De laatste iteratie is HTML5, dat wordt ondersteund door alle grote browsers en komt als een verbetering van HTML 4, dat in 1997 werd “gestandaardiseerd”.

Dit artikel zal lokaliseren de basis van het maken van een eenvoudige HTML-website, iets dat iedereen kan leren, ongeacht het gekozen beroep.

Waarom zou u HTML leren??

Je zou kunnen stellen dat iedereen met de technologie van vandaag een snelle en mooi ogende website kan maken zonder een enkele regel HTML te hoeven coderen, en hoewel dit zeker waar is, kan het altijd handig zijn om te weten hoe je het een beetje kunt aanpassen.

Vaak zullen mensen plug-ins / modules / extensies toevoegen aan een CMS zoals WordPress, Drupal, Joomla, enz. Om het uit te breiden met een eenvoudige functie die met een paar regels HTML had kunnen worden bereikt. Hoewel de plug-in misschien eenvoudiger is, kan deze de laadtijden van de pagina verhogen, en het is gewoon iets anders om je zorgen over te maken in termen van beveiliging en updates.

Het is vrij eenvoudig om HTML te leren en het kan erg leuk zijn, omdat je meteen de resultaten ziet, in tegenstelling tot een programmeertaal waarin je de code die je hebt geschreven moet compileren. Je hebt al alle tools om HTML te leren, je hebt een webbrowser en je hebt zeker een eenvoudige teksteditor zoals kladblok. Toepassingen zoals Microsoft Word doen het niet, je hebt een eenvoudige editor voor platte tekst nodig: notepad, notepad ++. Er zijn zogenaamde IDE’s (Integrated Development Environment), die u zullen helpen bij het schrijven van HTML met functies zoals syntaxisaccentuering of automatisch aanvullen.

Hallo Wereld!

U kunt een gratis teksteditor zoals Notepad ++ of Sublime Text Editor pakken en opstarten. Sla het lege bestand op uw bureaublad op als “hello.html”. Dit verandert de editor in HTML-modus, zodat u kunt profiteren van de voordelen van een IDE. Ga nu door en typ de volgende tekst erin:

Hallo Wereld!

Hallo Wereld!

Sla het bestand op en open het vervolgens met uw webbrowser. Zo moeilijk was het toch niet? U kunt doorgaan en het bestand wijzigen, opslaan en de pagina in uw browser vernieuwen, en u zult alle wijzigingen zien die u hebt aangebracht. U hoeft niet bang te zijn, er is geen enkele manier waarop u uw besturingssysteem kunt beïnvloeden. U kunt geen bestanden of dergelijke dingen verwijderen. En wees niet bang voor mislukkingen, zoals het gezegde luidt: “De meester heeft vaker gefaald dan de beginner zelfs heeft geprobeerd.”

HTML Basics en 101

html basis 101

HTML bestaat uit tags en tekst. Een HTML-tag heeft een speciale betekenis voor de browser, in feite is dit de methode om het document te markeren. Sommige tags kunnen andere tags bevatten, zoals bijvoorbeeld de ongeordende lijsttag

    kan lijstitems bevatten

  • in het. Een alineatag

    kan een nieuwe lijntag bevatten
    , een ankertag , stoutmoedig , cursief , etc. tags.

    In ons voorbeeld bevat de hoofd-HTML-tag een head-tag en een body-tag. In de head-tag kunnen we de titel van het document specificeren, die zal worden weergegeven in de titel van het browsertabblad. In de body hebben we een H1-tag of een Heading 1-tag.

    HTML-tags kunnen attributen hebben die het taggedrag kunnen veranderen. We kunnen bijvoorbeeld een “style” -attribuut aan onze H1 toevoegen om de stijl ervan te specificeren. Als we style = ”color: red” toevoegen, wordt het zo

    Hallo Wereld!

    we kunnen de kleur veranderen van de standaard zwart naar rood. Natuurlijk kunnen onze elementen één voor één problematischer worden op een grotere webpagina, waardoor onze HTML onoverzichtelijk wordt. Een betere methode zou zijn om het element een class attribuut of een id te geven, en dan de stijl te specificeren met die class of id.

    Er zijn genoeg HTML-zelfstudies en bronnen op internet, kunt u tutorials bekijken op YouTube of The Great Curses Plus of een van de duizenden artikelen op internet lezen over HTML.

    Een ding om in gedachten te houden is dat, ongeacht hoeveel je leest of bekijkt, je je handen vuil moet maken en HTML moet gaan schrijven. Het is de enige manier om te leren, want zodra je begint met schrijven, heb je meer vragen en die vragen zullen tot nog meer vragen leiden, totdat je zelfverzekerd en vloeiend wordt in HTML.

    Styling en scripting

    Een pure HTML-webpagina is statisch. Dit betekent dat het geen dynamisch veranderende delen kan bevatten, bijvoorbeeld ‘Ons laatste nieuws’. Als u een website maakt met een nieuwssectie die voortdurend wordt bijgewerkt, kan het eenvoudig een behoorlijk grote taak worden om de artikelen te maken en vervolgens de verwijzingen ernaar bij te werken.

    Aan de andere kant, als u een visitekaartje of over mij een type website maakt in HTML, die niet zo vaak verandert, misschien een of twee keer per maand, dan is een statische HTML-website perfect. Omdat het geen “bewegende” onderdelen heeft, zoals Database, Server side processing (PHP, Python, Ruby, etc.), zijn er minder dingen die fout kunnen gaan, en het is ook razendsnel.

    U kunt een statische pagina dynamisch maken door JavaScript toe te voegen (ECMA-script om precies te zijn), wat een programmeertaal voor scripting is. Met JavaScript kunt u reageren op gebruikersinvoer door sommige delen van de HTML te verbergen of weer te geven, u kunt ook het uiterlijk van de webpagina wijzigen. Met AJAX, u kunt extra bronnen van uw website aanvragen, zoals subpagina’s, contactformulier of uw laatste tweets, en u kunt ze opnemen in uw website.

    De standaard HTML-stijlen zijn behoorlijk saai, het is zwarte tekst op een witte achtergrond. U kunt de stijl van elk HTML-element wijzigen met CSS (Cascading Style Sheets). In HTML heb je geen controle over hoe je document wordt weergegeven, het is een kenmerk van HTML, geen tekortkoming. Met CSS kun je proberen wat preciezer te zijn, maar je hebt nog steeds geen 100% controle. Sommige browsers doen het iets anders dan andere. De huidige CSS-versie, die wordt ondersteund door alle grote browsers, is CSS3, en heeft veel handige functies die de vorige standaard niet had.

    Om CSS te begrijpen, moet je beginnen met het boxmodel, het zal je in het begin veel verwarring besparen, en het is belangrijk dat je het verschil begrijpt tussen border, padding, marges, etc. CSS is vrij eenvoudig te leren en net als bij HTML ziet u direct de wijzigingen die u heeft aangebracht. Zoals eerder vermeld, kunt u een id of klasse-element toevoegen aan elke HTML-tag en u kunt CSS-regels schrijven voor die ids en klassen. Om terug te komen op ons voorbeeld, in het hoofdgedeelte als we de volgende tekst schrijven,

    lichaam {

    Achtergrondkleur: blauw;

    }

    het verandert de standaard witte documentkleur in blauw.

    Een ding om in gedachten te houden met CSS is dat er veel browserspecifieke tags zijn, dus zorg ervoor dat u uw website test met verschillende browsers of in ieder geval Google Chrome, Mozilla Firefox, Internet Explorer 11 en Edge. Het zal ook geen kwaad om snel een kijkje te nemen in sommige mobiele browsers, vooral Safari IOS.

    Conclusie

    HTML en CSS leren is gemakkelijker dan de meeste programmeertalen en het kan een zeer lonende ervaring zijn. Met HTML kunt u webpagina’s precies zo maken als u wilt, zonder compromissen zoals in het geval van CMS. Door HTML-websites te bouwen, kunt u ze overal hosten en ze zullen extreem snel laden en soepel verlopen.

    Zelfs met de opkomst van alle soorten DIY-websitebouwers met slepen en neerzetten, kan HTML niet als verouderd worden beschouwd. Het ondersteunt elke website, en zelfs met krachtige CMS- en website builder-tools, waarmee je een professioneel ogende website kunt bouwen zonder enige kennis van codering, wil je misschien hier en daar wat aanpassingen op je site doen om dingen precies zo te krijgen als jij willen dat ze zijn. Door wat HTML te leren, kun je dat doen.

    Het kennen van de basis van HTML kan voor iedereen een handige vaardigheid zijn, niet alleen voor diegenen die een carrière in de IT plannen. Degenen die werken met webinhoud, online marketing, vertaling en iedereen die een online aanwezigheid nodig heeft, zullen profiteren van een spoedcursus in HTML.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector