Hoe maak je een HTML-pagina aan

Schrijver: Morris Wright
Datum Van Creatie: 1 April 2021
Updatedatum: 1 Juli- 2024
Anonim
HTML Tutorial for Beginners - 01 - Creating the first web page
Video: HTML Tutorial for Beginners - 01 - Creating the first web page

Inhoud

HTML (Hypertext Markup Language) is de primaire programmeertaal voor het ontwikkelen van webpagina's. Gemaakt als een eenvoudige en handige programmeertaal. De meeste pagina's op internet zijn ontwikkeld in een van de vormen van deze taal (ColdFusion, XML, XSLT). Na het lezen van dit artikel kunt u uw training voortzetten met behulp van andere bronnen op internet. Probeer op internet te zoeken naar andere artikelen die met dit onderwerp te maken hebben.

Stappen

Methode 1 van 1: Een HTML-pagina schrijven

  1. 1 Voordat u vertrouwd raakt met een van de hier gepresenteerde stappen, raadpleegt u het gedeelte 'Wat u nodig heeft'.
  2. 2 Wat u moet weten voordat u dit probleem begint te begrijpen:
  3. 3 De basis. Heb je ooit van de tag gehoord? De tag is omgeven door punthaken, met het woord erin. De eindtag is in dezelfde vorm geschreven, maar met de toevoeging van een schuine streep na het eerste punthaakje. Een attribuut is een optioneel woord in een tag dat wordt gebruikt om details aan een tag toe te voegen.
  4. 4 Het begin van het document. In welke teksteditor u ook gebruikt, plak het volgende in:
    html> hoofd> titel> wikiHow / titel> / hoofd> lichaam> Hallo wereld / lichaam> / html> groot> / groot>
    De tag moet worden afgesloten met dezelfde tag, maar met een schuine streep na het eerste punthaakje. Er zijn uitzonderingen zoals tags META of DOCTYPE.
  5. 5 DOCTYPE
    • Meestal zijn de meeste webpagina's ingesteld DOCTYPE ". Dit helpt bij het bepalen van de codering en hoe deze door webbrowsers zal worden waargenomen. De meeste pagina's werken zonder, "maar dit is nodig als je wilt matchen (ze regelen de soorten coderingen op internet en hoe ze worden gebruikt)... Het DOCTYPE voor HTML 4.01 wordt hieronder weergegeven: DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Dit is er een van de meest voorkomende DOCTYPE gebruikt op pagina's over het hele internet.Ten eerste verwijst het naar het type pagina dat de 'html' beschrijft, vervolgens markeert het het type codering en ten slotte de locatie van het DOCTYPE, dat als resultaat de pagina voor de webbrowser beschrijft.
    • Er zijn verschillende soorten HTML (verschillende versies ontwikkeld door de jaren heen), bijvoorbeeld met nieuwe tags of specifieke tags. Sommige tags zijn verouderd (in plaats daarvan worden andere, nuttigere tags gebruikt).
    • b> en ik> - dit is wat momenteel wordt opgelegd aan tags, omdat ze worden gebruikt om tekst te transformeren, maar geen specificaties, met als resultaat dat andere tags ze komen vervangen. Label sterk> is een vervanging voor b>, en em>, een vervanging voor ik>.
    • Het is belangrijk dat de vorige tags worden vervangen door tags die meer zijn dan opmaak. Als de tekst wordt vertaald, blijft niet alleen de opmaak, maar ook de betekenis hetzelfde. Dit is semantisch correct.
    • In XHTML versie 2.0, de b> en ik> niet gebruikt, net als in HTML-versie 3+.
  6. 6 HTML "Inkapselingsregel".
    • Laten we eens kijken naar de belangrijkste tags die momenteel in gebruik zijn. Bij het maken van de pagina wordt gebruik gemaakt van een eenvoudige structuur. Als een tag werd geopend, het zou gesloten moeten zijn... Dit geldt voor de hele constructie. Hier is een geldig voorbeeld van de XHTML-lay-outstructuur:
    • DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • hoofd>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • titel> Hallo wereld! / titel>
    • / hoofd>
    • lichaam>
    • h1> Hallo wereld! / h1>
    • / lichaam>
    • / html>
    • Voorbeeldcode die een bericht afgeeft Hallo Wereld... Dit heet een test Hallo Wereld.
  7. 7 rubriek
    • De titel van de webpagina is de inhoud tussen de tag hoofd>... Deze inhoud kan niet worden bekeken door de gebruiker (alleen de titel die wordt weergegeven in de titel van de pagina). Informatie tussen tags hoofd>, kan andere tags bevatten, zoals:

      • De META-tag wordt gebruikt voor informatie die nuttig is voor zoekmachines en andere hulpprogramma's.
      • LINK-tag die een koppeling maakt tussen documenten, bijvoorbeeld voor Styles (CSS).
      • SCRIPT-tag, dit omvat bijna elke webcodering, met de mogelijkheid om op afstand toegang te krijgen (vanuit een ander document).
      • De STYLE-tag, in wezen een stijl die op een pagina kan worden toegepast.
      • De TITLE-tag is de titel die verschijnt als de titel van een pagina in uw webbrowser.
    • Laten we een demo van enkele hiervan bekijken in een voorbeeldkop van deze website (deze is ingekort):
      • hoofd>
      • titel> ... / titel>
      • metanaam = "beschrijving" inhoud = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • scripttype = "tekst / javascript" src = "..."> / script>
      • / hoofd>

        Voor het geval je het nog niet gemerkt hebt, de individuele tags zijn gemarkeerd en de feitelijke informatie is verwijderd. Het voorbeeld is vrij kort en toont bijna elke tag die te vinden is in hoofd>behalve HTML-commentaar (we zullen hierover praten in eenvoudige tags).
  8. 8 Overal eenvoudige tags
    • Laten we verder gaan en andere tags bekijken. Wees voorzichtig met uw tagging en onthoud de vuistregel 'Inkapseling'.

      • sterk> Benadrukt belangrijke tekst.
      • small> Maakt tekst kleiner. Lettergrootte wordt gemeten in standaardeenheden van 1 tot 7, 3 is de standaardtekstgrootte. ...
      • pre> Definieert een blok met opgemaakte tekst. Aangezien het correct is, wordt dergelijke tekst getypt in een lettertype van dezelfde grootte en met alle spaties tussen de woorden.
      • em> Toont tekst als een zin.
      • del> Doorstreept tekst.
      • ins> Definieert de tekst die in het document is ingevoegd.
      • h1> Een van de vele koptags. Dit soort tags beginnen met 'h', met een verschil in aantal. Zorg ervoor dat u de tag met hetzelfde nummer sluit.
      • p> Definieert een alinea.
      • --- ... ---> In tegenstelling tot andere tags, moet de opmerking binnen de tag zelf staan. Deze informatie is alleen zichtbaar wanneer de code wordt bekeken.
      • blockquote> Toont een quote, kan gebruikt worden met de cite> tag.
      • De paar voorbeelden hierboven zijn geen volledige lijst van bestaande tags. Ga naar om meer te weten te komen over anderen.
  9. 9 Een duidelijke structuur creëren
    • Pagina's zijn ontworpen om gegevens in eenvoudige sets tags te bewaren, zodat we de informatie in alinea's kunnen ontleden. De computer herkent gegevens; hij weet niets van context of conceptuele samenhang. We moeten computervriendelijke HTML-pagina's maken. Dit wordt bereikt door de div-tag te gebruiken. Het helpt om een ​​groot aantal pagina's te maken. Het kan worden gestyled met CSS en is gemakkelijker dan het maken van grote codetabellen voor de lay-out.
      • div> Deze tag is speciaal omdat hij gestileerd kan worden en afzonderlijke informatieblokken kan gebruiken die zowel de gebruiker als de computer kunnen begrijpen.
    • Laten we eens kijken naar een eenvoudige HTML-layout die een div-tag gebruikt.
      • DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • hoofd>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • titel> Hallo wereld! / titel>
      • / hoofd>
      • lichaam>
      • h1> Hallo wereld! / h1>
      • div id = "contentOne">
      • p> Dit is wat tekst in div # contentOne. / p>
      • div>
      • p> Een alinea in een subsectie van div # contentOne / p>
      • / div>
      • / div>
      • / lichaam>
      • / html>
    • Het gebruik van div>-tags helpt bij het vinden en wijzigen van stijlen tijdens het werken met CSS en Javascript. HTML gebruikt verschillende codering om te werken met CSS-stijlen en Javascript om een ​​betere en responsievere gebruikerservaring te creëren.

Tips

  • Na het lezen van dit artikel, stop niet en denk dat je alles hebt geleerd wat je moet weten. Er is altijd iets te leren, vooral in deze technologie.
  • Leer, begrijp en schrijf code.
  • Merk op dat sommige tags alleen > gebruiken. Para en br zijn enkele voorbeelden. Andere tags geopend met> moeten verder worden gesloten. Bijvoorbeeld "div> / div>".
  • Mensen verwachten nieuwe ontdekkingen, dus opnieuw uitvinden, ontwerpen of coderen.
  • Als je eenmaal veel hebt geleerd, probeer dan eens serverprogrammering te leren.
  • Leer werken met zowel CSS als Javascript.

Waarschuwingen

  • Onthoud dat HTML draait om het bewerken van inhoud. Dit betekent dat HTML alleen wordt gebruikt om inhoud in een erkend formaat op te slaan. Andere wijzigingen moeten worden gedaan met behulp van andere technologieën, zoals CSS. Het betekent ook “Semantisch correct” doenook al geven anderen dat niet toe. Andere programmeertalen helpen bij het bouwen van webpagina's (CSS, Javascript en XML). HTML is een contentconstructor.

Wat heb je nodig

  • Een teksteditor die ANSI-codering ondersteunt
  • Een webbrowser zoals Internet Explorer of Mozilla Firefox
  • (Optioneel) wysiwyg of wykiwyg HTML-editor zoals Adobe Dreamweaver, Aptana Studio of Microsoft Expression Web