emkiset.ru

Hoe een pagina in HTML te schrijven

De HTML-taal (HyperText Markup Language) is een basistaal voor het ontwikkelen van webpagina`s. Het is gemaakt met de bedoeling om een ​​eenvoudige en flexibele taal te coderen. Bijna alle internetpagina`s zijn gemaakt met enige variatie van deze code (ColdFusion, XML, XSLT). HTML is gemakkelijk te begrijpen, maar het kan lang duren als u geïnteresseerd bent in het leren van de volledige functies. Om meer kleur en enthousiasme aan uw webpagina`s toe te voegen, kunt u de essentie van CSS leren zodra u zich op uw gemak voelt met een eenvoudige HTML-pagina.

stappen

Deel 1
Configureer het document

Titel afbeelding Write a HTML Page Step 1
1
Open een eenvoudige teksteditor. Notepad is een goede optie die u gratis kunt downloaden. Je kunt met bijna elk tekstverwerkingsprogramma HTML schrijven, maar de meer complexe programma`s met automatische indeling bemoeilijken het ordenen van je HTML-pagina.
  • Het is niet aan te raden om TextEdit te gebruiken, omdat het vaak het bestand opslaat in een formaat dat uw browser mogelijk niet als HTML herkent.
  • U kunt ook online een HTML-editor gebruiken. HTML-bewerkingsprogramma`s worden niet aanbevolen voor beginners.
  • Titel afbeelding Write a HTML Page Step 2
    2
    Sla een bestand op als een webpagina. Selecteer Bestand → Opslaan als. Wijzig het bestandsformaat met "website", ".html" of "htm". Bewaar het op een locatie waar u het gemakkelijk kunt vinden.
  • Er is geen verschil tussen deze drie opties.
  • Titel afbeelding Write a HTML Page Step 3
    3
    Open het bestand in een webbrowser. Dubbelklik op het bestand en het zou automatisch moeten worden geopend als een lege webpagina in uw browser. Als alternatief kunt u een browser openen, bijvoorbeeld Firefox of Internet Explorer en gebruiken "archief" → "Open bestand" om het document te selecteren.
  • Deze website zal niet online zijn. Het is alleen op uw computer te zien.
  • Titel afbeelding Write a HTML Page Step 4
    4
    Vernieuw de website om de opgeslagen wijzigingen te bekijken. Schrijf dit in uw lege document: Hallo Sla het document op Ververs de lege pagina en je zou hem moeten zien verschijnen "Hallo" bovenaan de pagina, vetgedrukt. Elke keer dat u uw nieuwe HTML wilt uitproberen tijdens deze zelfstudie, slaat u het .html-document op en werkt u vervolgens het browservenster bij om te zien hoe uw HTML wordt geïnterpreteerd.
  • Als de woorden "" en "" verschijnen in uw browser, wordt uw bestand niet correct geïnterpreteerd als HTML. Probeer een ander tekstbewerkingsprogramma of een andere browser.
  • Titel afbeelding Write a HTML Page Step 5
    5
    Begrijp wat labels zijn HTML-instructies zijn doorgeschreven "labels" (tags, in het Engels), die de browser vertellen hoe de webpagina moet worden geïnterpreteerd en weergegeven. Ze worden altijd tussen punthaken geschreven en ze worden niet weergegeven op de webpagina. U hebt ze al in het vorige voorbeeld gebruikt:
  • Het is een "openingstag" of "start tag". Alles dat na dat label wordt geschreven, wordt gedefinieerd als "vetgedrukte tekst" (meestal op de website wordt vetgedrukt weergegeven).
  • Het is een "afsluitende tag" of "einde tag". Geeft het punt weer waar de tekst vetgedrukt eindigt. De meeste labels (niet alle) hebben een sluittag nodig om te werken, dus vergeet niet om deze toe te voegen.
  • Titel afbeelding Write a HTML Page Step 6
    6
    Configureer uw document Verwijder alle inhoud van uw HTML-document. Begin opnieuw met de volgende tekst die exact is geschreven zoals hij is (zonder opsommingstekens). Deze HTML-code vertelt de browser welk type HTML u gaat gebruiken en dat al uw HTML zich tussen de tags bevindt en .
  • Titel afbeelding Write a HTML Page Step 7
    7
    Voeg header- en body-tags toe. HTML-documenten zijn verdeeld in twee secties. Het gedeelte van de "hoofd" (hoofd, in het Engels) is voor speciale informatie, zoals de titel van de pagina. Het gedeelte van de "lichaam" (body, in het Engels) bevat de hoofdinhoud van de pagina. Voeg beide toe aan uw document en vergeet niet om ook de afsluitende tags op te nemen. De nieuwe tekst die moet worden toegevoegd, is vetgedrukt:
  • Titel afbeelding Write a HTML Page Step 8
    8
    Geef een titel aan de pagina. Omdat het een beginneling is, is het niet belangrijk om de meeste labels te leren die in het gedeelte van de koptekst voorkomen. De title-tag is echter gemakkelijk te gebruiken en bepaalt wat als de naam van het browservenster of tabblad wordt weergegeven. Plaats de openende en sluitende tags van de titel in de headerlabels en schrijf de gewenste titel tussen hen in:
  • Mijn eerste HTML-pagina

  • Deel 2
    Formatteer de tekst

    Titel afbeelding Write a HTML Page Step 9


    1
    Voeg wat tekst toe aan het hoofdgedeelte. In dit gedeelte werk je alleen in de body-tags. De rest van de tekst blijft in het document, maar in deze handleiding voorkomt u dat u ze herhaalt om ruimte te besparen. Schrijf wat je wilt tussen de tags en en het zal verschijnen als de eerste inhoud op uw webpagina. Bijvoorbeeld:
    • Ik volg de wikiHow-handleiding om een ​​HTML-pagina te schrijven
  • Titel afbeelding Write a HTML Page Step 10
    2
    Voeg de headers toe aan de tekst. Organiseer uw pagina met header-tags, die de browser zullen vertellen de tekst die tussen hen verschijnt in een groter formaat weer te geven. Deze worden ook gebruikt door Zoekmachine-bots en andere hulpmiddelen om te bepalen waar uw pagina over gaat en hoe deze is georganiseerd. is de grootste koptekst en u kunt kleinere koppen maken tot. Probeer ze op uw pagina:

  • Welkom op mijn website

  • Ik volg de wikiHow-handleiding om een ​​HTML-pagina te schrijven

  • Mijn doelen vandaag:

  • Doelstellingen voltooid:
  • Leer hoe u kopteksten gebruikt
  • Doelstellingen niet vervuld:
  • Meer informatie over tekstindelingstags
  • Titel afbeelding Write a HTML Page Step 11
    3
    Meer informatie over labels om de tekst op te maken. Je kent het label al "sterk", maar er zijn veel andere manieren om een ​​tekst op te maken. Speel met ze of gebruik verschillende tags rond dezelfde tekststring. Vergeet niet om altijd de afsluitende tag later toe te voegen!
  • Belangrijke tekst Het wordt vetgedrukt weergegeven in de browsers.
  • Benadrukte tekst Het wordt cursief weergegeven in browsers.
  • Tekst een beetje kleiner dan normaal. Het wordt automatisch geschaald als het in een kop wordt gebruikt.
  • Tekst die niet meer van toepassing is. Het wordt doorstreept met een lijn.
  • Titel afbeelding Write a HTML Page Step 12
    4
    Sorteer de tekst op de pagina. U hebt misschien gemerkt dat u op de toets drukt ⌅ Ga naar binnen Het is niet voldoende dat uw tekst op een andere regel wordt weergegeven. Met deze tags kunt u alinea`s maken en regeleinden invoegen of uw tekst op een andere manier ordenen:

  • Het betekent "paragraaf" en het zal je helpen om alle tekst die zich tussen deze labels bevindt in een enkele alinea te houden, deze te scheiden van de tekst die erboven of eronder is.

  • Hiermee wordt een regeleinde gemaakt. Voeg in dit geval geen sluitingscode toe, aangezien deze geen andere inhoud zal wijzigen. Gebruik het voor gedichten of adresregels, niet om alinea`s te scheiden.
  • Als u tekst zeer nauwkeurig wilt weergeven, stelt deze tag de tekst binnen deze labels in als een lettertype met vaste breedte (elke letter heeft dezelfde breedte) en kunt u spaties en regeleinden maken zoals u normaal zou doen in plaats van te schrijven via labels.
  • Dit definieert de tekst als geciteerde tekst via een bron.
    Vervolgens kunt u de bron beschrijven met behulp van de afspraak tag..
  • Titel afbeelding Write a HTML Page Step 13
    5
    Voeg onzichtbare tekstcommentaar toe Reactietags zijn niet zichtbaar op de webpagina. Hiermee kunt u zelf aantekeningen maken in het HTML-document zonder de inhoud te verstoren. Voeg geen afsluitende tag toe.
  • Labels die alleen voldoende zijn en geen sluitingslabels gebruiken, zijn bekend "lege labels".



  • Titel afbeelding Write a HTML Page Step 14
    6
    Plaats alles samen. De beste manier om deze labels te onthouden is om ze op uw eigen website te gebruiken. Hier is een voorbeeld van het gebruik van labels voor elk van de stappen die u tot nu toe hebt geleerd. Probeer te voorspellen hoe het eruit zal zien in een browser in plaats van alles in je document te kopiëren en plakken om erachter te komen.
  • Mijn eerste HTML-pagina

  • Welkom op mijn website

  • Ik hoop dat je geniet van de site!

    Ik heb het speciaal voor jou gemaakt.

  • Deel 1: Hoe ik HTML heb ontdekt

  • Ik heb HTML voor geleerd een uur, dus ik ben een expert.

    • Deel 3
    Voeg links en afbeeldingen toe

    Titel afbeelding Write a HTML Page Step 15
    1
    Leer wat de kenmerken zijn Op de labels kan extra informatie worden geschreven. Deze informatie staat bekend als "attributen". Attributen verschijnen als extra woorden binnen dezelfde tag, in de vorm: attribute-name ="specifieke waarde". Bijna elke HTML-tag kan bijvoorbeeld het attribuut hebben "titel" (Titel):

    • Hier gaat de inleidende paragraaf

      Dit kenmerk voegt een titel toe aan de alinea, "introductie", die wordt weergegeven wanneer u de muisaanwijzer over de alinea op de webpagina beweegt.
  • Titel afbeelding Write a HTML Page Step 16
    2
    Maak een link naar een andere webpagina. Gebruik de tags om een ​​hyperlink naar een andere webpagina te maken. Voeg de URL van de bestemmingswebpagina in met behulp van het href-kenmerk. Hier is een voorbeeld dat uw document koppelt aan de pagina die u nu aan het lezen bent.
  • Bezoekers van uw website kunnen op deze tekst klikken om de link te volgen.
  • Titel afbeelding Write a HTML Page Step 17
    3
    Voeg een ID-kenmerk toe aan uw tags. Een ander kenmerk dat u in bijna elke HTML-tag kunt opnemen, is het element "id". Schrijf binnen elk label id ="voorbeeld" of gebruik een naam die geen spaties bevat. Dit heeft geen zichtbaar effect, maar u zult het in de volgende stap gebruiken.
  • Voeg dit bijvoorbeeld toe aan uw document:

    Deze paragraaf wordt gebruikt als voorbeeld om te laten zien hoe het id-attribuut werkt.

  • Titel afbeelding Write a HTML Page Step 18
    4
    Maak een link naar een specifieke id. U kunt nu de hyperlinktags gebruiken om een ​​koppeling naar een ander punt op dezelfde pagina te maken. In plaats van een URL moet u het # -symbool gebruiken, gevolgd door de ID-waarde waarnaar u de koppeling gaat maken. Bijvoorbeeld Deze tekst maakt een link naar de alinea met de id "voorbeeld".
  • Geen HTML-waarde is hoofdlettergevoelig. "#Voorbeeld" en "ik #Voorbeeld" Ze brengen je naar dezelfde plaats.
  • Als uw pagina klein genoeg is om alle inhoud op hetzelfde scherm weer te geven, merkt u mogelijk geen wijzigingen op wanneer u met behulp van de browser op de koppeling klikt. Wijzig het formaat van het venster totdat een schuifbalk verschijnt en probeer het opnieuw.
  • Titel afbeelding Write a HTML Page Step 19
    5
    Voeg een afbeelding toe Het label het is een lege tag, wat betekent dat het niet nodig is om een ​​afsluitende tag op te nemen. Alle informatie die de browser nodig heeft om de afbeelding weer te geven, wordt toegevoegd via attributen. Hier is een voorbeeld dat het wikiHow-logo zal laten zien, gevolgd door een beschrijving van elk attribuut:
  • wikiHow-logo
  • Het kenmerk src =" " (bron) vertelt de browser waar de afbeelding te vinden is (onthoud dat het gewoonlijk beledigend is om de afbeelding van de site van een andere persoon te publiceren en dat de afbeelding zal verdwijnen als de site waarvan deze afkomstig is, wordt losgekoppeld).
  • Het kenmerk stijl =" " (Style) Je kunt veel dingen doen, maar het belangrijkste is om de breedte en hoogte van een afbeelding in pixels aan te passen (je kunt ook de attributen width =" " (breedte) en hoogte =" " (hoogte) afzonderlijk, maar je zou wat rare grootteproblemen kunnen hebben als je CSS gaat gebruiken).)
  • Het kenmerk alt =" " is een korte beschrijving van de afbeelding die de gebruiker te zien krijgt als de afbeelding niet kan worden geladen. Dit wordt als een vereiste beschouwd omdat ze worden gebruikt door schermlezers voor blinde bezoekers.

    • Deel 4
    Leer meer en plaats uw pagina online

    Titel afbeelding Write a HTML Page Step 20
    1
    Valideer uw HTML HTML-validatie controleert op fouten in de code. Als uw webpagina niet correct wordt weergegeven, kan validatie u helpen de fout te vinden die het probleem kan veroorzaken. Het kan je ook meer over HTML leren door code te identificeren die goed lijkt op het scherm, maar het wordt niet aanbevolen vanwege updates van de HTML-standaarden. Het gebruik van ongeldige HTML betekent niet dat uw site niet kan worden gebruikt, maar kan problemen veroorzaken of een inconsistente weergave in verschillende browsers hebben.
    • Probeer de gratis online validatieservice van W3C of zoek naar een andere HTML 5 online validator.
  • Titel afbeelding Write a HTML Page Step 21
    2
    Meer informatie over labels en kenmerken. Er zijn veel andere HTML-tags en -attributen en veel plaatsen waar u ze kunt leren:
  • Probeer het met w3schools en HTML-hond als je meer tutorials en meer complete lijsten met labels nodig hebt.
  • Zoek naar een webpagina waar je het uiterlijk leuk vindt en gebruik de functie "Zie paginabron" om je HTML zelf te zien. Kopieer en plak het in je eigen document en speel ermee om te zien hoe het werkt.
  • Lees andere artikelen om te leren hoe HTML-tabellen te maken gebruik van meta-tags om uw zichtbaarheid in zoekmachines te vergroten of div en span te gebruiken om u te helpen met de CSS-stijl.
  • Titel afbeelding Write a HTML Page Step 22
    3
    Zet uw webpagina online. Kies een webhostingservice of webhosting en u kunt zoveel HTML-pagina`s uploaden als u wilt naar uw persoonlijke webdomein. Om dit te doen, moet u een FTP-overdrachtsprogramma, maar veel van de hostingdiensten bieden deze service ook aan.
  • Wanneer u koppelingen naar andere pagina`s of afbeeldingen van uw eigen website gaat maken, is het niet nodig om volledige adressen te gebruiken. Als uw domeinnaam bijvoorbeeld elmejorcodificadordehtml.com is, dan is het adres de tekst binnen deze tags zal een link leggen naar het adres "superskilledhtmlcoder.com/journal/monday.html".
  • Titel afbeelding Write a HTML Page Step 23
    4
    Stijl toevoegen met CSS Als uw HTML-pagina te elementair lijkt, probeer dan een paar basis-CSS-functies te leren om meer kleur, verschillende bronnen en meer controle over de locatie van de elementen toe te voegen. Link een CSS stijlblad (CSS-stylesheet) met uw HTML-pagina`s kunt u snel belangrijke wijzigingen aanbrengen door de stijl van alle tekst binnen een bepaalde tag aan te passen. Hier kunt u zien hoe u met basis stylesheets kunt spelen of je kunt dieper ingaan op meer gedetailleerde tutorials met behulp van de HTML Dog CSS Guide.
  • Titel afbeelding Write a HTML Page Step 24
    5
    Voeg jаvascript-code toe aan uw pagina. jаvascript is een programmeertaal die wordt gebruikt om meer functies aan HTML-pagina`s toe te voegen. jаvascript-commando`s worden ingevoegd tussen de openings- en sluitingstags en kunnen worden gebruikt om interactieve knoppen toe te voegen, wiskundige problemen te berekenen en nog veel meer. Meer informatie over het gebruik van de voorbeelden van w3c.

    • tips

    • Het type document (in het Engels doctype), gebruikt in deze zelfstudie "losse HTML 4.0.1 overgang", een gemakkelijk te gebruiken formaat voor beginners. Gebruik () zodat de browser de code interpreteert met een strikte HTML 5-indeling, wat de meest aanbevolen standaard is (ondanks dat deze een van de minst gebruikte is).

    waarschuwingen

    • HTML heeft tot doel de inhoud van de pagina in een universeel formaat te houden. Het is niet bedoeld om de presentatie van uw webpagina te regelen, zoals de achtergrondkleur en de precieze locatie van de elementen. Hoewel er labels zijn waarmee u deze dingen kunt beheren, wordt het sterk aanbevolen om CSS te gebruiken om een ​​beter beheersbare en consistente webpagina te maken.

    Dingen die je nodig hebt

    • Een eenvoudige teksteditor, zoals Kladblok of Teksteditor
    • Een webbrowser, zoals Internet Explorer of Mozilla Firefox
    • Een HTML-editor zoals Adobe Dreamweaver, Aptana Studio of Microsoft Expression Web (optioneel)
    Delen op sociale netwerken:

    Verwant
    Hoe het handelsmerksymbool in HTML toe te voegenHoe het handelsmerksymbool in HTML toe te voegen
    Hoe HTML-frames te makenHoe HTML-frames te maken
    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
    Een eenvoudige webpagina maken met KladblokEen eenvoudige webpagina maken met Kladblok
    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 een HTML-linkknop makenHoe een HTML-linkknop maken
    Hoe een webpagina in HTML te makenHoe een webpagina in HTML te maken
    » » Hoe een pagina in HTML te schrijven
    © 2021 emkiset.ru