Hoe HTML te leren

Inhoud

Stappen
Deel 1 van 2: HTML-basis leren
Deel 2 van 2: Geavanceerde HTML
Tips
Waarschuwingen
Wat heb je nodig

HTML is een afkorting voor Engels Hypertekst-opmaaktaal (hypertekst opmaaktaal). Dit is de code, of taal, waarin de basisopmaak van sites wordt gemaakt. Leren lijkt misschien ontmoedigend als je nog nooit hebt geprogrammeerd, maar in werkelijkheid heb je alleen een eenvoudige teksteditor en internetbrowser nodig om aan de slag te gaan. U herkent misschien zelfs enkele voorbeelden van HTML-opmaak die u bent tegengekomen op internetforums, aangepaste aangepaste pagina's of wikiHow-artikelen. HTML is een handig hulpmiddel voor elke internetgebruiker en het leren van de basis kost minder tijd dan u denkt.

Stappen

Deel 1 van 2: HTML-basis leren

1 Open een HTML-document. De meeste teksteditors (Notepad of Notepad++ voor Windows, TextEdit voor Mac, gedit voor GNU / Linux) kunnen worden gebruikt om HTML-bestanden te genereren. Maak een nieuw document en sla het op met Bestand → Opslaan als in webpagina-indeling, of wijzig de bestandsextensie in .html of .htm in plaats van .doc, .rtf of een andere extensie.
- Mogelijk ontvangt u een waarschuwing dat het bestand wordt opgeslagen als "platte tekst" in plaats van in RTF-indeling, of dat opmaak en afbeeldingen niet worden opgeslagen. Dit is goed; voor HTML zijn deze opties niet nodig.
2 Open het gegenereerde bestand in een browser. Sla het lege bestand op, zoek het op uw computer en dubbelklik erop om het te openen. Er zou een lege pagina in de browser moeten openen. Als dit niet het geval is, sleept u het bestand naar de adresbalk van uw browser. Terwijl u het HTML-bestand bewerkt, kunt u deze pagina vernieuwen om de wijzigingen te zien.
- Houd er rekening mee dat u op deze manier geen website op internet maakt. Andere mensen hebben geen toegang tot deze pagina en je hebt geen internetverbinding nodig om je lokale pagina te testen. De browser interpreteert eenvoudig de HTML-code en "leest" deze alsof het een website is.
3 Begrijp wat markup-tags zijn. In tegenstelling tot gewone tekst verschijnen tags niet op de pagina. In plaats daarvan vertellen ze de browser hoe de pagina en de inhoud ervan moeten worden weergegeven. De tag "opening" bevat instructies. Het kan de browser bijvoorbeeld vertellen dat de tekst moet worden weergegeven als: stoutmoedig... Het heeft ook een "end"-tag nodig om de browser te laten zien waar de instructie eindigt. In dit voorbeeld wordt de tekst tussen de begin- en eindtags vet weergegeven. Tags worden tussen ongelijke tekens geschreven, maar de eindtag begint met een schuine streep.
- De openingstag staat tussen de ongelijkheidstekens: openingstag>
- In de afsluitende tag wordt een schuine streep geplaatst voor de tagdescriptor (naam): /eindtag>
- Lees verder om erachter te komen hoe de verschillende tags worden gebruikt. Voor deze stap hoeft u alleen het opnameformaat te onthouden. Tags staan tussen de ongelijkheidstekens:> en />
- In sommige tutorials worden HTML-tags elementen genoemd, en de tekst tussen de openings- en sluitingstags wordt elementinhoud genoemd.
4 Typ html>-tag in de editor. Elk HTML-bestand moet beginnen met een tag html> en eindigen met een tag / html>... Deze tags vertellen de browser dat alle inhoud tussen de tags in HTML is. Voeg deze tags toe aan uw document:
- Vaak beginnen HTML-bestanden met de regel DOCTYPE html>wat betekent dat browsers het hele bestand als HTML moeten herkennen. Deze regel is niet nodig, maar kan u helpen bij het oplossen van compatibiliteitsproblemen.
- Kies html> bovenaan het document.
- Druk meerdere keren op Enter of Return om meerdere lege regels te maken en typ vervolgens / html>
- onthoud dat het geheel de code die u in dit artikel maakt, moet tussen deze twee tags worden geschreven.
5 Maak een head> sectie in het bestand. Maak tussen de html> en / html> tags een openingstag hoofd> en de afsluitende tag / hoofd>... Voeg enkele lege regels ertussen toe. Inhoud tussen de tags head> en / head> wordt niet op de pagina zelf weergegeven. Volg deze stappen en je zult zien waar deze tag voor is:
- Schrijf tussen de tags head> en / head> titel> en / titel>
- Schrijf tussen de title> en / title> tags Hoe HTML te leren Antwoorden op al uw "Hoe?".
- Sla uw wijzigingen op en open het bestand in een browser (of ververs de pagina als het bestand al geopend is). Zie je de tekst die in de paginatitel boven de adresbalk verschijnt?
6 Maak een body> sectie. Alle andere tags en tekst in dit voorbeeld zijn geschreven in de body-sectie, waarvan de inhoud op de pagina wordt weergegeven. Na afsluitende tag / head>, maar voordat tag / html> tags toevoegen lichaam> en / lichaam>... Werk voor de rest van dit artikel met de hoofdtekst. Je bestand zou er ongeveer zo uit moeten zien:
html>
hoofd>
titel> HTML leren - wikiHow / titel>
/ hoofd>
lichaam>
/ lichaam>
/ html>
7 Voeg tekst toe met verschillende stijlen. Het is tijd om de echte inhoud aan de pagina toe te voegen! Alles wat u tussen de body-tags schrijft, wordt op de pagina weergegeven nadat het in de browser is vernieuwd. Gebruik niet symbolen of >omdat de browser de inhoud zal proberen te interpreteren als een tag in plaats van als tekst. Schrijven Hallo! (of wat je maar wilt), probeer dan deze tags aan de tekst toe te voegen en kijk wat er gebeurt:
- em> Hallo allemaal! / em> maakt de tekst "cursief": Hallo!
- sterk> Hallo allemaal! / sterk> maakt de tekst "vet": Hallo!
- s> Hallo allemaal! / s> doorgestreepte tekst: ~~Hallo!~~
- sup> Hallo allemaal! / sup> geeft het lettertype weer als een superscript:
- sub> Hallo allemaal! / sub> geeft het lettertype weer als een subscript: _Hallo!
- Probeer verschillende tags samen. Hoe het eruit zal zien em> sterk> Hallo allemaal! / sterk> / em>?
8 Verdeel de tekst in alinea's. Als u meerdere regels tekst in een HTML-bestand probeert te schrijven, zult u merken dat regeleinden niet worden weergegeven in de browser. Om tekst in alinea's te verdelen, moet u tags toevoegen:
- p> Dit is een aparte paragraaf. / p>
- Deze zin wordt gevolgd door een regeleinde br> voor het begin van deze regel.
  Dit is de eerste tag waarvoor geen eindtag nodig is. Deze tags worden "lege" tags genoemd.
- Maak koppen om de sectietitels weer te geven:
  h1> koptekst / h1>: grootste titel
  h2> koptekst / h2> (kop op het tweede niveau)
  h3> koptekst / h3> (kop op het derde niveau)
  h4> koptekst / h4> (rubriek op het vierde niveau)
  h5> koptekst / h5> (kleinste titel)
9 Leer lijsten maken. Er zijn verschillende manieren om lijsten op een webpagina te maken. Probeer de onderstaande opties en beslis welke je het leukst vindt. Merk op dat één paar tags nodig is voor de lijst als geheel (bijvoorbeeld ul> en / ul> voor een lijst met opsommingstekens), en elk lijstitem wordt gemarkeerd met een ander paar tags, bijvoorbeeld li> en / li>.
- Lijst met opsommingstekens:
  ul> li> Eerste regel / li> li> Tweede regel / li> li> En zo verder / li> / ul>
- Genummerde lijst:
  ol> li> Een / li> li> Twee / li> li> Drie / li> / ol>
- Definitielijst:
  dl> dt> Koffie / dt> dd> - warme drank / dd> dt> Limonade / dt> dd> - koude drank / dd> / dl>
10 Lay-out van de pagina met regeleinden, horizontale lijnen, en Afbeeldingen. Het is tijd om iets anders dan tekst aan de pagina toe te voegen. Probeer de volgende tags of volg de links voor meer informatie. Gebruik een online hostingservice om een link te maken naar de afbeelding die u wilt plaatsen:
- Horizontale lijn: hr>
- Afbeelding invoegen: img src = "afbeeldingslink">
11 Koppelingen toevoegen. U kunt deze tags gebruiken om hyperlinks naar andere pagina's en sites te maken, maar aangezien u nog geen website heeft, leert u nu hoe u ankerlinks maakt, dat wil zeggen links naar specifieke plaatsen op een pagina:
- Maak een anker met de a>-tag waar u op de pagina naar wilt linken. Verzin een duidelijke en gedenkwaardige naam:
  
  a name = "Tips"> De tekst waarnaar u linkt. / a>
- Gebruik de tag href> om een relatieve link of link naar een externe bron te maken:
  
  a href = "link naar de pagina of ankernaam binnen de pagina"> Tekst of afbeelding die als link zal dienen. / a>
- Als u naar een relatieve link op een andere pagina wilt linken, voegt u een #-teken toe na de hoofdlink en de naam van het anker. https://en.wikihow.com/learn-HTML#Tips verwijst bijvoorbeeld naar het gedeelte met tips van deze pagina.

Deel 2 van 2: Geavanceerde HTML

1 Maak kennis met de attributen. Attributen worden in de tag geschreven om aanvullende informatie aan te geven. Het formaat van de attributen is als volgt: naam = "waarde", waar titel definieert een attribuut (bijvoorbeeld kleur voor een kleurkenmerk), en de waarde geeft de waarde aan (bijvoorbeeld rood voor rood).
- Attributen zijn daadwerkelijk gebruikt in het vorige gedeelte over de basisprincipes van HTML. De img> tag gebruikt het attribuut src, relatieve link-ankers gebruiken het attribuut naamen de links gebruiken het attribuut href... Zoals je al hebt opgemerkt, zijn alle attributen geschreven in het formaat ___='___’.
2 Experimenteer met HTML-tabellen. Het maken van een tabel omvat het gebruik van verschillende tags. U kunt experimenteren of meer gedetailleerde instructies lezen.
- Tabeltags maken:tafel> / tafel>
- Omsluit de inhoud van elke rij in de tabel in tags: tr>
- De kolomkop wordt gedefinieerd door de tag: de>
- Cellen in volgende regels: td>
- Een voorbeeld van het gebruik van deze tags:
  
  tabel> tr> th> Kolom 1: maand / th> th> Kolom 2: sparen / th> / tr> tr> td> januari / td> td> 5000 roebel / td> / tr> / tabel>
3 Leer de extra hoofdsectie-tags. Je hebt de head> tag al geleerd die aan het begin van elk html-bestand staat. Naast de tag title> zijn er nog andere tags voor deze sectie:
- Metatags die bevatten metagegevensgebruikt door zoekmachines om de site te indexeren. Om uw site beter vindbaar te maken in zoekmachines, gebruikt u een of meer openingsmeta>-tags (afsluittags zijn niet vereist).Gebruik één attribuut en één waarde per tag: meta name = "description" content = "page description">; of meta name = "keywords" content = "door komma's gescheiden trefwoorden">
- Link>-tags die verwijzen naar bestanden van derden, zoals stylesheets (CSS), die zijn gemaakt met een ander type codering en waarmee u de HTML-pagina kunt wijzigen met behulp van kleur, tekstuitlijning en vele andere functies.
- De script>-tags die worden gebruikt om JavaScript-bestanden aan de pagina toe te voegen. Deze bestanden zijn nodig om de pagina interactief aan te passen (in reactie op gebruikersacties).
4 Experimenteer met de HTML-code van andere sites. Het bekijken van de broncode van andere webpagina's is een geweldige manier om HTML te leren. U kunt met de rechtermuisknop op de pagina klikken en Bron weergeven of iets dergelijks selecteren in het bovenste menu van uw browser. Probeer erachter te komen wat een onbekende tag doet, of zoek op internet naar informatie erover.
- Hoewel u de sites van anderen niet kunt bewerken, kunt u de broncode wel naar uw bestand kopiëren om later met tags te experimenteren. Houd er rekening mee dat CSS-opmaak mogelijk niet beschikbaar is en dat kleuren en opmaak er anders kunnen uitzien.
5 Begin met het verkennen van meer gedetailleerde handleidingen. Er zijn veel sites op internet gewijd aan HTML-tags, zoals W3Schools of HTMLbook. Er zijn ook papieren boeken te koop, maar probeer de nieuwste editie te vinden naarmate de normen veranderen en evolueren. Beter nog, beheers CSS om veel meer controle te hebben over de lay-out en het uiterlijk van uw site. Nadat ze CSS hebben geleerd, leren webontwerpers meestal JavaScript.

Tips

Notepad ++ is een geweldig gratis programma, vergelijkbaar met gewoon Kladblok, maar je kunt je code online in je browser opslaan en testen. (Het ondersteunt ook bijna elke taal - HTML, CSS, Python, JavaScript, enzovoort.)
Zoek een eenvoudige pagina op het internet, sla de code op uw computer op en experimenteer ermee. Probeer tekst te verplaatsen, het lettertype te wijzigen, afbeeldingen te vervangen - wat dan ook!
Je kunt een notitieboekje bewaren waarin je tags schrijft, zodat je ze altijd bij de hand hebt. U kunt deze pagina ook afdrukken en ernaar verwijzen.
Wanneer u code schrijft, doe dit dan zorgvuldig, zodat u en andere mensen het kunnen begrijpen. Gebruik: - Voeg hier commentaar in -> voor HTML-opmerkingen: ze worden niet weergegeven op de pagina, maar zijn zichtbaar in het codedocument.
XML en RSS winnen aan populariteit. De code voor pagina's met XML- en RSS-technologieën is moeilijker voor een onervaren gebruiker om te lezen en te begrijpen, maar deze tools zijn heel nuttig.
Markup-tags in HTML zijn niet hoofdlettergevoelig, maar we raden aan om alleen kleine letters te gebruiken (zoals in de voorbeelden in dit artikel) voor zowel standaardisatie als XHTML-compatibiliteit.

Waarschuwingen

Sommige tags zijn de afgelopen jaren buiten gebruik geraakt en zijn vervangen door nieuwe die hetzelfde of een aantal extra effecten geven.
Als je je pagina wilt testen, ga dan naar de W3-site en bekijk de moderne HTML-vereisten. HTML-standaarden veranderen in de loop van de tijd en sommige tags worden vervangen door nieuwe die beter werken in moderne browsers.