HTML-opplæring (for nybegynnere)

HTML-opplæring for nybegynnereVil du lære litt HTML?


Det høres ut som en god ide. Derfor er grunnen til at vi har satt sammen denne HTML-opplæringen for nybegynnere.

Det er minst 1,7 milliarder nettsteder i verden i dag. Praktisk talt alle disse nettstedene bruker HTML på en eller annen måte.

P.S: Hvis du ikke vil lære HTML og begynne å bygge nettstedet ditt med en gang, uten koding kreves, ta en titt på denne guiden: Hvordan lage et nettsted GRATIS (uten å lære HTML).

Introduksjon til HTML


Hva er HTML?

Hva er HTMLHTML, et forkortelse for HyperText Markup Language, er et dataspråk for å lage nettsteder og webapplikasjoner. Består hovedsakelig seriekoder som vanligvis er skrevet i en tekstfil og lagret som HTML, oversetter kode skrevet på HTML-språket til en vakker, godt formatert tekst eller en kombinasjon av tekst og medier når den vises i en nettleser.

HTML ble først utviklet av den britiske fysikeren Tim Berners-Lee i 1990, og den har gjennomgått så mange evolusjoner siden den gang at den nyeste versjonen kan oppnå langt mer enn man trodde var mulig da språket første ble oppfunnet.

I denne opplæringen skal vi gå gjennom det grunnleggende om HTML-språket og alt du trenger å vite for å komme i gang med HTML som nybegynner.

HTML-versjoner

Først en rask oversikt over alle HTML-versjonene siden HTML ble oppfunnet.

  • HTML 1.0: Dette var barebones-versjonen av HTML og den aller første utgivelsen av språket.
  • HTML 2.0: Denne versjonen ble introdusert i 1995. Den utviklet seg gradvis, noe som ga ekstra muligheter inkludert skjemabasert filopplasting, tabeller, bildekart på klientsiden og internasjonalisering.
  • HTML 3.2: I et forsøk på å sikre utvikling av standarder for World Wide Web, ble World Wide Web Consortium (W3C) grunnlagt av Tim Berners-Lee i 1994. I 1997 publiserte de HTML 3.2.
  • HTML 4.0Senere i 1997 ga W3C ut HTML 4.0 – en versjon som tok i bruk mange nettleserspesifikke elementtyper og attributter.
  • HTML 4.0 ble senere utgitt på nytt med mindre redigeringer i 1998.
  • HTML 4.01: I desember 1999 ble HTML 4.01 utgitt.
  • XHTML: Spesifikasjonene ble introdusert i 2000, og det ble anbefalt å brukes som fellesstandard med HTML 4.01. Den innlemmet XML for å sikre at koden er riktig skrevet og for å sikre interoperabilitet mellom programmeringsspråk.
  • HTML5: W3C publiserte HTML5 som en anbefaling i oktober 2014 og utgav senere HTML 5.1 i november 2016.

Velge din HTML Editor

Velg HTML-editorHvis du tenker å lage websider i HTML, trenger du en HTML-redigerer. Det er flere fordeler med å bruke en HTML-editor.

En god HTML-redigerer vil holde koden din ren og organisert. Den vil også oppdage når du åpner en ny tag og lukker den automatisk for å unngå at du har en feilkode og som et resultat reduserer hvor mye inntasting du må gjøre. De fleste HTML-redaktører i dag lar deg forhåndsvise websiden din for å se hvordan den vil se ut i en nettleser ved å bruke WYSIWYG-funksjonen.

Det er mange gratis og betalte HTML-redaktører, nedenfor er noen av de beste alternativene du kan velge mellom:

Grunnleggende byggesteiner av HTML


Når du har bestemt deg for HTML-redigereren du vil bruke, er neste trinn å forstå byggesteinene til HTML. Når du koder i HTML, er det viktig å forstå disse byggesteinene. De inkluderer koder, attributter og elementer. Vi vil ta en grunnleggende titt på dem nedenfor:

Introduksjon til tagger

Når du er i HTML, er det første du trenger å forstå koder. I hovedsak skiller tagger normal tekst fra HTML-kode.

Følgelig, når det kommer til HTML, utgjør koder forskjellen mellom om dokumentet ditt vises som vanlig tekst eller “transformert tekst”, som i utgangspunktet er en tekstkode som ser ut til å vise en rekke ting (hyperkoblinger, bilder, media eller annet metoder for formatering) basert på hva det blir bedt om å vise basert på koder.

La oss se på ordet “Han er en gutt” som eksempel:

  • I vanlig tekstformat får du: Han er en gutt.
  • I fet tekstformat får du: Han er en gutt

For å oppnå det vi har i det dristige formatet, må du bruke stikkord.

gjør tekst fet i html

I rå HTML har vi Han er en gutt som nettleseren deretter oversetter til dette: Han er en gutt.

“Han er en gutt” kan også komme ut kursiv.

Dette oppnås ved å bruke stikkord.

lage tekst kursivert i html

Vi har: Han er en gutt som da kommer ut som Han er en gutt.

Hyperkoblet oppnås ved å bruke stikkord.

lage tekst hyperkoblet i html

I rå HTML har vi: Han er en gutt som viser som Han er en gutt.

Det er noen få ting du bør forstå om koder:

  • Tagger er praktisk talt byggesteinen til HTML – du kan ikke gjøre HTML uten koder! Hvis du sitter fast på hvilken tagg du skal bruke, må du huske å sjekke periodiske HTML-tabeller.
  • Nesten hver åpen tagg må være lukket. Husk at det finnes unntak. Et eksempel på en tag som ikke trenger å være lukket, er en tom kode, for eksempel linjeskift:
    .
  • Merker er inneholdt i mindre enn (“<”) and greater than (“>”) Vinkelfeste. Lukkemerker inneholder en skråstrek som blir før navnet på koden blir lukket. Eksempel på en åpen tagg: . Eksempel på en lukket kode .
  • Hver HTML-fil begynner med åpningskoden og avsluttes med lukkekoden. Den første linjen i HTML-filen skal erklære dokumenttypen slik at nettleseren vet hvilken HTML-smak du bruker. Dette er grunnen til at du ser HTML-sider starte med “”Før HTML-koden begynner.

Før innhold legges til, ser de fleste HTML-filer i utgangspunktet slik ut:

HTML--

Seksjonen som følger -koden inneholder vanligvis informasjon om dokumentet, for eksempel tittel, metakoder, og hvor du kan finne CSS-filen – innhold som ikke er synlig direkte på nettlesersiden. Seksjonen mellom “ og”(Som vi representerte med“ HOVEDINNHOLD ”) er der hovedinnholdet i HTML-filen, som betrakteren vil se i nettleseren, ligger. Dette inkluderer alt fra første ledd til hyperkoblinger til formatering til multimedia og alt annet.

Introduksjon til elementer

introduksjon til elementer

I HTML består et “element” av åpnings- og lukkekoden samt innholdet mellom kodene.

I “Han er en gutt”(I fet skrift) har vi dette i HTML: Han er en gutt. Teksten “Han er en gutt” er omgitt av et åpent og lukket tag. Alt, inkludert åpningskoden, innholdet og den nære koden er et element.

Når en kode åpnes, blir innhold introdusert og koden blir lukket, vi har et element.

Et element kan være i en grunnleggende form eller i en kompleks form. Hvorfor? Fordi alt mellom en åpen tagg og en avsluttende kode samt disse taggene er et element. Det betyr at vi kan ha elementer i et element. I vårt nåværende eksempel, “han er en gutt” (Han er en gutt) er et element.

Du vil merke at vi sa tidligere at HTML-dokumentene inneholder tagg før innholdet begynner. Innholdet kan omfatte hundrevis av forskjellige elementer, men alle disse elementene er en del av “kroppen” -elementet (siden kroppselementet er åpent, inneholder innhold og lukkes deretter).

Introduksjon til attributter

Mens HTML-dokumenter i utgangspunktet bruker tagger for alt, ønsker vi noen ganger å kommunisere tilleggsinformasjon i et element. I dette tilfellet bruker vi et attributt. Attributtet brukes til å definere egenskapene til et element, det brukes i åpningskoden til elementet. Attributter består av et navn og en verdi.

Merk at verdien til et attributt er plassert i et anførselstegn ved hjelp av formatet Din tekst.

eksempel på et attributt

Eksempel:

Han er en gutt

I dette eksemplet instruerer vi at “Han er en gutt” er på linje midt i dokumentet.

Komme i gang med HTML


Komme i gang med HTMLForutsatt at du vil lage ditt eget grunnleggende HTML-dokument i dag, hvordan kommer du i gang? Fra å lage sidetitler til å lage skjemaer, vil vi lede deg gjennom hvordan du kommer i gang med HTML nedenfor.

Opprette HTML Element

Når du oppretter et HTML-dokument, er noe av det første du oppretter element. Denne inneholder metadata (eller data om HTML-dokumentet). Dette inkluderer informasjon som tegnsett, dokumenttittel, dokumentstiler, skript osv.

Noen av elementene i inkludere tittelen, som er opprettet med stikkord.</p><p><strong>Eksempel</strong>:</p><pre><title>Dette er vår tittel

Denne tittelen vises i nettleserfanen. Det er også det som vil indekseres som tittelen på siden når søkemotorens roboter gjennomsøker nettstedet ditt.

Dette inkluderer også element, som ofte brukes til å spesifisere informasjon søkemotorer kan bruke til å beskrive innholdet i listene. Dette inkluderer beskrivelse, nøkkelord, forfatterinformasjon osv element spesifiserer også tegnsettet HTML-dokumentet bruker.

Opprette overskrifter i HTML

lage overskrifter i html

Overskrifter spiller en viktig rolle i suksessen til et nettsted. For det første gjør de det enkelt for leserne å skanne innholdet på sidene dine. For det andre, og kanskje enda viktigere, kommuniserer de strukturen på websidene dine til søkemotorer og påvirker derfor ofte hvordan innholdet ditt blir rangert i resultatene fra søkemotoren..

Når det er sagt, er det viktig å unngå å bruke tittelkoder for å gjøre teksten stor eller fet. Det er andre koder som kan brukes til det (som vi kommer til senere i denne delen). I stedet skal overskriftstagger kun brukes til struktur.

Det er seks rubrikkmerker i HTML:

til
, med

etikett som indikerer den viktigste overskriften og
etikett som indikerer den minst viktige overskriften.

For å lage overskrifter, bestemmer du ganske enkelt hvilken overskrift du oppretter, åpner overskriften med den vanlige overskriften-taggen, og husk alltid å lukke kodene når du er ferdig.

Eksempel på HTML-overskrifter:

  • Dette er din første HTML-overskrift

    (den største)

  • Dette er din andre HTML-overskrift

  • Dette er din tredje HTML-overskrift

  • Dette er din fjerde HTML-overskrift

  • Dette er din femte HTML-overskrift
  • Dette er din sjette HTML-overskrift

Opprette avsnitt

opprette avsnitt i HTML

Neste trinn er å begynne å lage avsnitt. Avsnitt kan opprettes med

stikkord.

Eksempel:

Dette er ditt første avsnitt.

Dette er ditt andre avsnitt, og du lager mange flere avsnitt.

Husk at skriving i HTML er veldig forskjellig fra å skrive i ren tekst. Derfor, hvis du bryter opp tekst i HTML uten å starte et nytt avsnitt, spiller det ingen rolle når teksten vises av nettleseren. I stedet vil du bruke en linjeskift, som er representert av
stikkord.

Eksempel:

Dette er et nytt avsnitt. Og jeg vil bruke en rekke nye linjer. Så jeg bryter det opp.

Dette vil ikke komme ut som følgende:

Dette er et nytt avsnitt.
Og jeg vil bruke en rekke nye linjer.
Så jeg bryter det opp.

I stedet vil det komme slik ut:

Dette er et nytt avsnitt. Og jeg vil bruke en rekke nye linjer. Så jeg bryter det opp.

Så hvordan deler du tekster inn i nye linjer slik at de vil se slik ut:

Dette er et nytt avsnitt.
Og jeg vil bruke en rekke nye linjer.
Så jeg bryter det opp.

Ved å bruke linjeskift.

Eksempel:

Dette er et nytt avsnitt.
Og jeg vil bruke en rekke nye linjer.
Så jeg bryter det opp.

Når det er sagt, er det viktig å merke seg at linjebruddet (
) -taggen er en tom tagg, så du trenger ikke å lukke den.

Formaterer tekst i HTML

formatering av tekst i HTML

Neste trinn er å formatere teksten din i HTML. Det er her du kan indikere om du vil at teksten din skal komme ut fet, kursiv, understreket, underskrevet, overskrevet, etc. Dette er en grunnleggende guide, så denne delen vil ikke være alt-til-alt-for-formatering. I stedet vil vi bare ta med noen grunnleggende formateringskoder. Prosessen for å bruke andre former for formatering er enkel – bare finn koden du ønsker og gå videre:

Bruker fet skrift: Han er en gutt kommer ut som Han er en gutt

Ved hjelp av kursiv: Han er en gutt kommer ut som Han er en gutt

Understrekende tekst: Han er en gutt kommer ut som Han er en gutt. Det er verdt å merke seg at -koden ble avskrevet i HTML 4.01 og ble omdefinert til å representere stilistisk forskjellig tekst i HTML5. Som et resultat anbefales det å bruke CSS for å indikere tekst som skal understrekes. Siden denne artikkelen er en grunnleggende guide, holder vi den enkel.

Ved hjelp av abonnement: Han er en gutt kommer ut som Han er en gutt

Bruker superscript: Han er en gutt kommer ut som Han er en gutt

For andre tagger som kan brukes til å formatere, kan det være lurt å ta en titt på ordlisten på slutten av denne ressursen, der vi har inkludert mange relevante HTML-tagger..

Bestilte og uordnede lister

Før eller siden må du lage lister. Lister kan bestilles (dvs. nummererte) eller ikke sorterte (dvs. unummererte).

Her er et eksempel på en bestilt liste:

  1. Punkt 1
  2. Punkt 2
  3. Punkt 3

Slik lager du det:

  1. Punkt 1
  2. Punkt 2
  3. Punkt 3

Her er et eksempel på en uordnet liste:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Slik lager du det:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Hvis det ikke allerede er åpenbart. Her er en sammenbrudd:

De

  • tag brukes til å indikere hvert element på listen. Når du lager en liste, kan du bruke
      tag for å indikere en bestilt liste (“o” = bestilt og “l” = liste) eller