LABORATORIJAS DARBU Nr. 2 SARAKSTI IR VIENKĀRŠI UN ligzdoti. HTML TABULU VEIDOŠANA

Darba mērķis: HTML faila izveide un pārbaude. Sarakstu veidošana. Tabulu ievietošana un to struktūra. Lapu izkārtojums, izmantojot tabulas.

Īsa teorētiskā informācija

HTML dokumentā ir trīs galvenie sarakstu veidi: definētu sarakstu saraksts ar aizzīmēm

Mēs varam izveidot ligzdotus sarakstus, izmantojot dažādus sarakstu tagus vai atkārtojot vienu otru. Lai to izdarītu, jums vienkārši jāievieto viens atzīmju pāris (sākums un beigas)

cita iekšpusē. Tas, vai ligzdotajiem saraksta vienumiem ir tādi paši aizzīmju punkti kā saraksta vienumam, ir atkarīgs no pārlūkprogrammas. Plašāku informāciju skatiet sadaļā "Ligzdotie saraksti".

Numurētie saraksti

Numurētā sarakstā pārlūkprogramma automātiski ievieto vienumu numurus secībā. Tas nozīmē, ka, izdzēšot vienu vai vairākus vienumus no numurētā saraksta, pārējie skaitļi tiks automātiski pārrēķināti.

Numurēts saraksts sākas ar sākuma tagu

un beidzas ar tagu

1. Programmēšana

2. Algoritmizācija

3. Dizains

Tag

var būt šādi parametri:

kur: tips - skaitītāja veids:

A - lielie latīņu burti (A, B, C ...) a - mazie latīņu burti (a, b, c ...) I - lielie romiešu cipari (I, II, III ...) i - mazie romiešu cipari (i, ii, iii ...) 1 - regulāri cipari (1, 2, 3 ...)

start = "n" - skaitlis, no kura sākas atpakaļskaitīšana, piemēram:

15. Programmēšana
16. Algoritmizācija
17. Dizains

XV. Programmēšana

XVI. Algoritmizācija

XVII. Dizains

Saraksti ar aizzīmēm.

Sarakstiem ar aizzīmēm pārlūkprogramma parasti izmanto aizzīmes, lai atzīmētu saraksta vienumu. Marķiera veidu parasti konfigurē pārlūkprogrammas lietotājs.

Saraksts ar aizzīmēm sākas ar sākuma tagu

un beidzas ar tagu
... Katrs saraksta vienums sākas ar atzīmi
1. ... Piemēram:

2. Programmēšana
3. Algoritmizācija
4. Dizains

Programmēšana

Algoritmizācija

Dizains

Tag

var būt parametrs:

Atzīmes veids

definē izskats marķieris pēc noklusējuma (disks), apaļš (aplis) vai kvadrāts (kvadrāts). Piemēram:

• Programmēšana
• Algoritmizācija
• Dizains

 Programmēšana

 Algoritmizācija

 Dizains

Definīciju saraksti.

< dl>…- pair tag - parāda definīciju sarakstus.

Dizains:

Jēdziens

Termina definīcija

Atzīmēts

varat izmantot kompakto atribūtu, lai iestatītu kompaktāku saraksta vienumu izvietojumu.

Dizains:

Jēdziens

Termina definīcija

HTML tabulas ir sakārtotas kā kolonnu un rindu kolekcija. Tabulas šūnas var saturēt jebkurus HTML elementus, piemēram, virsrakstus, sarakstus, rindkopas, formas, grafiku un veidlapas elementus.

Galvenie tabulas tagi Tabula:

...

Šie ir galvenie tagi, kas raksturo tabulu. Visiem tabulas elementiem ir jāatrodas šajos divos tagos. Pēc noklusējuma tabulai nav apmaļu vai atdalītāju. Apmale tiek pievienota ar apmales atribūtu.

Tabulas rinda: ...

Tabulas rindu skaitu nosaka pēc atrasto tagu pāru skaita ..... Stīgas var būt izlīdzināt atribūtus un valign, kas apraksta tabulas rindu satura vizuālo stāvokli.

Tabulas šūna: ...

Apraksta standarta tabulas šūnu. Tabulas šūnu var aprakstīt tikai tabulas rindā. Katra šūna jāsumurē ar tās kolonnas numuru, kurai tā ir aprakstīta. Ja rindā dažām kolonnām trūkst vienas vai vairāku šūnu, pārlūkprogramma parāda tukšu šūnu. Datu noklusējuma atrašanās vietu šūnā nosaka atribūti align = "left" un valign = "middle". Šo izkārtojumu var labot gan rindas apraksta līmenī, gan šūnas apraksta līmenī.

Jebkuru tabulas šūnu var definēt, nevis tagus

… un tagus …- Tabulas galvene (tabulas galvene). th

ir normāla šūna, taču teksts šajos tagos būs treknrakstā un centrā.

Paraksts: ...

Šis tags apraksta tabulas nosaukumu (parakstu). Tag jābūt klāt iekšā

..., bet ārpus jebkuras rindas vai šūnas apraksta. Noklusējuma ir atribūts align = "top", bet to var skaidri iestatīt uz align = "bottom". izlīdzināt

nosaka, kur paraksts tiks novietots tabulas augšā vai apakšā. Paraksts vienmēr ir centrēts tabulas platumā.

Pamata tabulas apmales atribūti

Šis atribūts tiek izmantots tabulas tagā. Ja šis atribūts ir, tabulas apmale tiek uzzīmēta visām šūnām un tabulai kopumā. border var būt skaitliska vērtība, kas norāda apmales platumu, piemēram, border = "3".

bruņinieks ar mucu 2012. gada 19. septembris, pulksten 11:16

Kļūdas, no kurām jāizvairās, rakstot HTML kodu

Ikvienam, kurš ikdienā strādā ar HTML, jābūt ļoti uzmanīgiem, jo ​​nav nemaz tik vienkārši ievērot visus HTML noteikumus. Tas ir ļoti svarīgi, jo HTML pārbaudītājs atrod visus, pat mazākos, trūkumus, un jūs saņemat kļūdas lapas kodu. Šodien mēs centīsimies pievērst uzmanību visbiežāk sastopamajiem. Esmu pārliecināts, ka piedāvātie ieteikumi būs ļoti noderīgi daudziem, īpaši iesācējiem, izstrādātājiem. Tāpēc laipni aicināti zem

Nepareiza HTML tagu ligzdošana

Ir ļoti svarīgi visu pareizi aizvērt. HTML tagi... Viņiem ir jāieslēdzas apgrieztā secībā salīdzinot ar to, kā tie tika atklāti. Lielākā daļa iesācēju tam nepievērš pietiekamu uzmanību. Ja atzīmes tiek aizvērtas nepareizā secībā, tiks parādītas validācijas kļūdas un daži stili var netikt izmantoti. Esi uzmanīgs!

Kļūda

Jūsu teksts

Žēlsirdīgi

Jūsu teksts

Bloku elementu izmantošana inline elementos

Ikviens, kurš kaut nedaudz lietojis HTML praksē, zina, ka elementu var attēlot vai nu kā bloku, vai kā virkni. Bloka elementiem, tostarp rindkopām un sadaļām, jābūt iekļautiem. Šī ir loģiska dokumenta struktūra, tāpēc pārliecinieties, ka kods seko tai.

Populāri iekļautie elementi: , , ,
Populārie bloku elementi:

,

…

,

,

,
, ,

Kļūda

Kļūda

Žēlsirdīgi

Standarta

Nepareiza sarakstu izmantošana

OL un UL tagus var izmantot, lai parādītu saraksta vienumus dažādos veidos. Jūs iegūsit arī daudz papildu priekšrocību. Saraksta tagi ir ļoti noderīgi, formatējot informāciju, lai to pareizi parādītu. Es iesaku izvairīties no pēdiņu lietošanas, veidojot sarakstus. Meklētājprogrammas tikpat labi izmanto sarakstus, kā arī palīdz strukturēt lapā esošo informāciju. Izmantojiet standarta tagus, nevis hacks.

Stila izmantošana kodā

Jūs droši vien jau esat dzirdējuši, ka stilu izmantošana kodā ir slikta. Vai esat kādreiz domājuši, kāpēc tas tā ir? Tas ir tāpēc, ka CSS un semantiskais HTML ir īpaši izstrādāti, lai atdalītu saturu no stila. Šis modelis nodrošina daudz lielāku elastību un ērtības darbam ar dokumentiem.

Kļūda

Jūsu brīnišķīgais teksts

Virsrakstu atzīmju ignorēšana

Virsrakstu tagi ir paredzēti, lai iestatītu virsrakstus atsevišķā lapas sadaļā. Standarts paredz izmantot tagus no

pirms tam

... Teksta noformējums un izkārtojums tajos var būt jebkas, bet lai dokuments ir pareizi strukturēts!

Kļūda Tavs brīnišķīgais virsraksts

Jūsu raksta teksts.

Žēlsirdīgi

Tavs brīnišķīgais virsraksts

Jūsu raksta teksts.

Taga FORM nepareiza izmantošana

Mēs visi pieļaujam daudz kļūdu, veidojot veidlapas un tabulas HTML valodā. Atcerieties, ka tabula ir jāizveido jau formas iekšpusē!

Kļūda

...

Žēlsirdīgi
...

Neizmantojot ALT atribūtu

Strādājot ar attēliem, jāizmanto atribūts ALT. Tas ir nepieciešams, jo lietotāji varēs noteikt, kam vajadzētu būt attēla vietā, pat ja viņi izmanto ļoti lēnu savienojumu. Šai vērtībai vajadzētu raksturot izmantotā attēla būtību. Nekad neizmantojiet alt = "attēls". Ja attēls veic tīri dekoratīvas funkcijas, izmantojiet alt = "*".

Kļūda Žēlsirdīgi

Nepareizi atzīmes treknrakstā vai slīprakstā

Lai gan un vairumā gadījumu viņi lieliski tiek galā ar saviem uzdevumiem, stilu izmantošana teksta dekorēšanai ļauj iegūt daudz lielāku dizaina elastību. Ja atzīmei vajadzētu tikai pasvītrot noteiktas teksta daļas nozīmi, izmantojiet tagus un .

Bezjēdzīgi izmantot rindu pārtraukumu

Tag
var izmantot vienu reizi katrā rindā, lai nākamajā rindā sāktu nākamo teikumu. Daudzi cilvēki izmanto šo tagu, lai izveidotu atstarpes starp elementiem. Šis lietojums neatbilst standartiem.

Kļūda Pirmā rindkopa.


Teksta turpinājums. Žēlīgi

Pirmā rindkopa.

Teksta turpinājums.

Tagi: HTML, kļūdas

Teksta formatēšana HTML valodā - metodes un piemēri - 4,0 no 5, pamatojoties uz 1 balsi

Kā mainīt, lai to sadalītu rindkopās, un mēs to esam apsvēruši iepriekšējās nodarbībās.

Šajā nodarbībā apskatīsim, kā var formatēt tekstu HTML un kādi tagi tam pastāv.

Vispirms apskatīsim, kā var mainīt teksta izskatu, izmantojot tagu un pārī to aizver... Tag ir vairāki atribūti. Izmantojot atribūtu face = "", varat iestatīt teksta fontu. Lai to izdarītu, starp pēdiņām atribūtā face = "" ir jāieraksta fonta nosaukums.

Piemēram: Jūsu teksts

Šajā piemērā fonts tika iestatīts uz Arial, un viss teksts, kas ievietots starp tagiem, tiks parādīts šajā fontā. Var norādīt nevis vienu, bet vairākus fontus, atdalot tos ar komatiem, tādā gadījumā tiks atlasīts pirmais piemērotais fonts no saraksta. Tas ir, ja, piemēram, pirmais fonts sistēmā lietotājam, kurš ievadīja jūsu lapu, neparādās, tad tiks atlasīts otrais fonts.

Tas ir rakstīts šādi: Jūsu teksts

Izvēloties fontu, jums jābūt uzmanīgam. Nav nepieciešams norādīt dažādus eksotiskus fontus. Jo tie vienkārši var nebūt jūsu apmeklētāja datorā. Vislabāk ir izmantot standarta fontus, piemēram, Arial, Times Roman, Vernada, Tahoma.

Nākamā taga atribūts tas ir izmērs = "". Izmantojot šo atribūtu, varat iestatīt fonta lielumu. Lai to izdarītu, starp pēdiņām jānorāda skaitlis no 1 līdz 7.

Piemēram: Jūsu teksts

Turklāt ir vēl viena HTML tagu grupa, ko izmanto teksta formatēšanai, ar to teksta palīdzību jūs varat izcelt treknrakstā, slīprakstā, pasvītrot vai izsvītrot.

Varat padarīt tekstu treknrakstā, izmantojot tagu un pārī to aizver... Teksts starp šiem tagiem būs treknrakstā. Turklāt, izmantojot tagu, var izveidot treknrakstu un pārī to aizver... Labāk ir izmantot otro tagu, lai lapā izceltu atslēgvārdus.

Piemēram: Sīktēls

Izmantojot tagu, tekstu var padarīt slīprakstā teksts, kas ievietots starp šiem diviem tagiem, būs slīps pa labi.

Piemēram: Teksts slīprakstā

Pasvītrotu tekstu var izveidot, izmantojot tagu un pāra noslēguma tagu... Zem teksta starp šiem tagiem būs rindiņa.

Piemēram: Pasvītrots teksts

Pārsvītrotu tekstu var izveidot, izmantojot tagu un pāra noslēguma tagu teksts starp šiem tagiem tiks centrēts ar līniju caur to.

Piemēram: Pārsvītrots teksts

Nākamais HTML tags, ko izmanto teksta formatēšanai, ir un savienots pārī, aizverot to... Teksts starp šiem tagiem būs lielāks salīdzinājumā ar galveno.

Piemēram: Liels teksts

Tag un savienots pārī, aizverot to tieši pretējs tagam, kas tika apspriests iepriekš. Teksts starp šiem tagiem būs mazāks attiecībā pret pamattekstu.

Piemēram: Mazs teksts

Un visbeidzot, mums jāapsver vēl divas atzīmes, tās ir atzīmes kas nosaka augšrakstu, tas ir, teksts starp šiem tagiem būs mazāks un tiks parādīts galvenā fonta augšdaļā.

Piemēram: ^Virsraksts

Un birkas definēt apakšindeksu. Tests, kas atrodas starp šiem tagiem, atradīsies zem galvenā teksta.

Piemēram: _Apakšraksts

Patiesībā ar šo tagu palīdzību jūs varat definēt vienu vai otru fonta stilu un formatēt tekstu html.

Portāla sagatavotais materiāls:

Pārlūkprogramma	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Versija	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
Atbalstīts	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā	Jā

Apraksts

Tag ir konteiners fontu raksturlielumu, piemēram, izmēra, krāsas un burtveidola, mainīšanai. Lai gan šis tags joprojām tiek atbalstīts visās pārlūkprogrammās, tas ir novecojis un ieteicams to atteikties, izvēloties stilus.

Sintakse

Teksts

Beigu tags

Obligāti.

Iespējas

krāsa Iestata teksta krāsu. face Norāda fonta burtveidolu. izmērs Norāda fonta lielumu patvaļīgās vienībās.

1. piemērs. Atzīmes izmantošana










NSŠā teikuma pirmais burts ir rakstīts Arial, izcelts sarkanā krāsā un palielināts.





Tagu parametru apraksts

Parametrs COLOR

Apraksts

Iestata konteinera teksta krāsu .

Sintakse

...

Argumenti

Krāsas vērtību var iestatīt divos veidos.

1. Pēc tā nosaukuma

Pārlūkprogrammas atbalsta dažas krāsas pēc nosaukuma.

2. Pēc heksadecimālās vērtības

Heksadecimālos skaitļus izmanto krāsu iestatīšanai. Heksadecimālā sistēma, atšķirībā no decimālās sistēmas, balstās, kā norāda tās nosaukums, uz skaitli 16. Skaitļi būs šādi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Cipari no 10 līdz 15 tiek aizstāti ar latīņu burtiem. Skaitļi, kas ir lielāki par 15 heksadecimālā veidā, tiek veidoti, apvienojot divus skaitļus vienā. Piemēram, 255 aiz komata ir FF heksadecimāls. Lai izvairītos no neskaidrībām skaitļu sistēmas definīcijā, heksadecimālā skaitļa priekšā tiek ievietots jaucējsimbols #, piemēram, # 666999. Katra no trim krāsām - sarkana, zaļa un zila - var būt no 00 līdz FF. Tādējādi krāsas apzīmējums ir sadalīts trīs komponentos #rrggbb, kur pirmās divas rakstzīmes iezīmē krāsas sarkano sastāvdaļu, divas vidējās - zaļās, bet pēdējās divas - zilās.

Analogais CSS

Noklusējuma vērtība

Pārlūka noklusējuma krāsa.

FACE parametrs

Apraksts

Sejas parametrs tiek izmantots, lai iestatītu tekstam izmantoto fontu burtveidolu. Var norādīt vairākus fontu nosaukumus, atdalot tos ar komatiem. Šādā gadījumā, ja pirmais norādītais fonts netiek atrasts, pārlūkprogramma izmantos nākamo sarakstā.

Sintakse

...

Argumenti

Jebkurš skaits ar komatu atdalītu fontu nosaukumu. Universālās fontu saimes:
serif - serif fonti (novecojuši), piemēram, Times;
sans-serif — serif fonti (sans serif vai sans serif fonti), parasti Arial;
kursīvs — slīpraksti;
fantāzija - dekoratīvie fonti;
monospace - monospace fonti, katras rakstzīmes platums šādā saimē ir vienāds.

Analogais CSS

Noklusējuma vērtība

Pārlūkprogrammas noklusējuma fonts.

SIZE parametrs

Apraksts

Norāda fonta lielumu parastajās vienībās no 1 līdz 7. Vidējais pēc noklusējuma izmantotais izmērs ir 3. Fonta lielumu var norādīt gan kā absolūtu vērtību (piemēram, izmērs = "4"), gan kā relatīvu vērtību ( piemēram, izmērs = "+ 1", izmērs = "- 1"). Pēdējā gadījumā izmērs mainās attiecībā pret bāzes līniju. Fonta lielumu ietekmē ne tikai norādītais lieluma parametrs, bet arī fonta veida izvēle. Piemēram, Arial izskatās lielāks par Times, un Verdana ir nedaudz lielāks par Arial. Paturiet to prātā, izvēloties fontu un tā izmērus.

Sintakse

...

Argumenti

Vesels skaitlis no 1 līdz 7 vai mainiet vērtību uz augšu vai uz leju, izmantojot simbolus + un -.

Jautājumi testam

Kas ir HTML? Cik vajadzīgo tagu pāru jūs zināt? Starp kādiem tagiem atrodas dokumenta nosaukums? Kāds tagu pāris nosaka rindkopu dokumentā? Otrā līmeņa virsrakstu, kas izlīdzināts pa labi, norāda tags: Kā pareizi rīkoties angļu valodā. Valodā izlīdzināšanas tagi tiek rakstīti labajā, kreisajā pusē, centrā, platumā: līdzinājuma parametra neesamība virsraksta vai rindkopas tagos noved pie teksta līdzināšanas pēc: kādus nepāra tagus jūs zināt? Horizontālā līnija 50 % platums, 2 pikseļu biezums, bez reljefa, iestatīts zilā tagā Kam mēs esam vajadzīgihtml? Kādus 2 teksta formatēšanas veidus (metodes) html dokumentā jūs zināt? Kādi tagi jāizmanto, lai treknrakstā būtu pārsvītrots? Kā izskatās koda fragments, kas sniedz slīprakstu un pasvītrotu tekstu: Kādi tagi novirza tekstu attiecībā pret galvenās rindas līmeni (augšraksts un apakšindekss)? Kurai formatēšanas atzīmei pieder sejas, krāsas un izmēra parametri? Kas notiek, ja datorā nav instalēts sejas parametrā norādītais fonts? Kuri tagi dažādiem uzdevumiem parāda tekstu vienādi (slīprakstā)? Kas notiek, ja atzīme netiks slēgts? Ja lapā ir jāparāda teksts ar vienu atstarpi, varat to izdarīt, izmantojot tagus: Interpretējiet šo koda fragmentu:
Jautrs HTML Kas ir hiperteksts? Kādas ir jebkuras saites sastāvdaļas? Lai sakārtotu saiti no indeksa. htm uz dokumentu grāmatu. htm, kas atrodas tajā pašā direktorijā, jums jāieraksta rindiņa: Kā izskatās parasta hipersaite (bez tai uzliktajiem stiliem)? Kas notiek, ja trūkst faila, uz kuru veidojat saiti? Kā pareizi izveidot saiti no indeksa. htm, kas atrodas risunki saknē. htm, kas atrodas attēlu mapē zem shedevr? Kad ir ieteicams izmantot iekšējās saites? Lai izveidotu iekšējo saiti uz sadaļu "Publikācijas" (anchor-izdan) no sadaļas "Drukāt": Paskaidrojiet šāda fragmenta nozīmi: Secinājums Kā izveidot saiti uz pastkasti ***** @ *** lv Kas nosaka parametru bgcolor? Kādas skaitļu sistēmas tiek izmantotas, lai attēlotu krāsas HTML? Kādu krāsu attēlo zils? Kāds ir html lapas izskats bez body tag parametru klātbūtnes? Vai pārbaudīt pareizos trīs body tag parametru atribūtus? Kāds parametrs nosaka skatītās saites krāsu? Cik html dokumenta lauku apmales definējošo body tag parametru jūs zināt. Kāds body tag parametrs ļauj ievietot attēlu kā dokumenta fonu? Kas ir numurēta un aizzīmju saraksta atzīme? Kā mainīt marķiera veidu uz aizpildītu kvadrātu? Kā vertikāli sapludināt tabulas šūnas? Horizontāli?