emkiset.ru

Hoe HTML te leren

HTML is de afkorting van Hyper Text Markup Language

(Hypertext Markup Language) en is de code of taal die wordt gebruikt om websites te maken. Het ziet er misschien een beetje intimiderend uit als je nog nooit eerder een code hebt gemaakt, maar je hebt alleen maar een teksttoepassing en een internetbrowser nodig. U kunt zelfs enkele van deze HTML-codes herkennen die worden gebruikt om de tekst in online forums, in aangepaste profielen of in wikiHow-artikelen te wijzigen. HTML is een zeer nuttige tool voor iedereen die internet gebruikt en het leren van de basisprincipes kan veel minder duren dan je denkt.

stappen

Deel 1
Leer eenvoudige HTML

Titel afbeelding Learn HTML Step 1
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.
  • Titel afbeelding Learn HTML Step 2
    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.
  • Houd er rekening mee dat dit niet echt een online website maakt. Dit is niet toegankelijk voor andere mensen en u hebt geen internetverbinding nodig om het te testen. Dit gebruikt alleen de browser om het HTML-document te "lezen" alsof het een webpagina is.
  • Titel afbeelding Learn HTML Step 3
    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.
  • Schrijf de starttag in driehoekige haakjes: <de start-tag komt hier>
  • Schrijf het eindlabel in driehoekige haakjes, maar schrijf een diagonaal na het eerste driehoekige haakje: de eindtag gaat hier>)
  • Blijf lezen om te zien hoe u functionele labels schrijft. Voor deze stap hoef je alleen het basisformaat te onthouden: < > en
  • Als u ook een andere HTML-handleiding gebruikt, kunnen ze de labels verwijzen als `elementen` en de tekst tussen de `element-inhoud` van de labels.
  • Titel afbeelding Learn HTML Step 4
    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:
  • schrijven aan het begin van uw document.
  • Druk meerdere keren op Enter of Return om een ​​spatie te laten en vervolgens te schrijven
  • Vergeet niet om al het andere in deze handleiding tussen deze twee labels te schrijven.
  • Titel afbeelding Learn HTML Step 5
    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:
  • Tussen labels en , schrijven en
  • Tussen labels en , schrijven Hoe HTML te leren - wikiHow.
  • Sla het document op en open het in een browser (of sla het document op en werk de browserpagina bij als je hem al open had). Wat u zojuist hebt getypt, moet bovenaan de browser worden weergegeven, boven de adresbalk.
  • Titel afbeelding Learn HTML Step 6
    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):
  • Hoe HTML te leren - wikiHow


  • Titel afbeelding Learn HTML Step 7
    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 verschijnen als superscript:
  • Hallo wereld! het zal als een subscript verschijnen: Hallo wereld!
  • Probeer deze combinaties: hoe ziet het eruit Hallo wereld!?
  • Titel afbeelding Learn HTML Step 8
    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.
  • Maak kopteksten om de namen van de secties te tonen:

    koptekst

    : de grootste header

    koptekst

    (de header van het tweede niveau)

    koptekst

    (de kop van het derde niveau)

    koptekst

    (de kop van het vierde niveau)
    koptekst
    (de kleinste koptekst)
  • Titel afbeelding Learn HTML Step 9
    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
    voor de lijst zonder volgorde), terwijl de afzonderlijke elementen worden omringd door een ander paar labels, zoals
  • en
  • .
    • Gebruik deze code om lijsten met opsommingstekens te maken:
    • Een element
    • Een ander element
    • Een ander element
  • Of deze code om genummerde lijsten te maken:
  • Element 1
  • Element 2
  • Element 3
  • Of deze code om een ​​lijst met gedefinieerde termen te maken:
    café
    - Warme dranken
    latte
    - Koude dranken



  • Titel afbeelding Learn HTML Step 10
    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:
  • Voeg een regel toe in HTML:
    of
  • Voeg afbeeldingen toe:
    Titel afbeelding Learn HTML Step 11
    11
    Link 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:

    Deel 2
    Leer meer geavanceerde HTML

    Titel afbeelding Learn HTML Step 12
    1
    Meer 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 ___ = "___"?
  • Titel afbeelding Learn HTML Step 13
    2
    Experimenteer 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: maandKolom 2: geld opgeslagen
    januari$ 100
  • Titel afbeelding Learn HTML Step 14
    3
    Leer 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
  • Titel afbeelding Learn HTML Step 15
    4
    Speel 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.
  • Titel afbeelding Learn HTML Step 16
    5
    Leer 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 het handelsmerksymbool in HTML toe te voegenHoe het handelsmerksymbool in HTML toe te voegen
    Hoe een PDF-bestand naar Word, Excel, PowerPoint, JPG of HTML converterenHoe een PDF-bestand naar Word, Excel, PowerPoint, JPG of HTML converteren
    Hoe een Word-document naar HTML te converterenHoe een Word-document naar HTML te converteren
    Hoe HTML-frames te makenHoe HTML-frames te maken
    Een afbeeldingslink maken in HTMLEen afbeeldingslink maken in HTML
    Een rekenmachine maken met HTMLEen rekenmachine maken met HTML
    Hoe maak je een vervolgkeuzelijst in HTML zonder JavaHoe maak je een vervolgkeuzelijst in HTML zonder Java
    Hoe te detecteren of jаvascript niet is ingeschakeldHoe te detecteren of jаvascript niet is ingeschakeld
    Hoe een HTML-bestand uit te voerenHoe een HTML-bestand uit te voeren
    Hoe een achtergrondafbeelding in HTML te herstellenHoe een achtergrondafbeelding in HTML te herstellen
    » » Hoe HTML te leren
    © 2021 emkiset.ru