Hur man skapar en HTML -sida

Författare: Florence Bailey
Skapelsedatum: 20 Mars 2021
Uppdatera Datum: 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

Innehåll

HTML (Hypertext Markup Language) är det primära programmeringsspråket för att utveckla webbsidor. Skapat som ett enkelt och bekvämt programmeringsspråk. De flesta sidor på Internet har utvecklats med hjälp av en av formerna för detta språk (ColdFusion, XML, XSLT). Efter att ha läst den här artikeln kan du fortsätta din utbildning med andra resurser på Internet. Försök att söka på internet efter andra artiklar relaterade till detta ämne.

Steg

Metod 1 av 1: Skriva en HTML -sida

  1. 1 Innan du börjar bekanta dig med ett av stegen som presenteras här, se avsnittet "Vad du behöver".
  2. 2 Vad du bör veta innan du börjar förstå detta problem:
  3. 3 Det grundläggande. Har du någonsin hört talas om taggen? Etiketten är omgiven av vinkelparenteser, med ordet inuti. Sluttaggen skrivs i samma form, men med tillägg av ett snedstreck efter den första vinkelkonsolen. Ett attribut är ett valfritt ord i en tagg som används för att lägga till detaljer i en tagg.
  4. 4 Dokumentets början. Klistra in följande textredigerare du använder:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    Etiketten måste stängas med samma tagg, men med snedstreck efter den första vinkelkonsolen. Det finns undantag som taggar META eller DOKTYP.
  5. 5 DOKTYP
    • Vanligtvis är de flesta webbsidor inställda DOCTYPE ”. Detta hjälper till att bestämma kodningen samt hur den kommer att uppfattas av webbläsare. De flesta sidor fungerar utan det, ”men det här är nödvändigt om du vill matcha (De reglerar typer av kodningar på Internet och hur de används)... DOCTYPE för HTML 4.01 presenteras nedan :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Detta är en av de vanligaste DOCTYPE används på sidor över hela internet.Först pekar den på typen av sida som beskriver "html", sedan markerar den typ av kodning, och slutligen, platsen för DOCTYPE, vilket som ett resultat beskriver sidan för webbläsaren.
    • Det finns olika typer av HTML (olika versioner utvecklade under åren), till exempel med nya taggar eller specifika taggar. Vissa taggar har föråldrats (andra mer användbara taggar används istället).
    • b> och jag> - detta är vad som för närvarande påläggs taggar, eftersom de används för att transformera text, men inte specifikationer, som ett resultat kommer andra taggar att ersätta dem. Märka stark> är en ersättare för b>, och em>, en ersättare för jag>.
    • Det är viktigt att de tidigare taggarna ersätts med taggar som är mer än formatering. Om texten översätts förblir inte bara formateringen, utan också dess innebörd densamma. Detta är semantiskt korrekt.
    • I XHTML version 2.0, b> och jag> används inte, precis som i HTML version 3+.
  6. 6 HTML "inkapslingsregel".
    • Låt oss ta en titt på de viktigare taggarna som för närvarande används. Under skapandet av sidan används en enkel struktur. Om en tagg öppnades, som ett resultat, den ska stängas... Detta gäller hela strukturen. Här är ett giltigt exempel på XHTML -layoutstrukturen:
    • ! 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">
    • huvud>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • titel> Hej världen! / titel>
    • / huvud>
    • kropp>
    • h1> Hej världen! / h1>
    • / kropp>
    • / html>
    • Exempelkod som meddelar ett meddelande Hej världen... Detta kallas ett test Hej världen.
  7. 7 Rubrik
    • Webbsidans titel är innehållet mellan taggen huvud>... Detta innehåll kan inte ses av användaren (endast titeln som visas i sidans titel). Information mellan taggar huvud>, kan bifoga andra taggar, till exempel:

      • META -taggen används för information som är användbar för sökmotorer och andra verktyg.
      • LINK -tagg som skapar en länk mellan dokument, till exempel för Styles (CSS).
      • SCRIPT -tagg, detta inkluderar nästan vilken webbkodning som helst, med möjlighet till fjärråtkomst (från ett annat dokument).
      • STYLE -taggen, som i huvudsak är en stil som kan tillämpas på en sida.
      • TITLE -taggen är titeln som visas som titel på en sida i din webbläsare.
    • Låt oss se en demo av några av dessa i ett exempelhuvud taget från denna webbplats (den har förkortats):
      • huvud>
      • titel> ... / titel>
      • meta name = "description" content = "..." />
      • länk rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • scripttyp = "text / javascript" src = "..."> / script>
      • / huvud>

        Om du inte har märkt det har de enskilda taggarna markerats, med den faktiska informationen borttagen. Exemplet är ganska kort och visar nästan alla taggar som finns i huvud>förutom HTML -kommentar (vi pratar om detta i enkla taggar).
  8. 8 Enkla taggar överallt
    • Låt oss gå vidare och se andra taggar. Var försiktig med din märkning och kom ihåg tumregeln "inkapsling".

      • starkt> Betonar viktig text.
      • liten> Gör texten mindre. Teckenstorlek mäts i standardenheter från 1 till 7, 3 är standardtextstorlek. ...
      • pre> Definierar ett block med rik text. Eftersom det är korrekt skrivs sådan text i ett teckensnitt av samma storlek och med alla mellanslag mellan ord.
      • em> Visar text som en fras.
      • del> Stryk text.
      • ins> Definierar texten som har infogats i dokumentet.
      • h1> En av många rubriktaggar. Taggar av detta slag börjar med 'h', med skillnad i antal. Se till att stänga taggen med samma nummer.
      • p> Definierar ett stycke.
      • ! --- ... ---> Till skillnad från andra taggar måste kommentaren vara inne i själva taggen. Denna information är endast synlig när koden visas.
      • blockquote> Visar en offert, kan användas med cite> -taggen.
      • De få exemplen ovan är inte en komplett lista över befintliga taggar. För att ta reda på om andra, besök.
  9. 9 Skapa en tydlig struktur
    • Sidor är utformade för att hålla data i enkla uppsättningar taggar så att vi kan analysera informationen i stycken. Datorn känner igen data; den vet inte om kontext eller konceptuell anslutning. Vi måste skapa datorvänliga HTML-sidor. Detta uppnås genom att använda div -taggen. Det hjälper till att skapa ett stort antal sidor. Det kan utformas med CSS och är enklare än att skapa stora kodtabeller för layouten.
      • div> Denna tagg är speciell eftersom den kan utformas och använda separata informationsblock som både användaren och datorn kan förstå.
    • Låt oss ta en titt på en enkel HTML -layout som använder en div -tagg.
      • ! 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">
      • huvud>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • titel> Hej världen! / titel>
      • / huvud>
      • kropp>
      • h1> Hej världen! / h1>
      • div id = "contentOne">
      • p> Detta är lite text i div # contentOne. / p>
      • div>
      • p> Ett stycke i en undersektion av div # contentOne / p>
      • / div>
      • / div>
      • / kropp>
      • / html>
    • Att använda div> -taggar hjälper till att hitta och ändra stilar när du arbetar med CSS och Javascript. HTML kommer att använda olika kodningar för att arbeta med CSS -stilar och Javascript för att skapa en bättre och mer lyhörd användarupplevelse.

Tips

  • Efter att ha läst den här artikeln, sluta inte och tro att du har lärt dig allt du behöver veta. Det finns alltid något att lära, särskilt i denna teknik.
  • Lär dig, förstå och skriv kod.
  • Observera att vissa taggar endast använder>. Para och br är några exempel. Andra taggar som öppnas med> måste stängas ytterligare. Till exempel "div> / div>".
  • Människor förväntar sig nya upptäckter, så uppfinn, design eller kod.
  • När du har lärt dig mycket kan du testa att lära dig serverprogrammering.
  • Lär dig att arbeta med CSS och Javascript.

Varningar

  • Kom ihåg att HTML handlar om att redigera innehåll. Detta innebär att HTML endast används för att lagra innehåll i ett erkänt format. Andra ändringar måste göras med hjälp av annan teknik, till exempel CSS. Det betyder också att göra ”Semantiskt korrektäven om andra inte erkänner det. Andra programmeringsspråk hjälper till att bygga webbsidor (CSS, Javascript och XML). HTML är en innehållsbyggare.

Vad behöver du

  • En textredigerare som stöder ANSI -kodning
  • En webbläsare som Internet Explorer eller Mozilla Firefox
  • (Valfritt) wysiwyg eller wykiwyg HTML -editor som Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web