Hva er tekstetiketter? Hvordan lage en vakker font i html: størrelser, farger, html font-koder

Jeg instruerer herrene senatorene om å holde talen uskreven,
men med dine egne ord, slik at tullet er synlig for alle!
Peter den første.

For tiden, tekst til HTML er den viktigste måten å presentere informasjon på. De aller fleste nettsteder på Internett består av tekstinnhold. Dette betyr at hvis du har ferdighetene, kan du som et minimum lese, og maksimalt skrive (det er en viss sannhet i hver vits).

La oss si at du skrev inn tekst i et redigeringsprogram, formaterte den (uthevet noen ord dristig eller kursiv), eller gjorde noe annet med det. Så kopierte jeg og limte inn teksten i html-koden min. Du åpner en html-side i , og all formateringen din har forsvunnet et sted. Dette skjer fordi tekstredigereren bruker sine egne spesialtegn for å formatere teksten (i hovedsak de samme kodene, bare brukt i tekstredigerere), som du ikke ser som standard.

I redigeringsvinduet ser du kun tekst. Men faktisk er det også spesielle kontrolltegn som redaktøren "forstår" hvordan man viser denne eller den delen av teksten. Det vil si, jeg gjentar, dette er det samme som bare "skreddersydd" for bruk i tekstredigerere.

Men til tross for dette, er det en måte å overføre tekst fra editoren og lime den inn i html-koden opprinnelig form. Og siden vi snakker om dette, la oss begynne å studere tekstformatering med denne taggen. Så la oss komme i gang.

§ 2. Selve formateringskodene

Forhåndsformatert tekst kan settes inn i en HTML-side ved å bruke og -taggene. Nettleseren vil vise teksten mellom disse kodene slik den dukket opp i tekstredigerer. For å være ærlig har jeg aldri brukt denne taggen i praksis, så jeg kan ikke si noe annet om den.

De mest populære kodene for formatering av tekst er:

  • - brukes til å markere tekst dristig.

  • - pleide å motta kursiv tekst. Det anbefales å bruke taggen i stedet for denne taggen.

  • - vil tillate understreke tekst. Hovedsaken her er at brukeren ikke forveksler den understrekede teksten med en lenke.

  • - gjør teksten krysset ut.

  • - designet for å fremheve underskriftstekst (underskrift). Denne taggen kan være nyttig, for eksempel for å skrive kjemiske formler. Her er koden

    H2O

    Gir oss denne formelen


  • - nødvendig for å markere hevet tekst (hevet skrift). For eksempel, for å skrive eksponentiering: vi skriver

    (a+b)2,

    Vi får

    (a+b) 2.


Alle disse kodene kan brukes til å formatere tekst enten én om gangen eller flere sammen. Dette oppnås ved å legge tagger i hverandre. For eksempel følgende html-kode:

H2O er formelen for vann.

når du ser på

H2O- Dette vann formel.

§ 3. Paragrafer

I HTML-avsnitt opprettes ved hjelp av taggen. Ved å bruke denne taggen setter du inn én tom linje og plasserer det synlige HTML-sideelementet bak det neste linje. Hvis vi for eksempel skriver:

Så det vil se slik ut:

Og det er ikke nødvendig å bruke en avsluttende kode, siden nettleseren mener at begynnelsen av neste avsnitt betyr slutten på det forrige, men det er tilrådelig å unngå forvirring.

§ 4. Tekstjustering

For å justere teksten, bruk attributtet tilpasse med mulige verdier sentrum, venstre, høyre Og rettferdiggjøre. Den justerer følgelig teksten til midten, til venstre, til høyre og samtidig til to kanter samtidig. For eksempel html-kode:

align="center">Tekst sentrert

vil justere teksten til midten:

Sentrert tekst

Og denne koden:

høyre">

vil justere teksten til høyre

Juster teksten til høyre

Hvis attributtet tilpasse ikke brukes, vil teksten bli venstrejustert. Dette skjer som standard. Eksempelkode:

vil justere teksten til venstre

Som standard er tekst venstrejustert

§ 5. Linjeskift og horisontal stang

Hvis du trenger å sikre en overgang til en ny linje uten å sette inn en tom linje (dette skjer når du trykker Enter i et tekstredigeringsprogram), så bruk taggen
. For eksempel html-kode

1. Første linje.
2. Andre linje.

i nettleseren vil det se slik ut:

1. Første linje.
2. Andre linje.

U
ingen lukkebrikke. Du har sikkert allerede gjettet at for å sette inn flere tomme linjer, må du skrive taggen
flere ganger på rad.

Du kan også visuelt skille deler av teksten ved å bruke taggen. Denne taggen oppretter en skillelinje på siden (for eksempel som den grønne i begynnelsen av denne artikkelen). Taggen har følgende attributter:

  • størrelse- strimmeltykkelse;

  • bredde- Bredden på linjen;

  • tilpasse- Justering;

  • farge- stripe farge;

  • noshade- et attributt som ikke har noen verdier. Hvis spesifisert, opprettes det en heltrukket linje svart linje uten skygge.

For eksempel html-kode:

align="center" size="5" width="50%" color="#3399ff">

i nettleseren vil det se ut

Bredden og tykkelsen kan spesifiseres både i piksler (da vil verdien være konstant) og i prosent (da endres verdien avhengig av skjermoppløsningen).

§ 6. Overskrifter

For å angi navn på seksjoner og underseksjoner i HTML, bruk tittelkoder. Det er seks nivåer av overskrifter, og de er utpekt som følger:

  • - overskrift på første nivå

  • - overskrift på andre nivå

  • - overskrift på tredje nivå

  • - overskrift på fjerde nivå

  • - overskrift på femte nivå

  • - overskrift på sjette nivå

Overskrifter er uthevet med fet skrift og atskilt fra resten av teksten tom linje. Mest stor overskrift(tittelen på denne leksjonen er uthevet), og den minste . Overskriftstagger har følgende attributter:

  • tilpasse- justering av titteltekst på siden (verdiene er de samme som for justering av vanlig tekst);

  • tittel- et verktøytips som vises når du holder musen over tittelen.

For eksempel HTML-koden:

align="center" title="Verktøytips. Hold musen over tittelen for å se den.">Заголовок 4 уровня !}

i nettleseren vil det se slik ut:

Nivå 4 overskrift

§ 7. Arbeid med fonter

For å formatere fonter direkte har HTML en kode. Denne taggen har følgende attributter:

  • farge- font tekstfarge;

  • ansikt- skrifttype;

  • størrelse- font tekststørrelse. Kan spesifiseres som en absolutt verdi (1 til 6) eller en relativ verdi (+1 til +6 og -1 til -6). Som standard er tekststørrelse 3. Hvis du angir size="+1"
>, så vil teksten plassert mellom taggene og vises økt med 1 sammenlignet med annen tekst. Samme med -1.

§ 8. Opprette lister i HTML

I HTML-lister opprettes ved hjelp av tagger og . I det første tilfellet opprettes ordnede (nummererte) lister, i det andre uordnede (punktlister). Hvert listeelement er uthevet med en tag. Nettleseren viser listeelementer med ny linje i form av en kolonne med innrykk og markører. Type markør bestemmes av attributtet type.

I en nummerert liste er markørene (typeattributtverdier) som følger:

  • 1 - nummerering i arabiske tall (standard);

  • EN- stor med latinske bokstaver alfabetisk;

  • en- små latinske bokstaver;

  • Jeg- store romertall;

  • Jeg- små romertall.

For eksempel HTML-kode


Første element.
Andre element.
Tredje element.

Nettleseren vil vise det slik.

HTML-tekst representert i spesifikasjonen med tagger for formatering og gruppering av tekst. Tagger er beholdere for tekst og har ingen visuell visning.

Tagger for tekstformatering bærer semantisk belastning og er vanligvis satt for tekst innesluttet, styling, for eksempel, uthev tekst med fet skrift eller vis den i en annen skriftfamilie (font-family property).

Godt formatert tekst gjør det tydelig søkemotorer, hvilke ord bærer en viktig semantisk belastning, hvilke av dem er å foretrekke å rangere en nettside i Søkeresultater. Alle tekstinformasjon, som vises på nettstedet, er plassert inne i taggen .

Tagger for HTML-tekst

1. Tittelkoder

Overskrifter er viktige elementer nettsider organiserer de tekst ved å danne den visuell struktur. Tagger

...

skal bare brukes til å markere overskriftene til en ny seksjon eller underseksjon. Når du bruker overskrifter, er det nødvendig å ta hensyn til deres hierarki, dvs. bak

må følge

etc. Det er heller ikke tillatt å neste andre tagger i tagger

...

.

1.1. stikkord

Det anbefales å bruke tittelen på øverste nivå bare én gang på en side, og delvis duplisere sidetittelen hvis mulig. stikkord

må være unik for hver side på nettstedet. Det anbefales å skrive taggen i begynnelsen av artikkelen ved å bruke nøkkelordet i tittelteksten 2em 0,67 em.

1.2. stikkord

Det angir underoverskriftene til taggen

. Skriftstørrelsen i nettleseren er 1,5 em, standard topp- og bunnpolstring 0,83 em.

1.3. stikkord

Viser underoverskrifter for tagger

. Skriftstørrelsen i nettleseren er 1.17 em, standard topp- og bunnpolstring 1 em.

1.4. Tagger

,

,

Angi underoverskrifter på fjerde, femte og sjette nivå. Skriftstørrelsen i nettleseren er 1 em / 0,83 em / 0,67 em, standard topp- og bunnpolstring 1.33em / 1,67 em / 2,33 em hhv.
Tilgjengelig for alle tagger.

2. Tagger for formatering av tekst

2.1. stikkord

Angir den fete skriftstilen. Fremhever tekst uten å understreke betydningen.
Tilgjengelig for tag.

2.2. stikkord

Viser skriften i kursiv, og legger til mening til teksten.
Tilgjengelig for tag.

2.3. stikkord

Viser skriften i kursiv.
Tilgjengelig for tag.

2.4. stikkord

Reduserer skriftstørrelsen med én i forhold til normal tekst.
Tilgjengelig for tag.

2.5. stikkord

Spesifiserer en fet skriftstil, relatert til logiske markeringskoder, som indikerer viktigheten av teksten for nettleseren.
Tilgjengelig for tag.

2.6. stikkord

Brukes til å lage abonnementer. Flytter tekst under linjenivå og reduserer størrelsen.
Tilgjengelig for tag.

2.7. stikkord

Brukes til å lage grader. Flytter tekst over linjenivå og reduserer størrelsen.
Tilgjengelig for tag.

2.8. stikkord

Velger tekst i den nye versjonen av dokumentet ved å understreke den.

2.9. stikkord

Krysser ut teksten. Brukes til å markere tekst som er fjernet fra dokumentet.
Følgende attributter er tilgjengelige for taggen: cite, datetime.

3. Koder for å skrive inn "datamaskin"-tekst

3.1. stikkord

Brukes til å markere programkodefragmenter. Vises med monospace skrift.
Tilgjengelig for tag.

3.2. stikkord

Merker fragmentet som angitt av brukeren fra tastaturet. Vises med monospace skrift.
Tilgjengelig for tag.

3.3. stikkord

Brukes til å markere resultatet oppnådd under programkjøring. Vises med monospace skrift.
Tilgjengelig for tag.

3.4. stikkord

Fremhever variabelnavn ved å vise dem i kursiv.
Tilgjengelig for tag.

3.5. stikkord

Lar deg vise tekst på skjermen mens du beholder den opprinnelige formateringen. Mellomrom og linjeskift fjernes ikke.
Tilgjengelig for tag.

4. Koder for formatering av sitater og definisjoner

4.1. stikkord

Brukes til å formatere forkortelser. Nettleseren understreker det vanligvis med en stiplet linje. Forkortelsen dechiffreres ved hjelp av tittelattributtet, den vises når du holder musen over teksten.
Tilgjengelig for tag.

4.2. stikkord

Brukes til å erstatte gjeldende tekstretning, dvs. teksten i taggen vises speilvendt.
dir-attributtet er tilgjengelig for taggen.

4.3. stikkord

Fremhever sitater i et dokument ved å bruke innrykk og linjeskift.

4.4. stikkord

Brukes til å fremheve korte sitater. Nettlesere omsluttes av anførselstegn.
Cite-attributtet er tilgjengelig for taggen.

4.5. stikkord

Brukes til å fremheve sitater, titler på verk, fotnoter til andre dokumenter.
Tilgjengelig for tag.

4.6. stikkord

Lar deg fremheve tekst som en definisjon. Til tross for tilstedeværelsen av en spesiell tag, anbefales det å markere teksten ved hjelp av CSS.
Tittelattributtet er tilgjengelig for taggen.

5. Avsnitt, tekstbrytingsverktøy

5.1. stikkord

Bryter opp teksten i separate avsnitt, atskilt fra hverandre med en tom linje. Nettleseren legger automatisk til 1em topp- og bunninnrykk, som skjuler innrykk av tilstøtende avsnitt.
Tilgjengelig for tag.

5.2. stikkord

Flytter tekst til neste linje, og lager et linjeskift.
Tilgjengelig for tag.

5.3. stikkord

Brukes til å skille innhold på en nettside. Vises som en horisontal linje.
Tilgjengelig for tag.

Når du oppretter et nettsted, er det alltid behov for å endre tekstfonten for en rekke deler og elementer av HTML-sider, fordi dette ikke bare tilfører nettstedet unikhet og stil, men forbedrer også kvaliteten på informasjonsoppfatningen. Det er spesielle tagger i HTML for dette.

Endre skriftstiler

Det er mange måter å endre skriftstiler i HTML:

... Og ...- uthev tekst dristig font.

... Og ...- uthev tekst kursiv.

...- viser tekst i hevet skrift, for eksempel E = mc 2 .

...- viser tekst i senket skrift, for eksempel H 2 SO 4.

Alle disse taggene er innebygd (inline, linjenivå), det vil si at de ikke lager linjeskift før og etter seg selv, men ligger på én linje. De kan også bare inneholde innebygde elementer, slik at de fritt kan nestes inne i hverandre. Det viktigste er ikke å glemme riktig hekking: et merke som åpnes tidligere må lukkes senere.

Det er to tagger hver for fet og kursiv. Faktum er at vanlige nettlesere viser innholdet i disse taggene på samme måte, men ikke-visuelle (stemme) nettlesere kan spesielt fremheve teksten inni. Og . Derfor, hvis du vil fremheve bestemte ord eller uttrykk for å tiltrekke leseren, er det bedre å bruke disse kodene, selv om det stort sett ikke er noen forskjell.

Det er også tagger Og , understreker tekst samt tag , viser gjennomstreket tekst. Disse kodene er foreldet i HTML og, i likhet med align-attributtet, kan det hende at nettlesere snart ikke lenger forstår dem. Det er bedre å bruke stilattributtet, og det kan spesifiseres i alle tagger. Den generelle syntaksen er som følger:

<тег style="text-decoration:underline">... - legger vekt på tekst.

<тег style="text-decoration:overline">...- understreker teksten.

<тег style="text-decoration:line-through">...- krysser over teksten.

Eksempel på endring av skriftstiler

Endre skriftstiler

Fet skrift.Kursiv.

Fet kursiv.

H 24- formel for svovelsyre skrevet i kursiv.

Understreket tekstavsnitt.

ren tekst,

krysset ut med fet skrift.

Resultat i nettleser

Stil er et helt vanlig tag-attributt, men det forholder seg til Cascading Style Sheets (CS) S). I en fjern fortid ble alle funksjoner for å strukturere en HTML-side som helhet og for ekstern presentasjon av hvert element separat (farge, form, plassering på siden osv.) overtatt av HTML-språket. Men så bestemte språkutviklerne seg for å skille disse funksjonene og laget CSS. Følgelig har mange tagger eller tag-attributter blitt foreldet. Det er. Den generelle syntaksen for stilattributtet er som følger:

<тег style="свойство CSS:значение">...

stikkord eller hva du skal gjøre når det ikke er nødvendige tagger

Tag... Denne taggen er også innebygd (inline, linjenivå) og kan inneholde alle innebygde tagger, men det er ikke hovedsaken. På egenhånd , uten attributter, legger ikke til noen endringer i verken teksten eller kodene i den. Og det ble laget spesielt for stiler, det vil si i hovedsak for stilattributtet. Det er takket være denne egenskapen, eller rettere sagt dens forskjellige betydninger, som visse egenskaper vises.

Bruke SPAN-taggen

Ren tekst uten endringer.

Mer vanlig tekst.

Stresset.

Krysset ut.

Resultat i nettleser

Endre navnet (skrifttypen) på skriften

Her er en liste over de vanligste skriftene som nesten alle brukere har på datamaskinen:

Som standard bruker nesten alle nettlesere fonten "Times New Roman", og for å endre den brukes det samme stilattributtet, som kan brukes i en hvilken som helst tagg. Den generelle syntaksen for å spesifisere er:

<тег style="font-family:имя шрифта, семейство">...

Hvis skriftnavnet består av flere ord, må det omsluttes av enkle anførselstegn. Det er tillatt å spesifisere ikke én, men flere skriftnavn atskilt med komma, og deretter, hvis den første skriften ikke er på datamaskinen, vil den andre, tredje osv. bli brukt.

For å endre skrifttypen på hele siden, spesifiser bare stilattributtet i taggen . Og hvis du trenger å endre fonten for en egen del av teksten, så legg den inn i en tag og bruk attributtet på det.

Eksempel på endring av skriftnavn

Endre skriftnavn

Dette er en Arial-font, hvis ikke, så Verdana, og hvis

og det er ikke der, da noen andre av sans-serif.

Dette er Comic Sans MS eller en hvilken som helst kursiv.

Dette er igjen Arial, Verdana eller en hvilken som helst sans-serif.

Og dette er Courier eller hvilken som helst monospace.

Resultat i nettleser

Endre skriftstørrelsen

HTML-språket er begrenset til bare syv skriftstørrelser, som du skjønner er veldig lite for et godt nettsted. Det er derfor alle har brukt CSS for å endre størrelse i lang tid, og nå vil du også lære det.

Det er omtrent ti måleenheter i CSS, men vi skal kun se på de tre mest populære - poeng (pt), piksler (px) og prosenter (%). Så:

    pt- Poeng. Ett punkt er lik 1/72 av en tomme, og en tomme er 2,54 cm. Derfor er 1pt = 0,03527778 cm. Dette er en absolutt verdi, siden størrelsen spesifisert i poeng ikke er avhengig av noe.

    px- Piksler. Målt i dataskjermpiksler. En piksel er det minste punktet på skjermen, og det er en relativ verdi, siden størrelsen avhenger av gjeldende skjermoppløsning og størrelsen på selve skjermen.

    % - Renter. Den beregnes som en prosentandel, der 100 % tas som verdien av overordnet tag, og hvis den ikke er spesifisert, deretter standardverdien i nettleseren. Dette er også en relativ verdi, fordi den overordnede skriftstørrelsen kan være helt annerledes, og brukere kan fritt endre skriftstørrelsen i nettleseren.

For å spesifisere skriftstørrelsen brukes stilattributtet og kan spesifiseres i en hvilken som helst tag. Den generelle syntaksen er:

<тег style="font-size:размер">...

Som med skriftnavn, for å endre skriftstørrelsen på hele siden, spesifiser du bare stilattributtet i taggen . Og hvis du trenger å endre skrifttypen for et tekststykke, må du legge det inn i en tag og bruk attributtet på det.

Eksempel på endring av skriftstørrelser

Endre skriftstørrelsen

Denne skriftstørrelsen er 90 % av størrelsen

i standardnettleseren.

Denne størrelsen er 90 % av størrelsen i BODY-taggen.

Tittelens skriftstørrelse er 120 % av BODY-størrelsen.

Dette er igjen 90 % av standardstørrelsen i nettleseren.

Denne skriftstørrelsen er 15 poeng.

Resultat i nettleser

Hvis du trenger en Arial-font med en størrelse på 80 % for hele avsnittet, må du skrive det slik:

Avsnittstekst.

Avsnittstekst.

Eller til og med sånn.

Avsnittstekst.

De to første alternativene er i prinsippet riktige, men det siste er generelt en feil, siden, hvis du husker det, en tag ikke kan ha to identiske attributter. Nå er det på tide å huske at stil ikke bare er et attributt, men et CSS-attributt:

Avsnittstekst.

Mye enklere. Det viktigste er ikke å glemme å sette et semikolon (;) mellom tilstøtende stiler og sette alle disse tingene i doble anførselstegn (" "), ellers vil bare den første stilen bli brukt, og nettleseren vil ignorere resten.

Skriftfarge og kjennskapsfarge

I HTML har noen tagger spesielle attributter som endrer farge, for eksempel bgcolor (bakgrunnsfarge). Men for det første er disse attributtene foreldet (jeg tror du husker hva det betyr), og for det andre, som jeg allerede har sagt, er det ikke alle tagger som har dem. Så la oss si at du ønsket å endre bakgrunnsfargen til et tekstavsnitt. Og hvordan vil du gjøre dette, fordi taggen

Finnes det ingen slik egenskap? Derfor, som i tidligere leksjoner, vil vi bruke stiler (CSS), det vil si en universell stilattributt som lar oss endre fargen hvor vi vil.

Hvordan kan du spesifisere en farge?

Farger i HTML (og CSS) kan spesifiseres på flere måter, jeg vil vise deg de mest populære og vanlige:

    Fargenavn- HTML har en stor liste blomster med navn og for å indikere en farge, er det nok å skrive navnet på engelsk, for eksempel: rød, grønn, blå.

    HEX fargekode– Absolutt hvilken som helst farge kan oppnås ved å blande tre grunnfarger i forskjellige proporsjoner – rød, grønn og blå. En HEX-kode er tre par heksadesimale verdier som er ansvarlige for antallet av disse fargene i hver farge. Fargekoden må innledes med et hash-tegn (#), for eksempel: #FF8C00, #CC3300, og så videre.

Tidligere ble det anbefalt å bruke bare HTML i HTML sikker fargepalett, som garantert vises identisk i alle nettlesere og på alle skjermer. Men i dag er det ikke nødvendig å begrense deg til det, siden både nettlesere og skjermer lenge har lært å vise en mye større liste over farger på riktig måte. Men jeg anbefaler ikke at du spesifiserer farger etter navn; faktum er at mange nettlesere fortsatt forbinder forskjellige farger med samme navn.

Hvordan endre tekstfarge?

For å endre tekstfargen i et element på en HTML-side, må du spesifisere stilattributtet inne i taggen. Den generelle syntaksen er som følger:

<тег style="color:имя цвета">...- spesifisere tekstfargen ved navn.

<тег style="color:#HEX-код">...- spesifisere tekstfargen med kode.

Og som vanlig, for å endre tekstfargen på hele siden, spesifiser du bare stilattributtet i taggen . Og hvis du trenger å endre skriftfargen for et tekststykke, kan du legge det inn i en tag og bruk attributtet på det.

Eksempel på endring av tekstfarge

Endre tekstfarge

Rød titteltekst

Blå avsnittstekst.

Grønnitalic.

Rød tekst.

Resultat i nettleser

Hvordan endre bakgrunnsfargen?

Bakgrunnsfargen til et sideelement kan også endres ved å bruke stilattributtet. Den generelle syntaksen er:

<тег style="background:имя цвета">...- spesifisere bakgrunnsfargen ved navn.

<тег style="background:#HEX-код">...- spesifisere bakgrunnsfargen med kode.

Eksempel på endring av bakgrunnsfarge

Endre bakgrunnsfargen

Tittel.

Avsnitt.

Miniatyrbilde.

Vanlig tekst.

Resultat i nettleser

Når du endrer bakgrunnsfargen til elementene, blir det veldig tydelig hvor bredt hvert av dem faktisk opptar. Som du kan se, tar blokkelementer som avsnitt og overskrifter vanligvis hele den tilgjengelige bredden, selv om de inneholder svært lite tekst, men innebygde tagger er like brede som innholdet. Forresten, det siste avsnittet i eksemplet opptar også hele bredden, det er bare at bakgrunnen er gjennomsiktig, så bakgrunnen på siden er synlig gjennom den. Generelt er bakgrunnen til alle elementene på siden der det ikke er eksplisitt angitt gjennomsiktig, det er alt.

Tagger for å justere testinnhold i forhold til siden

For å justere innholdet i et HTML-element, må du tilordne en av følgende verdier til stilattributtet:

    text-align:center- Juster hver linje til midten av et element, for eksempel et avsnitt.

    text-align:venstre- Hver linje presses tett til venstre side av elementet (dette er standard).

    text-align:right- Hver linje trykkes til høyre side.

    text-align:justify- Juster umiddelbart til venstre og høyre side av elementet. Vil forklare. Vanligvis har et element, for eksempel et avsnitt, alltid den ene siden av teksten som er rett og den andre siden som er "revet", siden lengdene på linjene er litt forskjellige. Og når vi bruker verdien text-align:justify, er hver linje jevnt fordelt i bredden. Om nødvendig legger nettleseren til flere mellomrom mellom ordene, og det første og siste ordet på linjen trykkes alltid til de tilsvarende sidene, slik at du får en blokk som er jevn på begge sider.

Eksempel på justering av tag-innhold

Justering av merkeinnhold

Overskrift sentrert.

Teksten i avsnittet er trykket til høyre.

Avsnitt sentrert.

Resultat i nettleser

Vanligvis gjelder horisontal justering bare for blokkkoder og tabellceller (vi skal snakke om dem senere). Selv om på den annen side, selv om du prøver, vil du ikke kunne bruke det på de innebygde.

Tagger, utheving av sitater

Taggene som diskuteres her brukes ikke så ofte på HTML-sider, men noen ganger kan du ikke klare deg uten dem.

stikkord

eller fremhev lange sitater

Taggen brukes i HTML for å markere såkalte «lange sitater», for eksempel ett eller flere avsnitt. Denne taggen er blokkere og kan inneholde blokkkoder, men kan ikke inneholde innebygde koder. I tillegg legger den til de samme ytre margene øverst og nederst som avsnitt, men legger også til sidemarger, noe som gjør den siterte teksten visuelt fremhevet.

Eksempel på bruk av BLOCKQUOTE-taggen

Bruke BLOCKQUOTE-taggen

Hva brukes BLOCKQUOTE-taggen til? Her er hva nettstedet Seodon.ru forteller oss om dette:

Svært ofte brukes BLOCKQUOTE-taggen til andre formål enn det tiltenkte formålet -

utheving av sitert tekst. Men bare av hensyn til sidemarginene, som

han skaper. I prinsippet motsier ikke slik bruk av denne taggen

HTML-syntaks, det viktigste er at BLOCKQUOTE inneholder blokkkoder. Men det er det

Det er bedre å ikke bruke det på denne måten, siden BLOCKQUOTE

designet spesielt for å fremheve lange sitater.

Resultat i nettleser

stikkord eller fremhev små sitater

Og her er merkelappen ... brukes til å indikere små sitater eller ord i overført betydning. Han setter all teksten som er mellom taggene til dette elementet i anførselstegn. Forresten, - dette er det vanligste inline (linjenivå) en tag som bare kan inneholde innebygde tagger.

Eksempel på utheving av sitater

Fremheve sitater i teksten

Fri nysgjerrighet er mye viktigere for å lære et språk.

enn en formidabel nødvendighet. Augustine Aurelius.

Uansett hva du lærer, lærer du selv. Petronius.

Resultat i nettleser

stikkord
eller tvungen linjebrudd

Noen ganger kreves det at en tekstlinje ikke fortsetter over hele bredden av den tilgjengelige plassen, men brytes av på stedet vi trenger og fortsetter på neste linje. Men som du husker, ignorerer nettlesere enkle linjeskift i HTML-kode som om de ikke eksisterer. I slike tilfeller vil taggen hjelpe oss
, som tvinger et linjebrudd på stedet der den er installert.

stikkord
er også innebygd (inline) element og ikke bli forvirret av det faktum at den utfører et linjeskift etter seg, den har bare denne funksjonen. I tillegg kommer elementet
det er ingen avsluttende tag, noe som betyr at det er det tømme, fordi den ikke kan ha innhold.

Eksempel på bruk av BR-taggen

BR-tag, linjeskift

Målet med kreativitet er dedikasjon,
Ikke hype, ikke suksess.

Skammelig, meningsløst
Hyl er et ordtak på alles lepper.

B. Pasternak.

Resultat i nettleser

Hvorfor bruke en tag
, hvis du ganske enkelt kan skrive teksten i flere avsnitt, vil den også vises på forskjellige linjer? Alt dette er sant, men ikke glem at taggen

Oppretter en margin med tom plass øverst og nederst, og taggen
gjør ikke dette. I tillegg eksisterer avsnitt slik at hver av dem inneholder meningsfulle og fullstendige uttrykk, og ikke tekstbiter.

Det kan du ofte se på nettsider
brukes kun til å lage noen få tomme linjer. Ja, hvis du spesifiserer det flere ganger på rad (


...), så kan du lage vertikale innrykk i alle størrelser. Men selv om dette ikke er i strid med HTML-syntaks, anbefaler jeg ikke at du gjør dette, siden denne taggen ikke er ment for dette.

Spesielle karaktererHTML

MEDHTML spesialtegn- Dette er konvensjonelle kodesymboler som konverteres av nettleseren til forskjellige teksttegn: bokstaver, tall, skilletegn, piler og så videre. For eksempel, hvis vi skriver følgende kode i en HTML-side:

Nettleseren vil ikke vise det til oss, men vil vise et pluss-minus-tegn i avsnittet:

HTML-spesialtegn kan angis på to måter:

    Tegnkode- I dette tilfellet plasseres et og-tegn (&), etterfulgt av en hash (#), deretter tall og et semikolon (;) på slutten, som vist ovenfor.

    Mnemonikk- Først er det også et og-tegn, så skrives nøkkelordet og også et semikolon på slutten, for eksempel: ©

Naturligvis er det mer praktisk å bruke alternativet med mnemonics, siden hvis du kan minst litt engelsk, vil du kunne gjette hva slags symbol hver av dem viser på siden og vil ikke bli forvirret i tallene. Men dessverre har ikke alle symboler mnemonikk, så du må ofte bruke kodeversjonen.

Vær spesielt oppmerksom på det faktum at spesielle mnemoniske tegn skiller mellom store og små bokstaver, det vil si © og ikke er det samme.

Følgelig spesifiser spesialtegn på samme måte som vanlig tekst - inne i tagger som kan inneholde innebygde elementer.

Hvorfor trengs HTML-spesialtegn?

HTML spesialtegn brukes til helt andre formål. Jeg tror du allerede har gjettet at de brukes når du trenger å sette inn et tegn på en side som ikke er tilgjengelig på et standard datatastatur. Men det er ikke alt. I tillegg indikeres de når sidekodingen ikke støtter enkelte tegn i en "klar" form (vi kommer tilbake til dette senere).

Eller, for eksempel, det er et slikt spesialtegn som et ikke-brytende mellomrom (). Og hvis det er plassert tett mellom to ord, vil et linjeskift være forbudt på dette stedet. Og hvis du spesifiserer det flere ganger på rad (...), vil vi få den nødvendige linjeinnrykk, siden nettlesere ikke ignorerer disse påfølgende mellomrommene.

Ganske ofte brukes spesialtegn for å vise HTML-oppmerking på en side. Og det er sant, hvis vi vil vise en tagg på siden, vil vi ikke kunne gjøre det bare slik, siden nettleseren vil skjule det, vurderer det som markering. Derfor må du bruke spesialtegn som erstatter vinkelparentesene til taggene (< и >) og attributtsitater (")

Eksempel på bruk av HTML-spesialtegn

Bruke HTML spesialtegn

Tag for å lage avsnitt.

®- Registrert varemerke.

Når du skriver en artikkel, er det beste alternativet å bruke

mellom ordene en bindestrek og en bindestrek, ikke bare en bindestrek i alle tilfeller.

Resultat i nettleser

Lage horisontale linjer iHTML

I utgangspunktet brukes horisontale linjer til å dekorere HTML-sider på et nettsted, noe som gir dem et mer attraktivt utseende. Men de kan også visuelt skille informasjon fra tilstøtende seksjoner, noe som gjør det lettere for leserne når de studerer den.

Hvordan tegne en horisontal linje?

Det er en spesiell tag for å lage horisontale linjer i HTML


. Og det er han blokker tag, det vil si at den lager linjeskift før og etter seg selv, slik at linjen alltid ender opp på en egen linje. Følgelig kan det bare spesifiseres i tagger som for eksempel kan inneholde blokkelementer eller
. Men her er jeg
kan ikke ha innhold fordi den rett og slett ikke har en avsluttende kode, noe som betyr at den er tom.

Eksempel på tegning av horisontale linjer i HTML

Tegne horisontale linjer

Avsnitt.

Avsnitt.

Avsnitt.

Resultat i nettleser

Linjene viser seg å være veldig tynne, ubeskrivelige og trukket til full tilgjengelig bredde, så nå skal vi lære hvordan du endrer dem for å få dem til å se mer attraktive ut.

Hvordan endre farge, tykkelse og bredde på horisontale linjer?

I eldre versjoner av HTML er taggen


det var spesielle attributter som du kunne endre farge, tykkelse og bredde på horisontale linjer med. Disse er henholdsvis farge, størrelse og bredde. Men i nye versjoner ble de forlatt til fordel for Cascading Style Sheets (CSS), så, som du kanskje har gjettet, vil vi igjen bruke vår favorittstilattributt. Den generelle syntaksen er:


- fargen på linjen (eller rettere sagt bakgrunnen).


- linjetykkelse.


- linje bredde.


- eller du kan spesifisere alle parameterne på en gang, bare ikke glem semikolon (;).

En farge kan spesifiseres med navnet på engelsk eller med fargens HEX-kode foran med en hash (#).

Det er omtrent ti måleenheter i CSS, men linje bredde kan bare spesifiseres i piksler (px) og prosenter (%), og tykkelse vanligvis bare i piksler. Hvis du legger inn andre måleenheter, vil det ikke være en feil, men nettlesere vil ganske enkelt ignorere dem.

Hvis du angir dimensjoner i piksler, vil tykkelsen og bredden på linjen avhenge av oppløsningen til skjermen som nettstedet ditt vises på (jo høyere skjermoppløsning, jo tynnere og smalere er linjen).

Bare linjebredde kan angis i prosent. Prosentstørrelser avhenger alltid og beregnes basert på størrelsen på det overordnede beholderelementet som taggen er plassert innenfor


. I dette tilfellet er dimensjonene til forelderen tatt som 100%. For eksempel hvis vi plasserer taggen
innvendig element
, så uansett hvordan vi endrer størrelsen på nettleservinduet eller skjermoppløsningen, vil linjebredden alltid være halve bredden av blokken
.

Et eksempel på endring av farge, tykkelse og bredde på horisontale linjer.

Endre farge, tykkelse og bredde på de horisontale linjene.





Resultat i nettleser

Endre plasseringen av horisontale linjer

Når du endrer bredden på den horisontale linjen, kan du tydelig se at nettlesere alltid plasserer den i midten. Hvis du vil endre posisjonen, er det bare å bruke innsiden


stilattributt med verdier for justering av tag-innhold.

Hvordan fjerne rammen rundt en linje?

Som standard tegner nettlesere rammer rundt linjer, som skaper en tredimensjonal effekt. Så når vi ikke øker tykkelsen på de horisontale linjene, viser nettlesere oss bare disse rammene, siden tykkelsen på selve linjen er 0px.

For å fjerne grensen rundt linjen, som ofte bare ødelegger utseendet, vil vi igjen bruke stilattributtet. Og det er skrevet slik:


Gruppering av elementer

Gruppering av HTML-sideelementer er et av de kraftigste, mest praktiske og samtidig enkle verktøyene for å lage et nettsted av høy kvalitet.

stikkord

eller gruppert blokk

Til nå kan alle HTML-elementene vi har studert kun inneholde én type tag - enten inline (linjenivå) eller blokk (blokk). La meg nå introdusere deg for taggen

...
. Det er han selv blokkere, men den kan inneholde både innebygde og blokkeringskoder, og selvfølgelig ren tekst. Men det er ikke alt, i motsetning til andre blokkmerker -
legger ikke til absolutt noen ytre marger (utfylling) av tomt rom rundt seg selv, som for eksempel en tag

Eksempel på bruk av en DIV-tag

Bruke DIV-taggen

Sidemeny

Tilleggsseksjoner

Avsnitt.

Avsnitt.

Avsnitt.

Avsnitt.

Avsnitt.

Avsnitt.

Resultat i nettleser

stikkord eller gruppert streng

Tag... er innebygd (inline) et element som bare kan inneholde innebygde koder og brukes innenfor tekstlinjer.

Eksempel på bruk av SPAN-taggen

Bruke SPAN-taggen

Ren tekst.

Fet.

Kursiv.

Resultat i nettleser

Når du grupperer elementer, er det viktig å respektere ikke bare HTML-syntaksen, men også den semantiske og logiske strukturen til koden. For eksempel, hvis du har en side med en kort biografi om to personer, trenger du ikke å skyve slutten av den første personens biografi og begynnelsen av den andre innenfor en blokk. Men du kan enkelt plassere informasjonen til en separat biografi eller en del av den i en blokk, om nødvendig, eller til og med omslutte begge i én blokk.

God dag, kjære abonnenter.

Vi vil dedikere denne leksjonen formatering av tekst i html. La oss vurdere hva tagger brukes til dette formålet.

La meg ta en reservasjon med en gang at mange av dem er ganske spesifikke; de ​​kan "omgås" ved hjelp av cascading style sheets (CSS).

Derfor vil vi ikke fokusere på dem. La oss bare se på arbeidet deres slik at du vet at slike evner finnes i HTML-språket.

Så la oss begynne.

For å gjøre arbeidet vårt enklere, last ned lesson2.zip-arkivet fra en direkte lenke:

La oss ta filen "The Fox and the Horse.doc" fra arkivet som er sendt til deg og åpne den ved hjelp av Word-programmet. Det er to eventyr av kjente forfattere Brødrene Grimm.

Åpne så en notisblokk og lag en tittel i den som i forrige leksjon eller kopier den fra forrige leksjon.

Jeg tror det.

La oss nå gå tilbake til word, kopiere all teksten fra "skazka.doc"-filen og lim den inn mellom taggene arbeidsstykket vårt.

Vi lagrer malen vår under navnet lesson2.html og åpner den ved hjelp av en nettleser (for eksempel opera).

Vi ser at teksten ikke har noen overskrifter, ingen avsnitt, ingen innrykk.

La oss nå begynne å formatere teksten direkte i HTML.

Tagger brukes til å fremheve overskrifter

tekst

,

tekst

etc. før
tekst
.

Tallene etter bokstaven H i taggen er fra 1 til 6.

1 er den største overskriften, 6 er den minste overskriften.

La oss nå finne navnene på eventyrene i filen vår og sette dem i tagger

.

XHTML

Rev og hest

Rev og katt

Ved lappen

det er en parameter tilpasse med mening Venstre- på venstre kant, Ikke sant- med rette og senter- i midten.

La oss sentrere tittelen. For å gjøre dette, la oss skrive:

XHTML

Den andre overskriften er lik.

Lagre og se i nettleseren.

Overskrifter ble sentrert.

For å forenkle arbeidet kan du holde samtidig åpen kilde sider i notisblokk og nettleser.

Og etter endringer i koden, lagre filen og trykk på oppdateringsknappen i nettleseren (eller F5).

Prøv det selv forskjellige betydninger stikkord tekst . Og forskjellige betydninger tilpasse. Velg en du liker.

La oss nå dele opp teksten vår i avsnitt.

Taggen som gjør dette er

avsnittstekst

.

For å gjøre dette, finn begynnelsen av avsnittene og legg merkelappen der

, og på slutten av avsnittet lukker vi det

.

Lagre original fil med koden (ctrl+s), klikk på "refresh"-knappen i nettleseren og se hva som skjer.

Ved lappen

det er en parameter tilpasse med samme verdier som taggene venstre, høyre, senter. Dens arbeid er absolutt det samme som etiketten .

Vi delte inn teksten i avsnitt og overskrifter. La oss nå gå direkte gjennom teksten.

Teksten kan gjøres fet. Ved hjelp av en tag eller (Dette er forresten avsluttende tagger. Anbefales ).

Kursiv - eller , understreket , monospace eller .

Prøv å omslutte forskjellige deler av teksten forskjellige tagger. Og ikke glem å lukke dem.

For eksempel:

XHTML

hvilken som helst tekst fra et eventyr ………………………….. …………………………. ……………………..

For å endre størrelse, farge og skrift eget område tekstbruk tag , dens parametere:

face="arial"– indikerer navnene på fonten.

størrelse = "3"- størrelse (verdier fra 1 til 7).

farge="*******"- skriftfarge.

****** er en bestemt skriftkode (for eksempel er 000000 svart).

La oss fremheve et stykke tekst med stor rød skrift. Du kan gjøre dette på følgende måte:

XHTML

fragment av eventyrtekst

fragment av eventyrtekst

En annen viktig merkelapp
brukes til å tvinge tekst til å bryte til en ny linje. Den er enkel å bruke, plasser den på det stedet teksten skal vises fra på en ny linje. I prinsippet er det ikke noe mer å legge til for denne taggen, så vi går videre.

Den neste gruppen med tagger (basert på vår erfaring) brukes ganske sjelden, så vi vil ikke vurdere dem i detalj. Jeg inkluderte dem i denne leksjonen, for å vise språkets evner i tilfelle du trenger dem. Så du vet at slike muligheter finnes.

Jeg foreslår at du vurderer hvordan disse taggene fungerer på egen hånd, det vil passe akkurat deg nyttig trening.

Så tagger:

– underindekser (H 2 O)

- superindeks (4 5)

— øker skriften med 1

- reduserer skriften med 1

— sitater vises i kursiv

programkode vises i monospace-skrift

— valgt tekst vises i kursiv

— valgt tekst vises i fet skrift, det anbefales i stedet


horisontal linje. Denne taggen har følgende parametere:

align=center(venstre, høyre)-alignment, vi er kjent med denne parameteren fra andre tagger

width="nummer"— horisontal linjelengde, satt i piksler eller som en prosentandel i forhold til skjermstørrelsen

størrelse "nummer"— linjetykkelse (mindre enn 100 piksler, dvs. hvis du angir parameteren størrelse=99, en parameter bredde=1, da får vi en vertikal linje, bare med begrenset høyde)

color="color"-linjefarge

noshade- avbryter lettelse

La oss skille de to eventyrene våre med en rød linje med en bredde som er lik bredden på skjermen. For å gjøre dette, før starten av den andre historien, skriver vi:

XHTML



Eksperimenter med settet og verdiene til parametere for denne taggen.

Det er en annen interessant tag, men den støttes bare nettleser Utforsker. For å være ærlig har jeg ikke trengt å bruke det i praksis.