Struktur av HTML-dokumentet: hovedetiketter, eksempel
HTML er språket for oppmåling. Mange anser det som programmering, men det er det ikke. I HTML er det ingen variabler, beregninger, arrayer eller andre elementer som er tilstede i hvilket som helst programmeringsspråk.
Ved hjelp av HTML, kan utvikleren bare oppretteutseendet til nettstedet. Det er viktig å forstå at det ikke finnes noe nettsted uten oppslag. HTML er grunnlaget for å lage websider. Resten av funksjonell er lagt til av forskjellige programmeringsspråk.
Opprette et html-dokument
Lag en enkel nettside i noenredaktøren. Selv "Notisblokk" vil gjøre. Det anbefales at en nybegynnerutvikler bruker andre redaktører som har autosubstitusjonsfunksjoner og andre meldinger. Takket være dette kan du opprette ferdige bord, linker, bilder og andre elementer. Og i "Notisblokk" må hvert brev skrives manuelt.
Som regel brukes "Notisblokk" bare i detilfeller der det ikke finnes andre verktøy tilgjengelig. Først blir et tekstdokument opprettet, og deretter lagret i HTML-format. Alle sidene på nettstedet må ha html-utvidelsen.
HTML-språket er hierarkisk. Det vil si at det er en spesiell struktur for html-dokumentet. Hva er det La oss vurdere nedenfor for klarhet.
Struktur av HTML-dokumentet. eksempel
Strukturen er alltid den samme. Hvis du vil endre noe, vil nettleseren ikke kunne behandle den. Som et resultat vil du ikke få det du hadde tenkt på.
Bildet over viser strukturen til noenhtml-fil. Det første elementet angir typen fil. Denne taggen er spesifisert en gang. Hvis du bruker spesielle redaktører, vil hele strukturen bli opprettet automatisk. Du må justere standardverdiene.
Html-dokumentets struktur er hovedtemaene:
- <Html>
- <Head>
- <Body>
Av disse tre kodene er skjelettet til hele nettstedet. Vær oppmerksom på bildet. Alle disse kodene har en lukkekode med et "/" tegn. Hvis du skriver for hånd, bli vant til å sette begge taggene på en gang - åpne og lukke.
Det ble sagt ovenfor at sidene på nettsteder harutvidelse .html. Det vil si hvis du lager et tekstdokument, men samtidig skriver den riktige koden, vil nettleseren fortsatt vise deg bare teksten. Det vil ikke bli konvertert kode.
Hovedenhet
I figuren under punkt 3 er hodeseksjonen angitt. Denne delen angir serviceinformasjonen. For eksempel kan du angi kodingen (element 4) og sidetittelen (trinn 5).
Tittelen skal alltid være. Uten det kan ingen søkemotor bestemme navnet på innholdet (tekst) på nettsiden. Og dette er dårlig for nettstedfremmende. Dessuten angir nettleseren øverst ikke tittelen på siden. Dette er et ulempe for brukeren.
Html-dokumentets struktur er slik at tittelen <title> bare er angitt i hovedenheten. Hvis <title> -taggen er spesifisert i kroppsdelen eller etter det, tar håndtereren ikke oppmerksom på det.
I tillegg spesifiserer hodeseksjonenInformasjon for tilkobling av skript, CSS-filer, instrukser for søkemotorer eller annen informasjon som brukeren ikke skal se, men de er viktige for nettleseren eller programmerere.
Koble stiler
Strukturen i HTML-dokumentet lar deg koble tilstiler på forskjellige måter. Videre kan de skrives individuelt i hvert element. Men denne metoden anbefales ikke, fordi koden blir for stor og ubeleilig.
Søkemotorer anbefaler at alle stiler gjengis i en egen fil, og i elementer bruker du ganske enkelt forskjellige klasser.
Filen er koblet som følger.
<link rel = "stylesheet" href = "style.css" type = "text / css">
Href-attributtet angir banen til filen. Hvis det oppstår en feil i banen, lastes stilene ikke. Også, typeattributtet er nødvendig, noe som indikerer at dette er en css-fil.
Et annet alternativ er å definere stiler direkte i hovedenheten.
Men dette alternativet er heller ikke veldig anbefalt. Disse metodene er svært forskjellige fordi css-filen kan være en for hele nettstedet, og alle endringene i det blir umiddelbart brukt på alle sider. Og hvis du bruker metoden som er vist i figuren ovenfor, må du gjøre endringer på alle eksisterende sider på nettstedet.
Hvis klassen du oppretter, vil bli brukt bare på en side, så er dette alternativet riktig for deg.
Koble til skript
Skriptene er koblet som følger.
<Script type = "text / javascript" src = "main.js"> </ script>
Det kreves to attributter her: type og src. I det første angir vi at dette er en javascript-fil, og den andre er der filen ligger. Hvis du lager en skrivefeil, vil ingenting fungere.
Seksjon kroppen
Strukturen i HTML-dokumentet er slik at det er nødvendig å plassere innhold som kun er synlig for brukeren i kroppsdelen. Merketavnet snakker for seg selv.
Dette spesifiserer all hovedsiden kode, som kan inkludere et ubegrenset antall elementer. Men jo lengre koden, jo lenger blir den behandlet.
Vurder de mest grunnleggende kodene som du kan bruke i kroppsområdet. Det er ikke så mange grunnleggende. Hele resten vil du finne ut som din kunnskap og praksis vokser.
Grunnleggende koder
Strukturen til HTML-dokumentet krever en obligatoriskordre av skriveelementer. Merkene skal alltid være omgitt av parentes <>. Uten dette forstår nettleseren ikke at det er en tagg. Etter åpnings parentes følger navnet på elementet (tag) alltid. Hvis du tillater en mellomrom mellom <og navn, vil nettleseren vurdere dette som tekst.
Tenk på eksemplet på en bildetikett. Merk at denne taggen ikke lukkes, i motsetning til lenker, avsnitt og mange andre.
Ordrenes rekkefølge spiller ingen rolle. Men deres skriving er veldig viktig. Alltid navnet på attributtet kommer først, deretter likestegnet, så er verdien av attributten skrevet i anførselstegn. Verdien kan være forskjellig - digital eller tekst.
Src-attributtet i alle tagger angir banen til filen,som du trenger å laste. Alt-attributtet i alle elementene indikerer en kort beskrivelse. I dette tilfellet lastes et bilde av bird.jpg med en beskrivelse av et fuglfoto.
I tillegg kan du i img-taggen spesifisere dimensjoner, bare bredde eller høyde, tittel, justering, stilklasse eller ramme.
Vurder de andre hovedtemaene som er oppført i kroppsdelen.
tag | avtale |
<a> ... </a> | referanser |
<Img> | bilde |
<p> ... </ p> | avsnitt |
The <br> | Overføring av tekst til en ny linje |
<strong> ... </ strong> | Fet skrift |
<i> ... </ i> | kursiv |
<s> ... </ s> | Strikethrough tekst |
<u> ... </ u> | Understreket tekst |
<ol> </ ol>, <ul> </ ul> | lister |
<tabell> </ table> | tabeller |
Hvordan kan jeg forestille meg alt dette i hodet mitt
Begynner utviklere kan ikke alltid umiddelbart forestille seg alt dette er spekulativt. Se på noen få eksempler på strukturen på nettsider, og så vil du definitivt bli klar.
Det er et slikt alternativ:
Og dette:
Bruke stiler
Som nevnt i begynnelsen, kan du koble stiler til både filen og angi i hovedenheten. I alle fall er beskrivelsen av klassene ganske like.
For eksempel kan du angi en stil for overskriften. Deretter må du skrive h1 (siden stilen vil være på toppnivå), åpne parenteser og skriv hvilke egenskaper som vil være i dette elementet. Hvis du kjenner grunnleggende engelsk, så bør det ikke være noen problemer. Alle eiendommer kalles menneskelig språk.
Hvis du vil spesifisere denne stilen for flere elementer samtidig, skriv dem deretter adskilt med kommaer.
Resultatet er en rød topptekst.
Ovennevnte metoder er egnet for utforming av standardelementer. Men du kan også lage dine egne klasser. Deres navn skal begynne med en prikk, så er et vilkårlig navn skrevet.
Du må bruke dem slik.
Vennligst merk: Hvis du angav stilinnstillinger for et standardelement, trenger du ikke å skrive ordklassen. Stilen vil bli brukt som standard. I klassetributtet kan du bare spesifisere de stilene du starter med en periode.
</ p>
