Hvordan lære HTML

Innholdsfortegnelse:

Hvordan lære HTML
Hvordan lære HTML
Anonim

HTML er forkortelsen til Hyper tekstmarkeringsspråk, det er koden eller rettere sagt språket, som brukes for å lage nettsteder. HTML kan se vanskelig ut hvis du aldri har programmert før, men alt du trenger er en vanlig tekstredigerer og en nettleser. Du kan til og med gjenkjenne HTML som brukes på Internett for å redigere tekst på forum, for å tilpasse online profiler eller wikiHow -artikler. HTML er et veldig nyttig verktøy for alle som bruker Internett, og du vil ta mye mindre tid enn du trodde å lære det grunnleggende.

Trinn

Del 1 av 2: Lær grunnleggende HTML

Lær HTML trinn 1

Trinn 1. Åpne et HTML -dokument

Du kan bruke de fleste tekstredigerere, det være seg Notisblokk eller Word for Microsoft eller TextEdit for Mac, til å skrive HTML -dokumenter. Hvis du har Linux, kan du laste ned vin og laste ned notisblokken for Windows. Åpne et nytt dokument og klikk på Fil → Lagre som i toppmenyen for å lagre dokumentet som en webside eller for å endre ".doc -utvidelsen" ".Rtf, "etc. i ".html" eller ".htm"

  • Du kan se et vindu som viser deg om at dokumentet blir til ren tekst i stedet for rik tekst, eller at bildene eller formateringen ikke blir lagret riktig. Det er greit, HTML -dokumenter trenger ikke dette alternativet.
  • Det er ingen forskjeller mellom.html -filer og.htm -filer, alle fungerer på samme måte.
Lær HTML trinn 2

Trinn 2. Se dokumentet ditt med en nettleser

Lagre det tomme dokumentet, finn ikonet på skrivebordet og dobbeltklikk på det for å åpne det. Den skal åpnes som en tom side i nettleseren din. Hvis ikke, dra ikonet til nettleserens adresselinje. Når du redigerer filen i denne opplæringen, kan du sjekke den ut og se hvordan siden snur.

Vær oppmerksom på at disse endringene ikke tillater deg å opprette et nettsted. Siden vil ikke være tilgjengelig for andre mennesker, og du trenger ikke en internettforbindelse for å se endringene. Du bruker nettleseren din bare for å lese HTML -dokumentet som om det var et nettsted

Lær HTML trinn 3

Trinn 3. Forstå hvordan beacon -systemet fungerer

Merkelappene vil ikke vises på siden som vanlig tekst. I stedet forteller de nettleseren hvordan siden og innholdet skal vises. Åpningskoden inneholder instruksjonene. Det kan for eksempel fortelle nettleseren å sette teksten inn fett. Du trenger også en avsluttende tag, slik at nettleseren vet i hvilket felt disse endringene gjelder. I vårt eksempel vil all teksten mellom de to taggene være fet skrift. Bruk også chevrons for lukkemerkene, men legg et skråstrek etter den første chevronen.

  • Skriv åpningskodene mellom to vinkler:

    <

    åpningskoden er her

    >

  • Skriv de avsluttende taggene mellom chevrons, men sett et skråstrek etter den første chevronen:

    </

    lukkemerket finner du her

    >

    )
  • Les videre for å forstå hvordan tagger fungerer. I dette trinnet trenger du bare å huske det grunnleggende formatet på taggene, skrevet mellom og
  • Hvis du følger andre opplæringsprogrammer for å lære HTML, kan de snakke om tagger når det gjelder elementer og tekst mellom tagger når det gjelder elementinnhold.
Lær HTML trinn 4

Trinn 4. Skriv din første tag

Alle HTML -dokumenter starter med en tag og slutter med en tag. Dette forteller nettleseren at alt mellom disse to taggene er HTML -kode. Legg disse taggene til dokumentet.

  • Skriv øverst i dokumentet.
  • Trykk Enter eller Tab flere ganger for å gi deg selv nok plass og skrive.
  • Husk å skrive resten av denne opplæringen mellom disse to taggene.
Lær HTML Trinn 5

Trinn 5. Fullfør delen av dokumentet

Mellom taggen og taggen skriver du en åpningstag og en avsluttende tag. Gi deg selv nok plass mellom disse to taggene. Alt du skriver der vil ikke bli vist på siden. Prøv følgende eksempel og se hvor denne informasjonen vises:

  • Mellom taggene og skriv og.
  • Mellom taggene og skriv hvordan lære HTML med wikiHow.
  • Lagre dokumentet og åpne det i nettleseren din (eller lagre dokumentet og oppdater nettleseren hvis den allerede er åpen). Ser du nå det du nettopp skrev i fanen øverst i nettleseren, over adresselinjen?
Lær HTML trinn 6

Trinn 6. Lag en seksjon

Alt resten av innholdet for denne nybegynneropplæringen finner du i kroppsseksjonen (dvs. brødteksten på siden). Etter taggen, men før taggen, skriver du og. For resten av denne opplæringen vil alt du skriver være mellom og -koder. Du bør nå ha et dokument som ser ut som følgende (uten kulene):

Slik lærer du HTML med wikiHow

Lær HTML trinn 7

Trinn 7. Legg til tekst som gir den forskjellige stiler

Nå er det på tide å skrive noe du kan se på siden din! Alt du skriver i sidekroppstaggene, bør være i nettleseren etter at du har lagret HTML -dokumentet og oppdatert siden. Imidlertid må du ikke skrive noe som inneholder symbolene < Hvor >, fordi nettleseren din vil tolke den som HTML -kode i stedet for vanlig tekst. Prøv å skrive Bonjour Monde!

(eller hva du vil), sirkel teksten med disse nye taggene og se hva som skjer hver gang:

  • Bonjour Monde!

    vil vises "i kursiv:" Hei verden!
  • Bonjour Monde!

    vises "med fet skrift:" Bonjour Monde!

  • Bonjour Monde!

    vises overstreket: Hei verden!
  • Bonjour Monde! vises som en eksponent: Bonjour Monde!
  • Bonjour Monde! vil vises abonnert: Bonjour Monde!
  • Prøv følgende kombinasjoner: hvordan ser det ut

    Bonjour Monde!

    ?

Lær HTML trinn 8

Trinn 8. Del teksten i avsnitt

Hvis du prøver å skrive flere tekstlinjer i HTML -dokumentet, kan du legge merke til at linjeskift ikke vises på nettlesersiden. Du må selv angi dette for nettleseren:

  • Dette er et eget avsnitt.

  • Denne setningen etterfølges av et linjeskift

    før denne setningen begynner.

    Dette er den første taggen du kommer over som ikke trenger en avsluttende tag, de kalles unike tags.

  • Skriv overskrifter for å vise navnet på seksjonene:
  • topptekst

    : den største overskriften

    topptekst

    (det andre nivået av overskriftsstørrelse)

    topptekst

    (det tredje nivået i overskriftsstørrelsen)

    topptekst

    (fjerde nivå av overskriftsstørrelse)

    topptekst
    (det femte nivået på overskriftsstørrelsen)

    topptekst
    (den minste overskriften).
Lær HTML trinn 9

Trinn 9. Lær hvordan du lager lister

Det er forskjellige måter å skrive lister på websiden din. Prøv en av følgende kodetyper og finn den du foretrekker. Vær oppmerksom på at et par tagger omgir hele listen (for eksempel taggene

    og

for den uordnede listen), mens elementene i listen for eksempel er omgitt av et annet par merker

  • og
  • Bruk denne koden til å lage punktlister:
    • Et element
    • Et annet element
    • Et annet element
  • Eller denne koden for å lage en kryptert liste:
    1. Element 1
    2. Element 2
    3. Element 3
  • Eller denne koden for å lage en liste over definisjoner:
  • Kaffe

    - Varm drikke

    Melk

    - Kald drikke

Lær HTML trinn 10

Trinn 10. Energiser siden din med linjeskift, fra horisontale linjer og Bilder.

Nå er det på tide å legge til noe annet enn tekst på siden din. Prøv følgende tagger eller klikk på koblingene for mer informasjon. Du trenger en online fotovertstjeneste for å få adressen til bildet og sette det i den tilhørende taggen:

  • sett inn en linje:

    Hvor

  • legg til bilder:
Lær HTML Trinn 11

Trinn 11. Opprett lenker til andre steder på siden din

Du kan også bruke denne koden til å koble til andre sider eller nettsteder, men foreløpig, siden du ikke har et nettsted, vil du fokusere på ankre, dvs. si bestemte steder på siden din som du vil henvise brukeren til.

  • Start med å lage et anker med taggen på stedet på siden du vil henvise brukeren til. Gi det et navn som beskriver det godt, og som du enkelt kan huske:
  • her er teksten som du plasserer taggen rundt.

  • Bruk taggen til å koble til disse ankerne eller til en annen webside:
  • skrive teksten eller bildet som skal vises som en lenke.

  • For å referere til et anker som er på en annen side, legger du til et # etter adressen, og skriver deretter ankernavnet. For eksempel refererer https://fr.wikihow.com/apprendre-le-HTML#Conseils til tipsdelen på denne siden.

Del 2 av 2: Lær mer Avanserte HTML -teknikker

Lær HTML Trinn 12

Trinn 1. Lær mer om attributter

Attributtene er plassert inne i selve taggen, noe som forårsaker små endringer i innholdet i taggen. Attributtene blir aldri funnet alene. De finnes alltid i følgende format: navn = "verdi", der navnet representerer navnet på attributtet (for eksempel farge) og verdien beskriver det attributtet (for eksempel rødt).

  • Faktisk har du støtt på attributter før, hvis du har fulgt den forrige delen. Etiketter

    bruk attributtet src, forankrer attributtet Navn og lenkeattributtet href. Du ser hvordan hver av disse attributtene følger formatet ___="___«.

Learn HTML Step 14

Trinn 2. Tren HTML -tabeller

Du trenger forskjellige koder for å lage tabeller. Lek med disse kodene eller lær mer om HTML -tabeller.

  • Start med å sette tabellmerkene rundt bordet du vil lage:

  • Radetiketter brytes rundt innholdet i hver rad:

  • Vi finner kolonneoverskriftene i første rad:

  • Deretter tabellcellene i følgende rader:

  • Her er et eksempel på hvordan alle disse taggene ser ut når de kombineres:
  • Kolonne 1: Måned Kolonne 2: Besparelser
    januar 100 euro

Trinn 3. Lær forskjellige koder du vil sette i dokumentets topptekst

Du har allerede sett koden som ble funnet i begynnelsen av hvert dokument. I tillegg til taggen kan du også sette følgende tagger:

  • Bruk metatagger som brukes til å gi metadata om siden. Disse dataene kan brukes av søkemotorer når robotene deres skanner internett for å finne og liste nettsteder. For å gjøre nettstedet ditt mer synlig for søkemotorer, bruk en eller flere koder (dette er unike koder), hver med et attributtnavn og en enkelt verdi, for eksempel: eller så
  • Etiketter brukes til å knytte filer til siden. De brukes hovedsakelig til å koble CSS -stilark for å endre utseendet på HTML -siden ved å legge til farge, justere tekst og mange andre ting.
  • Etiketter brukes til å koble til JavaScript -filer som kan endre siden ved å følge brukerhandlinger.
Lær HTML trinn 15

Trinn 4. Manipuler HTML -koden du finner

En av de beste måtene å utvide kunnskapen din på dette området er å se på kildekoden til nettsider. Du kan gjøre dette ved å høyreklikke på siden og velge Vis kilde, Vis kildekode eller lignende alternativ eller ved å klikke på Vis -alternativet i menyen øverst i nettleseren. Prøv å finne taggene du ikke kjenner, og søk på internett for å finne ut mer.

Selv om du ikke kan redigere et tredjeparts nettsted, kan du kopiere HTML-koden du finner i dokumentet og redigere den for å se hva de forskjellige alternativene er. Vær oppmerksom på at uten CSS -stilarket, har du kanskje ikke de samme fargene eller formateringen

Lær HTML trinn 16

Trinn 5. Få mer omfattende guider for å lære mer avanserte teknikker

Det er forskjellige kilder på Internett som kan hjelpe deg med å lære mer om HTML -koder, for eksempel på W3Schools eller Codecademy. Du kan også finne bøker som lærer HTML, men husk å bruke en som har blitt publisert nylig, siden HTML oppdateres jevnlig. Det ville til og med være best å lære CSS å ha bedre kontroll over formatet og utseendet på nettstedet ditt. Når du har fått tak i CSS, er neste trinn vanligvis for webdesignere JavaScript.

Råd

  • Du bør prøve å finne en enkel side på Internett hvis kode du kan manipulere. Prøv å flytte tekst, endre skrift, endre bilder, hva du vil!
  • Du kan få en notatbok og skrive all HTML -koden der, slik at du kan slå den opp når som helst. Du kan også skrive ut denne siden for fremtidig referanse.
  • XML og RSS blir mer og mer populært på dagens nettsteder. Kodene deres kan virke vanskelig for et menneske å lese og forstå, spesielt hvis du ser dem i et HTML -dokument, men de produserer sine egne effekter på nettstedet.
  • Merkelappene i HTML -koden er ikke store og små bokstaver, men det anbefales på det sterkeste at du bruker små bokstaver av hensyn til standardisering og kompatibilitet med XHTML.

Advarsler

  • Noen beacons har blitt foreldet de siste årene og har blitt erstattet av andre metoder som gir de samme effektene eller legger andre effekter til dem.
  • Hvis du vil validere sidene dine, kan du gå til W3 -nettstedet og lære om HTML -standarder som har endret seg over tid, ettersom noen koder erstattes av andre som fungerer bedre i moderne nettlesere.

Populær etter emne