Hvordan lære HTML

Innhold

Trinn
Del 1 av 2: Lær grunnleggende HTML
Del 2 av 2: Avansert HTML
Tips
Advarsler
Hva trenger du

HTML er en forkortelse for engelsk Hyper tekstmarkeringsspråk (hypertekstmarkeringsspråk). Dette er koden, eller språket, der grunnleggende markering av nettsteder opprettes. Læring kan virke skremmende hvis du aldri har programmert, men i virkeligheten er alt du trenger for å komme i gang en grunnleggende tekstredigerer og nettleser. Du kan til og med kjenne igjen noen eksempler på HTML -koder du har kommet over på internettfora, tilpassede egendefinerte sider eller wikiHow -artikler. HTML er et nyttig verktøy for enhver internettbruker, og å lære det grunnleggende vil ta mindre tid enn du tror.

Trinn

Del 1 av 2: Lær grunnleggende HTML

1 Åpne et HTML -dokument. De fleste tekstredigerere (Notisblokk eller Notisblokk ++ for Windows, TextEdit for Mac, gedit for GNU / Linux) kan brukes til å generere HTML -filer. Lag et nytt dokument og lagre det ved hjelp av Fil → Lagre som i webformat, eller endre filtypen til .html eller .htm i stedet for .doc, .rtf eller en annen utvidelse.
- Du kan få en advarsel om at filen blir lagret som "ren tekst" i stedet for RTF -format, eller at formatering og bilder ikke blir lagret. Dette er greit; for HTML er disse alternativene ikke nødvendig.
2 Åpne den genererte filen i en nettleser. Lagre den tomme filen, finn den på datamaskinen din og dobbeltklikk på den for å åpne den. En tom side skal åpnes i nettleseren. Hvis den ikke gjør det, drar du filen til adresselinjen i nettleseren din. Når du redigerer HTML -filen, kan du oppdatere denne siden for å se endringene.
- Vær oppmerksom på at på denne måten oppretter du ikke et nettsted på Internett. Andre mennesker har ikke tilgang til denne siden, og du trenger ikke en internettforbindelse for å teste din lokale side. Nettleseren tolker ganske enkelt HTML -koden, "leser" den som om den var et nettsted.
3 Forstå hva koder er. I motsetning til vanlig tekst, vises ikke tagger på siden. I stedet forteller de nettleseren hvordan siden og innholdet skal vises. "Åpning" -taggen inneholder instruksjoner. For eksempel kan den fortelle nettleseren at teksten skal vises som modig... Den trenger også en "slutt" -tagge for å vise nettleseren hvor instruksjonen slutter. I dette eksemplet vil teksten mellom start- og sluttkoden vises med fet skrift. Etiketter skrives inne i ulik tegn, men sluttkoden starter med et skråstrek.
- Åpningskoden er skrevet mellom ulikhetstegnene: åpningskode>
- I den avsluttende koden plasseres et skråstrek foran etikettbeskrivelsen (navn): /sluttmerke>
- Les videre for å finne ut hvordan de forskjellige taggene brukes. For dette trinnet trenger du bare å huske opptaksformatet. Merker er skrevet mellom ulikhetstegnene:> og />
- I noen opplæringsprogrammer kalles HTML -koder elementer, og teksten mellom åpnings- og avsluttende koder kalles elementinnhold.
4 Skriv inn html> tag i redaktøren. Hver HTML -fil må starte med en tag html> og avslutt med en tag / html>... Disse kodene forteller nettleseren at alt innhold mellom taggene er i HTML. Legg til disse kodene i dokumentet ditt:
- Ofte starter HTML -filer med linjen ! DOCTYPE html>noe som betyr at nettlesere må gjenkjenne hele filen som HTML. Denne linjen er ikke nødvendig, men den kan hjelpe deg med å feilsøke kompatibilitetsproblemer.
- Slå html> øverst i dokumentet.
- Trykk på Enter eller Return flere ganger for å opprette flere tomme linjer, og skriv deretter inn / html>
- Husk at hele koden du vil opprette i denne artikkelen må skrives mellom disse to kodene.
5 Lag et hode> seksjon i filen. Mellom html> og / html> taggene, opprett en åpningstag hode> og den avsluttende taggen / hode>... Legg til noen tomme linjer mellom dem. Innhold skrevet mellom taggene head> og / head> vises ikke på selve siden. Følg disse trinnene, så ser du hva denne taggen er til for:
- Mellom taggene head> og / head> skriver du tittel> og / tittel>
- Skriv mellom taggene> og / title> Slik lærer du HTML - wikiHow.
- Lagre endringene og åpne filen i en nettleser (eller oppdater siden hvis filen allerede er åpen). Ser du teksten som vises i sidetittelen over adresselinjen?
6 Lag en brødtekst> seksjon. Alle andre koder og tekst i dette eksemplet er skrevet i brødteksten, hvis innhold vises på siden. Etter lukkemerke / hode>, men før tag / html> legg til koder kropp> og / kropp>... For resten av denne artikkelen, arbeid med kroppsseksjonen. Filen din skal se slik ut:
html>
hode>
title> Hvordan lære HTML - wikiHow / title>
/ hode>
kropp>
/ kropp>
/ html>
7 Legg til tekst ved hjelp av forskjellige stiler. Det er på tide å legge det virkelige innholdet til siden! Alt du skriver mellom brødtekstene, vises på siden etter at den er oppdatert i nettleseren. Ikke bruk symboler eller >som nettleseren vil prøve å tolke innholdet som en tag i stedet for tekst. Skrive Hallo! (eller hva du vil), prøv å legge disse taggene til teksten og se hva som skjer:
- em> Hei alle! / em> gjør teksten "kursiv": Hallo!
- sterk> Hei alle! / sterke> gjør teksten "fet": Hallo!
- s> Hei alle! / s> gjennomsiktig tekst: ~~Hallo!~~
- sup> Hei alle! / sup> viser skriften som en overskrift:
- sub> Hei alle! / sub> viser skrifttypen som et abonnement: _Hallo!
- Prøv forskjellige tagger sammen. Hvordan det vil se ut em> strong> Hei alle sammen! / strong> / em>?
8 Del teksten i avsnitt. Hvis du prøver å skrive flere tekstlinjer i en HTML -fil, vil du legge merke til at linjeskift ikke vises i nettleseren. For å dele tekst inn i avsnitt, må du legge til tagger:
- p> Dette er et eget avsnitt. / p>
- Denne setningen etterfølges av et linjeskift br> før starten av denne linjen.
  Dette er den første taggen som ikke krever en slutt -tag. Disse kodene kalles "tomme" koder.
- Lag overskrifter for å vise seksjonstitlene:
  h1> overskriftstekst / h1>: største tittel
  h2> overskriftstekst / h2> (overskrift på andre nivå)
  h3> overskriftstekst / h3> (overskrift på tredje nivå)
  h4> overskriftstekst / h4> (overskrift på fjerde nivå)
  h5> overskriftstekst / h5> (minste tittel)
9 Lær å lage lister. Det er flere måter å lage lister på en webside. Prøv alternativene nedenfor og avgjør hvilken du liker best. Vær oppmerksom på at ett par koder er nødvendig for listen som helhet (for eksempel ul> og / ul> for en punktliste), og hvert listeelement er uthevet med et annet par koder, for eksempel li> og / li>.
- Punktliste:
  ul> li> Første linje / li> li> Andre linje / li> li> Og så videre / li> / ul>
- Nummerert liste:
  ol> li> One / li> li> To / li> li> Three / li> / ol>
- Definisjonsliste:
  dl> dt> Kaffe / dt> dd> - varm drikke / dd> dt> Lemonade / dt> dd> - kald drikke / dd> / dl>
10 Layout siden med linjeskift, horisontale linjer og Bilder. Det er på tide å legge til noe annet enn tekst på siden. Prøv følgende tagger eller følg koblingene for mer informasjon. Bruk en online hosting -tjeneste for å lage en lenke til bildet du vil legge ut:
- Horisontal linje: hr>
- Sett inn bilde: img src = "bildelink">
11 Legg til lenker. Du kan bruke disse kodene til å lage hyperkoblinger til andre sider og nettsteder, men siden du ikke har et nettsted ennå, vil du nå lære hvordan du oppretter ankerlenker, det vil si lenker til bestemte steder på en side:
- Lag et anker med a> -taggen der du vil koble til siden. Kom med et klart og minneverdig navn:
  
  a name = "Tips"> Teksten du lenker til. / a>
- Bruk href> -taggen til å opprette en relativ lenke eller lenke til en ekstern ressurs:
  
  a href = "lenke til siden eller ankernavnet på siden"> Tekst eller bilde som skal fungere som lenken. / a>
- For å koble til en relativ lenke på en annen side, legg til et # -tegn etter hovedlenken og navnet på ankeret. For eksempel https://no.wikihow.com/learn-HTML#Tips lenker til tipsdelen på denne siden.

Del 2 av 2: Avansert HTML

1 Bli kjent med attributtene. Attributter skrives inne i koden, noe som indikerer tilleggsinformasjon. Formatet til attributtene er som følger: navn = "verdi", hvor tittel definerer et attributt (for eksempel farge for et fargeattributt), og verdien angir verdien (for eksempel rød for rødt).
- Attributter har faktisk blitt brukt i den forrige delen om grunnleggende HTML. Img> -taggen bruker attributtet src, relative lenkeankre bruker attributtet Navnog koblingene bruker attributtet href... Som du allerede har lagt merke til, er alle attributter skrevet i formatet ___='___’.
2 Eksperimenter med HTML -tabeller. Opprettelsen av et bord innebærer bruk av forskjellige koder. Du kan eksperimentere, eller lese mer detaljerte instruksjoner.
- Lag tabellkoder:tabell> / tabell>
- Omslutt innholdet i hver rad i tabellen i tagger: tr>
- Kolonneoverskriften er definert av taggen: th>
- Celler i påfølgende linjer: td>
- Et eksempel på bruk av disse taggene:
  
  tabell> tr> th> Kolonne 1: måned / th> th> Kolonne 2: besparelse / th> / tr> tr> td> januar / td> td> 5000 rubler / td> / tr> / tabell>
3 Lær flere tagger for hodeseksjoner. Du har allerede lært hodet> -taggen som kommer i begynnelsen av hver html -fil. I tillegg til tittelen> taggen, er det andre tagger for denne delen:
- Metakoder som inneholder metadatabrukes av søkemotorer til å indeksere nettstedet. For å gjøre nettstedet ditt lettere å finne i søkemotorer, bruker du en eller flere meta> -tagger som åpnes (det er ikke nødvendig å lukke koder).Bruk ett attributt og én verdi per tag: meta name = "description" content = "page description">; eller meta name = "søkeord" content = "kommaadskilte søkeord">
- Link> tagger som peker til tredjepartsfiler, for eksempel stilark (CSS), som er opprettet med en annen type koding og lar deg endre HTML-siden ved hjelp av farge, tekstjustering og mange andre funksjoner.
- Skriptet> -koder som brukes til å legge ved JavaScript -filer til siden. Disse filene er nødvendige for å endre siden interaktivt (som svar på brukerhandlinger).
4 Eksperimenter med HTML -koden til andre nettsteder. Å se kildekoden til andre nettsider er en fin måte å lære HTML på. Du kan høyreklikke på siden og velge Vis kilde eller lignende fra toppmenyen i nettleseren din. Prøv å finne ut hva en ukjent tag gjør, eller søk på Internett for informasjon om den.
- Selv om du ikke kan redigere andres nettsteder, kan du kopiere kildekoden til filen for å eksperimentere med tagger senere. Vær oppmerksom på at CSS -markering kanskje ikke er tilgjengelig, og at farger og formatering kan se annerledes ut.
5 Begynn å utforske mer detaljerte guider. Det er mange nettsteder på Internett dedikert til HTML -tagger, for eksempel W3Schools eller HTMLbook. Det er også papirbøker på salg, men prøv å finne den siste utgaven etter hvert som standardene endres og utvikler seg. Enda bedre, mestre CSS for å ha mye mer kontroll over utformingen og utseendet på nettstedet ditt. Etter å ha lært CSS, lærer webdesignere vanligvis JavaScript.

Tips

Notisblokk ++ er et flott gratis program, som ligner på vanlig Notisblokk, men du kan lagre og teste koden din i nettleseren din online. (Den støtter også nesten alle språk - HTML, CSS, Python, JavaScript og så videre.)
Finn en enkel side på nettet, lagre koden på datamaskinen din og eksperimentere med den. Prøv å flytte tekst, endre skrifttype, erstatte bilder - uansett!
Du kan beholde en notatbok der du skriver tagger, slik at du alltid har dem tilgjengelig. Du kan også skrive ut denne siden og referere til den.
Når du skriver kode, gjør det nøye slik at du og andre mennesker kan forstå det. Bruk! - Sett inn kommentar her -> for HTML -kommentarer: de reflekteres ikke på siden, men vil være synlige i kodedokumentet.
XML og RSS blir stadig mer populære. Koden for sider som inneholder XML- og RSS -teknologier er vanskeligere for en uerfaren bruker å lese og forstå, men disse verktøyene er ganske nyttige.
Markeringstagger i HTML er store og små bokstaver, men vi anbefaler at du bare bruker små bokstaver (som i eksemplene i denne artikkelen) for både standardisering og XHTML-kompatibilitet.

Advarsler

Noen tagger har gått ut av bruk de siste årene og har blitt erstattet av nye som gir samme eller noen flere effekter.
Hvis du vil teste siden din, kan du gå til W3 -siden og sjekke de moderne HTML -kravene. HTML -standarder endres over tid, og noen koder erstattes av nye som fungerer bedre i moderne nettlesere.

Hva trenger du

Et tekstredigeringsprogram som Notisblokk (Windows) eller TextEdit (Mac)
Papir / notisblokk (ikke nødvendig)
HTML -editor som Notisblokk ++ (Windows) eller TextWrangler (Mac) (ikke nødvendig)