Hoe HTML te leren
HTML is de afkorting van Hyper Text Markup Language
Inhoud
stappen
Deel 1
Leer eenvoudige HTML
1
Open een HTML-document De meeste bewerkingsprogramma`s, waaronder Kladblok of Microsoft Word voor Windows of TextEdit voor Mac, kunnen worden gebruikt om HTML-documenten te schrijven. Open een nieuw document en gebruik Bestand → Opslaan als in het hoofdmenu om het bestand als een "webpagina" op te slaan, of wijzig de extensie naar ".html" of ".htm" in plaats van ".doc", ".rtf" of een andere extensie.
- Waarschijnlijk zal er een waarschuwing verschijnen waarin staat dat het document "platte tekst" wordt in plaats van "rijke tekst" of een ander speciaal formaat en dat de afbeeldingen niet goed worden opgeslagen. Maak je geen zorgen, omdat HTML-documenten die opties niet gebruiken.
- Er is geen verschil tussen de ".html" - en ".htm" -bestanden. Iedereen zal werken.
2
Bekijk uw document met een internetbrowser. Sla uw document op, zoek het documentpictogram op uw computer en dubbelklik om het te openen. Het moet openen als een lege pagina in uw browser. Als u dat niet doet, sleept u het bestand naar de URL-balk in uw browser. Terwijl u het HTML-document bewerkt volgens deze handleiding, kunt u de browser controleren en zien hoe de pagina verandert.
3
Ken merklabels. Deze tags verschijnen niet op een webpagina als normale tekst. Ze vertellen uw browser hoe de pagina en de inhoud moeten worden weergegeven. De starttag bevat instructies. U kunt de browser bijvoorbeeld vertellen dat de tekst vet moet worden weergegeven. U hebt ook de eindtag nodig om de browser te laten weten waar de instructies van toepassing zijn: in dit voorbeeld is alle tekst tussen de starttag en de eindtag vetgedrukt. Het enige dat verandert bij het schrijven van het label "einde" is de diagonaal na het eerste driehoekige haakje.
<
de start-tag komt hier>
de eindtag gaat hier>
)4
Schrijf je eerste label . Elk HTML-document begint met een label
en eindigt met een label
. Dit vertelt de browser dat alles tussen deze tags in HTML staat. Voeg deze tags toe aan uw document:5
Vul het kopgedeelte ""Van je document. Tussen labels en , schrijf het label Begin en eind tag. Maak een spatie om te schrijven tussen beide labels. Alles tussen deze labels zal niet op de pagina zelf verschijnen. Probeer het volgende en kijk waar het verschijnt:
6
Maak een body-sectie "". Al het andere in dit document zou in het body-gedeelte moeten gaan, wat op de pagina staat. Na het laatste label, maar vóór het laatste label, schrijft u en . Voor de rest van deze handleiding, zal alles wat je gaat schrijven een van die labels zijn. Nu moet je een document hebben dat er zo uitziet (negeer de kogels):
7
Voeg tekst toe in verschillende stijlen. Nu is het tijd om iets echt in de browser te zien. Alles wat u typt tussen de body-tags zal verschijnen na het opslaan van het HTML-document en het bijwerken van de browser. Schrijf niets met de symbolen < of >, omdat de browser het zal interpreteren als HTML-instructies in plaats van normale tekst. Probeer te schrijven Hallo wereld! (of wat je maar wilt) en voeg deze tags toe om te zien wat er gebeurt:
Hallo wereld!
zal met nadruk verschijnen: Hallo wereld!Hallo wereld!
Het zal verschijnen als een sterke tekst: Hallo wereld!Hallo wereld!
zal doorgehaald verschijnen: Hallo wereld!
het zal als een subscript verschijnen: Hallo wereld!Hallo wereld!
?8
Deel je tekst in alinea`s, als je verschillende tekstregels in je HTML-document gaat schrijven, zul je merken dat de regeleinden niet in de browser verschijnen. U moet hiervoor een code toevoegen:
Dit is een aparte paragraaf.
Deze regel wordt gevolgd door een regeleinde.
Voordat dit gebed begint.
Dit is het eerste label dat u ziet dat geen definitief label nodig heeft. Dit worden "lege tags" genoemd.
koptekst
: de grootste headerkoptekst
(de header van het tweede niveau)koptekst
(de kop van het derde niveau)koptekst
(de kop van het vierde niveau)koptekst
(de kleinste koptekst)9
Leer om lijsten te maken. Er zijn verschillende manieren om lijsten op een webpagina te maken. Probeer de volgende soorten codes en zie welke u wilt. Houd er rekening mee dat een aantal labels de hele lijst doorloopt (zoals labels)
- en
- Gebruik deze code om lijsten met opsommingstekens te maken:
- Een element
- Een ander element
- Een ander element
- café
- - Warme dranken
- latte
- - Koude dranken
10
Fix de pagina een beetje met regeleinden, horizontale lijnen en beeldspraak. Nu is het tijd om meer tekst aan uw pagina toe te voegen. Probeer de volgende tags of klik op de links voor meer informatie. U moet een online beeldopslagservice gebruiken om een URL te koppelen aan een afbeeldingstag:
of
11Link naar andere plaatsen op de pagina. U kunt deze code ook gebruiken om naar andere pagina`s en websites te linken, maar voor nu, omdat u misschien geen website heeft, zullen we ons concentreren op de ankers of specifieke plaatsen op de pagina waar u een koppeling kunt maken:- Maak eerst een "anker" met het label tot het punt op de pagina waar u de tekst wilt koppelen. Geef het een beschrijvende naam om het gemakkelijker te maken te onthouden:
Dit is de tekst die u in de labels plaatst. - Gebruik het label
om naar die ankers te linken of om te linken naar een andere website:
Schrijf de tekst of de afbeelding die als een link zal verschijnen.
- Als u een koppeling wilt maken naar een anker op een andere webpagina, voegt u het symbool # toe na de URL, gevolgd door de naam van het anker, bijvoorbeeld http://es.wikihow.com/aprender-HTML#Consejos maak een link naar het Tips-gedeelte van deze pagina.
Deel 2
Leer meer geavanceerde HTML
1Meer informatie over de kenmerken. De attributen worden in het label zelf geplaatst en brengen extra wijzigingen aan in de `inhoud van elementen` tussen het begin en het einde van het label. Ze staan nooit op zichzelf. Ze zijn in het formaat geschreven name = "waarde", waarin naam is de naam van de attributen (in dit geval "kleur"), en waarde beschrijft de specifieke instantie (in dit geval "netwerk" (rood)).- Je hebt eerder attributen gezien als je de eenvoudige HTML-sectie van deze handleiding leest. labels ze gebruiken het attribuut src, de ankers gebruiken het attribuut naam en de links het attribuut href. Zie hoe ze allemaal het formaat volgen ___ = "___"?
2Experimenteer met HTML-tabellen Om een tabel of diagram te maken, hebt u verschillende labels nodig. Speel met deze labels of leer meer over HTML-tabellen in meer detail. Begin met het plaatsen van de tafellabels rond de hele tafel: De labels van de rijen rond de inhoud van elke rij:
De kolomkoppen in de eerste rij:
Cellen in de achterste rijen:
Hier is een voorbeeld van hoe alles samen is:
Kolom 1: maand Kolom 2: geld opgeslagen januari $ 100
3Leer de diverse header-tags. Je hebt het etiket al geleerd , die aan het begin van elk document verschijnt. Afgezien van het label , U kunt de volgende soorten labels toevoegen: Meta-tags, die worden gebruikt om metadata te verstrekken (een reeks informatie die informatie over andere informatie beschrijft en geeft) op een webpagina. Deze informatie kan door de zoekmachines worden gebruikt wanneer de robot op internet zoekt om websites te zoeken en te vermelden. Gebruik een of meer labels om uw website zichtbaarder te maken in zoekmachines start (u hoeft dat label niet te sluiten), elk met een attribuutnaam en een attribuutinhoud, bijvoorbeeld: - of labels ze worden gebruikt om andere bestanden aan de pagina te koppelen. Dit wordt voornamelijk gebruikt om naar CSS-bladen te linken, die worden gedaan met een ander type code om de HTML-pagina te wijzigen door kleur toe te voegen, de tekst uit te lijnen en meer. labels 4Speel met de HTML-code die u op de website vindt. Een geweldige manier om uw kennis uit te breiden, is door naar de HTML-bron van verschillende eb-sites te kijken. U kunt dit doen door met de rechtermuisknop op de pagina te klikken en "Bron weergeven", "Toon broncode van de pagina" of iets dergelijks te selecteren, of door het gedeelte "Visualisatie" in het hoofdmenu van uw browser te openen. Probeer uit te vinden wat elke HTML-tag doet die u niet kent of zoek hem online op. Hoewel u de websites van andere mensen niet kunt bewerken, kunt u de HTML-code kopiëren die u in een document vindt en vervolgens met de code spelen om te zien wat de verschillende opties doen. Houd er rekening mee dat u zonder het CSS-blad waaraan de website is gekoppeld, niet alle kleuren en het formaat kunt zien. 5Leer een geavanceerder webontwerp door meer complete handleidingen te lezen. Er zijn verschillende bronnen op internet die u kunt gebruiken om meer te leren over HTML-tags, zoals W3Schools of Codecademy. Je kunt ook boeken vinden met HTML-handleidingen - zorg er alleen voor dat ze worden bijgewerkt, omdat er meestal verschillende wijzigingen zijn. Nog beter, leer CSS om meer controle te hebben over het ontwerp van uw webpagina en uiterlijk. Zodra u CSS leert, is de volgende stap voor webontwerpers om jаvascript te leren. tips
- U kunt een eenvoudige webpagina op internet vinden en met de code spelen. Probeer de tekst te verplaatsen, het lettertype te wijzigen, afbeeldingen aan te passen of andere afbeeldingen die u leuk vindt.
- U kunt een notebook downloaden en alle codes schrijven, dus als u er een moet onthouden, kunt u eenvoudig de notebook openen en ernaar kijken. U kunt dit artikel ook afdrukken om als referentie te gebruiken.
- XML e RSS Ze komen steeds vaker voor op de websites van vandaag. Hun codes kunnen moeilijk te lezen en te begrijpen zijn, vooral als ze in een HTML-bronbestand worden bekeken, maar ze hebben hun eigen effecten.
- HTML-markeringslabels zijn niet hoofdlettergevoelig, maar we raden u aan puur kleine letters te gebruiken (zoals op deze pagina wordt gedaan) voor standaardisatie en XHTML-ondersteuning.
waarschuwingen
- Sommige labels zijn de afgelopen jaren niet gebruikt en zijn vervangen door andere opties met dezelfde effecten of andere die zelfs nieuwe effecten toevoegen, als u dat wilt.
- Als u geïnteresseerd bent in het valideren van uw webpagina, gaat u naar de W3-website en leert u hoe u HTML kunt valideren. HTML-standaarden veranderen in de loop van de tijd en sommige tags worden vervangen door verschillende tags die beter werken in modernere browsers.
Dingen die je nodig hebt
- Een tekstbewerkingsprogramma, bijvoorbeeld Kladblok (in Windows) of Teksteditor (in Mac)
- Eén notebook (optioneel)
- Een programma voor het bewerken van HTML-code zoals Notepad ++ (in Windows) of TextWrangler (in Mac), dit is optioneel.
> Delen op sociale netwerken:
Verwant - Hoe een hyperlink met HTML toe te voegen
- Hoe het handelsmerksymbool in HTML toe te voegen
- Hoe een PDF-bestand naar Word, Excel, PowerPoint, JPG of HTML converteren
- Hoe een Word-document naar HTML te converteren
- Hoe HTML-frames te maken
- Een afbeeldingslink maken in HTML
- Een rekenmachine maken met HTML
- Hoe maak je een vervolgkeuzelijst in HTML zonder Java
- Hoe te detecteren of jаvascript niet is ingeschakeld
- Hoe een HTML-bestand uit te voeren
- Hoe een achtergrondafbeelding in HTML te herstellen
- Hoe maak je een vervangende afbeelding in jаvascript
- Hoe digitale tijd in HTML kan worden weergegeven
- Hoe te programmeren met VBScript
- Hoe tekst in HTML te onderstrepen
- Hoe Notepad ++ te gebruiken
- Hoe het eenvoudige HTML-formaat te gebruiken
- Hoe u jаvascript aan uw website kunt toevoegen met behulp van HTML
- Tekst en afbeeldingen in HTML uitlijnen
- Hoe een tekst in HTML-taal te centreren
- Hoe een eenvoudig CCS-stijlblad te maken met behulp van het kladblok