Grunnleggende om html og css. HTML-språk for nybegynnere

Hei alle sammen!!! Jeg er veldig glad for at du bestemte deg for å erobre høydene av grunnleggende HTML og dette riktig valg. Tross alt, før du oppretter ditt første nettsted, må du vite det grunnleggende om HTML. Dessuten må du forholde deg til HTML-koding på et nettsted mer enn én gang. Jeg anbefaler på det sterkeste å sjekke ut HTML-veiledningene for nybegynnere på bloggen min, og jeg garanterer at etter å ha fullført dette kurset, vil du enkelt kunne lage en nettside eller til og med et nettsted selv.

La oss komme i gang! Først, la oss finne ut av det
HTML – (fra engelsk. H ypert ext M arkup L anguage) er et hypertekst-markeringsspråk. Den ble først utviklet av den britiske forskeren Tim Berners-Lee i 1991-1992. HTML var kun ment for å merke tekst, bilder og tabeller på nettsider. Nå kan programmeringsspråk som JavaScript og VBScript også settes inn i et HTML-dokument.

HTML er ikke et programmeringsspråk, det er kun ment for å merke tekstdokumenter.

For å lære HTML trenger du bare å ha en nettleser og standard notatblokk eller .
For å åpne Standard Notepad, gjør følgende på datamaskinen: “Start” => “Programmer” => “Tilbehør” => “Notikkblokk” .

Hvis du har hørt om programmer som gjør arbeidet ditt enklere skrive HTML kode ( Microsoft FrontPage, Adobe Dreamweaver), så anbefaler jeg ikke å bruke dem på sånn som det er nå opplæring. Skriv hånden i en standard notatbok eller i tekstredigerer Notepad++, og når du fullfører dette kurset vil du kunne bruke programmer for akselerasjon. Abonner på bloggoppdateringene mine og les hvordan du bruker Microsoft-programmer FrontPage, Adobe Dreamweaver.

For bedre forståelse har jeg utarbeidet et eksempel. Se nøye på bildet:

Forklaring.

1). Ethvert HTML-dokument begynner med denne linjen:

Med denne linjen forteller vi nettleseren at HTML-dokumentet vårt samsvarer med den internasjonale spesifikasjonen versjon 4.01. Takket være denne linjen vil siden din se lik ut.
Det er ikke nødvendig å huske denne linjen; HTML-dokumentet vil fungere uten den. Dette er bare slik at du er klar over hva det er.

2). og er begynnelsen og slutten av dokumentet.

3). og - hodet på dokumentet. Ytterligere servicemerker settes ofte inn her; en av disse taggene er . Du vil lære om andre servicemerker i videre leksjoner; på dette stadiet av opplæringen er denne informasjonen nok.

4). og - dokumenttittel.
Denne overskriften vil vises i nettleseren:

i søk er jeg indeks eller i Google.

5). og - hoveddelen av dokumentet.
Her er innholdet i dokumentet, for eksempel tekst, bilder, tabeller, musikk, filmer osv. Du vil lære mer om hvordan du setter inn musikk, tekst, bilder i brødteksten i dokumentet i de følgende leksjonene.

Merk:

Du vil ofte lese og høre ordet "tag".
Et merke er alt som er mellom parentesene< >. For eksempel: , , , ,
,

osv. - alle disse er tagger.
Tagger er ikke synlige når du ser på siden i en nettleser, men alt som ikke står i parentes vil vises i nettleseren når du viser.

Det er mange tagger og de har forskjellige formål.

Det er tagger som må lukkes. For eksempel,
åpne taggen

og sørg for å lukke taggen

Og det er enkeltmerker, for eksempel denne
.

En tag er en slags beholder som kan inneholde tekst, bilder og andre tagger...

○ Vær oppmerksom på riktig rekkefølge av åpnings- og lukkingsetiketter:

...

Taggen som vi åpnet først er stengt sist, den andre er nest siste osv.

○ Her er et eksempel på en feil sekvens av åpnings- og lukkingskoder. Med denne bestillingen kan det være feil på nettsiden:

...

Feilen var i og.
Vær forsiktig når du skriver kode.

Klar kode.
Slik ser den ferdige standard obligatoriske HTML-koden for en nettside ut.

Sidetittel Sidetekst, tabeller, bilder, musikk og video.

Ikke bli motløs hvis du forstår lite eller nesten ingenting av alt som er skrevet ovenfor. I den andre leksjonen blir det mer øving, og du vil kunne manuelt skrive alt selv og se hvordan HTML fungerer.

Fortsett til neste leksjon

HTML er hypertekst-markeringsspråket som gjorde Internett til det vi kjenner og elsker. Det er takket være dette fantastiske verktøyet at sidene ser vakre og moderne ut, og sikrer også brukervennlighet. HTML ordner ganske enkelt elementene på en nettside i et brukervennlig format. Arbeidet kan sammenlignes med det folk som MS Word eller OpenOffice gjør. De gjør en ansiktsløs masse bokstaver til et dokument som inneholder avsnitt, miniatyrbilde, kursiv, tabeller og til og med bilder. HTML-språket gjør omtrent det samme, med den eneste forskjellen at dokumentene vises i nettleseren, og mulighetene til dette verktøyet er mye bredere enn en tekstredigerer. Tagger brukes til markering - spesiallag, som beskriver strukturen til en nettside. De er omsluttet av vinkelparenteser - slik at nettleseren kan skille dem fra hoveddelen av teksten. Deretter skal vi dekke det grunnleggende om HTML for nybegynnere.

Visuelle redaktører

Nybegynnere som nettopp har begynt på veien til å lære HTML, starter ofte arbeidet med programmer som lar deg lage nettsider uten kunnskap. I dem kan du ganske enkelt ordne elementer på skjermen slik de vil bli vist i nettleseren. Det ser ut til at dette er kilden til evig nåde som lar deg bli kvitt flertallet av nettutviklere. Men ikke alt er så enkelt, siden visuelle redaktører har mange mangler som gjør det umulig å bruke dem i seriøse prosjekter.

Alle disse programmene lager mange unødvendige tagger som gjør sluttsiden uhåndterlig og suboptimal. Selvfølgelig i vår tid høyhastighets Internett Dette betyr mindre enn det pleide, men det er flere grunner til at et kortfattet og velskrevet nettsted er mer praktisk enn dets motstykke laget i en visuell editor. En nettside laget i et slikt program vil ikke bli godt behandlet søkeroboter, siden hver kilobyte med kode er viktig for dem, og tungvint og ulogisk kode med en haug vil neppe passe deres smak. I tillegg henger redaktører ofte etter tiden, blir irrelevante, og det er upraktisk å bruke ressurser på utviklingen, siden ingen profesjonelle bruker disse produktene. Derfor må alle som ønsker å jobbe i nettstedsutviklingsbransjen kunne det grunnleggende om HTML.

Tagger

Som nevnt ovenfor beskriver tagger strukturen til en nettside til nettleseren. De fleste av dem har en åpnings- og lukkelapp, men ikke alle. For eksempel ..., hvor det er innhold i stedet for prikker. Den første viser hvor taggen starter, og den andre lukker den. Det kan være andre sidemarkeringselementer inni; de kan legges inni hverandre som en hekkende dukke. Det er viktig å lukke tagger i tide slik at siden vises riktig.

Det er også enkeltbrikker som ikke trenger å lukkes. I dem er innholdet plassert inne, akkurat som det kan skrives for de fleste HTML-tagger, og setter egenskapene til elementet. Det er angitt i åpningstaggen og ser omtrent slik ut: attribute="...", hvor det i stedet for prikker er attributtverdien. Å kjenne til tagger er det første og mest viktig skrittå mestre HTML. Det grunnleggende i denne kunsten innebærer også å forstå strukturen til en nettside.

Dokumentstruktur

Hvert HTML-dokument har en tilsvarende utvidelse, for eksempel Index.html. På denne måten kan nettleseren forstå hva den har å gjøre med og vise siden riktig. Det er tilrådelig å lagre alle filene som brukes til å lage et nettsted i én katalog, noe som vil gjøre livet ditt mye enklere i fremtiden. Det grunnleggende i hypertekst-markeringsspråket HTML krever en klar forståelse av dokumentstrukturen. Det starter med en kode som forteller nettleseren HTML-versjon, som brukes i dette dokumentet. På dette øyeblikket Den femte versjonen av språket er gjeldende, så det er ikke nødvendig å finne opp noe her; du kan trygt sette inn taggen ovenfor på begynnelsen av en hvilken som helst side.

Så er det de viktigste parede strukturene som utgjør "skjelettet" på nettstedet. Den første taggen, der alle de andre er nestet, er .... Alt utenfor den gjenkjennes ikke av nettleseren som en nettside, så den åpner dokumentet og lukker det. Denne taggen kreves for alle dokumenter. Den inneholder også flere nødvendige tagger, som vil bli diskutert nedenfor.

Hode

Inne i ...-taggen er teknisk informasjon som ikke vil vises på siden, men som likevel er en viktig del av HTML-dokumentet. Grunnlaget for nettstedet er lagt på dette stedet; her velges kodingen og sidenavnet legges inn. Den er inne i en påkrevd tag.... Tittelen vises øverst i nettleseren, hvor du også kan plassere et lite ikon som karakteriserer innholdet på siden. Det anbefales å umiddelbart angi kodingen av dokumentet for riktig visning. Dette kan gjøres ved hjelp av taggen. Metakoder gir informasjon om strukturen på siden og er vanligvis plassert inne i hodet.

Link

Å kjenne det grunnleggende om HTML innebærer også å bruke cascading styling, eller css. De angir egenskapene til elementene som skal vises på siden. En moderne tilnærming til denne oppgaven innebærer å plassere egenskaper som farge, høyde og plassering av elementet ekstern fil for større bekvemmelighet. For å inkludere en css-fil, bruk taggen. I sin ferdige form ser den omtrent slik ut: der href indikerer plasseringen av filen, og type indikerer typen.

Kropp

Det er i denne delen av HTML-dokumentet at synlig del sider. Alt som gjøres inne i "kroppen" vil vises av nettleseren. I brukt stor mengde HTML-tagger. Det grunnleggende er tekstformatering, arbeid med lenker og grunnleggende verktøy for å strukturere en nettside. For å komme i gang med å jobbe i HTML trenger du bare å kjenne til de grunnleggende kodene og kunne bruke dem. Nedenfor er de mest populære:

• - brukes til å markere en understreng som vil være underlagt en spesiell stil beskrevet i css;
• - oppretter en lenke på en nettside; overgangsadressen er spesifisert av href-attributtet;
• - en av de mest populære merkene i vår tid; alle som bestemmer seg for å lære det grunnleggende om HTMLl-språket, bør være spesielt oppmerksomme på det, siden dette er et blokkelement, på grunnlag av hvilket brorparten av moderne nettsteder er laget (parametere for blokker er satt i css og andre blokker kan være plassert inne i denne taggen);

• Velger et avsnitt fra teksten; innholdet i avsnittet er mellom åpnings- og avslutningstaggen;

• - en nummerert liste hvis elementer er omsluttet av en paret tag
• - en punktliste, der, akkurat som i en nummerert liste, elementer er angitt med en tag
  • - - dokumentoverskrifter (nummeret indikerer overskriftsnivået, det vil si hovedoverskriften, og påfølgende alternativer er underoverskriftene; forresten, nivåoverskrifter er nesten umulig å finne på Internett), det er også viktig å huske at det kan bare være én overskrift på en side;
  • - miniatyrbilde;
  • - kursiv;
  • - sette inn et bilde på et nettsted (dette er en enkelt tag, det krever ikke en avsluttende tag, men det må inkludere alt-attributtet, som spesifiserer teksten til bildet);
  • - sette inn video på en nettside;
  • - en kode som setter inn en lydfil i dokumentet.

  Dette er ikke alle kodene du trenger for å lage din egen nettside, men de er nok til å legge grunnleggende HTML for nybegynnere.

  CSS

  Utviklingen av HTML-språket har ført til at hver tag har fått mange attributter, og kravene til utseendet til nettsider har økt betydelig. Koden ble tungvint og upraktisk, det var vanskelig å lese den, enn si tilpasse eller endre den. I tillegg, hvis nettstedet ditt har ti sider med mange overskrifter merket med grønt, og du plutselig ønsker å gjøre dem røde, må du jobbe hardt og endre hver enkelt manuelt. Med bruken av Cascading Style Sheets har denne prosessen blitt enkel og logisk, og HTML-koden har blitt mye mer lesbar.

  

  Bruker CSS

  For å lage nettsider må du kjenne til det grunnleggende om HTML og CSS, siden det nå ikke er noe å gjøre på dette området uten kunnskap om gjennomgripende stilark. De angir attributter for ethvert element som gjelder for hele dokumentet. På denne måten kan du stille inn fargen for alle elementene samtidig

  Eller ved å skrive bare én regel. Gitt moderne krav til utseendet til nettsider, er bruk av gjennomgripende stilark obligatorisk.

  For å koble en css-fil til et dokument, er det en link-tag. Prinsippet for bruken ble beskrevet litt høyere, men det er ikke det eneste alternativet for å kombinere alle stiler på ett sted. Det er også en tag, som er plassert i "hodet" av dokumentet og lar deg skrive stiler uten å bruke CSS-filer. Det er ikke nødvendig å bruke den ene eller den andre metoden. De kan med hell kombineres for å oppnå det beste resultatet. For å lage en fil med stilark, må du lage en fil med filtypen .css, for eksempel Styles.css.

  JavaScript

  Ofte, en person som bestemmer seg for å begynne å innse at verktøyene som HTML tilbyr ikke er nok for oppgavene hans. Det grunnleggende vil tillate deg å lage en vakker side, men hva om du plutselig trenger å gjøre den interaktiv? For disse formålene er det en unik programmering som samhandler perfekt med HTML. Det kalles JavaScript, da det ble tenkt som den yngre broren til det populære Java-språket. I dag har disse språkene fått betydelige forskjeller, og gapet mellom dem bare vokser.

  

  JavaScript kan utvide funksjonene til HTML ved å la deg lage og redigere tagger. Ved å bruke dette fantastiske verktøyet kan du også jobbe med Cokie, laste ned data fra serveren uten å laste siden på nytt og gjøre nettstedet mer interaktivt enn HTML-funksjonene tillater. Dette språket har også begrensninger knyttet til sikkerhet. Hvis JavaScript ikke brukes på serversiden, vil det bli utført under forhold som begrenser mulighetene, slik at angripere ikke kan bruke ondsinnet kode på noen datamaskin.

  Redaktører

  Grunnleggende HTML for en nybegynner krever kunnskap om de mest praktiske og praktiske programmene for å lage nettsider. Som skrevet ovenfor er visuelle redaktører som Dreamweaver og lignende ikke egnet for disse formålene. Så, bør du skrive tagger i en vanlig notisblokk? Dette alternativet er også tvilsomt, siden en standard notisblokk ikke har noen spesielle layoutverktøy. Notepad++ kan håndtere denne oppgaven ganske bra. Den store fordelen med dette produktet er at det er åpen kildekode og distribueres helt gratis. Den har praktisk syntaksutheving og automatisk lukking av tagger. Notepad++ gir også et bredt utvalg av grensesnittspråk, og funksjonene utvides enkelt med en rekke tillegg.

  

  Sublime Text 3 er et program som ligner på Notepad++, men tilgjengelig for en avgift. Det var hun som vant hjertene til de fleste utviklere. Sublime Text 3 er perfekt for JavaScript, CSS og HTML. Du må lære det grunnleggende om å jobbe med det selv, men det er verdt det. Den inneholder virkelig ubegrensede muligheter for finjustering, som lar deg skreddersy programmet til dine behov så mye som mulig.

  Grunnleggende HTML og CSS for nybegynnere

  Som du kan se, er det ikke så vanskelig å lære kunsten å lage nettsider som det ser ut ved første øyekast. Bare noen få måneder med trening vil forvandle deg fra en engstelig bruker til en nybegynner. Å lære layout er mye enklere enn å mestre et programmeringsspråk eller Linux. Faktisk er det ikke så mange HTML-tagger; det er viktig å forstå det praktiske aspektet ved bruken av dem.

  

  Ferdighet i å jobbe i Adobe Photoshop vil ikke være overflødig i denne saken. Dette programmet lar deg jobbe med fotografier, bilder og andre grafiske elementer på en nettside. For øyeblikket er det Photoshop som best takler slike oppgaver, det har få konkurrenter. For de som ikke liker dette Adobe-produktet, finnes det Lightroom, GIMP, Illustrator og andre programmer med lignende funksjoner.

  Hva gir kunnskap om HTML?

  Ferdigheter til å lage nettsider er svært relevante i dag, ettersom Internett utvides med stormskritt. Hver bedrift, selv den minste butikken, verksteder og idrettslag - alle ønsker å ha sin egen nettside. Og selvfølgelig, for dette trenger de en utvikler som kan CSS og HTML. Det grunnleggende er enkelt å mestre, deretter er det et spørsmål om praksis. Siden layoutteknologier stadig utvikler seg, vil front-end utviklere alltid være etterspurt. Alle som bestemmer seg for å vie seg til denne interessante industrien vil aldri stå uten arbeid.

  HTML står for H yper T ext M arkup L anguage, dvs. Hypertext Markup Language er den grunnleggende byggesteinen til nettsider, som brukes til å lage og visuelt presentere nettsider.

  HTML legger til markup til ren tekst. Hypertekst inneholder ulike lenker der nettsider er koblet til hverandre. Med HTML kan hvem som helst lage både statiske og dynamiske nettsider. HTML er et språk som beskriver strukturen og semantikken til innholdet i et nettdokument. Innholdet på en nettside er markert med tagger som representerer HTML-elementer. Eksempler på slike elementer er, , og så videre. Disse elementene utgjør byggesteinene for ethvert nettsted.

  HTML ble oppfunnet i 1991 av forskeren Tim Berners-Lee, og var opprinnelig ment for utveksling av dokumenter mellom forskere ved forskjellige universiteter. Med sin oppfinnelse la Tim Burns-Lee grunnlaget for det moderne Internett.

  Det finnes flere versjoner av HTML. Språkstandarden oppdateres og suppleres fortløpende, og som følge av dette kommer en ny versjon av HTML nesten hvert år. Versjon "HTML 2.0" var den første standard HTML-spesifikasjonen, som ble publisert i 1995. HTML 4.01 er hovedversjonen av HTML som ble publisert på slutten av 1999 og er mye brukt i dag. I dag er den mest populære versjonen HTML-5, som er en utvidelse av HTML 4.01, publisert i 2012.

  Et HTML-dokument eller en nettside er et enkelt tekstdokument som inneholder tagger (som igjen er ren tekst omsluttet av vinkelparenteser). En nettside kan skrives enten i et vanlig tekstredigeringsprogram (Notepad, WordPad, Word, etc.) eller i en spesialisert en med kodeutheving (Notepad++, Sublime Text, etc.). HTML-dokumenter lagres som filer med filtypen .htm eller .html.

  Netteksempler i hver leksjon

  Når vi presenterer materialet, vil hver leksjon gi eksempler som vil hjelpe deg å forstå hver kode i detalj og, gjennom praksis, nyte læring. Med vår online HTML-editor kan du redigere et HTML-dokument, og deretter klikke på den oransje "Kjør"-knappen i redigeringsprogrammet, som er plassert over venstre redigeringsvindu, for å se resultatet. Hvis du bruker en spesialisert HTML-editor, kan du kopiere eksemplet og se resultatene av arbeidet ditt i nettleseren som er installert på datamaskinen din.

  Eksempel HTML: Prøv det selv
  
  
  Side tittel
  
  Dette er tittelen
  

  Dette er et avsnitt.

  
  
  Nettbaserte HTML-eksempler

  HTML-opplæringen gir deg mer enn 100 netteksempler som vil hjelpe deg med å mestre markup-språket. Bedre å se én gang enn å høre hundre ganger! Teori pluss praksis er nøkkelen til din suksess med å mestre HTML.

  Velkommen til sidene på bloggen min. HTML er et enkelt markup-språk som brukes til å lage nettsider. Jeg sa det var enkelt slik at du ikke ville bli skremt av å lære det. HTML-språket er rett og slett ideelt for nybegynnere - det er mye vanskeligere å umiddelbart mestre et programmeringsspråk fra bunnen av, men html er faktisk mye enklere.

  I denne artikkelen vil jeg fortelle deg hvordan du lærer dette språket raskest og effektivt, slik at du kan det perfekt innen en måned eller to. Tror du det er umulig? jeg begynte lære html i slutten av mars. I slutten av mai kjente jeg allerede til 90 % av taggene som trengs for å fungere uten problemer.

  Hvordan lære et språk gratis?

  Selvfølgelig, for den raskeste læringen, bør du finne flere nyttige nettsteder. For det første trenger du html-referanse. Selv erfarne programmerere bruker det, fordi det rett og slett er umulig å holde dusinvis av tagger og deres attributter i hodet.

  Fra oppslagsbøkene kan jeg anbefale deg - htmlbook. Dette er en veldig kul side som samler alle taggene og viser resultatet av arbeidet deres med Detaljert beskrivelse. Men dette er bare en guide ekstra verktøy, den største effekten kan oppnås med ekte øvelse.

  Interaktive kurs

  Og her snakker jeg om interaktive kurs. Dette er muligheten til å skrive kode og umiddelbart se hvordan den vises. I løpet av kursene vil du få oppgaver. Først enkle, for eksempel å gjøre teksten om til en tittel eller lage en tabell. Da er det vanskeligere. Etter hvert vil du få en forståelse av hva du kan gjøre med ved hjelp av HTML. Hvis du tror at du må betale for dette, tar du feil.

  er en fantastisk side med kurs i html og css. De første 16-18 kursene er gratis! Hvis du vil fortsette studiene og få tilgang til betalte, må du betale 300 rubler per måned eller 1800 per år. Personlig ga jeg 300 rubler, jeg fullførte alt på en måned betalte kurs og fikk mye utbytte av det.

  Viktigheten av poster

  Et annet råd fra meg – skriv det ned! Skriv ned all informasjon som er ny og viktig for deg. Uten å skrive det ned risikerer du å ikke beholde den nødvendige kunnskapen i minnet. Personlig har jeg tre generelle notatbøker i hyllen min, nesten helt fylt med skrift, og fra tid til annen ser jeg på dem når jeg glemmer den eller den eiendommen.

  Parallellstudie av html og css

  HTML er bare én nettteknologi som bidrar til å skape strukturen og layouten til en nettside. CSS er i sin helhet ansvarlig for design i utvikling av nettsider. Disse språkene må læres samtidig fordi de samhandler med hverandre.
  

  Selvstendig praksis

  Når du har fått litt kunnskap, kan du øve på egen hånd. Hvordan gjøre det? Prøv å legge ut en artikkel med bilder, en tabell, en nestet liste, et enkelt sideoppsett med to kolonner eller noe annet. Du må øve deg fordi det er den eneste måten å raskt innarbeide en forståelse av hvordan ting fungerer i hjernen din. Det beste er selvfølgelig å finne deg en lærer i denne saken, men mest sannsynlig må du betale for dette.

  Leksjoner fra webformyself-teamet

  Webformyself er en fantastisk Internett-portal som gir massevis av informasjon om nettstedbygging. Du finner mye på nettsiden deres gratis artikler på HTML, CSS og nettsidelayout, men de ga også ut betalte videoopplæringer, som har som formål å formidle nyttig kunnskap til deg så raskt som mulig.

  På slutten av dagen bør du ha en grunn til hvorfor du lærer disse nettteknologiene. Dette gjøres vanligvis for å lære å lage nettstedsoppsett selv. Hvis du også har dette målet, vil et utmerket alternativ for deg være å kjøpe tilgang til premiumtimer på webformyself.com. Som et resultat kan du ikke bare få tilgang til leksjoner om HTML og CSS, men også mange andre. For eksempel JavaScript og WordPress.

  Det er nyttige leksjoner, Jeg vil også merke meg muligheten til å lage min første layout ved hjelp av leksjoner. Dette er veldig viktig fordi du vil motta god trening, hvoretter du vil kunne bli bedre på det selv, og prøve å lage andre oppsett for nettsteder du finner på Internett.

  Hvor lang tid tar det å lære språk?

  I gjennomsnitt kan HTML og CSS læres veldig raskt, med riktig tilnærming. For eksempel tok det meg flere måneder. Hvis du vet hvor du kan hente kunnskap, kan læringsprosessen fremskyndes flere ganger.

  Gode ​​sider med nyttige materialer Jeg ga det til deg - så er det opp til deg. I prinsippet er ressursene ovenfor de beste på Internett. For eksempel har mer enn hundre tusen mennesker fullført kurs fra Htmlacademy, og mer enn 87 tusen mennesker har abonnert på Webformyself-oppdateringer.

  HTML Basics inneholder de grunnleggende reglene HTML-språk, beskrivelse av strukturen til en HTML-side, relasjoner i strukturen til et HTML-dokument mellom HTML-elementer.

  Et HTML-dokument er et vanlig dokument Tekstdokument, kan opprettes både i en vanlig tekstredigerer (Notepad) og i en spesialisert med kodeutheving (Notepad++, Visuelt studio Kode osv.). Et HTML-dokument har en .html-utvidelse.

  Et HTML-dokument består av et tre med HTML-elementer og tekst. Hvert element er identifisert i kildedokumentet med en start- (åpning) og en slutt-tag (med sjeldne unntak).

  Start-taggen viser hvor elementet begynner, slutt-taggen viser hvor det slutter. Den avsluttende taggen dannes ved å legge til en skråstrek / foran tagnavnet: .... Mellom start- og avslutningstaggen er innholdet i taggen – innholdet.

  Enkeltkoder kan ikke lagre innhold direkte; det skrives som en attributtverdi, for eksempel vil en tag lage en knapp med teksten Button inni.

  Tagger kan være nestet inne i hverandre, for eksempel

  Tekst

  . Når du investerer, bør du følge rekkefølgen de lukkes i («matryoshka»-prinsippet), for eksempel vil følgende oppføring være feil:

  Tekst

  .

  HTML-elementer kan ha attributter (globale, brukt på alle HTML-elementer og deres egne). Attributter skrives i åpningstaggen til elementet og inneholder et navn og en verdi, spesifisert i formatattributtet name="value" . Attributter lar deg endre egenskapene og virkemåten til elementet de er satt for.

  Hvert element kan tildeles flere klasseverdier og kun én id-verdi. Flere klasseverdier er skrevet atskilt med et mellomrom, . Klasse- og id-verdiene må kun bestå av bokstaver, tall, bindestreker og understreker og må kun begynne med bokstaver eller tall.

  Nettleseren viser (tolker) HTML-dokumentet, bygger dets struktur (DOM) og viser det i samsvar med instruksjonene som er inkludert i denne filen (stilark, skript). Hvis markeringen er riktig, vil nettleservinduet vise en HTML-side som inneholder HTML-elementer - overskrifter, tabeller, bilder osv.

  Tolkningsprosessen (parsing) begynner før nettsiden er fullstendig lastet inn i nettleseren. Nettlesere behandler HTML-dokumenter sekvensielt, fra begynnelsen, mens de behandler CSS og relaterer stilark til sideelementer.

  Et HTML-dokument består av to deler - overskriften - mellom kodene ... og innholdsdelen - mellom kodene ....

  Nettsidestruktur 1. HTML-dokumentstruktur

  HTML følger reglene i dokumenttypeerklæringsfilen (Document Type Definition, eller DTD). En DTD er et XML-dokument som definerer hvilke tagger, attributter og deres verdier som er gyldige for en bestemt HTML-type. Hver versjon av HTML har sin egen DTD.

  DOCTYPE er ansvarlig for korrekt visning av en nettside av nettleseren. DOCTYPE spesifiserer ikke bare HTML-versjonen (f.eks. html), men også den tilsvarende DTD-filen på Internett.

  ...

  Elementene inne i taggen danner et dokumenttre, det såkalte objektmodell dokument, DOM (dokumentobjektmodell). I dette tilfellet er elementet rotelementet.

  
  Ris. 1. Den enkleste strukturen nettsider

  For å forstå samspillet mellom nettsideelementer, er det nødvendig å vurdere de såkalte "familieforholdene" mellom elementene. Forhold mellom flere nestede elementer er klassifisert som foreldre, barn og søster.

  En stamfar er et element som inneholder andre elementer. I figur 1 er stamfaren for alle elementene . Samtidig er elementet stamfaren til alle taggene det inneholder: ,

  , , etc.

  En etterkommer er et element som ligger innenfor en eller flere elementtyper. For eksempel er en etterkommer av , og elementet

  Er en etterkommer av både og .

  Overordnet element - et element som er relatert til andre elementer med mer enn ett lavt nivå, og plassert på treet over dem. I figur 1 og . stikkord

  Er forelder kun til .

  Barneelement- et element direkte underordnet et annet element på et høyere nivå. I figur 1 er det bare elementer, ,

  Og er barn av .

  Et søsterelement er et element som har et felles overordnet element med det aktuelle, de såkalte elementene på samme nivå. I figur 1 og er elementer på samme nivå, samt elementer , og

  De er søstre til hverandre.

  1.1. Element 1.2. Element

  Seksjon ... inneholder teknisk informasjon om siden: tittel, beskrivelse, nøkkelord for søkemotorer, koding osv. Informasjonen du skriver inn der vises ikke i nettleservinduet, men den inneholder informasjon som forteller nettleseren hvordan siden skal behandles.

  1.2.1. Element

  Den nødvendige seksjonskoden er . Teksten plassert inne i denne taggen vises i tittellinjen til nettleseren. Tittelen bør ikke være mer enn 60 tegn lang for å passe helt inn i tittelen. Tittelteksten skal inneholde så mye som mulig Full beskrivelse innhold på nettsiden.

  1.2.2. Element

  En valgfri seksjonskode er en enkelt kode. Med dens hjelp kan du angi en beskrivelse av sideinnholdet og nøkkelord for søkemotorer, forfatteren av HTML-dokumentet og andre metadataegenskaper. Et element kan inneholde flere elementer fordi de har forskjellig informasjon avhengig av attributtene som brukes.

  Beskrivelsen av sidens innhold og nøkkelord kan spesifiseres samtidig på flere språk, for eksempel på russisk og engelsk:

  Ved å bruke en kode kan du blokkere eller tillate indeksering av en nettside av søkemotorer:

  For å laste siden automatisk på nytt etter en spesifisert tidsperiode, må du bruke oppdateringsverdien:

  Siden vil bli lastet inn på nytt etter 30 sekunder. For å omdirigere den besøkende til en annen side, må du spesifisere URL-en i url-parameter:

  Tabell 2. Tag-attributter Egenskap

  tegnsett	Angir tegnkodingen for gjeldende HTML-dokument:
  innhold	Inneholder fri tekst, som spesifiserer verdien knyttet til http-equiv eller name-attributtet, avhengig av verdien.
  http-ekv	Kontrollerer nettleserhandlinger på en gitt nettside (tilsvarer HTTP-overskrifter). Når du gjengir siden, vil nettleseren følge instruksjonene som er spesifisert i attributtet: default-style angir den foretrukne stilen som skal brukes på siden. Content-attributtet må inneholde ID-en til elementet som refererer til tabellen CSS-stiler, eller identifikatoren til elementet som inneholder stilarket. refresh indikerer tiden i sekunder før siden lastes på nytt eller tiden før omdirigering til en annen side hvis innholdsattributtet inneholder linjen "url=page_address" etter tiden. Automatisk omstart sider etter en spesifisert tidsperiode, i i dette eksemplet, etter 30 sekunder: Hvis du umiddelbart trenger å overføre den besøkende til en annen side, kan du spesifisere URL-en i url-parameteren:
  Navn	Tilknyttet verdien i innholdsattributtet. Bør ikke brukes hvis elementet allerede har http-equiv , charset eller itemprop-attributtene satt. applikasjonsnavn angir navnet på nettapplikasjonen som brukes på siden. forfatter angir navnet på dokumentets forfatter i fritt format. beskrivelse definerer Kort beskrivelse til sideinnholdet, for eksempel: generator spesifiserer en av pakkene programvare, brukes til å lage et dokument, for eksempel: . nøkkelord inneholder en liste søkeord, atskilt med komma, som tilsvarer sideinnholdet, for eksempel: . Navneattributtet kan også ta følgende verdier fra den utvidede spesifikasjonen, for eksempel skaper, googlebot, publisher, roboter, slurp, viewport, selv om ingen av disse har blitt offisielt tatt i bruk ennå.

  1.2.3. Element

  Inne i dette elementet settes stiler som brukes på siden. CSS brukes til å sette stiler i et HTML-dokument. Det kan være flere slike elementer på en side.

  Inne i dette elementet kan du skrive formateringskode for både selve nettsideelementene og hele nettsiden.

  .paper ( bredde: 200px; høyde: 300px; bakgrunnsfarge: #ef4444; farge: #666666; )

  For å koble en gitt stil til et element, må du tilordne det riktige navnet til elementet ved å bruke attributtet class (eller id):

  ...

  CSS-kode kan bygges inn direkte i markup-elementet som verdien av stilattributtet, for eksempel:

  1.2.4. Element

  Du kan også angi stiler for et dokument ved å bruke en annen metode - skriv dem inn egen fil med en .css-utvidelse, for eksempel style.css .

  Det er to måter å koble en fil med stiler til en nettside:
  via @import url-direktivet

  @import url(style.css);

  ved å bruke elementet. Elementet krever ikke en avsluttende tag. Denne gjenstanden definerer forholdet mellom nåværende side og andre dokumenter. Det kan være flere slike elementer på en side. Oppføringen vil se slik ut:

  Tabell 4. Tag-attributter Attributtbeskrivelse, akseptert verdi

  kryssopprinnelse	Angir om CORS (en nettleserteknologi som lar en nettside få tilgang til ressurser fra et annet domene) skal brukes når du henter et bilde fra et nettsted. anonym – nettleseren legger automatisk til en Origin-overskrift til en forespørsel på tvers av domener, som inneholder navnet på domenet som forespørselen ble sendt fra. Hvis serveren ikke svarer med CORS-overskriften Access-Control-Allow-Origin: * (eller domenenavnet i stedet for en stjerne), vil innlasting av bildet bli blokkert. use-credentials - Hvis serveren ikke gir legitimasjon ved hjelp av Access-Control-Allow-Credentials: true , vil bildelasting bli blokkert.
  href	Hovedattributtet til taggen, verdien er banen til filen med stiler.
  hreflang	Bestemmer språket for teksten i det refererte dokumentet.
  media	Angir typen enhet som koblingsressursen skal brukes på.
  nonce	En tilfeldig generert strengvariabel på serveren som setter regler for bruk av innebygde stiler for å beskytte innhold. Attributtverdien er en tekststreng.
  rel	Attributtet definerer forholdet mellom gjeldende dokument og dokumentet det refereres til. alternativ - en lenke til det samme dokumentet, men i et annet format (for eksempel sider for utskrift, oversettelse, speiling, feed i RSS- eller Atom-format), . arkiver - indikerer at det koblede dokumentet er av historisk interesse. Linken kan peke til en samling av poster, dokumenter eller annet materiale. forfatterkobling til en side om forfatteren av dokumentet eller til en side med forfatterens kontaktinformasjon. bokmerke en referanse til artikkelens nærmeste stamfar som er lenken, eller til den delen av artikkelen som er mest relatert til elementet hvis det ikke er noen stamfar. ekstern brukes til å indikere at siden det lenkes til ikke er en del av denne siden. spesifiserer først en kobling som peker til det første dokumentet i en sekvens av dokumenter. hjelpekobling til et hjelpedokument. ikonet angir banen til ikonet som skal brukes for gjeldende dokument. siste indikerer en lenke som fører til siste dokument i dokumentrekkefølgen. lisens En lenke til opphavsrettsinformasjonen for et dokument. neste indikerer at dette dokumentet er en del av en serie og at lenken går til neste dokument i den serien. nofollow indikerer at lenken ikke er godkjent av sidens forfatter eller at lenken er av kommersiell karakter. noreferrer indikerer at klientforespørselhodet som inneholder url-en til forespørselskilden ikke skal sendes når du følger lenken. pingback spesifiserer adressen til pingback-serveren, som lar bloggen automatisk varsle nettsteder som lenker til den. prefetch spesifiserer at den refererte filen skal bufres på forhånd. prev indikerer at dette dokumentet er en del av en serie og at lenken er til et tidligere dokument i den serien. søk indikerer at det refererte dokumentet inneholder et grensesnitt for søk og relaterte ressurser. sidefelt indikerer at det koblede dokumentet vil vises i ekstra nettleserkontekst, hvis mulig, og noen nettlesere, når du klikker på en hyperkobling, åpner et vindu for å legge til koblingen i bokmerkelinjen. stilark er en lenke til en ekstern fil som skal brukes som et stilark for dette dokumentet. koden indikerer at den hyperlenkede koden gjelder for dette dokumentet. opp indikerer at siden er en del hierarkisk struktur, og at hyperkoblingen fører til mer høy level ressurs i strukturen.
  størrelser	Angir størrelsen på ikonene for visuell visning. Størrelser-attributtet brukes bare sammen med rel="icon" og kan ha følgende verdier: widths-height - definerer en liste over størrelser atskilt med mellomrom, hver størrelse må være i formatet - widths-height (ikondimensjoner er spesifisert i piksler), for eksempel: ; hvilken som helst - ikonet kan skaleres til hvilken som helst størrelse.
  tittel	Definerer tittelen på en lenke eller navnet på et sett med alternative stilark. Attributtverdien er tekst.
  type	Angir MIME-typen til dokumentet det refereres til. I i dette tilfellet den tar verdien "text/css" .

  1.2.5. Element Tabell 5. Tag-attributter Attributtbeskrivelse, akseptert verdi

  asynkron	Attributtet indikerer at skriptet vil kjøre asynkront med resten av siden (skriptet vil begynne å kjøre samtidig som siden lastes).
  tegnsett	Definerer tegnkoding
  kryssopprinnelse	Bestemmer om CORS skal brukes ved lasting av eksterne skript (ved å bruke src-attributtet). anonym – før du laster skriptet inn i en forespørsel på tvers av domener, legger nettleseren automatisk til Origin-headeren, uten å sende tilgangsparametere (informasjonskapsel, X.509-sertifikat, pålogging/passord for grunnleggende autentisering via HTTP). Hvis serversvaret ikke inneholder Access-Control-Allow-Origin: domenenavn-overskriften, vil ikke skriptet bli lastet. brukslegitimasjon — før du laster skriptet inn i en forespørsel på tvers av domener, legger nettleseren automatisk til en Origin-header som indikerer tilgangsparametere (informasjonskapsel, SSL-sertifikat eller pålogging/passord-par). Hvis serversvaret ikke inneholder Access-Control-Allow-Credentials: true-overskriften, vil ikke skriptet bli lastet.
  utsette	Tolkning av skript er forsinket til dokumentet er gjengitt på brukerens enhet.
  nonce	Gir sikkerhet ved å beskytte mot skriptangrep på tvers av nettsteder (XSS, kryss området skripting). Angir regler for bruk av innebygde skript ved bruk av nonce-verdier og hashes. Under sidegjengivelse beregner nettleseren hashes for hvert innebygde skript og sammenligner dem med de som er oppført i CSP. Nedlastinger fra ressurser som ikke er inkludert i "hvitelisten" er blokkert.
  src	Indikerer plasseringen til filen med skriptet; attributtverdien er url-en til filen som inneholder JavaScript-programmet.
  type	Brukes til å deklarere skriptspråket som brukes til å komponere innholdet i taggen.

  1.3. Element

  Denne delen inneholder alt innholdet i dokumentet. Tilgjengelig for elementet.

  Tabell 5. Tag-attributter Attributtbeskrivelse, akseptert verdi

  på ettertrykk	En hendelse som utløses etter at en side er sendt til utskrift eller etter at utskriftsvinduet er lukket.
  ubeforuttrykk	En hendelse som utløses før en side sendes til utskrift.
  ubeforutlastning	Hendelsen utløses når den besøkende starter en overgang til en annen side eller klikker "lukk vindu". Lar deg vise en melding i bekreftelsesdialogen for å fortelle brukeren om de vil forbli eller forlate gjeldende side.
  påhashchange	Hendelsen utløses når hash-delen av URL-en endres, for eksempel når brukeren går fra example.domain/test.aspx#page1 til example.domain/test.aspx#page2 .
  en melding	En hendelse oppstår når en melding mottas gjennom en hendelseskilde.
  frakoblet	Hendelsen utløses av nettleseren når nettleseren fastslår at Internett-tilkoblingen er brutt.
  på nett	Hendelsen utløses av nettleseren når Internett-tilkoblingen er gjenopprettet.
  onpagehide	Hendelsen oppstår når brukeren forlater siden gjennom navigering, for eksempel ved å klikke på en lenke, oppdatere siden, fylle ut et skjema osv.
  onpageshow	Hendelsen oppstår når brukeren navigerer til nettsiden, etter onload-hendelsen.
  på avlastning	Hendelsen utløses hvis siden ikke lastes av en eller annen grunn, eller når nettleservinduet lukkes.