###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Mogućnost oblikovanja tekstualnih informacija u html. Html oblikovanje teksta. Citati i definicije

    22.07.2020 Programi

    Sadržaj:

    Pozdrav, dragi čitatelji bloga. U prošlom sam članku pogledao blok oznake za strukturiranje teksta. Danas ćemo pogledati dizajn html tekst- stranice, tj. Pogledajmo oznake koje će pomoći u isticanju važnih fragmenata teksta kako bi privukli pozornost posjetitelja na njih. Također ćemo naučiti kako ubaciti posebne znakove na stranicu.

    Odabir fragmenata teksta. Oznake jak i em.

    Najvažniji HTML alat koji se koristi za isticanje važnih dijelova teksta je oznaka. Ističe tekst podebljano. Oznaka također može istaknuti tekst podebljanim fontom. Iako su oznake slične u svom učinku, one nisu ekvivalentne. Oznaka je fizička oznaka za označavanje i jednostavno čini tekst podebljanim. A je logična oznaka za označavanje i označava važnost odabranog teksta. Oznaka ima više važno na optimizacija pretraživača stranica i njen sadržaj imaju veću težinu za tražilice.

    Oznake se koriste za označavanje fragmenata teksta u kurzivu. i . Sadržaj ovih oznaka prikazuje se pod kutom, simulirajući rukom pisani font.
    Prilikom izrade web stranica, oznake i češće se koriste za isticanje teksta nego oznake i . Primjer korištenja oznaka , , i za oblikovanje teksta:

    HTML (od engleskog HyperText Markup Language - "jezik za označavanje hiperteksta"; izgovara se h-ti-em-el) - standard jezik za označavanje dokumenata na World Wide Webu.

    A to izgleda ovako:

    Primijenimo oznake na našoj stranici iz prethodnih članaka:

    Web stranica o automobilima.

    Dobro došli na našu web stranicu o automobilima. Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, njihovim Tehničke specifikacije i značajke.


    Znanstvenim jezikom, automobil je:


    Mehanički motorizirano cestovno vozilo bez gusjenica s najmanje 4 kotača.



    Klasifikacija automobila

    Automobili su sljedećih vrsta:



    • Putnički automobil;

    • Teret;

    • terenac;

    • Lud;

    • Pokupiti;

    • Sportski;

    • Utrke.

    Proizlaziti:

    Pored elemenata , , i HTML ima mnogo oznaka za oblikovanje teksta. html dokument. Donosim kratki popis takve oznake:

    • - Skraćenica. prema zadanim postavkama pojavljuje se podcrtano u pregledniku;
    • - Akronim. Nasuprot tome, kratica označava ustaljenu kraticu. Čini se podcrtano;
    • — mali citat, ispisan kurzivom;
    • — fragment izvornog koda programa, prikazan monospace fontom;
    • — označava tekst koji je uklonjen s web stranice i pojavljuje se prekriženo;
    • — označava novi pojam u dokumentu, prikazan kurzivom;
    • - koristi se za označavanje teksta koji je dodan nova verzija dokument se pojavljuje podcrtan;
    • — koristi se za isticanje podataka unesenih s tipkovnice ili za nazive tipki, prikazanih monospace fontom;
    • — koristi se za označavanje navodnika, sadržaj se automatski stavlja u navodnike;
    • — označava izlaz podataka od strane programa, prikazan u monospace fontu;
    • - zapravo, isto što i , samo što je to fizička oznaka oznake, i to logička. prikazan monospace fontom;
    • — isticanje naziva varijable u izvorni kod programi su prikazani kurzivom.

    I ovako se pojavljuju u pregledniku:

    Prekidi redaka

    Kao što smo naučili iz prethodnih članaka, elementi bloka koriste se za prevođenje nizova, posebno oznake

    Istaknuti odlomak.

    Stavimo informacije o autorskim pravima na našu web stranicu:

    Sva prava pridržana. godina 2013.


    Web stranica o automobilima.

    Proizlaziti:

    A kao što vidimo i linije su odvojene velika udaljenost kao da nemaju veze jedno s drugim. U ovom slučaju, bolje je koristiti oznaku za prekidanje linija
    . Ova oznaka postavlja prijelom retka, ali za razliku od

    Ne postavlja uvlaku retka. Primijenimo oznaku
    na našoj stranici:

    Sva prava pridržana. godina 2013.
    Web stranica o automobilima.

    Ovo je puno bolje:

    Stoga, u nekim slučajevima, prilikom oblikovanja teksta html stranice ne zaboravi na oznaku
    .

    Umetnuti posebni znakovi. Literali.

    Ponekad trebate umetnuti neki poseban znak na web stranicu, na primjer sljedeće znakove: , ©. Literali se koriste za umetanje posebnih znakova u HTML. je niz znakova koji počinje sa & i završava sa ; , a između njih je postavljen niz slova - kod simbola. Dakle, za umetanje simbola, ©, koriste se sljedeći literali: Svi programi->Dodaci->Uslužni programi->Tablica simbola” ili pritisnite WIN+R i upišite u prozor “izvrši charmap”. Pojavljuje se prozor tablice simbola.

    Ako odaberete znak na popisu simbola koji se ne mogu unijeti s tipkovnice, natpis poput "Tipka: Alt+" pojavit će se u statusnom retku s lijeve strane. Uzmite ovaj kod znaka i zalijepite ga u literal. Na primjer, umetnimo simbol © na našu stranicu pomoću koda simbola. Odaberemo ovaj simbol u "Symbol Table" iu retku statusa s lijeve strane vidimo natpis "Key: Alt+0169". Uzimamo šifru “0169” i ubacujemo © umjesto literala na našoj web stranici:

    Sva prava pridržana. © 2013.
    Web stranica o automobilima.

    I brinemo da sve bude ispravno prikazano na stranici.

    To je sve što imam za danas. Kao i uvijek, sažet ću:

      Da biste razbili retke bez uvlaka, koristite oznaku
      ;

      a za umetanje posebnih znakova koristimo literale poput: &; ili & .

    U sljedećem članku ću vam reći kako umetnuti slike na stranicu, pa preporučujem

    Kad god je moguće, objasnite svoj kod gdje je to potrebno.

    Koristite komentare da objasnite svoj kod: što radi, što radi i zašto se koristi rješenje koje odaberete.

    (Ova točka nije obavezna jer nema smisla očekivati ​​da kod uvijek bude dobro dokumentiran. Korisnost komentiranja ovisi o složenosti projekta i može se razlikovati za HTML i CSS kod.)

    Zadaci Označite zadatke za svoj popis obaveza pomoću TODO.

    Označite zadatke pomoću ključne riječi TODO. Nemojte koristiti druge uobičajene formate kao što je @@ .

    Unesite kontakte (korisničko ime ili mailing listu) u zagrade: TODO(kontakt) .

    Opišite zadatak nakon dvotočke, na primjer: TODO: Zadatak.

    Preporučeno: (# TODO(Ivan Ivanov): Suočiti se s poravnanjem #) Test
    Preporučeno:

    • krastavci
    • rajčice

    Pravila oblikovanja HTML-a Vrsta dokumenta Koristite HTML5.

    (Preporuča se korištenje HTML-a s tipom sadržaja text/html. Nemojte koristiti XHTML jer application/xhtml+xml ima lošu podršku preglednika i ograničava mogućnosti optimizacije.)

    Valjanost HTML-a Koristite valjani HTML kad god je to moguće.

    Upotrijebite valjani HTML kôd osim ako vam uporaba ne omogućuje postizanje veličine datoteke potrebne za željenu razinu izvedbe.

    W3C HTML validator (engleski) za provjeru valjanosti koda.

    Valjanost je važna i mjerljiva kvaliteta koda. Pisanje važećeg HTML-a promiče upoznavanje tehničkih zahtjeva i ograničenja te osigurava pravilnu upotrebu HTML-a.

    Ne preporučuje se: Provjerite Samo provjerite
    Preporučeno: ček Samo ček.

    Semantika Koristite HTML onako kako je zamišljeno.

    Koristite elemente (ponekad se netočno nazivaju "oznake") za njihovu namjenu: naslovi za naslove, p za odlomke, a za veze itd.

    To čini kod lakšim za čitanje, uređivanje i održavanje.

    Alternativni mediji Uvijek uključite alternativne medijske sadržaje.

    Pokušajte osigurati alternativni sadržaj za medije: na primjer, za slike, videozapise ili animacije navedene s pomoću platna. Za slike je to smisleni alternativni tekst (alt), a za video i audio zapis, ako je moguće, transkript teksta i natpis.

    Alternativni sadržaj može pomoći osobama s invaliditetom. Na primjer, slabovidnoj osobi je teško razumjeti što je na slici ako za nju nije postavljen @alt. Drugi ljudi mogu imati poteškoća u razumijevanju onoga što je rečeno u video ili audio snimci.

    (Ako je alt slike suvišan ili se samo koristi u dekorativne svrhe na mjestima gdje se CSS ne može koristiti, upotrijebite prazan alt tekst alt="" )

    Razdvajanje odgovornosti Odvojena struktura, dizajn i ponašanje.

    Držite strukturu (markup), izgled (stilove) i ponašanje (skripte) odvojenima i pokušajte interakciju između njih svesti na minimum.

    Pazite da dokumenti i predlošci sadrže samo HTML te da HTML služi samo za definiranje strukture dokumenta. Premjestite sav kod odgovoran za dizajn u stilske datoteke, a kod odgovoran za ponašanje u skripte.

    Pokušajte smanjiti njihova sjecišta na najmanju moguću mjeru uključivanjem u predloške minimalni iznos stilske datoteke i skripte.

    Odvajanje strukture od prezentacije i ponašanja olakšava održavanje koda. Promjena predložaka i HTML dokumenata uvijek traje dulje od promjene stilskih datoteka ili skripti.

    Ne preporučuje se: HTML je sranje HTML je sranje

    Negdje sam već čitao o ovome, ali sad mi je definitivno sve jasno: HTML je potpuno smeće!!1 Ne mogu vjerovati da za promjenu dizajna morate svaki put sve iznova ponoviti.
    Preporučeno: Moj prvi redizajn samo za CSS Moj novi CSS dizajn

    Čitao sam o tome prije, ali konačno sam to učinio sam: koristim načelo razdvajanja problema i ne guram dizajn u HTML

    Kako cool!

    Mnemotehničke veze Nemojte koristiti mnemoničke veze.

    Jedina iznimka od ovog pravila su HTML servisni znakovi (na primjer< и & ) а так же вспомогательные и “невидимые” символы (например neprekinuti prostor).

    Izborne oznake Nemojte koristiti izborne oznake. (nije potrebno)

    Da biste smanjili veličinu datoteke i poboljšali čitljivost koda, možete izostaviti izborne oznake. HTML5 specifikacija ima popis izbornih oznaka.

    (Možda će trebati neko vrijeme dok ovaj pristup ne postane naširoko korišten jer se jako razlikuje od onoga što se obično podučava web programerima. Sa stajališta dosljednosti, koda i jednostavnosti, najbolje je izostaviti sve neobavezne oznake umjesto nekih).

    Ne preporučuje se: Uzalud bacamo bajtove - bacamo novac.
    Preporučeno: Bajtovi su novac!

    Tako da

    atribut "type" Nemojte navoditi atribut type kada dodajete stilove i skripte u dokument.

    Nemojte koristiti atribut tipa kada povezujete stilove (osim kada koristite nešto što nije CSS) i skripte (osim kada koristite nešto što nije JavaScript).

    Navođenje atributa type u ovom slučaju nije potrebno jer HTML5 prema zadanim postavkama koristi text/css (engleski) i text/javascript (engleski). Ovo će raditi čak iu starijim preglednicima.

    Ne preporučuje se:
    Preporučeno:
    Ne preporučuje se:
    Preporučeno:

    Pravila oblikovanja HTML-a Format Highlight nova linija za svaki blok, tablicu ili element popisa i uvucite svaki podređeni element.

    Bez obzira na stilove navedene za element (CSS vam omogućuje promjenu ponašanja elementa pomoću svojstva prikaza), prelomite svaki blok ili element tablice u novi redak.

    Također, uvucite sve elemente ugniježđene unutar elementa bloka ili tablice.

    (Ako imate problema s razmakom između elementi popisa, dopušteno je postaviti sve li elemente na jednu liniju. Lintu [uslužni program za provjeru kvalitete koda cca. prev.] preporučuje se u ovom slučaju izdati upozorenje umjesto pogreške.


    Preporučeno:
    • Maša
    • Glasha
    • Čeburaš

    Preporučeno: Porezi na dobit
    $ 5.00 $ 4.50

    Pravila stila CSS Valjanost CSS-a Koristite valjani CSS kod kad god je to moguće.

    Osim u slučajevima kada je potreban kod ovisan o pregledniku ili pogreške validatora, koristite važeći CSS kod.

    Koristite alate kao što je W3C CSS Validator za provjeru valjanosti koda.

    Valjanost je važna i mjerljiva kvaliteta koda. Pisanje važećeg CSS-a pomaže u uklanjanju suvišnog koda i osigurava pravilnu upotrebu listova stilova...

    Identifikatori i imena klasa Koristite zamjenske znakove ili smislene nazive i identifikatore klasa.

    Umjesto korištenja kodova ili opisivanja izgleda elementa, pokušajte izraziti značenje njegovog stvaranja u imenu klase ili identifikatora, ili mu dajte ime predloška...

    Imena sa zamjenskim znakovima jednostavno su varijante imena za elemente koji nemaju posebnu svrhu ili se ne razlikuju od svojih srodnih. Obično su potrebni kao "pomagači".

    Korištenje funkcionalnih naziva ili naziva predložaka smanjuje potrebu za nepotrebnim izmjenama dokumenta ili predložaka.

    Zastarjelo: /* Zastarjelo: besmisleno */ #yee-1901 () /* Zastarjelo: opis izgleda */ .button-green() .clear()
    Preporučeno: /* Preporučeno: precizno i ​​točno */ #gallery () #login () .video () /* Preporučeno: naziv predloška */ .aux () .alt ()

    Nazivi identifikatora i klasa Za identifikatore i klase koristite sljedeće duga imena, po potrebi, ali što kraće.

    Pokušajte formulirati što biste točno trebali učiniti ovaj element, ali budite što kraći.

    Ova upotreba klasa i identifikatora doprinosi lakšem razumijevanju i učinkovitosti koda.

    Selektori tipa Izbjegavajte korištenje naziva klasa ili identifikatora sa selektorima tipa elementa (oznaka).

    Osim ako je apsolutno neophodno (na primjer s pomoćnim klasama), nemojte koristiti nazive elemenata s nazivima klasa ili identifikatorima.

    Prečaci za svojstva Koristite prečace za svojstva kad god je to moguće.

    CSS nudi mnogo različitih skraćenih oblika (kao što je font), koji se preporučuju za korištenje gdje god je to moguće, čak i ako je navedena samo jedna od vrijednosti.

    Korištenje stenografskog zapisa svojstava korisno je za veću učinkovitost i bolje razumijevanje vašeg koda.

    Ne preporučuje se: /* Ne preporučuje se */ border-top-style: ništa; obitelj fontova: palatino, georgia, serif; veličina fonta: 100%; linija-visina: 1,6; podstava-dno: 2em; padding-lijevo: 1em; padding-desno: 1em; padding-top: 0;
    Preporučeno: /* Preporučeno */ border-top: 0; font: 100%/1,6 palatino, georgia, serif; podstava: 0 1em 2em;

    0 i jedinice Nemojte navoditi jedinice za nulte vrijednosti

    Nemojte navoditi jedinice za nulte vrijednosti osim ako za to nema razloga.

    0 u cijelom dijelu razlomka Ne stavljajte “0” u cijeli dio razlomka.

    Ne stavljajte 0 u cijeli broj u vrijednostima između -1 i 1.

    Navodnici u poveznicama Nemojte koristiti navodnike u poveznicama

    Nemojte koristiti navodnike ("", "") s url() .

    Heksadecimalni nazivi boja Koristite heksadecimalni zapis od tri znaka kad god je to moguće.

    Heksadecimalni zapis od tri znaka za boje je kraći i zauzima manje prostora.

    Prefiksi Selektori prefiksa s prefiksima jedinstvenim za trenutnu aplikaciju. (nije potrebno)

    U velikim projektima, kao iu kodu koji će se koristiti za druge projekte ili na drugim stranicama, koristite prefikse (kao prostore imena) za identifikatore i nazive klasa. Koristite kratke, jedinstvene naslove iza kojih slijedi crtica.

    Korištenje imenskih prostora pomaže u sprječavanju sukoba imena i može olakšati održavanje vaše stranice. Na primjer, kod traženja i zamjene.

    Razdjelnici u klasama i identifikatorima Odvojite riječi u identifikatorima i imenima klasa pomoću crtice.

    Izbjegavajte korištenje bilo čega osim crtice za povezivanje riječi i kratica u selektorima kako biste poboljšali čitljivost i lakše razumijevanje vašeg koda.

    Ne preporučuje se: /* Ne preporučuje se: riječi “demo” i “image” nisu odvojene */ .demoimage () /* Ne preporučuje se: umjesto crtice koristi se podvlaka */ .error_status ()
    Preporučeno: /* Preporučeno */ #video-id().ads-sample()

    Hakovi Izbjegavajte korištenje informacija o verziji preglednika ili CSS hakova - prvo pokušajte s drugim metodama.

    Čini se primamljivim boriti se protiv razlika na poslu. različitim preglednicima korištenjem CSS filtara, hakiranja ili drugih rješenja. Sve ove pristupe treba uzeti u obzir samo kao posljednje sredstvo ako želite učinkovitu bazu koda koju je lako održavati. Jednostavno rečeno, dopuštanje hakiranja i detekcije preglednika dugoročno će naškoditi projektu, jer to znači da projekt ide putem manjeg otpora. Što olakšava korištenje hakova i omogućuje njihovo sve češće korištenje, što će rezultirati prečestim korištenjem.

    Pravila CSS formatiranja Redoslijed oglasa Poredaj oglase po abecedi.

    Definirajte deklaracije abecednim redom kako biste osigurali dosljedan kod s kojim je lako raditi.

    Prilikom sortiranja zanemarite prefikse preglednika. Štoviše, ako se nekoliko prefiksa preglednika koristi za jedno svojstvo, oni također moraju biti sortirani (na primjer -moz bi trebao biti ispred --webkit)

    Uvlake u blokovima. Uvijek uvucite sadržaj bloka.

    Uvijek uvucite bilo koji sadržaj bloka, kao što su pravila unutar pravila ili deklaracija, kako biste prikazali hijerarhiju i olakšali razumijevanje koda.

    Nakon deklaracija Stavite točku i zarez iza svake deklaracije.

    Koristite točku i zarez nakon svake deklaracije radi dosljednosti koda i lakšeg dodavanja novih svojstava.

    Iza imena svojstava Koristite razmake iza dvotočaka u deklaracijama.

    Uvijek koristite jedan razmak iza dvotočke (ali ne prije) u deklaracijama, radi reda u kodu.

    Odvajanje selektora i deklaracija Odvojite selektore i deklaracije prijelomom retka.

    Započnite svaki birač ili deklaraciju u novom retku.

    Pravila razdvajanja Pravila razdvajanja prijelomima redaka.

    Uvijek stavite prijelom retka između pravila.

    Meta pravila CSSGrouping rules Grupirajte pravila i označite grupe s komentarom. (nije potrebno)

    Kad god je moguće, grupno vladajte zajedno. Označite grupe komentarima i odvojite ih prijelomom retka.

    Zaključak Budite dosljedni

    Ako uređujete kôd, odvojite nekoliko minuta da shvatite kako je napisan. Ako su matematički operatori odvojeni razmacima, učinite isto. Ako su komentari okruženi zagradama ili crticama, učinite isto sa svojim komentarima.

    Ideja ovog vodiča je stvoriti opći rječnik, što bi programerima omogućilo da se usredotoče na ono što žele izraziti, a ne na to kako.

    Nudimo jedinstvena pravila dizajne koji vam omogućuju pisanje koda u jednom stilu, ali stil koda koji se već koristi u projektu također je važan.

    Ako se vaš kod jako razlikuje od postojećeg koda, može poremetiti čitateljev ritam i otežati čitanje. Pokušajte to izbjeći.

    Napomena prevoditelja Također bih želio napomenuti da se Google primarno fokusira na velike, visokoopterećene projekte, gdje je svaki bajt skup, pa vrijedi uzeti u obzir da ako preporučuju pokretanje svakog selektora u novom retku ili korištenje razmaka umjesto karticama, to prvenstveno znači da će kôd nužno biti umanjen i komprimiran prije upotrebe na stranici.

    Hvala svima koji su dovde pročitali.

    Oznake:

    • css
    • html
    • stilski vodiči
    Dodaj oznake

    Za vizualno oblikovanje i isticanje teksta u HTML-u koriste se sljedeći elementi:

    JAKO

    Čini tekst podebljanim:

    Između ovih oznaka tekst će biti podebljan EM (naglasak)

    Postavlja tekst između uvodne i završne oznake u kurziv:

    Ovaj tekst će biti u kurzivu U (podvučeno)

    Prikazuje tekst smješten između uvodne i završne oznake kao podvučen:

    Ovaj tekst je podvučen POD

    Prikazuje tekst između početne i završne oznake kao indeks glavnog teksta.

    Formula propana C3H8

    Rezultat: C 3 H 8

    SUP

    Koristi se za stvaranje superskripta. Na primjer:

    Izgledat će kao 2 5 = 32.

    FONT

    Koristi se za promjenu boje, fonta i veličina i teksta.
    Atributi:
    VELIČINA - možete je koristiti za promjenu veličine fonta. Moguće vrijednosti su 1, 2, 3, 4, 5, 6, 7.
    COLOR - postavlja boju teksta.
    LICE - za određivanje fonta (Times New Roman, Arial, Tahoma)

    Na primjer:

    Ovaj tekst nije formatiran

    Uvećani žuti font

    Crveni tekst 3 veličine

    Prilikom pregledavanja u pregledniku vidjet ćemo:

    SIZE="+2" to znači da je font uvećan za 2 jedinice u odnosu na standardni. Standardna veličina fonta je 3.

    HR

    Koristi se za umetanje u tekst vodoravna crta. Posebnost je da nema oznake za zatvaranje.
    Atributi:
    ALIGN – određuje poravnanje vodoravne linije. Atribut može prihvatiti sljedeće vrijednosti:
    lijevo – poravnava s lijevim rubom dokumenta.
    desno – poravnava udesno.
    središte – poravnajte prema sredini dokumenta (zadano).
    WIDTH – koristi se za određivanje duljine retka u pikselima ili postotku širine stranice.
    SIZE – debljina linije u pikselima.
    NOSHADE – s ovim atributom linija je obojena kao čvrsta. Bez toga, linija izgleda voluminozno.
    BOJA – postavite boju linije.

    Na primjer:

    Tekst prije retka Tekst nakon retka
    A ovo je linija debljine 3px bez sjenila
    A ovdje je linija s nijansom u crvenoj boji

    Proizlaziti:


    Sljedeća stranica -

    Označavanje teksta pomoću html oznaka

    Ovaj članak ne pretendira biti potpuni priručnik o html oznakama, ali ako ste zainteresirani za temu, predlažem da razumijete značenje većine oznaka koje su nam potrebne za označavanje teksta.

    Najčešće je tekst na stranici istaknut podebljanim ili kurzivom. Za to postoje posebne oznake i (istaknute podebljanim slovima), kao i (kurzivom). Svi su upareni, odnosno potrebne riječi moraju biti postavljene između početnih i završnih oznaka. Čini se, zašto su smislili dvije oznake za istu radnju?

    Zapravo, u html-u oni obavljaju ne samo dizajnersku ulogu, već i semantičku. Dakle, oznaka b jednostavno podebljuje oznaku bez davanja većeg značenja, ali jaka, osim jednostavnog isticanja, daje riječima i posebnu važnost. Stoga ovaj tag ne bi trebao isticati pola teksta, već ga treba pametno koristiti.

    CSS također ima svojstva koja imaju isti učinak kao navedene oznake. Na primjer, svojstvo font-weight: bold čini tekst podebljanim, a svojstvo font-style: italic čini ga kurzivnim.

    Podcrtavanje i precrtavanje teksta

    Postoje i oznake za podcrtavanje i precrtavanje. podcrtava riječi i precrtava ih. Da biste postigli isti učinak putem css-a, koristite svojstvo text-decoration. Ima nekoliko značenja:

    Underline – podcrtajte odozdo;

    Overline – podcrtano na vrhu;

    Line-through – precrtano;

    Pa ipak, za ovo svojstvo možete navesti nekoliko vrijednosti odvojenih razmakom. Zapravo, čak mu možete dati sve tri vrste podvlaka, ali ne vidim smisao u tome.

    HTML 5 je uveo još jednu oznaku - mark, koja vam omogućuje jednostavno označavanje teksta. Prema zadanim postavkama označen je žutom bojom, iako putem css-a to možete jednostavno nadjačati i stvoriti prilagođeno isticanje koje odgovara dizajnu vaše web stranice.

    Prikaz teksta u nadnaslovu i podnaslovu

    Malo smo se snašli, ali što ako trebate napisati formulu ili nešto drugo gdje trebate prikazati neke brojke ili slova u gornjem ili donjem indeksu. Naravno, html nam pruža potrebne alate za to. Oznaka sub prikazuje font kao indeks, a oznaka sup kao superskript. To se također može učiniti putem css-a. Da biste to učinili, morate napisati traženi tekst:

    okomito poravnanje: sub | super

    okomito - poravnaj : sub | super

    Veličina fonta: veličina fonta nešto manja od običnog teksta

    Kako stilizirati tekst pomoću CSS-a?

    Ako trebate dizajnirati font s koristeći css, tada mu morate nekako pristupiti pomoću selektora. Jedna je stvar ako trebate istaknuti cijeli odlomak ili poveznicu, tada imate selektor, ali što ako trebate istaknuti jednu riječ negdje na sredini članka? Postoji jedan prekrasan za ovo uparena oznaka raspon, koji nema utjecaja na izgled njegov sadržaj i ne pridaje mu nikakvo značenje.

    U skladu s tim, fragment koji vam je potreban za dizajn prilažemo u rasponu, vezujemo proizvoljnu klasu stila na njega i pišemo stilove bez ikakvih problema!

    Izlaz teksta čuvajući razmake.

    U html-u postoji oznaka pre, koja vam omogućuje prikaz informacija onako kako su napisane u uređivaču teksta. Ovo može biti korisno ako pišete pjesmu ili trebate dodati nekoliko razmaka. Također možete kontrolirati oblikovanje teksta putem CSS-a. Za to postoji svojstvo razmaka. Njegova značenja:

    Nowrap – riječi se prikazuju u jednom redu bez crtica. Ako ne stanu u red, pojavit će se vodoravno pomicanje.

    Pre – djeluje slično oznaci pre

    Pre-wrap - slično prethodnoj vrijednosti, ali automatski prelama tekst u novi redak kada više ne stane (možda najbolja vrijednost)

    Poravnanje teksta

    Već smo pokrili neke HTML oznake za tekst, ali vrijedi spomenuti i poravnanje. Postavlja se ne oznakama, već CSS svojstvom poravnanja teksta:

    Desno – na desnom rubu.

    Lijevo - lijevo.

    Centar – u sredini (na primjer, za naslove)

    Justify – po širini. Ova vrijednost znači da će riječi u retku biti rastegnute kako bi zauzele cijelu širinu retka.

    Boja teksta i pozadina

    Opet, ovo se više ne može postaviti pomoću html oznaka, ali se može učiniti putem css-a. Ponovno dolazimo do zaključka da korištenje oznaka za uređivanje html teksta nije baš zgodno. Za samu boju teksta postoji svojstvo boje koje ima mnogo značenja. Boja se može postaviti pomoću ključne riječi(narančasta, crna, crvena), te s eksplicitnom naznakom načina boje: color: rgb(130, 100, 12). Pozadina se postavlja na potpuno isti način, ali samo pomoću svojstva pozadine.

    Veličina i font teksta

    Svojstvo Font-size određuje veličinu fonta, a svojstvo font-family omogućuje odabir samog fonta ili njegove porodice. Na primjer.

    Kao što znate, glavni sadržaj web stranica je tekst. S rijetkim izuzetkom posebnih galerijskih stranica. Stoga ne čudi što HTML ima toliko različitih kontrola prikaza teksta.

    Zapravo, da biste prikazali tekstualni niz u prozoru preglednika, ne morate koristiti nikakve oznake: samo trebate napisati sam tekst. Ali kada ga trebate rastaviti barem na odlomke, ovdje morate koristiti oznake. Činjenica je da u raznim računalni sustavi Za rastavljanje teksta u odlomke koriste se različiti znakovi, a HTML dokumenti uvijek bi se trebali prikazivati ​​što je dosljednije moguće na velikom broju računalnih platformi. Zato smo morali uvesti oznake za označavanje odlomaka.

    Na početku svakog odlomka nalazi se oznaka , a na kraju završna oznaka . U isto vrijeme, oznaka prirodno ima neke parametre. To uključuje općenite identifikacijske parametre koji su nam već poznati razreda I iskaznica, parametar stiliziranja stil, koji ćemo pogledati u drugom poglavlju, i parametar poravnanja uskladiti. Trebalo bi govoriti o posljednjem parametru malo detaljnije.

    U HTML-u, pojam "poravnanje" odnosi se na vodoravno i okomito pozicioniranje elementa. Ali u slučaju odlomaka teksta ima smisla govoriti samo o vodoravnom poravnanju ili, kako se još naziva, "justification".

    Poravnanje vam omogućuje da pritisnete odlomak na lijevi ili desni rub prozora preglednika, centrirate ga ili razvučete riječi tako da tekst ravnomjerno ispuni cijelu širinu prostora koji mu je dodijeljen. U ove svrhe koriste se vrijednosti lijevo, desno, centar I opravdati, odnosno. Razmotrimo njihovu upotrebu na primjeru drugog HTML dokumenta.

    Listing 1.4




    Horizontalno poravnanje a63acev


    Stavak pritisnut na lijevi rub
    Stavak pritisnut na lijevi rub
    Centrirani paragraf

    Odlomak rastegnut po širini

    Rezultat pregledavanja datoteke s takvim kodom pomoću preglednika Internet Explorer prikazan je na sl. 1.4. Kao što vidite, posljednji paragraf, koji je prema našem kodu trebao biti rastegnut u širinu, prikazan je u pregledniku Internet Explorer baš kao i onaj prvi. Ovaj slučaj može poslužiti kao jasan primjer kako preglednici različito percipiraju HTML kod. U našem slučaju, Internet Explorer je jednostavno ignorirao nepoznati parametar, koristeći opciju standardnog prikaza.

    Riža. 1.4. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.4

    Ponekad, kako bi dodatno odvojili jedan odlomak od drugog, kreatori web stranica pokušavaju koristiti prazne odlomke, to jest, ne postoji ništa između početne i završne oznake odlomka. Prema specifikacijama, preglednici bi jednostavno trebali ignorirati takve konstrukcije. Stoga, da biste odvojili odlomke ili prisilili prijelom retka unutar jednog odlomka, trebali biste koristiti oznaku
    . Ovo je oznaka direktive. Jednostavno označava mjesto gdje se zaslon treba pomaknuti u drugi red. Primjer kako se ova oznaka može koristiti za postizanje oba ova cilja prikazan je u HTML dokumentu čiji je kod prikazan u Ispisu 1.5.

    Listing 1.5

    "http://www.w3.org/TR/html4/strict.dtd">
    .

    Prisilni prekidi redaka


    Paragraf koji mi
    Prisilno razderan
    Sljedeći paragraf

    Odlomak nakon prisilnog prekida

    Kako ova datoteka izgleda kada se gleda sa pomoću preglednika, prikazano na sl. 1.5.

    Riža. 1.5. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.5

    Označiti
    uz opće identifikacijske parametre ima i parametar čisto, koji se koristi za točnije poravnavanje teksta kada se prelama oko objekta, na primjer, grafička slika, ugrađen kao dio web stranice. Vrijednost ovog parametra može biti jedna od četiri unaprijed definirane ključne riječi: ništa, lijevo, desno, sve.

    Vrijednost none je zadana i označava da će sljedeći redak započeti tamo gdje bi inače počeo bez ovog parametra. Značenje lijevo označava da će sljedeći redak započeti na lijevoj margini objekta omotanog tekstom. Ako trebate upotrijebiti pravu marginu za ove svrhe, trebali biste upotrijebiti vrijednost pravo. I smisao svi govori pregledniku da može koristiti i lijevu i desnu marginu objekta, sve dok je tekst prikazan što je moguće kompaktnije.

    Sada prijeđimo na razmatranje dizajna fonta teksta. Na bilo kojem mjestu u odlomku možemo koristiti oznaku s određenim skupom parametara, koji će odrediti izgled fonta koji će se koristiti za prikaz teksta koji se nalazi iza te oznake. Završetak ove oznake izvodi se pomoću njenog završnog para .

    Označiti ima sljedeće parametre svojstvene sebi: veličina, koristi se za označavanje veličine fonta koji će se koristiti, boja- za postavljanje boje znakova fonta i lice, označavajući koji će se font koristiti za prikaz teksta. Pogledajmo ove parametre.

    Kao što smo upravo rekli, parametar veličine koristi se za određivanje veličine znakova u korištenom fontu. Vrijednosti za ovaj parametar su brojevi od jedan do sedam. Oni označavaju određenu relativnu veličinu znakova. Činjenica je da u HTML-u ne možete postaviti apsolutnu veličinu znakova u točkama, kao što smo navikli raditi u običnim uredskim aplikacijama. Korisnik će pregledavati web stranicu na svom računalu, a mi ne znamo unaprijed koje je fontove možda instalirao i koje su veličine dostupne. Stoga možemo odrediti samo relativnu veličinu fonta, a korisnički preglednik će sam odabrati najprikladniju veličinu.

    Također možemo navesti promjenu veličine fonta kao vrijednost parametra veličine. Na primjer, da biste povećali veličinu fonta za jednu razinu, koristite sljedeću konstrukciju:

    A da biste smanjili veličinu znakova za dvije razine, upotrijebite sljedeći kod:

    Međutim, za korištenje takvih struktura potrebno je krenuti od određene osnovne veličine. Za postavljanje ove veličine upotrijebite oznaku s istim parametrom veličina. Ako se ova oznaka ne koristi, tada će se treća razina koristiti kao osnovna veličina znakova. Dajmo primjer korištenja ovih oznaka.

    Listing 1.6.




    Veličina simbola





    Stilovi likova


    Tekst je podebljan ili kurziv

    A možda i u isto vrijeme podebljano i kurzivno
    Događa se naglašeno i neprecrtano.
    ili monospace.
    Veličinu znakova možemo povećati i smanjiti.

    Kao što možete vidjeti iz primjera, možemo međusobno kombinirati različite stilove. Ali trebali biste biti oprezni u redoslijedu kojim stavljate oznake. Oznake za otvaranje i zatvaranje moraju se ugnijezditi unutar drugih oznaka koje su prethodno primijenjene. Primjer ovoga može se vidjeti u desetom retku popisa. A kako ovaj HTML dokument izgleda kada se gleda pomoću preglednika prikazano je na sl. 1.7.

    Pogledali smo načine na koje se postavljaju različiti parametri prikaza teksta. Međutim, HTML nudi nekoliko osnovnih načina za prikaz teksta koji ne moraju biti navedeni s hrpom oznaka. Imaju svoje oznake, odnosno definirane su određene kategorije teksta koje se prikazuju na unaprijed definiran način. Sve ove kategorije najčešće se koriste u znanstvenoj i računalnoj industriji. Nabrojimo ih.

    • Pojam je istaknut u tekstu pomoću para oznaka i .
    • "Poboljšano" isticanje, osmišljeno da dodatno privuče pozornost, stvara se pomoću oznake i njenog blizanca za zatvaranje.
    • Korištenjem oznaka i označava se da je tekst koji se nalazi između njih citat.
    • Definicija određenog pojma je istaknuta pomoću oznaka i .
    • Par oznaka koristi se za označavanje izvornog koda u bilo kojem programskom jeziku.
    • Tekstualne informacije koje ispisuje program formatirane su pomoću AND oznaka.
    • Tekst koji unese korisnik označen je oznakama i . P Varijable u izvornom kodu programa označene su pomoću para oznaka i .
    • Oznake i istaknute kratice.
    • A ustaljene kombinacije slova koje nisu kratice, odnosno akronimi, istaknute su oznakama i .

    Međutim, nije dovoljno znati nazive oznaka; također morate jasno razumjeti kako točno formatiraju tekst. I ovdje ne možete bez primjera.

    Riža. 1.7. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.7

    Listing 1.8




    Standardne opcije prikaza

    Ovo je normalan tekst
    Ovo je odabir. I primjetnije isticanje


    Ovo je citat, a ovo je definicija.


    Možemo napisati programski kod, tekst, od strane korisnika,
    izlazni tekst i nevarijable
    Ovako se prikazuju kratice. I tako – akronimi.


    Rezultat prikaza takvog HTML dokumenta prikazan je na sl. 1.8.

    Riža. 1.8. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.8

    Vrlo često postoji potreba za postavljanjem teksta na Web stranicu koja je unaprijed pripremljena pomoću nekog uređivača teksta koji je već samostalno formatirao tekst. U ovom slučaju format teksta, njegove crtice i položaj izravno ovise o duljini retka u znakovima koja je postavljena u ovom uređivaču teksta. Ako se tekst postavi na web-stranicu na uobičajen način, to će oblikovanje biti prekinuto. Stoga je uvedena prilagođena oznaka za ove unaprijed formatirane isječke. Ova oznaka ima parametar širine, čija je vrijednost duljina retka u znakovima. Naravno, preporučljivo je forsirati točan font koji je korišten prilikom oblikovanja teksta prije korištenja ove oznake. Dakle, da bismo umetnuli unaprijed formatirani tekst, možemo koristiti sljedeći isječak koda:

    tekst.

    U u ovom primjeru navodimo da se tekst treba prikazati na temelju pretpostavke da redak ima šezdeset znakova. Međutim, u unaprijed formatiranom tekstu, pravila za "sažimanje prostora" također se ne primjenjuju. Činjenica je da kada preglednik naiđe na nekoliko uzastopnih razmaka u običnom tekstu web stranice, sažima ih u jedan razmak. Ali unaprijed formatirani tekst nije podložan takvoj transformaciji, što vam omogućuje da sačuvate njegovo oblikovanje, koje u najjednostavnijem uređivači teksta radi se korištenjem razmaka. Usput, u HTML-u se tabulator također smatra razmakom.

    Također treba napomenuti da HTML pruža mogućnost korištenja oznaka za prikaz gornjih navodnika, koji se obično koriste za isticanje izravnog govora i nekih citata. Citati su opremljeni oznakom sa svojim završnim blizancem . A za uokvirivanje izravnog govora obično se koriste oznake i . U isto vrijeme, oznaka ima parametar cite, čija je vrijednost mrežna adresa, također nazvana URL, internetskog izvora na kojem se izvorno nalazi citirani tekst. A zajedno s oznakom obično se koristi parametar lang, čija je vrijednost kodna oznaka jezika, prema interpunkcijskim pravilima na kojima se postavljaju ograničavajući navodnici. Nije tajna da u različiti jezici Uobičajeno je koristiti različite navodnike.

    Treba spomenuti i problem transfera. Kreatori web stranica obično niti ne razmišljaju o ovom problemu, a preglednici se ne bave prelamanjem riječi. Ako riječ ne stane u redak, jednostavno se premješta u drugi redak. Ali to nije jedini ispravan način prikaza teksta. Može doći do situacije kada trebate prikazati tekst pomoću rastavljanja riječi. HTML nudi dvije vrste crtica - eksplicitne i takozvane "meke". Eksplicitno rastavljanje crtica stvara se korištenjem crtice koja se obično zamjenjuje numeričkim zamjenama teksta "-". Međutim, eksplicitno rastavljanje crtica je nezgodno jer kada se promijeni veličina prozora preglednika, duljina retka može se promijeniti, ali će oznaka rastavljanja i dalje ostati vidljiva . Čak i ako je u sredini reda. Stoga često koriste "meke" prijenose. Izrađuju se zamjenom teksta "-". U tom slučaju simboli meke crtice nisu vidljivi u tekstu, a samo u slučaju kada bilo koja riječ u koju su umetnuti ti simboli ne stane u cijelosti u red, ona se crticom rastavlja na slogove, prema umetnutom “ meke” crtice. I samo jedan od mekih simbola rastavljanja riječi u ovoj riječi postaje vidljiv.

    HTML vam također omogućuje prikaz superskripta i indeksa pomoću njegovih oznaka. Par oznaka i koristi se za stvaranje gornjeg indeksa, a indeks mora biti okružen oznakama i. Pogledajmo primjer korištenja ovih oznaka.

    Listing 1.9




    Bepx i indeksi

    Voda je H20


    Odnos mase i energije - E = mc2



    Kako točno preglednik prikazuje indekse prikazano je na sl. 1.9.

    Riža. 1.9. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.9

    Također za dizajn teksta To su vodoravne linije koje često odvajaju značajne dijelove tekstualnog sadržaja web stranica. Redak se umeće u tekst HTML dokumenta pomoću oznake. Oznaka ima nekoliko parametara koji vam omogućuju fino podešavanje izgleda vodoravne linije.

    Parametar align omogućuje određivanje vodoravnog poravnanja linije. Parametar može imati jednu od tri unaprijed postavljene vrijednosti: lijevu, desnu i središnju, koje guraju vodoravnu crtu na lijevi ili desni rub okvira za prikaz, odnosno u središte. Zadana vrijednost je centar. Ako oznaka uključuje parametar noshade, tada prikazana vodoravna linija neće imati sjenu. I posljednji parametar širine omogućuje postavljanje duljine vodoravne linije. Zadana vrijednost je "100%". A visina linije u pikselima postavlja se pomoću parametra veličine. Pogledajmo korištenje svih ovih parametara na primjeru.

    Listing 1.10





    Ovo je normalna linija prikazana prema zadanim postavkama


    Ovo je skraćena linija pritisnuta ulijevo


    Ovo je skraćena linija koja se nalazi u sredini


    Ovo je skraćena linija pritisnuta udesno


    Ovo je debela linija bez sjene


    Kako takav HTML dokument izgleda kada se gleda u pregledniku prikazano je na sl. 1.10.

    I ovdje možda možemo završiti naše razmatranje mogućnosti oblikovanja teksta svojstvenih HTML-u.

    Riža. 1.10. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.10