programmering

17 enkle HTML-kodeeksempler du kan lære om 10 minutter

17 enkle HTML-kodeeksempler du kan lære om 10 minutter / programmering
pinte~~POS=TRUNC Hva skjer e-post

Selv om moderne nettsteder vanligvis bygges med brukervennlige grensesnitt, kan 10 måter å lage et lite og enkelt nettsted uten overkill. 10 måter å lage et lite og enkelt nettsted uten overkill WordPress kan være en overkill. Som disse andre gode tjenestene viser, er WordPress ikke det beste og slutter all nettstedsopprettelse. Hvis du vil ha enklere løsninger, er det et utvalg å velge mellom. Les mer, det er fortsatt godt å vite noen grunnleggende HTML. Hvis du kjenner de følgende 17 kodene (og de ekstra få som går med dem), kan du lage en grunnleggende nettside fra bunnen av eller justere koden som er opprettet av en app som WordPress Blogger vs Wordpress.com: En komplett sammenligning Blogger vs Wordpress.com: En komplett sammenligning De to ubestridte kongene i gratis blogging sfæren er Googles Blogger og innholdsadministrasjonssystemet, som er vertsbasert WordPress.com. Mens begge tilbudene tilbyr hva hver fritt tenkende demokrati-guzzling tankekanon ønsker - et sted å uttrykke seg - der ... Les mer .

Jeg har gitt eksempler for de fleste av kodene, men hvis du vil se dem i handling, last ned den koblede HTML-filen på slutten av artikkelen. Du kan spille med det i et tekstredigeringsprogram og laste det opp i en nettleser for å se hva dine endringer gjør.

1.

Du trenger denne taggen i begynnelsen av hvert HTML-dokument du lager. Det sikrer at en nettleser vet at den leser HTML, og at den forventer HTML5, den nyeste versjonen Hva er HTML5, og hvordan endrer den måten jeg bla gjennom? [MakeUseOf Forklarer] Hva er HTML5, og hvordan endrer den måten jeg bla gjennom? [MakeUseOf Forklarer] I løpet av de siste årene har du kanskje hørt begrepet HTML5 hver gang en gang. Uansett om du vet noe om webutvikling eller ikke, kan konseptet være litt nøysomt og forvirrende. Åpenbart, ... Les mer .

Selv om dette ikke egentlig er en HTML-kode, er det fortsatt en god å vite.

HTML kode eksempel
Bildekreditt: Yurich via Shutterstock

2.

Dette er en annen tagg som forteller en nettleser at den leser HTML. Hvorfor trenger vi begge? Hvem vet? Men det er en god ide å sette det i allikevel.

Og i slutten av dokumentet legger du til en stikkord.

3.

For grunnleggende sider, er tag vil inneholde tittelen din, og det handler om det. Men det er noen andre ting du kan inkludere, som vi vil gå over i et øyeblikk.

4. </h2><p>Som du kanskje forventer, definerer dette tittelen på siden din. Alt du trenger å gjøre er å sette tittelen i taggen og lukk den, slik som dette (jeg har også tatt med topptekstene):</p><pre><code><head> <title>Min nettside

Det er navnet som vil bli vist som fanens tittel når det åpnes i en nettleser.

html tittel tag

5.

I likhet med titteltaggen legges metadata i overskriftsområdet på siden din (denne metadata, i motsetning til metadata fra mobilenheter. Metadata - Informasjon om informasjonen Metadata - Informasjon om informasjonen Les mer, er ikke følsom). Metadata brukes hovedsakelig av søkemotorer, og er - som du kanskje forventer - informasjon om informasjonen på siden din. Det finnes en rekke forskjellige metafelter, men disse er noen av de mest brukte:

  • beskrivelse - En grunnleggende beskrivelse av siden din.
  • søkeord - Et utvalg av søkeord som gjelder for din side.
  • forfatter - Forfatteren av siden din.
  • view - En etikett som sikrer at siden din ser bra ut på alle enhetene.

Her er et eksempel som kan gjelde for denne siden:

De “view” tag skal alltid ha “bredde = enhetsbredde, initialskala = 1,0” som innholdet for å sikre at siden din vises godt på mobile og stasjonære enheter.

6.

Kroppen på nettsiden din - i utgangspunktet er alt annet enn tittelen satt inne i kroppsmerket. Det er så enkelt som det høres ut:

 Alt du vil ha vist på siden din.

7.

De

tag definerer nivå-ett-overskrifter på siden din.

definerer nivå-to headers,

nivå-tre, og så videre, ned til

. Som et eksempel er navnene på kodene i denne artikkelen nivå-to overskrifter.

Stor og viktig topptekst
 
Litt mindre stor topptekst
 
Sub-Header

Resultat:

Stor og viktig topptekst

Litt mindre stor topptekst

Sub-Header

Som du ser, blir de mindre på hvert nivå.

8.

Stykkelaggen starter et nytt avsnitt. Dette legger vanligvis inn to linjeskift.

Se for eksempel på pause mellom forrige linje og denne. Det er det a

tag vil gjøre.

Ditt første avsnitt.
 
Ditt andre avsnitt.

Resultat:

Ditt første avsnitt.

Ditt andre avsnitt.

Du kan også bruke CSS-stiler i avsnittet ditt, som dette:

20% større tekst

Resultat:

20% større tekst

For å lære hvordan du bruker CSS til å stile teksten din, sjekk ut disse HTML- og CSS-opplæringene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer .

9.

Linjepausetiketten legger inn en enkelt linjeskift:

Den første linjen.
 Den andre linjen (nær den første).

Resultat:

Den første linjen.
Den andre linjen (nær den første).

Merk: Du kan noen ganger se denne taggen skrevet som
eller
. Det gjør det samme (skråstrek gjør taggen lesbar i XHTML Lær å snakke "Internett": Din guide til xHTML Lær å snakke "Internett": Din guide til xHTML Velkommen til verden av XHTML - Extensible Hypertext Markup Language - en markup språk som gjør at noen kan lage websider med mange forskjellige funksjoner. Det er det primære språket på Internett. Les mer).

10.

Denne taggen definerer viktig tekst. Generelt betyr det at det blir fet. Det er imidlertid mulig å bruke CSS til å lage tekstvisning på annen måte.

Men du kan trygt bruke til fet skrift.

Svært viktige ting du vil si.

Resultat:

Svært viktige ting du vil si.

Hvis du er kjent med tagg for fet skrift, kan du fortsatt bruke den. Det er ingen garanti for at det vil fortsette å fungere i fremtidige versjoner av HTML, men for nå virker det.

11.

Som og , og er i slekt. De tag identifiserer fremhevet tekst, som generelt betyr at den vil bli kursivisert. Igjen, det er muligheten for at CSS vil gjøre fremhevet tekstvisning annerledes.

En understreket linje.

Resultat:

En understreket linje.

De tag fortsatt fungerer, men igjen, det er mulig at det vil bli avskrevet i fremtidige versjoner av HTML.

12.

De , eller anker, tagger lar deg lage lenker. En enkel lenke ser slik ut:

Gå til MakeUseOf i en ny kategori

Resultat:

Gå til MakeUseOf i en ny kategori

De “tittel” Attributtet skaper et verktøytips. Hold musen over lenken nedenfor for å se hva jeg mener:

Hold deg over denne

Resultat:

Hold deg over denne

1. 3.

Hvis du vil legge inn et bilde på siden din, må du bruke bildeetiketten. Den enkleste måten å bruke den på er å bare legge til kilden til bildet i “src” attributt, slik:

Resultat:

17 enkle HTML-kodeeksempler du kan lære om 10 minutter wp-content / uploads / 2016/02 / hdr-moderation.png” />

Det inkluderer bildet. Det er imidlertid en rekke andre attributter du vil like vil bruke, som “høyde,” “bredde,” og “alt.” Slik ser det ut:

Resultat:

17 enkle HTML-kodeeksempler du kan lære om 10 minutter wp-content / uploads / 2016/02 / hdr-moderation.png” alt =”navnet på bildet ditt” width =”320 "/>

Som du kanskje regner med, “høyde” og “bredde” attributter angir høyde og bredde på bildet. Generelt er det en god ide å bare sette en av dem så bildet skaleres riktig. Hvis du bruker begge, kan du ende opp med et strukket eller knust bilde.

De “alt” tag forteller nettleseren hvilken tekst som skal vises hvis bildet ikke kan vises, og det er en god ide å inkludere i et hvilket som helst bilde. Hvis noen har en spesielt langsom tilkobling 4 Grunner til at Wi-Fi er så sakte (og hvordan de kan løses) 4 Grunner til at Wi-Fi er så sakte (og hvordan du kan fikse dem) Lider av langsom Wi-Fi? Disse fire problemene kan senke nettverket ditt. Slik løser du dem for å få rask igjen. Les mer eller en gammel nettleser, de kan fortsatt få en ide om hva du har på siden din.

14.

    Den ordnede listelaggen lar deg lage en bestilt liste. Generelt betyr det at du får en nummerert liste. Hvert element i listen trenger en liste element-tag (

  1. ), slik at listen din ser slik ut:

       
    1. Første ting
      2.  
    2. Andre ting
      3.  
    3. Tredje ting
      4.

    Resultat:

    1. Første ting
    2. Andre ting
    3. Tredje ting

    I HTML5 kan du bruke

      å reversere rekkefølgen på tallene. Og du kan angi startverdien med startattributtet. De “type” attributt lar deg fortelle nettleseren hvilken type symbol som skal brukes til listepostene. Det kan settes til “1,” “EN,” “en,” “Jeg,” eller “Jeg,” angir listen som skal vises med det angitte symbolet.

      15.

        Den uordnede listen er mye enklere enn den bestilte motparten. Det er bare en punktliste.

           
        • Første gjenstand
          •  
        • Andre gjenstand
          •  
        • Tredje gjenstand
          •

        Resultat:

        • Første gjenstand
        • Andre gjenstand
        • Tredje gjenstand

        Uordnede lister har også “type” attributter, og du kan sette den til “plate,” “sirkel,” eller “torget.”

        16.

        Mens du bruker tabeller for formatering, er det frowned upon, er det mange ganger når du vil bruke rader og kolonner til å segmentere informasjon på siden din. Det er flere merker du må bruke for å få bord til å fungere. Ta en titt på dette eksemplet, og du vil se hva jeg mener:

        Første kolonne Andre kolonne
        Rad 1, kolonne 1 Rad 1, kolonne 2
        Rad 2, kolonne 1 Rad 2, kolonne 2
        Første kolonne Andre kolonne
        Rad 1, kolonne 1 Rad 1, kolonne 2

        Hver tag omgir en header (du kan noen ganger se disse innkapslet i en tag, så vel). setter av bordets kropp. De tag setter av en ny tabellrad, og hver tag identifiserer en celle i den raden.

        17.

        Når du citerer et annet nettsted eller en person, og du vil angi sitatet bortsett fra resten av dokumentet, vil blockquote-taggen gjøre det for deg. Alt du trenger å gjøre er å legge ved sitatet i åpne og lukke blockquote-koder:

        Jeg må ikke frykte. Frykt er tankedreperen. Frykt er den lille døden som gir total utslettelse. Jeg vil møte min frykt. Jeg vil tillate det å passere over meg og gjennom meg. Og når den har gått forbi, vil jeg vende det indre øyet for å se veien. Der frykten er gått, blir det ingenting. Bare jeg vil forbli.

        Resultat:

        Jeg må ikke frykte. Frykt er tankedreperen. Frykt er den lille døden som gir total utslettelse. Jeg vil møte min frykt. Jeg vil tillate det å passere over meg og gjennom meg. Og når den har gått forbi, vil jeg vende det indre øyet for å se veien. Der frykten er gått, blir det ingenting. Bare jeg vil forbli.

        Den nøyaktige formatering som brukes, kan avhenge av nettleseren du bruker eller CSS på nettstedet ditt. Men taggen forblir den samme.

        Gå frem og HTML

        Med disse 17 HTML-kodene (og noen få flere medarbeidere), bør du kunne lage en enkel nettside. For å se hvordan å sette dem alle sammen, kan du laste ned eksempels HTML-siden som jeg har opprettet. Du kan åpne den i nettleseren din for å se hvordan alt kommer sammen, eller i et tekstredigeringsprogram for å se nøyaktig hvordan koden fungerer.

        Bruker du regelmessig HTML? Hvilke andre tagger finner du at du vanligvis bruker? Del dine tips i kommentarene nedenfor!