Hvordan man skriver HTML websider

Følg trin for at oprette denne side.

HTML eller HyperText Markup Language, er dybest set et sæt af tags, der kommunikerer besked på at internetbrowsere om hvordan du får vist på skærmen.Når du forstår, hvad hver enkelt tag er, og hvad det gør, er næsten lige så nemt som at skrive en indkøbsliste skrive en webside.

hvad du har brug

  • Windows Notebook eller tilsvarende almindelig tekst editor

HTML 101

  1. Åbn en ny Notepad fil og gemme den på dit skrivebord som "index.html".Find filen på skrivebordet;dobbeltklikke på den for at åbne den i din browser.For nu skal det fremstå som en tom side.Som du foretage og gemme ændringer i Notesblok-fil, skal du opdatere denne webside for at teste HTML og tjekke sit udseende i din browser.

  2. Opret følgende sæt af tags:
    & lt; html & gt;
    & lt; / html & gt;
    Disse tags fortæller browseren, at alt er indeholdt i disse tags er skrevet i eller (i tilfælde af CSS eller javascript) er kompatibel med HTML.

  3. Opret din webside header.På linjen under den & lt; html & g

    t;tag, skal du indtaste følgende sæt af tags: & lt; head & gt;& lt; / head & gt;

  4. Giv din side en titel.Mellem header tags, indsættes følgende: & lt; title & gt; HTML testside & lt; / title & gt ;.Gem dit arbejde, og opdatere siden i din browser.Den side skal stadig blive vist tom, men titlen skulle nu blive vist i web browserens titellinje.

    Din webside Titlen skal vises øverst i browservinduet .
  5. Opret META tags på en ny linje under titlen:
    & lt; META NAME = "description" content = "Denne side er konstrueret ved hjælp af almindelig HTML" & gt;
    & lt; META NAME = "nøgleord" CONTENT = "HTML, web design, web side design" & gt;

  6. Opret kroppen af ​​din webside.Det er den del, der vises i webbrowsere.
    På en ny linje under & lt; / head & gt;tag, indtast følgende tags: & lt; BODY & gt; & lt; / body & gt;

  7. Opret dit indhold.Mellem & lt; BODY & gt;og & lt; / body & gt;tags, skrive de oplysninger, der vises på din webside.Til denne øvelse, type (eller kopiere og indsætte) følgende:
    HTML Er Easy
    Denne webside er lavet ved hjælp af simple, grundlæggende Hypertext Markup Language.HTML bruges til at vise tekst i forskellige stilarter og farver.Tekst kan fed, understreget, kursiv eller streget ud.HTML kan også bruges til at skabe forbindelser og tilføje billeder til en side.

    Den uformateret tekst dukker op i din browsers standard skrifttypeindstillinger .
  8. Opret side baggrund, tekst og link farve attributter inde i & lt; BODY & gt;tag som følger:
    & lt; BODY bgcolor = "tan" text = "navy" link = "blå" VLINK = "midnat" alink = "aqua" & gt;
    Dette vil give din side en tan baggrund med navy blå tekst.Hyperlink tekst vises lyse blå i første omgang, vil vende aqua når besøgende klikker på det og endelig bliver midnatsblå for dem, der allerede har besøgt dette link.

  9. Find overskriften, "HTML er let."Tilføj følgende koder til at centrere og fremhæve overskriften:
    & lt; center & gt; & lt; H1 & gt; HTML er let & lt; / H1 & gt; & lt; / center & gt;

  10. Brug stykke, eller & lt; P & gt;tag, for at bryde den resterende tekst i to stykker.Placer dette tag foran på stregen, "Dette webside er lavet ved hjælp af simple, grundlæggende Hypertext Markup Language".Placer det igen foran linjen, "HTML kan også bruges til at skabe forbindelser og tilføje billeder til en side."

  11. Anvend de passende formater til ordene "boldfaced", "understregede", "kursiv" og "krydset ud."I HTML, vil sætningen se således ud:
    Tekst kan være & lt; B & gt; fed & lt; / B & gt ;, & lt; U & gt; understreget & lt; / U & gt ;, & lt; I & gt; kursiv & lt; / I & gt;eller & lt; STRIKE & gt; krydset ud & lt; / STRIKE & gt ;.

  12. Find sætningen "oprette links," i sidste linje af teksten.Gøre dette til et link til Google-startsiden ved at indsætte Link tags før og efter sætningen, som følger:
    & lt; a href = "skabe" & gt; http: //www.google.com "& gt; oprette links & lt; /a & gt;

  13. Tilføj en Creative Commons licens foto på en ny linje, og centrere det på følgende måde:
    & lt; P & gt; & lt; center & gt; & lt; IMG src="</center">http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"></center>
    Link billedet tilbage til den oprindelige kilde, skal du angive dens display størrelse, dræbe en uskøn link grænsen og give en ordentlig kredit i et billede titel, der vises, når besøgende musen over billedet
    Inde i. & Lt; IMG & gt; tag, tilsæt størrelseog grænsekontrol attributter:
    & lt; img src = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt; width = "240" height = "160" border = "0" & ​​gt;
    Tilføjde Link tags på hver side af billede-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 = "Billede af I_Shutter på Flickr" & gt; & lt; / a & gt;
    Inde Link tag, tilføje titlen:
    & lt; a href = "http://www.flickr.com/photos/janelinton/122959202/" title = "Billede af I_Shutter på Flickr" & gt;
    Tillykke.Du har lige skrevet din første webside i HTML.

Tips & amp;Advarsler

  • Den header er den sektion, der indeholder instruktioner til internettet om, hvordan man vise og katalogisere din side.Den indeholder titlen generelt vises på internettet browserens titellinje samt meta-tags, der beskriver sidens indhold og give nøgleord, som gør det nemt for søgemaskiner at liste din side.I mere avancerede sider, det er også her CSS og javascript går.Hvis du vil tilpasse noget af indholdet header, skal du blot udskifte den citerede tekst med din egen titel og meta indhold.Du kan linke til en side på nettet.Udskift Google URL med URL'en, komplet med "http: //" præfiks, på den side, du ønsker at linke til stedet.Bemærk, at IMG tag står alene.Der er ingen & lt; / IMG & gt;lukning tag.Selvom vi brugte standard farvenavne i vores krop attributter, kan HTML også læse hexadecimale farvekoder, som giver mere præcis farvematch.HEX koder kan findes i brugerdefinerede farver afsnit af de fleste billedbehandlingsprogrammer;eller du kan finde online farve omformere, såsom Draac.com farve konverter, som kan konvertere både standard engelske navne og RGB-værdier i HEX kode.Denne artikel er blot for at få dig i gang.Heldigvis er der ingen mangel på HTML-tutorials på nettet.Tjek de reference- links for at finde tutorials på avancerede formatering teknikker og for at lære de store kapaciteter af HTML i webdesign.
  • En manglende afsluttende tag, manglende anførselstegn eller endda en simpel tastefejl kan bryde din webside, men bare rolig.Sådanne fejl er så let at finde og løse, som de er til at gøre, takket være validatorer såsom W3C 's Markup Validator.Disse programmer kontrollere, at din kode er korrekt og let kan læses og forstås af alle webbrowsere.

Ressourcer

  • W3C s Markup Validation service
  • HTML Kode Tutorial - Gratis Reference Guide til Hjælp med HTML tags
  • Draac.com s Color Converter
772
0
4
Webdesign