Darba sākšana ar HTML: Tabulas

HTML, saīsinājums no HyperText Markup Language. Tas ir standarts, kas kalpo kā atsauce tīmekļa lapu izstrādei dažādās versijās, nosaka pamatstruktūru un kodu (ko sauc par kodu) HTML), lai noteiktu tīmekļa lapas saturu, piemēram, tekstu, attēlus, videoklipus. Lai sāktu saprast, kā tiek definēta šīs valodas struktūra, šajā apmācībā mēs sāksim, zinot etiķetes, ar kurām tiek apstrādātas tabulas, un tās ir ļoti noderīgas, veidojot galvenokārt biļetenu un vēstuļu struktūras.
Šīs apmācības mērķis ir sniegt skaidrojumu, kas palīdz grafiskajiem dizaineriem pēc iespējas vienkāršākā veidā saprast dokumentu struktūru un loģiku HTML iegūt pamatzināšanas, kas ļaus ģenerēt failus šajā valodā.

Prasības

- Jums ir tāds koda redaktors kā Dreamweaver CS6, Notepad ++, cildens teksts cita starpā pieejams internetā.
- instalējiet tīmekļa pārlūkprogrammu, piemēram, Chrome, Firefox, Opera, Safari, Edge vai Internet Explorer.
1. darbība. Zinot tabulu izveides etiķetes
ar šo etiķeti mēs definējam tabulas sākumu struktūrā HTML.
ļauj izveidot tabulas rindu
attēlo kolonnu galveni, šīs kolonnas veido šūnas.
<>> ir šūnu attēlojums, kas atradīsies tabulas rindās.
Šīs ir visas etiķetes, kas mums būs vajadzīgas, lai izveidotu tabulas. Nākamajā solī mēs uzzināsim, kā tās tiek deklarētas koda ietvaros un to secībā.
2. darbība: etiķešu loģiska deklarēšana.
Ir svarīgi zināt, ka HTML ir jāatver lielākā daļa tagu, tieši tad, kad mēs tos deklarējam, un arī tie ir jāaizver, šis piemērs ilustrē šo jēdzienu:

Kā redzat, katrai etiķetei jābūt atvēršanai un aizvēršanai. Tie atšķiras galvenokārt ar slīpsvītru "/", ar kuru etiķete tiek aizvērta. Katru reizi, kad tiek izveidota atzīme, ir obligāti jāpaziņo par tās slēgšanu tādā pašā veidā.
3. solis: etiķešu hierarhiska deklarēšana.
Etiķete Tā ir pirmā, kas norāda, ka ir izveidota tabula, līdz ar to sākta veidot šūnas, kurās būs redzamā informācija.
Tabulas veido kolonnas un rindas.

Rūpējoties par katras etiķetes hierarhisko secību, mēs izveidosim tabulu un iepazīstināsim ar rindām, kas mums būs nepieciešamas tabulai zemāk redzamajā attēlā:

Tabulā redzamajam kodam vajadzētu izskatīties šādi:

Lai gan tabulas rindas jau ir definētas, ir jāizveido šūnas, kas veido tabulas kolonnas. Tālāk redzamais attēls ilustrē šo koncepciju:

Tabulā redzamajam kodam vajadzētu izskatīties šādi:

4. darbība: satura pievienošana šūnām
Katrs tags [color = # 7030a0] [/ krāsa] ir līdzvērtīga mūsu tabulas šūnai, tāpēc šo informāciju var pievienot. Mēs mainīsim pirmajā etiķetē [color = # 44546a] [/ color] deklarēja visu rindu [color = # 7030a0] [/ color] pēc galvenes tagiem [color = # 002060][/Krāsa]. Vietā [color = # 7030a0][/ color] no pārējām rindām mēs pievienojam satura paraugu. Kods HTML Tam vajadzētu izskatīties šādi:

 
 
 
Lieta
 
Vārds
 
Uzvārds
 

 
 
1
 
Pedro
 
Rozes
 

 
 
2
 
Džons
 
Avoti
 

5. darbība: saglabājiet dokumentu HTML un apskatiet failu
Koda rediģēšanas programmā mēs ejam uz izvēlni Fails / Saglabāt, saglabājot dokumentu formātā .html

Vēlāk mēs atveram dokumentu mūsu izvēlētajā pārlūkprogrammā:

Mūsu izveidotajai tabulai vajadzētu izskatīties zemāk esošajā attēlā.

Līdz šim mēs esam iemācījušies etiķešu nosaukumu un funkciju HTML veidot tabulas, to hierarhisko secību, loģisko izkārtojumu un pievienot tām saturu. Tagad mēs esam gatavi tabulām pievienot grafiskos atribūtus.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu