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

        for å indikere en uordnet liste (“u” = uordnet og “l” = liste). Fikk kjernen?

        Heklede lister

        Vi kan også ha nestede lister eller en liste i en liste.

        Eksempel:

        • Punkt 1
          • Post 1 nestet
          • Post 2 nestet
        • Punkt 2
        • Punkt 3

        Dette kan opprettes med:

        • Punkt 1
          • Post 1 nestet
          • Post 2 nestet
          • Element 3 nestet
        • Punkt 2
        • Punkt 3

        Som du ser, åpner du ganske enkelt en annen oppføringsmerke – bestilt (

          ) eller uordnet (

            ) – avhengig av hva du vil før du lukker varen du vil hekke.

            lage hyperkoblinger i HTML

            Internett er et massivt sammenkoblet nettverk av sider. Hvis du oppretter en webside – enten internt eller eksternt, eller begge deler – må du lenke til andre sider. En lenke til en intern side på nettstedet ditt, eller til en ekstern side på nettet, kalles en hyperkobling. Mens folk vanligvis kobler en tekst, kan alle HTML-elementer – for eksempel et bilde – knyttes sammen.

            De tag brukes til å definere lenker i HTML, mens “href” -attributtet brukes til å spesifisere destinasjonen til en lenke. Koblingen blir deretter satt inn i et sitat etter “lik” -tegnet før taggen lukkes.

            Eksempel:

            Slik lager du en hyperkobling: DIN LINKTEKST HER vil komme ut som DIN LINKTEKST HER

            Anta nå at du kobler til en lokal fil der du har alle HTML-sidene dine i samme mappe. I dette tilfellet trenger du ikke å inkludere en nettsteds-URL. Bare legg til filstien. Hvis du for eksempel kobler til en fil med tittelen about-page.html, blir hyperkoblingen din LINKTEKSTEN DIN, som lenker til filen om -siden.html.

            Hvis HTML-filen du vil koble til er lokal, men i en annen mappe enn hovedmappen, angir du ganske enkelt filstien. Hvis filen for eksempel er i “filer” -mappen under hoveddokumentet der det gjeldende dokumentet er, går hyperkoblingen din slik LINKTEKSTEN DIN

            Det kan være lurt å spesifisere hvordan du vil at lenken skal åpnes, f.eks. i et nytt vindu / fane. Du vil bruke målattributtet for det.

            eksempler:

            LINKTEKSTEN DIN spesifiserer at lenken skal åpnes i en ny fane.

            LINKTEKSTEN DIN spesifiserer at lenken skal åpnes i samme fane.

            Det er andre attributter som kan brukes til å kommunisere forskjellige måter en lenke skal åpnes:

            • _blank – Åpne i en ny fane.
            • _self – Åpne i samme fane.
            • _parent – Åpne i overordnet ramme
            • _top – Åpne i hele vinduet
            • rammenavn – Åpnes i en navngitt ramme

            Du kan også ha et bilde som peker til en lenke.

            Eksempel:

            Han er en gutt
            

            Dette forteller nettleseren å vise et bilde trukket fra bildefilen “images / html-tutorial-for-beginners-3.jpg” og få det koblet til https://websitesetup.org. Attributtet “alt” representerer det som skal vises hvis bildet ikke kan vises (på grunn av nettleserinnstillinger eller andre ting som forhindrer at bilder vises).

            Bruke bilder

            ved hjelp av bilder i HTML

            Bilder legges til i et HTML-dokument med stikkord. De tag er en tom tagg, så den trenger ikke å være lukket.

            Eksempel:

            Han er en gutt

            Dette er et grunnleggende eksempel på at du ber nettleseren vise et bilde med tittelen “bilder / html-tutorial-for-nybegynnere-3.jpg” trukket fra samme katalog som HTML-dokumentet. Attributtet “alt” ber nettleseren om å vise en tekst (kjent som en “alternativ tekst”) kalt “Han er en gutt” hvis nettleserens eller internettinnstillingene av en eller annen grunn hindrer nettleseren i å vise bilder. Hvis du vil trekke et bilde i en annen katalog, eller på et eksternt nettsted, bør hele adressen / banen angis.

            Når vi går utover det grunnleggende, kan vi også bruke andre attributter for å tilpasse bildet bedre. For eksempel kan “stil” -attributtet brukes til å spesifisere bredden, høyden eller begge deler.

            Eksempel:

            DIN ALTERNATIVE TEKST

            (den kursiverte “bredden” og “høyden” bør erstattes med de faktiske verdiene i “px” (f.eks. “20px”) du vil ha for bildet ditt.)

            Lage tabeller

            lage tabeller i HTML

            Når du kommer dypere inn i HTML, vil du lære forskjellige måter å presentere informasjon på en mer organisert måte. En slik måte er gjennom bruk av tabeller.

            Tabeller opprettes med

            stikkord. Hver overskrift i en tabell er spesifisert med

            (“Tabellrad”) -kode. Tabelldataene blir deretter indikert med

            (“Tabelloverskrift”) mens hver rad er spesifisert med

            stikkord.

            Eksempel:

            Tabelloverskrift 1 Tabelloverskrift 2 Tabelloverskrift 3
            Inndata 1 under overskrift 1 Inndata 1 under overskrift 2 Inndata 1 under overskrift 3
            Inndata 2 under overskrift 1 Inndata 2 under overskrift 2 Inndata 2 under overskrift 3
            Inndata 3 under overskrift 1 Inndata 3 under overskrift 2 Inndata 3 under overskrift 3

            Dette gir oss noe slikt:

            tabelleksempel 1

            Som du kan se, mens vi har et bord, er det litt uorganisert. For organisering kan vi legge til litt styling i koden. I dette tilfellet øker vi bredden:

            Tabelloverskrift 1 Tabelloverskrift 2 Tabelloverskrift 3
            Inndata 1 under overskrift 1 Inndata 1 under overskrift 2 Inndata 1 under overskrift 3
            Inndata 2 under overskrift 1 Inndata 2 under overskrift 2 Inndata 2 under overskrift 3
            Inndata 3 under overskrift 1 Inndata 3 under overskrift 2 Inndata 3 under overskrift 3

            Dette resulterer i noe mer organisert:

            tabelleksempel 2

            Det kan være lurt å gå mer avansert og bruke grenser, angi horisontal eller vertikal justering for innholdet i tabellen, introdusere skillelinjer, polstring, etc. Du må imidlertid lære deg noen CSS for å gjøre ting som dette. Vi holder denne opplæringen grunnleggende og kommer ikke inn på det i denne artikkelen.

            Sitater i HTML

            sitater i HTML

            Det er forskjellige typer sitater, og disse sitatene er representert med forskjellige elementer.

            Her er et eksempel for et grunnleggende tilbud:

            Dette er en prøve. Og Her er sitatet vårt

            Dette kommer ut som: Dette er et utvalg. Og “Her er sitatet vårt”

            Når du bruker koden, anførselstegn blir automatisk lagt til det som er vedlagt i koden.

            Du kan også bruke blokkeringskvoter, som gjøres med

            stikkord.

            Eksempel:

            Dette er en prøve. Og

            Her er vår blokka. I dette eksemplet prøver vi å demonstrere hvordan vi formaterer tekst for å indikere en blokkeringskode i HTML. Dette er forskjellig fra vanlige sitater, ved at det faktiske "sitat" -symbolet kanskje eller ikke kan legges til, avhengig av CSS-styling, men teksten fremheves.

            Det vil se slik ut:

            Eksempel 1

            Bruke kommentarer i HTML

            Når du gjør noen form for koding, er det viktig å lære hvordan du inkluderer kommentarer i koden. Kommentarer brukes til å gjøre koden din mer organisert. Du kan ta med en påminnelse til deg selv eller et notat til andre for å gjøre ting enklere.

            Til å begynne med virker det kanskje ikke viktig, men når du begynner å skrive hundrevis eller tusenvis av kodelinjer, og når ting ser ut til å begynne å bli komplisert, vil kommentarer komme til nytte.

            Kommentarer blir ikke vist for seeren av nettleseren. Husk at de kan sees i kildekoden.

            Kommentarer kan også brukes hvor som helst i koden. De vil ikke endre funksjonen til koden din på noen måte.

            Du kan inkludere en kommentar ved å åpne en brakett, inkludert en dobbelt bindestrek, legge til kommentaren din, inkludert en annen dobbelt bindestrek og deretter lukke braketten.

            Eksempel:

            Det er også verdt å merke seg det, spesielt når du feilsøker, kan du kommentere kodelinjer. På denne måten forblir koden i dokumentet, men fungerer ikke siden du har kommentert det.

            Eksempel:

            I dette tilfellet, mens “Han er en gutt” skal ut som dristig, har vi kommentert det, og det vil bli ignorert av nettleseren. I dette scenariet har vi ingenting for nettleseren.

            Dette kan også brukes på denne måten:

            Han gutt som viser Han gutt. Dette fordi vi kommenterte “er et.” Vi prøver bare å vise deg at praktisk talt alt, innenfor eller utenfor et element, kan kommenteres. Du kan ta med en merknad i kommentaren din som referanse – den endrer ikke arten på det som vises.

            Bruke farger i HTML

            ved å bruke farger i HTML

            Før eller siden vil du bruke farger for å indikere visse elementer i HTML-dokumentet. Dette kan gjøres på tre hovedmåter: med HEX-verdien, med RGB-verdien, eller med navnet på fargen.

            Å bruke farge i HTML gjøres vanligvis med stilattributtet.

            Eksempel 1:

            Dette er den blå fargen

            Ved å bruke HEX-verdien for den blå fargen “# 0000FF” ber vi nettleseren om å vise teksten din (i dette tilfellet “Dette er den blå fargen”) ved å bruke den blå fargen.

            Eksempel 2:

            Dette er fargen grønn

            Vi instruerer teksten som skal fremheves i den grønne fargen ved å bruke RGB-verdien.

            Eksempel 3:

            Dette er fargen gul

            Ved å bruke HSL-verdien ba vi om at teksten er uthevet i den gule fargen.

            Eksempel 4:

            Dette er fargen oransje

            Vi bruker HTML-fargenavnet (i dette tilfellet “oransje” – som vi fremhevet i koden ved å kursivere det) for å be om at teksten er uthevet i den oransje fargen. Dette er klart det bare er mulig for tekster som du kjenner fargenavn for, og det kan være vanskelig for visse fargenyanser som enkelt kan gjøres med HEX-koden eller RGB-verdien. Uansett kan du finne en liste over 140 HTML fargenavn satt sammen av HTML fargekoder.

            Forståelig nok har du ikke all nødvendig informasjon – for eksempel HEX-kode, RGB-verdi osv. – for alle farger. Ikke få panikk – fargevelgeren av W3Schools er et flott verktøy som lar deg velge hvilken som helst farge og viser deg all informasjon om den fargen inkludert HEX-kode, RGB-verdi og HSL-verdi.

            Bruke iFrames i HTML

            I et HTML-dokument kan en iFrame (inline frame) brukes til å legge inn en fil i det gjeldende dokumentet. I hovedsak kan du bruke den til å vise et annet nettsted eller innhold fra en annen webside inne i den gjeldende.

            Eksempel:

            Med koden over, ber vi nettleseren om å vise innholdet på https://websitesetup.org i en ramme direkte på denne siden.

            Iframes kan brukes til å vise et nettsted, video, bilder eller annen form for innhold.

            Koden for dette er enkel:

            (bare bytt ut “URL” med lenken til nettstedet / innholdet du vil vises.)

            Du kan tilpasse ytterligere for å spesifisere visse verdier, f.eks. Høyde og bredde, på iframe.

            Eksempel:

            Vi ber nettleseren om å vise iframe ved å bruke en høyde på 350 bilder og en bredde på 400 bilder.

            Skrifter i HTML

            bruker fonter i HTML

            Å forstå hvordan skrifttyper fungerer er avgjørende for å lage effektive HTML-dokumenter. For en gjør skrifter det enkelt å angi størrelsen på teksten. Det gjør det også enkelt å angi farge så vel som ansiktet (eller skrifttypen “typen”) på innholdet.

            For å indikere skrifttypen HTML-dokumentet ditt bruker, må du bruke stikkord. Du kan angi skriftstørrelse, skriftfarge eller skrift ansikt ved å bruke attributtene “størrelse”, “farge” eller “ansikt”.

            Innstillingsstørrelse – eksempel:

            Vis denne teksten med skriftstørrelse 6

            I dette eksemplet ber vi nettleseren om å vise teksten vår ved hjelp av skriftstørrelse 6. Det er viktig å merke seg at utvalget av aksepterte skriftstørrelser er 1 til 7. Alt over 7 vil automatisk tilpasse seg skriftstørrelse 7. Standard skriftstørrelse er 3.

            Fontfarge – eksempel:

            Vis teksten vår i den blå fargen

            Vi bruker tag for å be nettleseren om å vise teksten vår i fargen blå. I dette tilfellet brukte vi HTML-fargenavnet (“blått”). Dette kan erstattes med HEX-koden eller RGB-verdien hvis du vil.

            Font ansikt – eksempel:

            Foretrekker du Verdana i stedet for Times New Romans? Slik setter du det:

            Vis denne teksten i skrifttypen Verdana

            Vi ber nettleseren om å vise teksten vår i Verdana-skriften. Du kan ganske enkelt endre pålydende på font for å indikere hvilken font du vil bruke.

            Alternative font ansikter:

            Det er viktig å merke seg at folk bare vil kunne se teksten din vises i skriften du angir hvis de har den skriften installert på datamaskinen. Hvis ikke, vises standardskriftssiden – vanligvis Times New Roman -. Av den grunn anbefales det å bruke “websikre” fonter.

            Det kan hjelpe å inkludere så mange alternative skrifttyper som du kan. På denne måten kan du spesifisere andre skrifter i rekkefølge av betydning, selv om de ikke har hovedtypen. Dette gjøres ved bruk av komma.

            Tilbake til vårt eksempel:

            Vennligst vis denne teksten i Verdana-skriften først, eller Helvetica, eller Arial, eller Comic Sans ... i den rekkefølgen, hvis hovedfonten ikke er tilgjengelig

            Vi instruerte nettleseren om å vise teksten i Verdana. Hvis Verdana ikke er tilgjengelig, i stedet for å gå tilbake til standard Times New Romans, kan det vise Helvetica, eller Arial hvis Helvetica ikke er tilgjengelig eller Comic Sans hvis Arial ikke er tilgjengelig heller.

            Konklusjon

            Avslutningsvis er HTML mer komplisert enn det du har i denne guiden. Ikke gi opp håpet – hvis du kan forstå de grunnleggende konseptene i denne guiden, er du oppe til en god start. Det er som å kjenne ABC til et språk, og alt annet blir mye enklere.

            Hvis du gikk gjennom denne opplæringen med sikte på å lage et fantastisk nettsted, beklager vi å skuffe – det fungerer bare ikke slik. Dette er en grunnleggende HTML-opplæring. Det er her for å hjelpe deg med å utvikle et fundament du kan bygge på. Du kan være sikker på at det vil ta betydelig mer krefter – og mye utviklingstid ofte ved å bruke en kombinasjon av språk – for å lage et enestående nettsted.

            Med WordPress, som vi har behandlet i detalj i vår guide for å lage et nettsted, kan du ha et bemerkelsesverdig nettsted klart på få minutter.

            HTML-ressurser

            • Periodisk HTML – Dette viser alle HTML-tagger i form av en periodisk tabell, noe som gjør det enkelt å lære / bruke dem.
            • W3schools / Tagger – Liste over alle HTML-koder bestilt alfabetisk.
            • Mozilla / HTML tilskrevet – Liste over alle HTML-attributter som er bestilt alfabetisk.
            • HTML Cheat Sheet
            • HTML-fargekoder / fargenavn – Liste over 140 HTML fargenavn inkludert HEX-kode, RGB-verdi og HSL-verdi.

            Jeffrey Wilson Administrator
            Sorry! The Author has not filled his profile.
            follow me