/ / HTML dokumenta struktūra: galvenie tagi, piemērs

HTML dokumenta struktūra: galvenās atzīmes, piemērs

HTML ir iezīmēšanas valoda. Daudzi cilvēki to uzskata par programmēšanu, bet tas tā nav. HTML programmā nav neviena mainīgā lieluma, aprēķinu, masīvu vai citu elementu.

Izmantojot HTML, izstrādātājs var izveidot tikaivietnes izskats. Ir svarīgi saprast, ka neviena vietne nav izveidota bez atzīmes. HTML ir pamats tīmekļa lapu veidošanai. Pārējo funkcionalitāti pievieno dažādas programmēšanas valodas.

HTML dokumenta izveide

Izveidojiet vienkāršu vietnes lapu jebkurāredaktors. Pat "Notepad" darīs. Iesācēju izstrādātājam ieteicams izmantot citus redaktorus, kuriem ir automātiskās aizstāšanas funkcijas un citi norādījumi. Pateicoties tam, jūs varat izveidot gatavās tabulas, saites, attēlus un citus elementus. Un "Notepad" katra vēstule ir jāraksta manuāli.

Parasti "Notepad" tiek izmantots tikai tajosgadījumos, kad nav citu rīku. Pirmkārt, tiek izveidots teksta dokuments un pēc tam tiek saglabāts html formātā. Visām vietnes lapām jābūt html paplašinājumam.

Html valoda ir hierarhiska. Tas nozīmē, ka html dokumentam ir īpaša struktūra. Kas tas ir? Tālāk apspriedīsim skaidrību.

Html-dokumenta struktūra. Piemērs:

Struktūra vienmēr ir vienāda. Ja vēlaties kaut ko mainīt, pārlūkprogramma to nevarēs apstrādāt. Tā rezultātā jūs nesaņemsiet to, ko jūs plānojat.

html dokumenta struktūra

Attēlā parādīts jebkura struktūrahtml-fails. Pirmais punkts norāda faila tipu. Šis taga ir norādīts vienreiz. Ja izmantojat īpašos redaktorus, visa struktūra tiks izveidota automātiski. Jums būs jāpielāgo noklusējuma vērtības.

Html dokumenta struktūra ir galvenie tagi:

  • <html>
  • <head>
  • <body>

No šiem trim tagiem ir visas vietnes skelets. Pievērsiet uzmanību attēlam. Visiem šiem tagiem ir aizvēršanas tags ar "/" rakstzīmi. Ja rakstāt ar roku, pierodiet abus tagus uzreiz - atverot un aizverot.

Tas tika teikts iepriekš, ka mājas lapu lapas irpagarinājums .html. Tas ir, ja izveidojat teksta dokumentu, bet tajā pašā laikā uzrakstiet pareizo kodu, pārlūks joprojām parādīs tikai tekstu. Nav koda konversijas.

Galvas sadaļa

Attēlā, kas redzams 3. punktā, ir norādīta galvas sadaļa. Šajā sadaļā ir norādīta informācija par pakalpojumu. Piemēram, jūs varat norādīt kodējumu (4. punkts) un lapas nosaukumu (5. solis).

Nosaukumam vienmēr jābūt. Bez tā, neviena meklētājprogramma nevar noteikt tīmekļa lapas nosaukuma saturu (tekstu). Un tas ir slikti tīmekļa vietnes veicināšanai. Turklāt augšpusē esošā pārlūkprogramma nenorāda lapas nosaukumu. Tas ir neērtības lietotājam.

Html-dokumenta struktūra ir tāda, ka virsraksts <title> ir norādīts tikai galvas sadaļā. Ja virsraksts <title> ir norādīts ķermeņa sadaļā vai pēc tam, apstrādātājs to nepievērš uzmanību.

Papildus norādīts galvas sadaļāinformācija skriptu savienošanai, stila faili, instrukcijas meklētājprogrammām vai citi dati, kurus lietotājam nav nepieciešams redzēt, bet tie ir svarīgi pārlūkam vai programmētājiem.

Savienojuma stili

Html-dokumenta struktūra ļauj jums izveidot savienojumustili dažādos veidos. Turklāt tos var rakstīt atsevišķi katrā elementā. Bet šī metode nav ieteicama, jo kods kļūst pārāk liels un neērts.

Meklētājprogrammas iesaka, lai visi stili tiktu noformēti atsevišķā failā, un elementos vienkārši tiek izmantotas dažādas klases.

Fails ir savienots šādi.

<Link rel = "stilu" href = "Style.css" type = "text / css">

Atribūts href norāda ceļu uz failu. Ja ceļā ir kļūda, stili netiks ielādēti. Arī tipa atribūts ir nepieciešams, kas norāda, ka tas ir css fails.

Vēl viena iespēja ir definēt stilus tieši galvas sadaļā.

stili html formātā

Bet šī iespēja nav arī ļoti ieteicama. Šīs metodes ir ļoti atšķirīgas, jo CSS fails var būt viens visai vietnei, un visas izmaiņas tajā tiks uzreiz piemērotas visām lapām. Un, ja jūs izmantojat iepriekš attēlā redzamo metodi, tad jums būs jāmaina visas esošās vietnes lapas.

Ja izveidotā klase tiks izmantota tikai vienā lapā, šī iespēja jums ir piemērota.

Savienojuma skripti

Skripti ir savienoti šādi.

<script type = "text / javascript" src = "main.js"> </ script>

Šeit ir nepieciešami divi atribūti: type and src. Vispirms norādiet, ka šis ir Javascript fails, bet otrais - tas, kur atrodas fails. Ja veicat drukas kļūdu, nekas nedarbosies.

Nodaļas struktūrvienība

Html-dokumenta struktūra ir tāda, ka ir nepieciešams ievietot saturu, kas lietotājam būs redzams tikai ķermeņa sadaļā. Atsauce uz nosaukumu runā par sevi.

Tas norāda visu galvenā lapas kodu, kas var ietvert neierobežotu skaitu elementu. Bet jo ilgāk kods, jo ilgāk tas tiks apstrādāts.

Apsveriet visvienkāršākos tagus, kurus jūs varat izmantot ķermeņa zonā. Nav tik daudz pamata. Visu pārējo jūs uzzināsit, kā pieaugs jūsu zināšanas un prakse.

Pamata taustiņi

Html-dokumenta struktūrai ir obligāta prasībarakstīšanas elementu secība. Tagus vienmēr vajadzētu ietvert iekavās <>. Bez tā pārlūks nesaprot, ka tas ir tags. Pēc atvēršanas iekavās vienmēr tiek parādīts elementa (tag) nosaukums. Ja atļaujat atstarpi starp <and name, tad pārlūks to uzskata par tekstu.

Apsveriet attēla taga piemēru. Ņemiet vērā, ka šis tags netiek aizvērts, atšķirībā no saitēm, punktiem un daudziem citiem.

HTML dokumenta struktūra, kas tas ir

Atribūtu secība nav svarīga. Bet viņu raksti ir ļoti svarīgi. Vienmēr vispirms tiek parādīts atribūta nosaukums, tad vienāda zīme, tad atribūta vērtība tiek rakstīta pēdiņās. Vērtība var būt citāda - ciparu vai tekstu.

Atribūts src visos tagos norāda faila ceļu,kas jums nepieciešams ielādēt. Alt atribūts visos elementos norāda īsu aprakstu. Šajā gadījumā tiek ielādēts bird.jpg attēls ar putnu fotoattēla aprakstu.

Turklāt img tagā varat norādīt izmērus, tikai platumu vai augstumu, nosaukumu, izlīdzināšanu, stila klasi vai rāmi.

Apsveriet citus galvenos tagus, kas ir uzskaitīti ķermeņa sadaļā.

Tag

Iecelšana

<a> ... </a>

Atsauces

<img>

Attēli

<p> ... </ p>

Punkts

<br>

Teksta pārsūtīšana uz jaunu rindu

<strong> ... </ strong>

Pilna teksta

<i> ... </ i>

kursīvs

<s> ... </ s>

Teksta teksta svītrošana

<u> ... </ u>

Zem apzīmēta teksta

<ol> </ ol>, <ul> </ ul>

Saraksti

<table> </ table>

Tabulas

Kā es varu iedomāties visu to manā galvā

Sākot no izstrādātājiem ne vienmēr var uzreiz iedomāties, tas viss ir spekulatīvs. Apskatiet dažus tīmekļa lapu struktūras piemērus, un tad jums kļūs skaidrs.

izveidot html dokumentu

Pastāv šāda iespēja:

 html dokumenta galveno tagu struktūra

Un tas:

HTML dokumenta struktūras piemērs

Izmantojot stilus

Kā jau minēts sākumā, jūs varat savienot stilus gan ar failu, gan norādīt galvas sadaļā. Jebkurā gadījumā klases apraksts ir diezgan vienāds.

Piemēram, varat norādīt galvenes stilu. Tad jums jāraksta h1 (jo stils būs otrā līmeņa galvenē), atveriet iekavas un rakstiet, kādas īpašības būs šajā elementā. Ja jūs zināt angļu valodu, tad tam nav jābūt problēmām. Visas īpašības sauc par cilvēka valodu.

izmantojot CSS stilus

Ja vēlaties vienlaikus norādīt šo stilu vairākiem elementiem, tad rakstīt tos atsevišķi ar komatiem.

izmantojot vairākus css stilus

Rezultāts ir sarkans virsraksts.

teksta dokuments

Iepriekš minētās metodes ir piemērotas standarta elementu projektēšanai. Bet jūs varat arī izveidot savas klases. Viņu vārdam vajadzētu sākt ar punktu, tad tiek rakstīts jebkurš patvaļīgs vārds.

CSS klases

Jums tas ir jāizmanto.

izmantojot CSS klases

Lūdzu, ņemiet vērā: Ja norādījāt stila iestatījumus standarta elementam, jums nav nepieciešams rakstīt vārdu klasi. Stils tiks izmantots pēc noklusējuma. Klases atribūtā varat norādīt tikai tos stilus, kuru sākat ar periodu.

Lasīt vairāk: