Lapas veidnes kods. Ar platu rāmi. Izvēles tagi HTML5
Nodarbība “Kā izveidot HTML lapu” ir veltīta ļoti vienkāršas tīmekļa lapas izkārtojumam. Jūs uzzināsiet, kā pareizi saglabāt HTML failu, iestatīt nepieciešamo kodējumu, lai pārlūkprogrammā pareizi parādītu HTML lapu, un ievietot tīmekļa lapā tekstus, sarakstus un attēlus.
Pēc šīs nodarbības apguves jūs jau uzzināsiet, kā izveidot savu pirmo tīmekļa lapu, kā parādīts 1. attēlā.
1. attēls
1. HTML dokumenta struktūra
HTML failiem ir paplašinājums .htm vai .html.
Tagi parasti ir savienoti pārī: sākuma un beigu tagi. Sākotnējais —<>, galīgs, Piemēram
Un
Tiek saukts arī pārī savienots tags konteiners .
Dažiem tagiem nav vajadzīgā tagu pāra, šis tags tiek izsaukts viens
. Šāda atzīme tiek aizvērta, piemēram, pirms aizvēršanas leņķikavas ierakstot labo slīpsvītru
html dokumenta struktūra izskatās šādi (2. attēls).
2. attēls
Paskaidrojumi par sarakstu 2. attēlā
Pirmajā rindā DOCTYPE konstrukcija nozīmē vienu no tīmekļa lapas izkārtojuma standartiem.
Starp tagiem
Un
satur galvenes daļu. Tas ietver dizainu
3. attēls
Ieraksts nozīmē kirilicas kodējumu, lai burti pārlūkprogrammā tiktu parādīti pareizi. Ja kodējums nav norādīts, fonti dažkārt var tikt parādīti šādi (4. attēls)
4. attēls
Tā pati lapa pēc kodējuma ievietošanas (5. attēls)
5. attēls
Piezīme: kodēšanas vietā charset="windows-1251" varat izmantot kodējumu charset=" utf -8" , kas ļauj izveidot daudzvalodu vietnes, jo tajā atrodas visas pasaulē esošās rakstzīmes. Šajā gadījumā iekšā Notepad++ ir nepieciešams pirms izkārtojuma un saglabāšanashtml- augšējā izvēlnē atlasiet failu Kodējumi — kodēt uz UTF -8 bez BOM (UTF-8 bez MK)
Šī informācija ir pietiekama, lai izveidotu pirmo dokumentu.
1. prakse
1. Izveidojiet mapi, piešķiriet tai nosaukumu mansmāja. Visu mapju un failu nosaukumi ir jāizveido ar latīņu mazajiem burtiem, Krievu nosaukumus nevar izmantot. Glabājiet vārdus īsus un jēgpilnus.
Mēs ierakstīsim tīmekļa lapas kodu Notepad. Labāk ir izmantot nevis Windows komplektācijā iekļauto Notepad, bet gan “uzlabotāku”, piemēram, Notepad++. Izplatīšana Notepad++ atrodas mapē CD/distr.
2. Atveriet Notepad++. Pārliecinieties, vai ir iestatīts ANSI kodējums, lai to izdarītu vienuma izvēlnē Kodējumi, iestatīt pozīciju Kodēt uz ANSI.
3. Ievadiet kodu no saraksta 2. attēlā programmā Notepad++.
Kods 2. attēla sarakstā mums turpmāk kalpos par veidni, lai mums nebūtu katru reizi jāievada HTML dokumenta struktūra. Kopējiet DOCTYPE konstrukciju no šejienes (nav nepieciešams to iegaumēt vai iegaumēt).
4. Saglabājiet failu kā template.html mapē mana māja, atrodoties laukā Faila veids uzstādīt Visi veidi(6. attēls), pretējā gadījumā jūsu tīmekļa lapa netiks atvērta pārlūkprogrammā.
6. attēls
5. Pēc saglabāšanas palaist veidne. html dubultklikšķi. Rezultātā jūsu fails izskatīsies šādi (7. attēls).
7. attēls
Ja jūs nesaņemat rezultātu, kā parādīts attēlā, tas nozīmē, ka kodā, visticamāk, ir kļūda. Pietiek ar vienu nepareizu rakstzīmi, un tīmekļa lapa netiks parādīta pareizi. Vēlreiz pārbaudiet kodu, izmantojot sarakstu 2. attēlā.
6. Mapes iekšpusē mana māja izveidot mapi publiski_ html. Šis nosaukums parasti ir mape, kurā vietne tiek glabāta, kad tā tiek mitināta reālā mitināšanā (šo mapi var saukt arī par www).
7. Saglabājiet failu veidne. html mapē publiski_ html ar jaunu nosaukumu galvenais. html.
8. No mapes CD/ html_css_1 atveriet failu text_main.txt programmā Notepad++, kā arī atveriet failu, kas saglabāts ar nosaukumu galvenais. html
9. Kopējiet visu tekstu no faila text_main.txt un ielīmējiet to failā galvenais. html frāzes “Web lapas saturs” vietā. Tagā
10. Saglabājiet izmaiņas un priekšskatiet failu galvenais. html pārlūkprogrammā. Jūs redzēsit neformatētu tekstu. Pārlūks pat neveic rindiņu pārtraukumus, kas ir avota tekstā (8. attēls).
8. attēls
2. Formatēšanatīmeklī-lapas atzīmētasHTML
Šī HTML lapas izveides apmācība ietver pamata tagus, kas tiek izmantoti tīmekļa lapas iezīmēšanai.
Tagi ir paredzēti, lai formatētu tīmekļa lapas tekstu. Sīkāk tagu sarakstu var apskatīt mapē CD/KatalogaHTML direktorijā html401_ru.chm(augšējā izvēlnes vienumā elementi).
Apskatīsim dažus tagus.
Elementi h 1, h 2, h 3, h 4, h 5, h 6
Dokumenta pamatteksta strukturēšana tiek veikta elementa iekšpusē < ķermeni> izmantojot virsrakstus, ko nosaka elementi h1, h2, h3, h4, h5, h6.
Virsraksta elementi ir savienoti pārī, tāpēc tiem ir jābūt atverei < h1> un aizvēršana h1> tagus.
HTML ir seši virsrakstu līmeņi: h1 (augšējais), h2, h3, h4, h5 un h6 (apakšējais). Virsrakstu elementu funkcionalitāte ir līdzīga parastajiem virsrakstu stiliem teksta redaktoros.
Šo sešu tagu ietekme ir parādīta zemāk esošajos attēlos. Vienā bildē avots(9. attēls), no otras puses - skats pārlūkprogrammā (10. attēls).
9. attēls
10. attēls
Teksta sadalīšana rindkopās
Tag < lpp> iestata rindkopas sākumu un rindkopas augšdaļā ievieto atstarpi — atkāpi, lai atdalītu šo rindkopu no iepriekšējās.
Spēka līnijas pārtraukums
Tag
ļauj pārtīt atlikušo rindkopas tekstu nākamajā rindā. Šis ir nesapārots tags un atšķirībā no rindkopas taga nepalielina atstarpi starp rindām.
2. prakse
1. Formatējiet nosaukumu “Arhitektūras projektu katalogs”, izmantojot tagus
Un
.2. Formatējiet nosaukumu “Projekti Jūsu nākotnes mājai”, izmantojot tagus
Un
.3. Formatējiet virsrakstus “Māju projekti” un “Māju teritorijas”, izmantojot tagus
Un
.4. Sadaliet galveno tekstu rindkopās, izmantojot tagu
Pirmajās divās rindkopās izmantojiet tagu
lauzt līniju. Rezultātā jūsu kodam vajadzētu izskatīties šādi (11. attēls).
5. Skatiet rezultātu pārlūkprogrammā.
11. attēls
Aizzīmēti un numurēti saraksti
Izmantojot HTML rīkus, varat izveidot jebkurus sarakstus: numurētus (ciparu un alfabētiskus) un ar aizzīmēm dažādi veidi marķieri.
Tag < ul>…ul> ģenerē sarakstu ar aizzīmēm.
Tag < ol>…ol> ģenerē numurētu sarakstu.
Viens saraksta vienums kā
- , un iekšā
- Ieviesiet 13. attēlā redzamo kodu jaunā failā.
- Saglabājiet failu mapē mana māja zem nosaukuma spisok_ vlozh. html. Rezultāts attēlā. 13
- absolūts;
- radinieks.
- ievadiet mapi mape_2,
- pēc tam ievadiet mapi mape_1,
- pēc tam pievienojiet attēlu.
- iziet no mapes mapes_1,
- iziet no mapes mapes_2,
- pievienojiet attēlu.
- iziet no mapes mapes_1,
- iziet no mapes mapes_2,
- dodieties uz mapi mape_3,
- dodieties uz mapi mape_4,
- pievienot attēlu pic.jpg
- iziet no mapes mapes_1,
- iziet no mapes mapes_2,
- iziet no mapes mapes_3,
- ievadiet mapi mape_4,
- pievienot attēlu pic.jpg.
- template.html
- main.html
- spisok_vlozh.html
- mapes iekšpusēmana mājajābūt mapeipubliski_ htmlar topošās vietnes failiem
- septiņi piemēri par relatīvo adresāciju un divi piemēri kā kontroles piemēri no praktiskais uzdevums 14
- atslēgvārdi un lapas apraksts;
- saites uz citiem failiem (*.css un *.js).
- izveidots, izmantojot tagu <
li>
.
3. prakse
1. Sadaļā “Mājas projekti” izveidojiet numurētu sarakstu.
2. Izveidojiet sarakstu ar aizzīmēm zem virsraksta “Māju teritorijas”. Jūsu kods izskatīsies šādi (12. attēls).
12. attēls
3. Skatiet lapu pārlūkprogrammā.
Sarakstus var ievietot vienu otrā, izmantojot dažādus marķierus.
Ligzdota saraksta piemērs ir parādīts attēlā. 13
4. prakse
13. attēls. Ligzdota saraksta piemērs
Fontu stili
Tag … - ļauj parādīt tekstu treknrakstā.
Tag … - ļauj parādīt tekstu slīprakstā.
Tag … - parāda pasvītrotu tekstu.
Piemēram:
Šajā gadījumā tiks parādīts teksts trekns slīpraksts , bet nav pasvītrots.
Un šajā gadījumā teksts tiks uzrakstīts trekns pasvītrots slīpraksts .
Apakšraksti un augšindeksi
Tag < apakš> Un apakš> ļauj pazemināt tekstu par pusi rindiņas zem parastā teksta.
Tag < sup> Un sup> ļauj pacelt tekstu par pusi rindiņas virs parastā teksta. Teksts, kas atrodas starp šiem tagiem, tiks parādīts mazākā fontā nekā parastais teksts.
5. prakse
1. Pirmajā rindkopā treknrakstā formatējiet nosaukumu myhouse.ru (14. attēls).
14. attēls
2. Formatējiet frāzi “Vairāk nekā 95% projektu” otrajā rindkopā pasvītrotā slīprakstā (15. attēls).
15. attēls
3. Formatējiet virsrakstus, kur izmantoti kvadrātmetri (16. attēls).
16. attēls
4. Saglabājiet failu. Skatīt, izmantojot pārlūkprogrammu. Tīmekļa lapai jāizskatās šādi (17. attēls).
17. attēls
3. Attēlu ievietošana
Mūsu rakstā Kā izveidot HTML lapu mēs apskatīsim, kā tīmekļa lapā ievietot attēlus.
Tagu izmanto attēlu ievietošanai .
Nepieciešamais atribūts šim tagam ir src(no angļu valodas SouRCe - avots). Tas nosaka ceļu uz grafiskais fails, kura attēlam jābūt attēlotam tīmekļa lapā.
Lai ievietotu attēlu, izmantojiet komandu 
Piemēram: "
attēls1.jpg"
alt="Attēls" />
!}
Alt atribūts ir nepieciešams, lai, skatot tīmekļa lapu atspējoto attēlu režīmā, trūkstošā attēla vietā būtu uzraksts, kas ierakstīts alt atribūtā. Tāpat ieteicams vienmēr lietot alt tekstus, jo meklētājprogrammas, meklējot attēlus, tos analizē kā atslēgvārdus.
Grafiskie faili var būt formātā jpg, gif, png un vienmēr krāsu modelīRGB.
6. prakse
1. Pēc māju platību saraksta ievietojiet mājas lapā kotedžu projektu attēlus projektu_1.jpg Un projektu_2.jpg no mapes CD/html_css_1 . Lai to izdarītu, vispirms kopējiet šos divus attēlus mapē, kurā atrodas fails main.html. Attēla ievietošanas kods izskatīsies šādi (18. attēls).
18. attēls
2. Skatiet rezultātu pārlūkprogrammā (19. attēls).
19. attēls
Būtībā tagu lietošanas principsHTMLjābūt skaidram. Tos izmanto pēc viena principa: ja atzīme ir konteiners, tad ir atvēršanas un aizvēršanas birka. Ja atzīme ir viena, tad noslēguma nav; šajā gadījumā labā slīpsvītra tiek rakstīta pirms beigu leņķiekavas, piemēram,< br/>. Neatkarīgi no tā, vai tags ir konteiners vai viens, vienmēr varat skatīt specifikācijuhtml401_ru.chm sadaļā “elementi”.
4. Adresēšana vietnē
Pirmajā nodarbībā, kā izveidot HTML lapu, mēs izpētīsim adresēšanas jēdzienus HTML.
Apsvērsim risināšanas iespējas, kad attēli jāievieto html failā, kas var atrasties dažādās vietnes mapēs.
Ir divi adresācijas veidi:
Absolūta uzrunāšana (izmantojot datora disku nosaukumus) nav izmantots(20. attēls)
20. attēls
Lietots relatīvā adresācija - adresēšana dokumentā vai dokumentu komplektā vienā serverī. Lai atsauktos uz failu vietnē, pārlūkprogrammai ir jānorāda ceļš, kas jāizmanto, lai nokļūtu vajadzīgajā failā.
|
1. piemērs Attēls atrodas tajā pašā mapē, kurā atrodas HTML dokuments (21. attēls). Tas nozīmē, ka attēls un HTML fails atrodas vienā līmenī failu sistēma un HTML dokuments var nekavējoties pievienot attēlu. Šajā gadījumā attēla ievietošana tīmekļa lapā izskatīsies šādi.
21. attēls Praktisks uzdevums7 Īstenojiet 1. piemēru (izveidojiet mapi, doc.html failu, uzņemiet jebkuru attēlu). Attēls |
|
2. piemērs Attēls attēls. jpg atrodas mapē mapi_1 . HTML dokuments atrodas ārpus mapes_1. Tie. Vietnes failu sistēmā HTML dokuments atrodas vienu līmeni augstāk par attēlu (22. attēls). Jums jāievada mape mape_1, pēc tam pievienojiet attēlu
22. attēls Praktisks uzdevums8 Īstenojiet 2. piemēru (izveidojiet mapi, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. |
|
3. piemērs Attēls attēls. jpg atrodas mapē mapi_1 , kas savukārt atrodas mapē mapi_2 . HTML dokuments atrodas ārpus šīm mapēm (23. attēls). Tādējādi HTML dokuments ir divus līmeņus augstāks par attēlu. Nepieciešams:
23. attēls Praktisks uzdevums9 Īstenojiet 3. piemēru (izveidojiet mapes, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. |
|
4. piemērs mapi_1 . Attēls atrodas ārpus mapes_1. Tie. HTML dokuments atrodas vienu līmeni zemāk par attēlu (24. attēls). Jums jāiziet no mapes_1 un pēc tam jāpievieno attēls. Par mapes atstāšanu liecina konstrukcija ../ (divi punkti un slīpsvītra pa labi).
24. attēls Praktisks uzdevums10 Īstenojiet 4. piemēru (izveidojiet mapi, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. |
|
5. piemērs HTML dokuments atrodas mapē mapi_1 , kas savukārt atrodas mapē mapi_2 . Attēls atrodas ārpus šīm mapēm. Tādējādi HTML dokuments atrodas divus līmeņus zemāk par attēlu (25. attēls). Nepieciešams: Tā kā jums ir jāiziet divreiz, dizains ../ atkārtoja divas reizes.
25. attēls 1. prakse1 Īstenojiet 5. piemēru (izveidojiet mapes, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. |
|
6. piemērs (26. attēls) Nepieciešams:
26. attēls 1. prakse2 Īstenojiet 6. piemēru (izveidojiet mapes, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. |
|
Piemērs 7 (27. attēls) Nepieciešams: Tā kā jums ir jāiziet trīs reizes, dizains ../ atkārto trīs reizes.
27. attēls 1. prakse3 Īstenojiet 7. piemēru (izveidojiet mapes, doc.html failu, uzņemiet jebkuru attēlu). Attēls jāievieto doc.html tīmekļa lapā. Tādējādi neatkarīgi no tā, cik reižu jums ir jāiziet, mēs tik daudz reižu ievietojam konstrukciju ../, un, ja mēs ieejam, mēs uzskaitām ceļā atrasto mapju nosaukumus. |
/
>
/
>
/
>
1. prakse4
1. Izveidojiet html dokumentu un ievietojiet tajā attēlu, lai ceļš uz attēlu būtu šāds.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Izstrādājiet savu piemēru attēla ievietošanai html dokumentā, lai tajā būtu un Izeja no mapēm un ieeja mapēs. Piemēram ir jāatšķiras no visiem iepriekš minētajiem piemēriem.
Pabeidzot šo tēmu, jums vajadzētu izveidot šādus failus:
Ir izgudrotas daudzas valodas, bet HTML ir viena no īpašajām un populārākajām valodām. Ar to ir saistītas daudzas citas galvenās programmēšanas attīstības tendences. Daudz kas kļūst iespējams, ja izstrādātāja prātam ir zināšanas par iezīmēšanas valodu - hiperteksta iezīmēšanas valodu (HTML).
Pēc būtības HTML nav nekā sarežģīta, un pēc dažām minūtēm ikviens, kurš ir tālu no programmēšanas un interneta, varēs izveidot HTML lapu Notepad. Ievērības cienīgs piemērs, vienkāršība, kas patiesi pieejama ikvienam.
vispārīgs apraksts
HTML fails ir viena vietnes lapa, lai gan par to var strīdēties, taču tas, ka viens fails veido vienu lapu, ir skaidrs.
HTML fails sākas ar galveni DOCTYPE, kas norāda, ka faila tips ir HTML. Visi lapas elementi (birkas) ir norādīti leņķa iekavās. Katrs pāris ("<» и «>") ietver vienu HTML tagu. Parasti HTML tagi ir pa pāriem, tas ir, katram “tagam” ir “/tag”. Abi ir ievietoti leņķa iekavās. Ir atsevišķi tagi, no kuriem populārākais ir “br/” - pāreja uz nākamo rindu.
Lielākais tags failā ir pats HTML, kurā ir tikai divi tagi: HEAD un BODY. Pirmajā tiek veidoti dažādi apraksti, norādītas saites uz citiem lapā nepieciešamajiem failiem, kas var būt PHP skripti un JavaScript. Otrais ieraksta lapas saturu. Arī tagu un skriptu veidā.
Vienkārša HTML lapa
Šādas lapas izveides piemērs ir sniegts zemāk rakstā. Apskatīsim to uzmanīgi.
GALVAS sadaļa
Galvenais mērķis - vispārīgs apraksts lapas un vispārīgie skripti, lai gan pēdējais ir diezgan relatīvs jēdziens. Parasti šeit liela nozīme tiek piešķirta tikai divām lietām:
Lapas satura attēlošanai šīs sadaļas saturs ir svarīgs tikai netieši, jo tas norāda: kaut kur citos failos ir CSS noteikumi tagiem un skriptiem citās valodās.
HTML lapai ir lapa, kas tiek parādīta, kad apmeklētājs pārvieto peli uz cilni, kurā lapa ir atvērta. Šis svarīgs punkts, jo tas padara lapu ievērojami reprezentablāku, vieglāk sakāmu, parakstītu ar lasāmu tekstu.
META tagi ir svarīgi interneta programmēšanā kopumā, taču, kad ir nepieciešams izveidot HTML lapu Notepad, nav ieteicams piemēru pārblīvēt ar nevajadzīgām konstrukcijām.
Ja skriptēšana ir jāpieiet pēc HTML zināšanu iegūšanas, nekavējoties ir jārisina kaskādes stila lapas. CSS faili satur īpaši noformējuma noteikumus HTML tagi.
BODY sadaļa
Faktiski HTML lapas piemērs ir sadaļa BODY. Šeit ir visa informācija, viss vietnes lapas saturs. Visa informācija tiek parādīta tagu un skriptu veidā, piemēram, ievietojot JavaScript kodu vai PHP programmu gabalus.
Ir svarīgi saprast, ka HTML tīmekļa lapas piemērs pārlūkprogrammā un tas pats piemērs teksta redaktorā, jo īpaši Notepad, nav viens un tas pats. Pirmajā gadījumā mums ir gatavs HTML teksts, kurā tiek izpildīti visi skripti. Piemēram, PHP strādāja savu daļu un sava koda vietā izveidoja nepieciešamos tagus. Arī JavaScript ir izpildījis savu misiju, lai gan tas vēl ir jāapspriež atsevišķi.
HTML ir tagi, nevis skripti. Galu galā pārlūkprogramma parāda tikai lapas saturu, tikai tās tagus. PHP koda tur nav.
JavaScript ir īpašā stāvoklī, tā rūpes ir apkalpot lapu ne tikai ielādes (pārslodzes) brīdī, bet arī brīžos, kad lapa atrodas apmeklētāja pārlūkprogrammā, un viņš to pēta.
Vienkāršs piemērs (tikai sadaļa BODY) ir parādīts zemāk.
Un apmeklētāja pārlūkprogrammā tas izskatās šādi:
Kods nenorādīja, kā vajadzētu izskatīties elementiem, kurus parādīs pārlūkprogramma. Viss redzamais stils ir CSS noteikumos. Šajā gadījumā Mcss/scPhpWordRW.css failā, kas bija saistīts (skatiet pašu pirmo HTML lapas piemēru).
Atšķirībā no HTML, CSS tēma ir vienkāršāka, ir ļoti pieejami noteikumi un to skaits ir neliels, kad HTML lapas izveides piemērā nav nepieciešams nekas cits kā notepad. Viss ir ļoti pieejams tūlītējai meistarībai:
Tas parāda, kā vienkārši ir aprakstīts tags scLogo_vDoc, un šis apraksts ir tāds, ka normālā stāvoklī tags parāda attēlu vDoc-logo.png, bet, kad pele atrodas virs tā, tiek parādīts vDoc-logo-h.png.
HTML aprakstu struktūra
Valoda neparedz nekādu struktūru, un sintakses jēdziens šeit ir ļoti relatīvs. Nav mainīgo, taču ir daudz iespēju. Hiperteksta pamatprincips ir tāds, ka ir elements (birka), kam noteikti ir nosaukums.
Pārī savienota taga gadījumā nosaukums sastāv no paša nosaukuma (tagName) un leņķiekavām (“<» + tagName +«>"), Ja mēs runājam par par taga sākumu un ""ja tā beigas ir ierakstītas.
HTML lapas piemērs, kurā aprakstīti atribūti, atrodas zemāk tekstā.
Tagam var būt atribūti, un tādā gadījumā tie tiek novietoti ar atstarpi aiz taga nosaukuma pirms beigu leņķiekavas ">". Atribūti, ja tādi ir, tiek ierakstīti tikai taga sākumā. Par atzīmes saturu tiek uzskatīts tas, kas atrodas starp atzīmes sākumu un beigām.
HTML ļauj aprakstīt bloku un iekļautos elementus. Pirmie aizņem noteiktu apgabalu pārlūkprogrammas logā, var tikt novietoti absolūti, tas ir, vēlamajā vietā HTML lapas displeja apgabalā, un tiem ir noteikts izmērs.
Iekļautie elementi parasti tiek parādīti vienā pavedienā, tas ir, kā tie tika norādīti lapas failā, tie tiek parādīti ekrānā. Lapas ielādes laikā var ietekmēt kopējās plūsmas attēlojumu. Bloka elementu izvietojumu, redzamību un citas īpašības jebkurā laikā var ietekmēt, izmantojot JavaScript kodu.
Papildus vienkāršiem elementiem HTML piedāvā tabulu un formu aprakstu. Šie elementi ir ļoti pieprasīti “ikdienas vietņu veidošanā”.
Tabulas apraksts: tagi TABLE, TR, TD
Izmantojot tagu TABLE, varat izveidot tabulu, norādīt noteiktu skaitu TR rindu un noteiktu skaitu TD šūnu katrā rindā. Atšķirībā no parastās tabulas organizācijas HTML iezīmēšanas īpatnību dēļ tabulu organizēšana aprobežojas ar šo deklarāciju, tādēļ, ja izstrādātājs vēlas izveidot taisnstūra tabulu, kurā kolonnu skaits visās rindās ir vienāds, tad pats to uzraudzīt.
HTML galvenā pozīcija ir darīt visu, kas ir norādīts, bet neko tādu, kas nav saprotams. Dažos gadījumos kolonnu skaits katrā tabulas rindā nav tik svarīgs, taču, ja nepieciešams sapludināt šūnas vertikāli vai horizontāli, viss būs ļoti rūpīgi jāskaita.
Rakstā ir skaidri parādīts HTML lapas piemērs, kurā aprakstīta vienkārša tabula.
Šeit ir parādīta tabula ar trim rindām pa trim kolonnām, un pirmajā rindā TD taga vietā tika izmantots TH tags - kolonnas virsraksts. Šie divi tagi īpaši neatšķiras, taču ir pilnīgi iespējams izmantot pirmo, lai atšķirtu tabulas pirmo rindu, un CSS jūs varat pievienot TH savu stilu, kas to atšķir no citiem TD.
Veidlapas apraksts: tagi FORM, INPUT
Veidlapas ir vispopulārākā HTML tagu daļa. Izmantojot veidlapas, varat pārsūtīt informāciju. Faktiski pati lapa ir informācijas izvade, bet forma ir tās ievade.
HTML lapas piemērs, kurā aprakstīta vienkārša forma:
Veidlapu izmantošanai ir daudz vairāk iespēju, taču tās ir galvenās iespējas. Varat norādīt ievades laukus, piešķirt tiem dizainu un apstrādātājus, lai analizētu lietotāja ievadītos datus. Varat norādīt slēptos laukus un pārsūtīt fona informāciju no lapas. Jūs varat norādīt pogas informācijas pārsūtīšanai, noklikšķinot uz kurām tiek uzsākts informācijas pārsūtīšanas process.
Izmantojot HTML
Hiperteksta valodas zināšanas ir darbs jebkurā interneta programmēšanas jomas specialitātē, bet, ja ir jāraksta programmas PHP vai JavaScript, tad HTML + CSS ir jāzina perfekti.
PHP valoda tika norādīta iepriekšējā piemērā. PHP darbojas serverī, tāpēc lapa ar šo veidlapu aizlidoja no servera uz pārlūkprogrammu ar aizpildītiem laukiem. Jo īpaši INPUT tagā minētā funkcija TestOnBlur (onblur notikumu apstrādātājs) saņēma visus parametrus kā teksta laukus.
JavaScript darbojas pārlūkprogrammā, un, lai poga, kas sūta datus atpakaļ uz serveri, darbotos pareizi, tas ir, konstrukcija: onclick=jQuery("#to").val("grozs"), jums ir jābūt ideja ne tikai par to, kas ir jQuery, bet arī par to, kas ir #to, val, cart. Precīzāk, jums jāzina pamata HTML tagi un vispārīgie noteikumi piemērojot tiem CSS stilus.
Tas ir pilnīgi pietiekami, lai ātri paaugstinātu savu kvalifikāciju jebkurā specialitātē interneta programmēšanas jomā.
Sveiki, dārgie emuāra lasītāji. Ar šo rakstu mēs sāksim apgūt pamatus HTML valoda.
Jūs droši vien jau zināt, ka galvenā interneta valoda ir hiperteksta iezīmēšanas valoda HTML (HyperText Markup Language). Šajā rakstā mēs apgūsim HTML pamatjēdzienus un uzzināsim, kā izveidot vienkāršas WEB lapas.
Sāksim ar pašu svarīgāko, paskatīsimies, kā tas darbojas Pasaules tīmeklis— Internets. Lai izveidotu tīmekļa lapas, jūs izveidojat failus, kas rakstīti HTML valodā, un ievietojiet tos tīmekļa serverī. Pēc tam jebkura pārlūkprogramma, kas instalēta ierīcē ar piekļuvi internetam, neatkarīgi no tā, vai tas ir dators, tālrunis vai planšetdators, var atrast jūsu tīmekļa lapas.
Web serveris- tas ir parasts dators ar īpašu programmatūra ar piekļuvi internetam. Tā nepārtraukti klausās pārlūkprogrammu pieprasījumus pēc tīmekļa lapām, attēliem, audio un video failiem. Saņemot pieprasījumu par kādu no šiem resursiem, serveris to meklē un nosūta pārlūkprogrammai.
Pārlūkprogramma-Šo īpaša programma, kas paredzēts, piemēram, vietņu pārlūkošanai Internet Explorer. Izmantojot pārlūkprogrammu, jūs pārlūkojat vietnes, noklikšķinot uz saitēm. Jebkurš šāds klikšķis liek pārlūkprogrammai veikt HTML lapas pieprasījumu tīmekļa serverim, saņemt atbildi un parādīt lapu savā logā. Kad lapa tiek parādīta, sāk darboties HTML valoda, kas pārlūkprogrammai pastāsta visu par tīmekļa lapas struktūru un saturu. Izmantojot komandas - tagus, HTML norāda pārlūkprogrammai, kur sākas teksta rindkopas, kāda teksta daļa ir virsraksts un kur ievietot tabulas un pat attēlus. Un tagi ir vārdi, piemēram, leņķiekavās
,
