Hoe schrijf HTML- webpagina's

Volg de stappen om deze pagina te sturen .

HTML, of HyperText Markup Language, is in feite een verzameling van tags die instructies mee aan internetbrowsers over hoe informatie op het scherm weer te geven.Zodra u begrijpt wat elke tag is en wat het doet, het schrijven van een webpagina is bijna net zo makkelijk als het schrijven van een boodschappenlijstje.

wat je

  • Windows notebook of equivalente platte tekst editor

HTML 101

    Need
  1. Open een nieuw Kladblok-bestand en sla het op uw bureaublad als "index.html."Vind het bestand op uw bureaublad;dubbelklik erop om het te openen in uw webbrowser.Voor nu, moet het worden weergegeven als een lege pagina.Als je te maken en wijzigingen in het Kladblok-bestand op te slaan, te vernieuwen deze webpagina aan de HTML-testen en controleren van zijn verschijning in uw browser.

  2. Maak de volgende set van tags:
    & lt; HTML & gt;
    & lt; / HTML & gt;
    Deze tags vertellen de browser dat alles bevat binnen deze tags is geschreven in of (in het geval van CSS of javasc

    ript) is compatibel met HTML.

  3. Maak je webpagina kop.Op de lijn onder de & lt; HTML & gt;tag, voert u de volgende set van tags: & lt; head & gt;& lt; / head & gt;

  4. Geef je pagina een titel.Tussen de header tags, plaatst u de volgende: & lt; title & gt; HTML testpagina & lt; / & gt ;. TITELSla uw werk op en vernieuw de pagina in uw browser.De pagina moet nog verschijnen leeg, maar de titel moet nu worden weergegeven in de webbrowser van de titelbalk.

    Uw webpagina titel moet verschijnen aan de bovenkant van het browservenster .
  5. Maak META-tags op een nieuwe regel onder de titel:
    & lt; META NAME = "description" content = "Deze pagina is ontworpen met behulp van eenvoudige HTML" & gt;
    & lt; META NAME = "keywords" content = "HTML, web design, web page design" & gt;

  6. Maak het lichaam van uw webpagina.Dit is het deel dat zal verschijnen in webbrowsers.
    op een nieuwe regel onder de & lt; / head & gt;tag Voer de volgende tags: & lt; body & gt; & lt; / body & gt;

  7. Maak je eigen content.Tussen de & lt; body & gt;en & lt; / body & gt;labels, schrijf de informatie die zal verschijnen op uw webpagina.Voor deze oefening, type (of kopieer en plak) de volgende:
    HTML Is Easy
    Deze webpagina is gemaakt met behulp van eenvoudige, basic HyperText Markup Language.HTML wordt gebruikt om tekst in verschillende stijlen en kleuren.De tekst kan worden vet, onderstreept, cursief of doorgestreept.HTML kan ook worden gebruikt om verbindingen te maken en afbeeldingen aan een pagina.

    De opgemaakte tekst verschijnt in standaard lettertype -instellingen van uw browser.
  8. Maak pagina-achtergrond, de tekst en schakel de kleur attributen in de & lt; body & gt;tag als volgt:
    & lt; BODY bgcolor = "tan" text = "navy" link = "blue" vlink = "midnight" alink = "aqua" & gt;
    Dit zal uw pagina een tan achtergrond met marineblauwe teksten geven.Hyperlinks tekst wordt helder blauw op het eerste, zal blijken aqua wanneer bezoekers klikken en uiteindelijk geworden midnight blue voor degenen die al die verwijzen hebt bezocht.

  9. Vind de kop, "HTML is eenvoudig."Voeg de volgende tags om te centreren en de nadruk leggen op de kop:
    & lt; center & gt; & lt; H1 & gt; HTML Is Easy & lt; / H1 & gt; & lt; / center & gt;

  10. Gebruik de paragraaf, of & lt; p & gt;tag, om de rest van de tekst in te breken in twee alinea's.Plaats deze tag in de voorkant van de lijn, "Deze webpagina is gemaakt met behulp van eenvoudige, basic HyperText Markup Language."Plaats deze weer voor de lijn, "HTML kan ook worden gebruikt om verbindingen te maken en afbeeldingen aan een pagina."

  11. Breng de formaten om de woorden "vetgedrukt", "onderstreept", "cursief" en "doorgehaald."In HTML, zal de straf er als volgt uit:
    Tekst kan & lt; B & gt; vet & lt; / B & gt ;, & lt; U & gt; onderstreept & lt; / U & gt ;, & lt; I & gt; cursief & lt; / I & gt;of & lt; STRIKE & gt; doorgestreept & lt; / & gt ;. STRIKE

  12. Zoek de zinsnede "koppelingen," in de laatste regel van de tekst.Zet deze in een hyperlink naar de startpagina van Google door het invoegen van Link-tags voor en na de zin, als volgt:
    & lt; a href = "creëren" & gt; http: //www.google.com "& gt; koppelingen & lt; /a & gt;

  13. Voeg een Creative Commons-licentie foto op een nieuwe lijn en centreren het als volgt:
    & lt; p & gt; & lt; center & gt; & lt; IMG src="</center">http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"></center>
    Link de foto naar de originele bron, geeft het display grootte, dood een lelijke koppeling grens en een goede krediet te geven in een afbeelding titel die zal verschijnen wanneer bezoekers muis over de afbeelding
    Binnen het & lt;. IMG & gt; tag, voeg de grootteen de grens attributen:
    & lt; img src = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt; width = "240" height = "160" border = "0" & ​​gt;
    toevoegende Link-tags aan weerszijden van het beeld tag:
    & lt; a href = "& amp; lt; IMG" & gt; http: //www.flickr.com/photos/janelinton/122959202/ "& gt; & amp; lt; IMGsrc = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt;width = "240" height = "160" border = "0" alt = "Afbeelding door I_Shutter op Flickr" & gt; & lt; / a & gt;
    Binnen de Link-tag, voeg de titel:
    & lt; a href = "http://www.flickr.com/photos/janelinton/122959202/" title = "Afbeelding door I_Shutter op Flickr" & gt;
    Gefeliciteerd.Je hebt net geschreven uw eerste webpagina in HTML.

Tips & amp;Waarschuwingen

  • De header is het gedeelte dat instructies geeft op het web over hoe om te laten zien en de catalogus van uw pagina.Het bevat de titel van het algemeen op het web browser titelbalk, alsook meta-tags die de inhoud van de pagina's te beschrijven en zorgen voor sleutelwoorden, die maken het gemakkelijk voor zoekmachines om uw pagina.In meer geavanceerde pagina's, dit is ook de plaats waar de CSS en Javascript gaat.Een van de header de inhoud aanpassen, eenvoudig de plaats van de geciteerde tekst met uw eigen titel en meta content.U kunt een link naar een pagina op het web.Vervang de Google-URL met de URL, compleet met "http: //" prefix, de pagina die u wilt in plaats daarvan te koppelen aan.Merk op dat de IMG tag staat alleen.Er is geen & lt; / IMG & gt;afsluitende tag.Hoewel we gebruikte standaard kleur namen in ons lichaam attributen, kan HTML ook lezen hexadecimale kleurcodes, die nauwkeuriger kleuraanpassing maakt.HEX-codes zijn te vinden in de sectie Aangepaste kleuren van de meeste imaging programma's;of u kunt online kleur converters, zoals Draac.com's kleur converter, die zowel standaard Engels namen en RGB-waarden kan omzetten in HEX-code te vinden.Dit artikel is alleen maar om mee te beginnen.Gelukkig is er geen tekort aan HTML tutorials op het web.Check out de verwijzing links naar tutorials over geavanceerde opmaak technieken te vinden en om de enorme mogelijkheden van HTML in web design leren.
  • Een ontbrekende afsluitende tag, ontbrekende aanhalingstekens of zelfs een eenvoudige typefout kan je webpage breken, maar maak je geen zorgen.Dergelijke fouten zijn zo gemakkelijk te vinden en op te lossen als ze zijn om te maken, dankzij validators zoals de W3C Markup Validator.Deze programma's controleren of uw code correct is en gemakkelijk kan worden gelezen en begrepen door alle webbrowsers.

Resources

  • W3C Markup Validation Service
  • HTML Code Tutorial - Gratis Handleiding voor hulp bij HTML-codes
  • Draac.com's Color Converter
751
0
4
Web Design