Wkuno

Hvordan lære HTML

Et eksempel på HTML-kildekoden fra en redigering program]]
HTML er en forkortelse for Hypertext Markup Language, og er koden, eller språk som brukes for etablering av nettsteder. HTML kan være litt frustrerende å lære og forstå, og de intrikate detaljene kan være vanskelig å ta fatt med. Du tenker kanskje at du aldri har sett HTML i livet ditt, men hvis du har en MySpace-profil for eksempel, så du kan godt ha. HTML er et svært nyttig verktøy for Internett-bruker og i denne artikkelen kan du lære det grunnleggende.

Trinn

Hvordan lære HTML. Hypertext Markup Language.
Hvordan lære HTML. Hypertext Markup Language.

Læring HTML

  1. 1
    Forstå koder. Koder informere din nettleser hvordan å vise siden og dens innhold. De vanligvis kommer med en start tag og en slutt tag, med element innhold i mellom kodene.
    • En venstre-vinkel brakett eller mindre-enn-tegn ( < ) begynner tag og en rett vinkel braketten, eller større-enn-tegn ( > ) avslutter tag.
    • Å fortelle om et tag er en start eller en slutt tag, oppmerksom på at slutten tag har en skråstrek / etter første konsollen: <tag> element content < / tag>.
  2. 2
    Forstå formatet på et HTML-dokument. Det er to deler til et HTML-dokument. Hele dokumentet starter og slutter med kode, som er der for å informere din nettleser at det skal tolke koden som HTML. Dokumentet er deretter delt opp i to deler: hodet (koden i kodene) og kroppen head> (i kodene):
    Her er et eksempel på en svært enkel HTML-dokument:
    <title> How to Learn HTML - Google </title>
    This is a minimal HTML document
  3. 3
    Lær bruken av hodet tag. Hodet kommer først og inneholder alle de ikke-innhold kode, inkludert:
    • Tittelen på siden, for eksempel:
      • <title> How to Learn HTML - Google </title>
    • Meta tags, som brukes til å gi metadata om en webside. Disse dataene kan brukes av søkemotorer når roboten leter på internett for å finne og liste nettsteder:
      • <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">
    • Link kodene brukes til å koble siden til andre filer, for eksempel - (CSS-stiler av elementene på siden) og favicons (et ikon knyttet til websiden, vises ved siden av url i adressefeltet og andre steder):
      • <link class="misspell" type="text/css" stylesheet">href="Iw==">
      • <link class="misspell" href="Iw==">
    • Script kodene brukes til å koble siden til Javascript -filer (selv om dette ikke nødvendigvis å være i hodet delen). Disse kodene kan også inneholde JavaScript-kode i stedet for en ekstern fil:
      • <script class="misspell" src="c2NyaXB0cy5qcw==" language="javascript" type="text/javascript"></script>
  4. 4
    Lær bruken av body-koden. Kroppen kommer etter hodet, og inneholder alt innholdet kode - innholdet som faktisk vises i nettleservinduet, inkludert de vanligste kodene:
    • Koden for et avsnitt:
      • <p>element content</p>
    • Koden for fet skrift:
      • <strong>element content</strong>
        <b>element content</b>
    • Koden for kursiv:
      • <i>element content</i>
        <em>element content</em> (for vekt)
    • Koden for gjennomstreking:
      • <s>element content</s>
    • Koden for hevet:
      • <sup>element content</sup>
    • Koden for subscript:
      • <sub>element content</sub>
    • Koden for preformatert tekst (vises nøyaktig hvordan du skriver det inkludert eventuelle mellomrom i attributtet):
      • <nowiki> element content </nowiki>
    • Koden for en rulletekst (rulletekst) (Utdatert):
      • <marquee> element content </marquee>
    • Koden for kode tekst (vises like this ):
      • <code> element content </code>
    • De koder for overskrifter:
      • <h1>header text</h1>: den største header
        <h2>header text</h2> (2 nd nivå header)
        <h3>header text</h3> (det 3. nivå header)
        <h4>header text</h4> (den 4. nivå header)
        <h5>header text</h5> (den minste header)
    • Koden for lenker og ankere:
      • Lenker:
        <a href="Iw==">text/image to display as the link</a>
        For eksempel:
        <a href="aHR0cDovL2dvb2dsZS5jb20=">Google</a>
      • Anchors (punkter i siden for å være knyttet til internt, slik:
        <a name="Tips">element content, in this case the Tips section</a>
    • Kodene for listene:
      • Nummererte og punktlister:
        • Punktlister (Usortert):
          <ul><li>Item 1</li><li>Item2</li><li>Item 3</li></ul>
        • Nummererte lister (Bestilt):
          <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
      • Definisjon lister:
        <dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl>
    • Kodene for tabeller:
      <table>table marks</table>
      • Rader: <tr>
      • Kolonneoverskrifter: <th>
      • Celler: <td>
        Eksempel:
        <table><tr><th>Mês</th><th>Savings</th></tr><tr><td>January</td><td>75€</td></tr></table>
    • Lær kodene som ikke trenger en avsluttende tag - dvs. det er behov bare for en tag. Disse kalles tomme koder, fordi det er ingen element innhold. I disse kodene må lukkes med en omvendt skråstrek /, Men fortsatt er det kun behov for én brikke i både HTML og XHTML:
      • Koden for et linjeskift: <br>
      • Koden for en horisontal regel: <hr>
      • Den koden for bilder: <img src="eW91cl9pbWFnZV91cmw=">
  5. 5
    Lær alle de andre koder. Det finnes ulike ressurser på internett som du kan bruke, liker eller Codecademy, eller du kan utvide din kunnskap ved å se inn i HTML-kilden til websider. Du kan gjøre dette ved å høyreklikke på siden og velge "View Source" eller lignende, eller ved å gå til Vis-seksjonen i menyen i nettleseren din.
  6. 6
    Lær egenskaper og parametere for kodene. Som før, kan du enten bruke læringsressurser på internett eller i bøker, eller du kan prøve å lære ved prøving og feiling og ved å se hvordan attributtene og parametere brukes i andre nettsider.
    • Noen vanlige attributter og parametere er:
Bruk Attributter Parametere Eksempel
Dimensjonerbredde, høyde 100%, 200 (i piksler), 12pt, 12em, 12cm width = "200"
(Standard i piksler - andre uttalte for eksempel "12pt")
Alignmentjusterevenstre, høyre, senter align = "left"
Bordersgrensen0, 1, 2... border = "0"
CSS Stylingstil ulike CSS parametere style = "padding: 10px; kant: 2px solid svart; margin: 10px"

Tips

  • Du kan få en notatbok og skrive alle kodene ned, slik at hvis du trenger minne, kan du bare åpne den bærbare PCen og se. Du kan også skrive ut denne siden ut som et nyttig referansepunkt.
  • Selv i læremodus av HTML, kan det være lurt å se på websider kildekoden, for å se hvordan det er gjort. Få en følelse for språket som du går til favorittsidene dine.
  • Kanskje du har lyst til å prøve å finne en enkel webside på internett, og spille rundt med koden. Prøv å flytte litt tekst, endre font, endre bilder, noe som tar fancy!
  • Som du går rundt nettsteder, hvis du se konkrete effekter du ønsker å lære å lage, vise kildekoden og erstatte din informasjon for den informasjonen som presenteres.
  • Hvis denne artikkelen kan ha utløst din nysgjerrighet og du ønsker å vite mer, er det flere andre bøker der ute, som kan lære deg avanserte kvaliteter HTML etableringen sammen med stil-ark (CSS) og selv Javascript.
  • Legg merke til de attributter: bgcolor og tekst. De er plassert inne i koden. Det er at hekkende ting igjen. Attributter aldri stå alene. I stedet, de vises alltid inne i en body-koden.
  • Hvis du ønsker å være veldig alvorlig med å lære HTML, noen sier at fordi WYSIWYG redigering programmer (w hat y hva> ou s ee jeg ser> s w hat y hva> ou g et) gjøre alt arbeidet for deg, at det kan være bedre å lære uten bruk av et slikt program - selv om mange synes det er lettere å jobbe med en HTML-redigering program og lære koder og hva de skal gjøre med dem ved prøving og feiling.
  • XML og RSS blir mer og mer vanlig på nettsteder i disse dager. Koden sin kan virke vanskelig å lese og forstå den menneskelige observatør, spesielt når de vises på en HTML-kildekoden fil, men de har sine egne effekter til dem.
  • De koder selv i HTML er ikke store og små bokstaver, men teksten mellom dem (attributtet) er. World Wide Web Consortium sier på sin hjemmeside at det: "anbefaler lavere tilfelle koder i HTML 4 anbefaling", og at "XHTML krever lavere tilfelle tags".

Advarsler

  • Hvis du er interessert i å validere sidene dine, gå til W3 nettsted og lære gyldig HTML! Mange koder på denne siden er gamle og bør unngås, og seriøse utviklere bør ikke bruke dem i det hele tatt.
  • Noen koder har blitt foreldet i løpet av de siste årene, og har blitt erstattet med andre alternativer for å produsere de samme effektene, og selv legge til ulike effekter, hvis du ønsker det. Prøve og finne ut hvilke koder er foreldet, slik at du vet hvilke kan ikke fungere i noen år. Gjør et søk på nettet for å få informasjon om hvorvidt dette gjelder for din specificly-avhørt tag.

Ting du trenger

  • En tekstredigering program, for eksempel Notisblokk (Windows) eller TextEdit (Mac OS X).
  • Et papir / skriftlig notebook (valgfritt)
  • Et HTML-redigering program (valgfritt)