LABORATORIJSKI RAD br. 2 LISTE SU JEDNOSTAVNE I Umetnute. KREIRANJE HTML TABELA

Svrha rada: kreiranje i testiranje HTML datoteke. Izrada lista. Umetanje tabela i njihova struktura. Rasporedite stranice pomoću tabela.

Kratki teorijski podaci

U HTML dokumentu postoje tri glavne vrste lista: numerirana označena lista definicija

Možemo stvoriti ugniježđene liste koristeći različite oznake popisa ili ponavljajući jednu u drugoj. Da biste to učinili, trebate samo postaviti jedan par oznaka (početak i kraj)

unutar drugog. Da li ugniježđene stavke liste imaju iste oznake kao i stavka liste, ovisi o pregledniku. Za više detalja pogledajte odjeljak "Ugniježđene liste".

Numerisane liste

Na numerisanoj listi pregledač automatski ubacuje brojeve stavki po redosledu. To znači da će, ako izbrišete jednu ili više stavki s numerirane liste, ostatak brojeva automatski biti preračunat.

Numerirana lista počinje početnom oznakom

i završava oznakom

1. Programiranje

2. Algoritmizacija

3. Dizajn

Tag

može imati parametre:

gdje: tip - Tip mjerača:

A - velika latinična slova (A, B, C ...) a - mala latinična slova (a, b, c ...) I - veliki rimski brojevi (I, II, III ...) i - mali rimski brojevi (i, ii, iii ...) 1 - redovne cifre (1,2,3 ...)

start = "n" - Broj od kojeg počinje odbrojavanje Na primjer:

15. Programiranje
16. Algoritmizacija
17. Dizajn

XV. Programiranje

XVI. Algoritmizacija

XVII. Dizajn

Nabrajane liste.

Za liste s grafičkim oznakama preglednik obično koristi grafičke oznake za označavanje stavke liste. Vrstu markera obično konfigurira korisnik preglednika.

Označena lista počinje početnom oznakom

i završava oznakom
... Svaka stavka liste počinje oznakom
1. ... Na primjer:

2. Programiranje
3. Algoritmizacija
4. Dizajn

Programiranje

Algoritmizacija

Dizajn

Tag

može imati parametar:

Vrsta oznake

definiše izgled marker kao zadani (disk), okrugli (krug) ili kvadrat (kvadrat). Na primjer:

• Programiranje
• Algoritmizacija
• Dizajn

 Programiranje

 Algoritmizacija

Dizajn

Liste definicija.

< dl>…- uparena oznaka - prikazuje popis definicija.

Dizajn:

Termin

Definicija pojma

Tagged

atribut compact možete koristiti za postavljanje kompaktnijeg položaja stavki liste.

Dizajn:

Termin

Definicija pojma

Tabele u HTML -u su organizovane kao zbirka kolona i redova. Ćelije tablice mogu sadržavati bilo koje HTML elemente, poput naslova, popisa, odlomaka, oblika, grafike i elemenata obrasca.

Oznake glavne tabele Tabela:

...

Ovo su glavne oznake koje opisuju tablicu. Svi elementi tablice moraju biti unutar ove dvije oznake. Tablica prema zadanim postavkama nema granica ili separatora. Granica se dodaje atributom border.

Red za stolom: ...

Broj redova tablice određen je brojem nađenih parova oznaka ..... Žice mogu imati poravnajte atribute i valign, koji opisuju vizuelni položaj sadržaja redova u tabeli.

Ćelija tablice: ...

Opisuje standardnu ​​ćeliju u tablici. Ćelija tablice može se opisati samo unutar reda tablice. Svaka ćelija treba biti numerirana brojem kolone za koju je opisana. Ako retku nedostaje jedna ili više ćelija za neke stupce, tada preglednik prikazuje praznu ćeliju. Zadana lokacija podataka u ćeliji određena je atributima align = "left" i valign = "middle". Ovaj raspored se može ispraviti i na nivou opisa linije i na nivou opisa ćelije.

Bilo koja ćelija u tablici ne može se definirati oznakama

…, i oznake …- Zaglavlje tablice (zaglavlje tablice). th

je normalna ćelija, ali će tekst unutar ovih oznaka biti podebljan i centriran.

Potpis: ...

Ova oznaka opisuje naziv tablice (potpis). Tag mora biti prisutno unutra

..., ali izvan opisa bilo kojeg reda ili ćelije. Zadano ima atribut align = "top", ali se može eksplicitno postaviti na align = "bottom". poravnati

određuje gdje će se potpis staviti na vrh ili dno tablice. Potpis je uvijek centriran unutar širine tablice.

Osnovni atributi obruba tablice

Ovaj atribut se koristi u oznaci tablice. Ako je ovaj atribut prisutan, granica tablice se iscrtava za sve ćelije i za tablicu u cjelini. border može biti numerička vrijednost koja određuje širinu ivice, na primjer border = "3".

vitez sa buretom 19. septembra 2012. u 11:16

Greške koje treba izbegavati pri pisanju HTML koda

Svi koji svakodnevno rade s HTML -om trebali bi biti vrlo oprezni jer nije tako lako slijediti sva HTML pravila. Ovo je vrlo važno jer HTML validator pronalazi sve, čak i manje nedostatke, a na kraju dobivate kôd stranice s greškom. Danas ćemo pokušati skrenuti pažnju na najčešće. Siguran sam da će predložene preporuke biti od velike koristi mnogima, posebno početnicima, programerima. Zato dobrodošli ispod

Netačno ugnježđenje HTML oznaka

Vrlo je važno sve ispravno zatvoriti. HTML oznake... Moraju se zatvoriti obrnutim redosledom u poređenju sa načinom na koji su otkriveni. Većina početnika ne obraća dovoljno pažnje na to. Ako su oznake zatvorene pogrešnim redoslijedom, dobit ćete greške pri provjeri valjanosti, a neki se stilovi možda neće koristiti. Budi pazljiv!

Greška

Vaš tekst

Milostivo

Vaš tekst

Korištenje blok elemenata unutar umetnutih elemenata

Svatko tko je malo koristio HTML u praksi zna da se element može prikazati ili kao blok ili kao niz. Blok elementi uključujući paragrafe i odjeljke moraju biti umetnuti. Ovo je logička struktura dokumenta, stoga pazite da je vaš kôd slijedi.

Popularni ugrađeni elementi: , , ,
Popularni blok elementi:

,

…

,

,

,
, ,

Greška

Greška

Milostivo

Standard

Netačna upotreba lista

Oznake OL i UL mogu se koristiti za prikaz stavki liste na različite načine. Dobit ćete i mnoge dodatne pogodnosti. Oznake popisa vrlo su korisne pri oblikovanju informacija za njihovo pravilno prikazivanje. Preporučujem da prilikom izrade popisa izbjegavate korištenje navodnika. Tražilice su jednako dobre u korištenju lista jer pomažu u strukturiranju informacija na stranici. Umjesto hakova koristite standardne oznake.

Korištenje stilova u kodu

Vjerojatno ste već čuli da je korištenje stilova u vašem kodu loše. Jeste li se ikada zapitali zašto je to tako? To je zato što su CSS i semantički HTML posebno dizajnirani za odvajanje sadržaja od stila. Ovaj model pruža mnogo više fleksibilnosti i pogodnosti za rad s dokumentima.

Greška

Tvoj divan tekst

Zanemarujući oznake naslova

Oznake naslova dizajnirane su za postavljanje naslova u zasebnom odjeljku na stranici. Standard pretpostavlja upotrebu oznaka iz

prije

... Dizajn i raspored teksta u njima mogu biti bilo što, ali neka dokument bude pravilno strukturiran!

Greška Tvoj divan naslov

Tekst vašeg članka.

Milostivo

Tvoj divan naslov

Tekst vašeg članka.

Netačna upotreba oznake FORM

Svi griješimo kada stvaramo obrasce i tablice u HTML -u. Upamtite da tablica mora biti kreirana već unutar obrasca!

Greška

...

Milostivo
...

Ne koristi se ALT atribut

Prilikom rada sa slikama morate koristiti atribut ALT. To je potrebno jer će korisnici moći odrediti što bi trebalo biti na mjestu slike, čak i ako koriste vrlo sporu vezu. Ova vrijednost trebala bi opisati suštinu korištene slike. Nikada nemojte koristiti alt = "picture". Ako slika obavlja isključivo dekorativne funkcije, upotrijebite alt = "*".

Greška Milostivo

Pogrešne oznake za podebljano ili kurziv

Mada i u većini slučajeva odlično obavljaju svoje zadatke, upotreba stilova za ukrašavanje teksta omogućuje vam mnogo veću fleksibilnost dizajna. Ako oznaka samo treba podcrtati značenje određenog dijela teksta, upotrijebite oznake i .

Beskorisno korištenje prijeloma retka

Tag
može se koristiti jednom po retku za početak sljedeće rečenice u sljedećem retku. Mnogi ljudi koriste ovu oznaku za stvaranje razmaka između elemenata. Ova upotreba nije u skladu sa standardima.

Greška Prvi odlomak.


Nastavak teksta. Milostivo

Prvi paragraf.

Nastavak teksta.

Oznake: HTML, greške

Oblikovanje teksta u HTML -u - metode i primjeri - 4.0 od 5 na osnovu 1 glas

Kako to promijeniti da bismo ga podijelili u paragrafe i razmatrali smo u prethodnim lekcijama.

U ovoj lekciji ćemo pogledati kako možete formatirati tekst u HTML -u i koje oznake za to postoje.

Prvo, pogledajmo kako možete promijeniti izgled teksta pomoću oznake i u paru ga zatvara... Tag postoji nekoliko atributa. Pomoću atributa face = "" možete postaviti font teksta. Da biste to učinili, između navodnika u atributu face = "" morate napisati naziv fonta.

Na primjer: Vaš tekst

U ovom primjeru font je postavljen na Arial i sav tekst smješten između oznaka bit će prikazan ovim fontom. Možete navesti ne jedan, već nekoliko fontova odvojenih zarezima, u ovom slučaju bit će odabran prvi odgovarajući font s popisa. Odnosno, ako se, na primjer, prvi font u sistemu za korisnika koji je ušao na vašu stranicu ne pojavi, bit će odabran drugi font.

Zapisano je ovako: Vaš tekst

Morate biti oprezni pri odabiru fonta. Nema potrebe za navođenjem različitih egzotičnih fontova. Zato što ih jednostavno nema na računaru vašeg posetioca. Najbolje je koristiti standardne fontove kao što su Arial, Times Roman, Vernada, Tahoma.

Sljedeći atribut oznake to je veličina = "". Pomoću ovog atributa možete postaviti veličinu fonta. Da biste to učinili, između navodnika morate navesti broj od 1 do 7.

Na primjer: Vaš tekst

Osim toga, postoji još jedna grupa HTML oznaka koje se koriste za oblikovanje teksta, a pomoću njihovog teksta možete istaknuti podebljano, kurziv, podcrtati ili precrtati.

Pomoću oznake možete podebljati tekst i u paru ga zatvara... Tekst između ovih oznaka bit će podebljan. Osim toga, podebljani tekst se može napraviti pomoću oznake i u paru ga zatvara... Bolje je koristiti drugu oznaku za označavanje ključnih riječi na stranici.

Na primjer: Thumbnail

Pomoću oznake možete učiniti tekst kurzivim tekst smješten između ove dvije oznake bit će nagnut desno.

Na primjer: Kurzivan tekst

Podvučeni tekst može se napraviti pomoću oznake i uparene oznake za zatvaranje... Ispod teksta između ovih oznaka bit će redak.

Na primjer: Podvučeni tekst

Precrtani tekst može se stvoriti pomoću oznake i uparene oznake za zatvaranje tekst između ovih oznaka bit će centriran, s linijom kroz njega.

Na primjer: Precrtani tekst

Sljedeća HTML oznaka koja se koristi za oblikovanje teksta je i u paru ga zatvara... Tekst između ovih oznaka bit će veći u odnosu na glavni.

Na primjer: Veliki tekst

Tag i u paru ga zatvara potpuno suprotno od gore pomenute oznake. Tekst između ovih oznaka bit će manji u odnosu na osnovni tekst.

Na primjer: Mali tekst

I na kraju, preostale su nam još dvije oznake koje trebamo razmotriti, to su oznake koji definiraju superscript, to jest, tekst između ovih oznaka bit će manji i bit će prikazan na vrhu glavnog fonta.

Na primjer: ^Superscript

I oznake definirati indeks. Test koji se nalazi između ovih oznaka bit će smješten ispod glavnog teksta.

Na primjer: _Subscript

Zapravo, uz pomoć ovih oznaka možete definirati jedan ili drugi stil fonta i formatirati tekst u html -u.

Materijal koji je portal pripremio:

Pretraživač	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Verzija	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Podržano	Da	Da	Da	Da	Da	Da	Da	Da	Da	Da	Da	Da	Da

Opis

Tag je spremnik za promjenu karakteristika fonta kao što su veličina, boja i font. Iako ovu oznaku i dalje podržavaju svi preglednici, zastarjela je i preporučuje se da se izbaci u korist stilova.

Sintaksa

Text

Završna oznaka

Obavezno.

Parametri

color Postavlja boju teksta. lice Određuje font za font. size Određuje veličinu fonta u proizvoljnim jedinicama.

Primjer 1. Upotreba oznake










NS Prvo slovo ove rečenice napisano je arijskim jezikom, označeno crvenom bojom i uvećano.





Opis parametara oznake

COLOR parametar

Opis

Postavlja boju teksta unutar spremnika .

Sintaksa

...

Arguments

Vrijednost boje može se postaviti na dva načina.

1. Po imenu

Preglednici podržavaju neke boje po imenu.

2. Prema heksadecimalnoj vrijednosti

Za postavljanje boja koriste se heksadecimalni brojevi. Heksadecimalni sistem, za razliku od decimalnog sistema, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalnom obliku nastaju kombiniranjem dva broja u jedan. Na primjer, 255 decimal je FF heksadecimalno. Kako bi se izbjegla zabuna u definiciji brojevnog sistema, raspršeni znak # stavlja se ispred heksadecimalnog broja, na primjer # 666999. Svaka od tri boje - crvena, zelena i plava - može se kretati od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dvije srednje - zelenu, a posljednje dvije - plavu.

Analogni CSS

Zadana vrijednost

Zadana boja za preglednik.

FACE parametar

Opis

Parametar face koristi se za postavljanje fontova fontova koji se koriste za tekst. Može se dati nekoliko naziva fontova, odvojenih zarezima. U tom slučaju, ako prvi navedeni font nije pronađen, preglednik će koristiti sljedeći na popisu.

Sintaksa

...

Arguments

Bilo koji broj naziva fontova odvojenih zarezima. Univerzalne porodice fontova:
serif - serif fontovi (zastarjeli), kao što je Times;
sans -serif - serif fontovi (sans serif ili sans serif fontovi), tipično Arial;
kurzivi - kurzivi;
fantasy - ukrasni fontovi;
monospace - monospace fontovi, širina svakog znaka u takvoj porodici je ista.

Analogni CSS

Zadana vrijednost

Zadani font za preglednik.

SIZE parametar

Opis

Postavlja veličinu fonta u proizvoljnim jedinicama od 1 do 7. Prosječna veličina koja se koristi prema zadanim postavkama je 3. Veličina fonta se može navesti i kao apsolutna vrijednost (na primjer, veličina = "4"), ili kao relativna vrijednost (za na primjer, size = "+ 1", size = "- 1"). U potonjem slučaju, veličina se mijenja u odnosu na osnovnu liniju. Na veličinu fonta ne utječe samo specificirani parametar veličine, već i izbor slova fonta. Na primjer, Arial izgleda veće od Timesa, a Verdana je nešto veća od Ariala. Imajte to na umu pri odabiru fonta i njegovih veličina.

Sintaksa

...

Arguments

Cijeli broj od 1 do 7 ili promijenite vrijednost gore ili dolje pomoću simbola + i -.

Pitanja za test

Šta je HTML? Koliko parova potrebnih oznaka znate? Između kojih oznaka je naslov dokumenta? Koji par oznaka definira odlomak u dokumentu? Naslov drugog nivoa, poravnat udesno, označen je oznakom: Kako ispravno na engleskom jeziku. Na jeziku se oznake za poravnavanje pišu desno, lijevo, na sredinu, širinu: Odsustvo parametra poravnanja u oznakama naslova ili odlomka dovodi do poravnanja teksta prema: Koje nesparene oznake znate? Vodoravna linija 50 % širine, 2 piksela debljine, bez reljefa, postavljeno plavom oznakom Šta nam je potrebnou html -u? Koje 2 vrste (metode) oblikovanja teksta u html dokumentu poznajete? Koje oznake treba koristiti za dobijanje precrtanog podebljanog teksta? Kako izgleda isječak koda koji daje kurzivan i podcrtani tekst: Koje oznake pomiču tekst u odnosu na nivo glavnog retka (superscript i indeks)? Kojoj oznaci za oblikovanje pripadaju parametri lica, boje i veličine? Šta se dešava ako font naveden u parametru lica nije instaliran na računaru? Koje oznake prikazuju tekst na isti način (u kurzivu) za različite zadatke? Šta se dešava ako oznaka neće biti zatvorena? Ako trebate prikazati jednoprostorni tekst na stranici, to ćete učiniti pomoću oznaka: Protumačite sljedeći isječak koda:
Veseli HTMLŠta je hipertekst? Koji su sastavni dijelovi bilo koje veze? Za organiziranje veze iz indeksa. htm u knjigu dokumenata. htm koji se nalazi u istom direktoriju, morate napisati red: Kako izgleda obična hiperveza (bez nametnutih stilova)? Šta se dešava ako datoteka na koju povezujete nedostaje? Kako se pravilno povezati iz indeksa. htm koji se nalazi u korenu do risunki. htm se nalazi u fascikli sa slikama ispod shedevr? Kada je preporučljivo koristiti interne veze? Da biste napravili internu vezu do odjeljka "Izdanja" (sidro-izdan) iz odjeljka "Ispis": Objasnite značenje sljedećeg fragmenta: Zaključak Kako se povezati na poštanski sandučić ***** @ *** sr Šta određuje parametar bgcolor? Koji se brojevni sistemi koriste za predstavljanje boja u HTML -u? Koju boju predstavlja plava? Kako izgleda html stranica bez parametara body body? Provjerite ispravna tri atributa parametra oznake tijela? Koji parametar postavlja boju pregledane veze? Koliko parametara body tag-a koji definiraju granice polja html-dokumenta znate Koji parametar body tag-a vam omogućava da postavite sliku kao pozadinu dokumenta? Koja je oznaka za numerisanu i označenu listu? Kako mogu promijeniti vrstu markera u ispunjeni kvadrat? Kako okomito spojiti ćelije tablice? Horizontalno?