Wku

Hur man lär sig HTML

Ett exempel på HTML-källkod från ett redigeringsprogram]]
HTML är en förkortning för Hypertext Markup Language, och är den kod, eller språk som används för att skapa webbsidor. HTML kan vara lite frustrerande att lära sig och förstå, och de intrikata detaljerna kan vara svårt att få grepp om. Du kanske tror att du aldrig har sett HTML i ditt liv, men om du har en MySpace-profil till exempel, så kan du väl ha. HTML är ett mycket användbart verktyg för Internet-användare och i den här artikeln kan du lära dig grunderna.

Steg

Hur man lär sig HTML. Hypertext Markup Language.
Hur man lär sig HTML. Hypertext Markup Language.

Lärande HTML

  1. 1
    Förstå märktaggar. Märktaggar informera din webbläsare hur du vill visa sidan och dess innehåll. De brukar komma med en start-tagg och en sluttagg, med elementet innehållet mellan taggarna.
    • En vänster-vinkel hållare eller mindre än-tecken ( < ) börjar taggen och en rät vinkel hållare eller större än-tecken ( > ) slutar taggen.
    • Att berätta om ett tag är en start eller en sluttagg, notera att slutet tagg har ett snedstreck / efter den första konsolen: <tag> innehållselement < / tag>.
  2. 2
    Förstå formatet för ett HTML-dokument. Det finns två delar till ett HTML-dokument. Hela dokumentet börjar och slutar med den taggen, som är där för att informera din webbläsare att den ska tolka koden som HTML. Dokumentet delas sedan upp i två delar: huvudet (koden inom taggarna) och kroppen head> (inom taggarna):
    Här är ett exempel på en mycket grundläggande HTML-dokument:
    <title> How to Learn HTML - Google </title>
    This is a minimal HTML document
  3. 3
    Lär användningar av huvudet taggen. Huvudet kommer först, och innehåller alla icke-halten kod, inklusive:
    • Titeln på sidan, till exempel:
      • <title> How to Learn HTML - Google </title>
    • Metataggar, som används för att tillhandahålla metadata om en webbsida. Dessa data kan användas av sökmotorer när roboten söker igenom internet för att lokalisera och lista webbplatser:
      • <meta name="description" content="A description of your page">
      • <meta name="keywords" content="list of keywords, each separated by a comma">
      • <meta name="robots" content="options for enabling/disabling certain abilities of a web-crawler for search engines">
      • <meta content="en-gb" http-equiv="Content-Language">
      • <meta content="text/html" http-equiv="Content-Type">
    • Länk taggar används för att länka sidan till andra filer, till exempel - (CSS stilar av elementen i sidan) och favicons (en ikon i samband med webbsidan, visas bredvid webbadressen i adressfältet och andra platser):
      • <link class="misspell" type="text/css" stylesheet">href="Iw==">
      • <link class="misspell" href="Iw==">
    • Script-taggar används för att länka sidan till Javascript -filer (även om detta inte nödvändigtvis vara i huvudet avsnittet). Dessa taggar kan också innehålla JavaScript-kod i stället för en extern fil:
      • <script class="misspell" src="c2NyaXB0cy5qcw==" language="javascript" type="text/javascript"></script>
  4. 4
    Lär användningar av body-taggen. Kroppen kommer efter huvudet, och innehåller allt innehåll koden - det innehåll som faktiskt visas i webbläsarfönstret, inklusive de vanligaste taggarna:
    • Taggen för en punkt:
      • <p>element content</p>
    • Taggen för fetstil:
      • <strong>element content</strong>
        <b>element content</b>
    • Taggen för kursiv stil:
      • <i>element content</i>
        <em>element content</em> (för betoning)
    • Taggen för genomstruken:
      • <s>element content</s>
    • Taggen för upphöjd:
      • <sup>element content</sup>
    • Taggen för index:
      • <sub>element content</sub>
    • Taggen för förformaterad text (visas exakt hur du anger det inklusive eventuella blanktecken i elementet innehållet):
      • <nowiki> element content </nowiki>
    • Taggen för en markeringsram (rullande text) (föråldrade):
      • <marquee> element content </marquee>
    • Taggen för kod text (visas like this ):
      • <code> element content </code>
    • De taggar för rubriker:
      • <h1>header text</h1>: den största header
        <h2>header text</h2> (2: a nivån header)
        <h3>header text</h3> (3: e nivån header)
        <h4>header text</h4> (den 4: e nivån header)
        <h5>header text</h5> (den minsta header)
    • Taggen för länkar och ankare:
      • Länkar:
        <a href="Iw==">text/image to display as the link</a>
        Till exempel:
        <a href="aHR0cDovL2dvb2dsZS5jb20=">Google</a>
      • Ankare (punkter i sidan som ska kopplas till internt, så här:
        <a name="Tips">element content, in this case the Tips section</a>
    • Taggarna för listor:
      • Numrerade och onumrerade listor:
        • Punktlistor (Onumrerat):
          <ul><li>Item 1</li><li>Item2</li><li>Item 3</li></ul>
        • Numrerade listor (Beställt):
          <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
      • Definition listor:
        <dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl>
    • Taggarna för tabeller:
      <table>table marks</table>
      • Rader: <tr>
      • Kolumn headers: <th>
      • Celler: <td>
        Exempel:
        <table><tr><th>Mês</th><th>Savings</th></tr><tr><td>January</td><td>75€</td></tr></table>
    • Lär de taggar som inte behöver en sluttagg - dvs det finns endast behov av en tagg. Dessa kallas tomma taggar, eftersom det inte finns något inslag innehåll. I dessa taggar måste avslutas med ett omvänt snedstreck /, Men fortfarande finns det bara behov av en tagg i både HTML-och XHTML:
      • Taggen för en radbrytning: <br>
      • Taggen för en horisontell regel: <hr>
      • Taggen för bilder: <img src="eW91cl9pbWFnZV91cmw=">
  5. 5
    Lär dig alla de andra taggar. Det finns olika resurser på Internet som du kan använda, gillar eller Codecademy, eller så kan du utöka dina kunskaper genom att titta in i HTML-källan av webbsidor. Du kan göra detta genom att högerklicka på sidan och välja "Visa källa" eller liknande, eller genom att gå till Visa sektionen i menyn i din webbläsare.
  6. 6
    Lär attribut och parametrar för taggarna. Som tidigare kan du antingen använda lärresurser på internet eller i böcker, eller så kan du försöka att lära genom trial and error och genom att se hur de attribut och parametrar som används i andra webbsidor.
    • Några vanliga attribut och parametrar inkluderar:
Använd Attribut Parametrar Exempel
Dimensionerbredd, höjd 100%, 200 (i pixlar), 12pt, 12em, 12cm width = "200"
(Standard i pixlar - andra uppgav t.ex. "12pt")
Alignmentalignvänster, höger, mitten align = "left"
Borderskant0, 1, 2... border = "0"
CSSstil olika CSS parametrar style = "padding: 10px; border: 2px solid svart, margin: 10px"

Tips

  • Du kan få en bärbar dator och skriva alla koder ned, så att om du behöver påminna, kan du bara öppna din bärbara dator och se. Du kan också skriva ut sidan som en hjälp referenspunkt.
  • Även i lärande läge för HTML, kanske du vill titta på webbsidor källkod, för att se hur man gjorde. Få en känsla för språket som du går till dina favoritwebbplatser.
  • Du kanske gillar att försöka hitta en enkel webbsida på internet, och att leka runt med koden. Försök att flytta lite text, ändra typsnitt, ändra bilder, något som tar din fantasi!
  • När du går runt webbplatser, om du ser konkreta effekter du vill lära dig att göra, visa källkoden och ersätta din information för den information som presenteras.
  • Om den här artikeln kan ha utlöst din nyfikenhet och du skulle vilja veta mer, det finns flera andra böcker där ute, som kan lära dig avancerade egenskaper HTML skapande tillsammans med stil-Sheets (CSS) och även Javascript.
  • Lägg märke till de attribut: BGColor och text. De är placerade i taggen. Det är det häckande sak igen. Attribut står aldrig ensam. Istället verkar de alltid inne i en body-taggen.
  • Om du vill vara riktigt seriös med att lära sig HTML, en del människor säger att eftersom WYSIWYG-redigering program (w hat y vad> ou s ee jag ser> s w hat y vad> ou g et) gör allt arbete för dig, att det kan vara bättre att lära sig utan att använda ett sådant program - även om många människor tycker att det är lättare att arbeta med ett HTML-redigeringsprogram och lära märktaggar och vad man gör med dem genom trial and error.
  • XML och RSS blir mer och mer vanligt på webbplatser dessa dagar. Deras koden kan tyckas svårt att läsa och förstå den mänskliga observatören, särskilt när man ser på en HTML-källkod-fil, men de har sina egna effekter till dem.
  • De märktaggar själva i HTML är inte skiftlägeskänsliga, men texten mellan dem (elementet innehåll) är. World Wide Web Consortium anger på sin hemsida att det: "rekommenderar gemener taggar i sin HTML 4 rekommendation", och att "XHTML kräver gemener taggar".

Varningar

  • Om du är intresserad av att validera dina sidor, gå till W3 hemsida och lära giltig HTML! Många taggar på denna sida är gamla och bör undvikas, och seriösa utvecklare bör inte använda dem alls.
  • Vissa taggar har blivit föråldrad under de senaste åren, och har ersatts med andra alternativ för att producera samma effekter, och även lägga till olika effekter, om du så önskar. Prova och lär dig vilka taggar är föråldrat, så att du vet, som inte kan fungera i några år. Gör en sökning på nätet efter information om huruvida detta gäller för din specificly-ifrågasatt tag.

Saker du behöver

  • Ett textredigeringsprogram, t ex Anteckningar (Windows) eller Textredigeraren (Mac OS X).
  • Ett papper / skrift anteckningsbok (tillval)
  • En HTML-redigering program (tillval)