Hoe html te leren

HTML is een vermindering van het Engels Hyper-tekstmarkeringstaal (Hypertext Marking Taal). Deze code of taal waarop de basismarkering van sites is gemaakt. Als je nooit hebt geprogrammeerd, lijkt het leren misschien moeilijk, maar in feite is alles wat je nodig hebt om te leren de eenvoudigste teksteditor en de internetbrowser is. Mogelijk kunt u zelfs enkele voorbeelden leren van HTML-markeringen die u op online forums, aangepaste pagina`s of in WikiHow-artikelen tegenkwamen. HTML - Handige tool voor elke internetgebruiker en het bestuderen van zijn bases zal minder tijd nemen dan u denkt.

Stappen

Deel 1 van 2:
Het bestuderen van de stichtingen van HTML
  1. Titel afbeelding Leer HTML Stap 1
een. Open het HTML-document. De meeste sms-editors (notebook of notitieblok ++ voor Windows, TextTit voor Mac, Gedit voor GNU / Linux) kunnen worden gebruikt om HTML-bestanden te maken. Maak een nieuw document en sla deze op met het bestand → Sla zowel in het webpagina-indeling op of wijzig de bestandsverlenging naar .Html of .Htm in plaats daarvan .Doc, .Rtf of andere expansie.
  • Een waarschuwing kan verschijnen dat het bestand wordt opgeslagen als "eenvoudige tekst" in plaats van het RTF-formaat of dat opmaak en afbeelding niet wordt opgeslagen. Dit is normaal - voor HTML zijn deze opties niet nodig.
  • Titel afbeelding Leer HTML Stap 2
    2. Open het gemaakt bestand in de browser. Sla het lege bestand op, zoek het op uw computer en open de dubbele muisklik. Een lege pagina moet in de browser worden geopend. Als dit gebeurt, sleept u het bestand naar de adresbalk van uw browser. In het proces van het bewerken van een HTML-bestand kunt u deze pagina bijwerken om wijzigingen te bekijken.
  • Merk op dat u op deze manier geen website op internet maakt. Andere mensen hebben geen toegang tot deze pagina en u hebt geen internetverbinding nodig om uw lokale pagina te testen. De browser interpreteert eenvoudigweg de HTML-code, "het lezen", alsof dit een website is.
  • Titel afbeelding Leer HTML Stap 3
    3. Begrijp wat markeertags zijn. In tegenstelling tot gewone tekst worden tags niet op de pagina weergegeven. In plaats daarvan geven ze de browser aan, hoe de pagina en de inhoud ervan weer te geven. "Opening" -tag bevat instructies. Het kan bijvoorbeeld de browser informeren dat de tekst moet worden weergegeven als stoutmoedig. Heb ook een "sluiting" -tag nodig die de browser toont, waar de instructie eindigt. In dit voorbeeld wordt de tekst tussen het openen en sluiten van tags vetgedrukt weergegeven. Tags worden opgenomen in de tekenen van ongelijkheid, maar het sluitlabel begint met een schuin.
  • Het openingslabel wordt geregistreerd tussen ongelijkheidsborden: <opening tag>
  • In de sluitlabel vóór de descriptor (titel), wordt de tag een schuine functie gemaakt: slotlabel>
  • Lees verder om te leren over het gebruik van verschillende tags. Voor deze stap is het voldoende om het opnamelformaat te onthouden. Tags worden geregistreerd tussen ongelijkheidsborden: < > en
  • In sommige tutorials wordt HTML-tags-oproepelementen en wordt de tekst tussen openende en sluitingstags de inhoud van het element genoemd.
  • Titel afbeelding Leer HTML Stap 4
    4. Kies in de editor-tag . Elk HTML-bestand moet beginnen met een tag En eindigen met een tag . Deze tags geven de browser aan dat alle inhoud tussen de tags in HTML is geschreven. Voeg deze tags toe aan uw document:
  • Vaak beginnen HTML-bestanden van de string , wat betekent dat browsers het volledige bestand Ashtml moeten herkennen. Deze regel is echter niet nodig, kan de compatibiliteitsproblemen oplossen.
  • Wijzerplaat Aan de bovenkant van het document.
  • Druk op ENTER op of retourneer verschillende keren om meerdere lege snaren te maken en typt u vervolgens
  • onthoud dat alle De code die u maakt door dit artikel te volgen, moet tussen deze twee tags schrijven.
  • Titel afbeelding Leer HTML Stap 5
    vijf. Maak een sectie in het bestand . Tussen tags en Maak een openingstag en sluitingstag . Voeg een paar lege lijnen toe tussen hen. Inhoud opgenomen tussen tags en , niet weergegeven op de pagina zelf. Volg deze stappen en u zult zien hoe deze tag nodig is:
  • Tussen tags en Schrijven en
  • Tussen tags en Schrijven Hoe HTML te leren - WikiHow.
  • Sla de wijzigingen op en open het bestand in de browser (of werk de pagina bij als het bestand al open is). Zie de tekst die in de titel van de pagina boven de adresstring wordt weergegeven?
  • Titel afbeelding Leer HTML Stap 6
    6. Maak een sectie . Alle andere tags en tekst in dit voorbeeld worden opgenomen in het gedeelte Body, waarvan de inhoud op de pagina wordt weergegeven. Na Sluitende tag maar voordat Tegging-tag-tag en . Tot het einde van dit artikel, werk met het lichaamsdeel. Uw bestand moet er zoiets uitzien:


    Hoe HTML te leren - WikiHow



  • Titel afbeelding Leer HTML Stap 7
    7. Voeg tekst toe met verschillende stijlen. Het is tijd om een ​​huidige inhoudspagina toe te voegen! Alles wat u schrijft tussen lichaamslabels worden op de pagina weergegeven na het bijwerken in de browser. Gebruik niet Symbolen < of >, Omdat de browser de inhoud als tag in plaats van tekst zal interpreteren. Schrijven Hallo! (of wat u maar wilt), probeer deze tags aan de tekst toe te voegen en te zien wat er gebeurt:
  • Hallo! Tekst markeren "Cursief": Hallo!
  • Hallo! Tekst markeren "stoutmoedig": Hallo!
  • Hallo! Stroosttekst: Hallo!
  • Geeft het lettertype weer als een topindex:
  • Hallo! Geeft het lettertype weer in de vorm van de lagere index: Hallo!
  • Probeer verschillende tags samen. Hoe ziet er uit Hallo!?
  • Titel afbeelding Leer HTML Stap 8
    acht. Verdeel tekst op paragrafen. Als u probeert een paar regels tekst in het HTML-bestand te schrijven, meldt u dat Rijenbreaks niet in de browser worden weergegeven. Om de tekst op paragrafen te splitsen, moet u tags toevoegen:
  • Dit is een afzonderlijke alinea.

  • Na die zin moet de gat rij zijn
    Voordat u deze regel start.

    Dit is de eerste tag die geen sluitlabel vereist. Dergelijke tags worden "leeg" genoemd.
  • Creëer krantenkoppen om partitienamen weer te geven:

    Tekstkop

    : De grootste kop

    Tekstkop

    (Header van het tweede niveau)

    Tekstkop

    (Header op de derde niveau)

    Tekstkop

    (vierde kop)
    Tekstkop
    (de kleinste koptekst)
  • Titel afbeelding Leer HTML Stap 9
    negen. Leer lijsten maken. Er zijn verschillende manieren om lijsten op een webpagina te maken. Probeer de volgende opties en beslis wat u het leukst vindt. Merk op dat een paar tags nodig is voor een lijst als geheel (bijvoorbeeld
      en
    Voor een gemarkeerde lijst), en elk lijstelement wordt bijvoorbeeld gemarkeerd door een ander paar tags, bijvoorbeeld
  • en
  • .
    • Gemarkeerde lijst:
    • Eerste lijn
    • Tweede string
    • Enz
  • Genummerde lijst:
  • Een
  • Twee
  • Drie
  • Lijst met definities:
    Koffie
    - warme drank
    Limonade
    - Koude drank
  • Titel afbeelding Leer HTML Stap 10
    10. Maak een pagina met behulp van Rasp rijen, horizontale lijnen en Afbeeldingen. Het is tijd om iets naast tekst naar de pagina toe te voegen. Probeer de volgende tags of volg de koppelingen om meer informatie te krijgen. Gebruik online hosting om een ​​link naar de foto te maken die u wilt plaatsen:
  • Horizontale lijn:
  • Plaats een afbeelding:
  • Titel afbeelding Leer HTML Stap 11
    elf. Voeg links toe. U kunt deze tags gebruiken om hyperlinks naar andere pagina`s en sites te maken, maar aangezien u nog geen website hebt, leert u nu hoe u "Anchor" -knopen kunt maken, dat wil zeggen, links naar specifieke plaatsen op de pagina:
  • Maak ankertag Op de plaats van de pagina waarnaar u wilt verwijzen. Kom op met begrijpelijke en gedenkwaardige naam:

    De tekst waarnaar u verwijst.
  • Gebruik tag , Om een ​​relatieve link of verwijzing naar de externe bron te maken:

    Tekst of afbeelding die als een link dienen.
  • Om te verwijzen naar de relatieve link van een andere pagina, voegt u een teken # na de hoofdlink en de naam van het anker toe. Bijvoorbeeld, HTTPS: // ni.panoutx.info / learn-html # tips verwijst naar het gedeelte van de tips van deze pagina.
  • Deel 2 van 2:
    Geavanceerd HTML-niveau
    1. Titel afbeelding Leer HTML Stap 12
    een. Maak kennis met attributen. Attributen worden opgenomen in de tag, wat aanvullende informatie aangeeft. Attribuutformaat zoals: Naam ="betekenis", waar titel Bepaalt het attribuut (bijvoorbeeld, Kleur Voor het kleurkenmerk) en de waarde geeft zijn waarde aan (bijvoorbeeld, rood voor rood).
    • Attributen werden daadwerkelijk gebruikt in het vorige gedeelte van de stichtingen van HTML. Label Gebruikt attribuut SRC, De ankers van relatieve koppelingen gebruiken het kenmerk Naam, En koppelingen gebruiken attribuut href. Zoals je al hebt opgemerkt, zijn alle kenmerken in het formaat geschreven ___ ="___".
  • Titel afbeelding Leer HTML Stap 13
    2. Experimenteer met HTML-tabellen. Het maken van een tabel omvat het gebruik van verschillende tags. Je kunt experimenteren, of Lees meer gedetailleerde instructies.
  • Maak tabel-tags:
  • De inhoud van elke rij van de tabel komt tags in:
  • De kolomkop wordt bepaald door de tag:
  • Cellen in daaropvolgende lijnen:
  • Een voorbeeld van het gebruik van deze tags:

    Kolom 1: maandKolom 2: besparingen
    Januari5000 roebel
  • Titel afbeelding Leer HTML Stap 14
    3. Leer extra hoofdsectoren Tags. Je hebt de tag al geleerd , Aan het begin van elk HTML-bestand gaan. Naast tag , Er zijn andere tags voor deze sectie:
  • Meta-tags, waarin zijn ingesloten Metadata, gebruikt door zoekmachines voor site-indexatie. Gebruik een of meer ontdekkende tags om uw site gemakkelijker te maken bij zoekmachines (Sluitende tags zijn niet verplicht). Gebruik één attribuut en waarde op de tag: - of
  • Tags , Toont op bestanden van derden, bijvoorbeeld op Style Sheets (CSS), die zijn gemaakt met een ander type codering en kunt u de HTML-pagina wijzigen met behulp van kleur, tekstuitlijning en vele andere functies.
  • Tags
  • Titel afbeelding Leer HTML Stap 15
    4. Experimenteer met HTML-code van andere sites. Een uitstekende manier om HTML te verkennen, bekijkt de broncode van andere webpagina`s. U kunt met de rechtermuisknop op de pagina klikken en selecteren "Weergave broncode weergeven" of iets dergelijks in het bovenste menu van de browser. Probeer te bepalen wat een onbekende tag maakt of op zoek is naar informatie over het internet.
  • Hoewel u de sites van andere mensen niet kunt bewerken, kunt u de broncode kopiëren in uw bestand om later met de tags te experimenteren. Houd er rekening mee dat de CSS-markering mogelijk niet beschikbaar is en de kleur en opmaak mogelijk er anders uitzien.
  • Titel afbeelding Leer HTML Stap 16
    vijf. Bestudeer meer gedetailleerde gidsen. Op internet zijn er veel sites gewijd aan HTML-tags, bijvoorbeeld W3schools of Htmlbook. Er zijn papieren boeken te koop, maar proberen de huidige publicatie te vinden, omdat de normen veranderen en ontwikkelen. Het is nog beter om CSS te beheersen om de markup en het uiterlijk van de site te beheersen. Na het bestuderen van CSS zijn webdescripties meestal jаvascript leren.
  • Tips

    • Notepad ++ - een geweldig gratis programma dat lijkt op een reguliere notebook, maar u kunt uw code online opslaan en testen in de browser. (Het ondersteunt ook bijna elke taal - HTML, CSS, Python, jаvascript enzovoort).
    • Zoek een eenvoudige pagina op het netwerk, sla de code op naar uw computer en experimenteer ermee. Probeer tekst te verplaatsen, verander het lettertype, vervang afbeeldingen - alles!
    • U kunt een notebook starten waar u tags opneemt om ze altijd bij de hand te hebben. U kunt deze pagina ook afdrukken en ermee smaken.
    • Wanneer u code schrijft, doet u het voorzichtig, zodat u en andere mensen het konden begrijpen. Met behulp van een opmerkingen in HTML: ze worden niet weerspiegeld op de pagina, maar zijn zichtbaar in het documentdocument.
    • XML I RSS steeds populairder worden. Paginacode met XML- en RSS-technologieën, onervaren aan de gebruiker moeilijker om te lezen en te begrijpen, maar deze hulpmiddelen zijn erg handig.
    • HTML-markeringstags zijn niet afhankelijk van het register, maar het wordt aanbevolen om alleen kleine letters te gebruiken (zoals in de voorbeelden in dit artikel) - zowel voor standaardisatiedoeleinden als voor compatibiliteit met XHTML.

    Waarschuwingen

    • Sommige tags in de afgelopen jaren zijn uit het dagelijks leven gekomen en zijn vervangen door nieuw, geven dezelfde of enkele extra effecten.
    • Als u uw pagina wilt controleren, gaat u naar de W3-website en ontdek de moderne HTML-vereisten. HTML-normen veranderen in de loop van de tijd en om sommige tags te vervangen die nieuw zijn, die beter werken in moderne browsers.

    Wat je nodig hebt

    • Teksteditor, zoals Kladblok (Windows) of Textryit (MAC)
    • Papier / Kladblok (niet nodig)
    • HTML-editor, zoals notepad ++ (Windows) of tekstwrangler (MAC) (niet nodig)
    Deel in het sociale netwerk:
    Vergelijkbaar