HTML dokumentu struktūra: pamata tagi, piemērs

Anonim

HTML ir vietnes iezīmēšanas valoda. Daudzi uzskata to par plānošanu, bet tā nav. HTML programmās nav nevienu mainīgo, aprēķinu, bloku un citu elementu, kas atrodas nevienā programmēšanas valodā.

Izmantojot HTML, izstrādātājs var izveidot tikai vietnes izskatu. Ir svarīgi saprast, ka bez iezīmēšanas nav nevienas vietnes. HTML ir tīmekļa lapu izveides pamats. Pārējo funkcionalitāti papildina dažādas programmēšanas valodas.

Izveidot html dokumentu

Jebkurā redaktorā varat izveidot vienkāršu vietnes lapu. Pat Notepad darīs. Iesācēju attīstītājam ieteicams izmantot citus redaktorus, kuriem ir automātiskas aizvietošanas funkcijas un citi ieteikumi. Pateicoties tam, varat izveidot gatavas tabulas, saites, attēlus un citus elementus. Un Notepad, jums ir rakstīt katru vēstuli ar roku.

Parasti Notepad izmanto tikai gadījumos, kad nav citu rīku. Pirmkārt, tiek izveidots teksta dokuments un pēc tam saglabāts html formātā. Visām vietņu lapām jābūt ar HTML paplašinājumu.

Html valoda ir hierarhiska. Tas ir, ir īpaša html dokumenta struktūra. Kas tas ir? Apsveriet tālāk skaidrību.

HTML dokumenta struktūra. Piemērs

Struktūra vienmēr ir tāda pati. Ja vēlaties kaut ko mainīt, pārlūks nevarēs to apstrādāt. Tā rezultātā jūs nesaņemat to, ko vēlaties.

Attēlā redzams jebkura html faila struktūra. Pirmais vienums norāda faila veidu. Šī atzīme ir norādīta vienreiz. Ja izmantojat īpašus redaktorus, visa struktūra tiks izveidota automātiski. Jums būs nepieciešams noklusēt noklusējuma vērtības.

HTML dokumenta struktūra - galvenie tagi:

    No šiem trim tagiem ir visa vietnes rāmis. Pievērsiet uzmanību attēlam. Visiem šiem tagiem ir noslēguma atzīme ar “/” zīmi. Ja jūs rakstāt ar roku, pierodiet pierakstīt abus tagus uzreiz - atvēršanu un slēgšanu.

    Iepriekš tika teikts, ka vietņu lapās ir .html paplašinājums. Tas ir, ja izveidojat teksta dokumentu, bet tajā pašā laikā uzrakstāt pareizo kodu, pārlūks joprojām parādīs jums tikai tekstu. Kods netiks pārveidots.

    Galvas sadaļa

    3. attēlā redzamais skaitlis norāda galvas sadaļu. Šajā sadaļā ir informācija par pakalpojumu. Piemēram, varat norādīt kodējumu (4. punkts) un lapas nosaukumu (5. punkts).

    Nosaukumam vienmēr jābūt. Bez tam neviena meklētājprogramma nevar noteikt tīmekļa lapas satura (teksta) nosaukumu. Un tas ir slikts vietnes veicināšanai. Turklāt pārlūkā virs lapas nosaukuma netiks norādīts. Tas ir neērtības lietotājam.

    HTML dokumenta struktūra ir tāda, ka nosaukums parādās tikai galvas sadaļā. Ja zīme virsbūves daļā vai pēc tās, tā vadītājs to nepievērsīs.

    Turklāt galvenajā sadaļā ir informācija par skriptu, stila failu, meklēšanas dzinēju norādījumu vai jebkura cita veida datiem, ko lietotājs nedrīkst redzēt, bet tie ir svarīgi pārlūkam vai programmētājiem.

    Stilu savienošana

    Html dokumenta struktūra ļauj veidot dažādus stilus. Turklāt tos var rakstīt individuāli katrā elementā. Taču šī metode nav ieteicama, jo kods kļūst pārāk liels un neērts.

    Meklētājprogrammas iesaka visus stilus ievietot atsevišķā failā, un elementos vienkārši izmantojiet dažādas klases.

    Fails ir savienots šādi.

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

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

    Taču šī iespēja nav arī ļoti ieteicama. Šīs metodes ir ļoti atšķirīgas, jo css fails var būt viens uz visu vietni, un visas izmaiņas tajā nekavējoties tiks piemērotas visām lapām. Un, ja izmantojat iepriekš attēlā redzamo metodi, jums būs jāveic izmaiņas visās esošajās vietnes lapās.

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

    Skriptu savienošana

    Skripti ir savienoti šādi.

    Šeit ir nepieciešami divi atribūti: tips un src. Pirmajā mēs norādām, ka tas ir Javascript fails, un otrais - kur atrodas fails. Ja veicat kļūdu, tad nekas nedarbosies.

    Virsbūves daļa

    Html dokumenta struktūra ir tāda, ka ir nepieciešams ievietot saturu, kas lietotājam būs redzams tikai ķermeņa sadaļā. Marķējuma nosaukums runā pats par sevi.

    Šeit jūs varat redzēt visu galveno lapu kodu, kas var ietvert neierobežotu skaitu elementu. Bet jo ilgāks kods, jo ilgāk tas tiks apstrādāts.

    Apsveriet pamata elementus, ko var izmantot ķermeņa zonā. Nav tik daudz pamata. Visu pārējo jūs uzzināsiet, kā aug jūsu zināšanas un prakse.

    Pamata tagi

    Html dokumenta struktūra prasa obligātu rakstīšanas elementu secību. Birkas vienmēr jāapzīmē ap malām. Bez tam pārlūkprogramma nesapratīs, ka tā ir atzīme. Pēc atvēršanas kronšteina vienmēr seko elementa nosaukums (atzīme). Ja atļaujiet atstarpi starp <un vārdu, pārlūkprogramma izskatīs šo tekstu.

    Apsveriet attēla tagu kā piemēru. Lūdzu, ņemiet vērā, ka šī atzīme nav aizvērta, atšķirībā no saitēm, punktiem un daudziem citiem.

    Atribūtu secībai nav nozīmes. Bet to rakstīšana (dizains) ir ļoti svarīga. Vienmēr vispirms jānorāda atribūta nosaukums, tad vienādojuma zīme, tad atribūtu vērtība ir uzrādīta pēdiņās. Vērtība var būt atšķirīga - digitālā vai teksta.

    Atribūts src visos tagos norāda ielādējamā faila ceļu. Alt atribūts visos elementos norāda uz īsu aprakstu. Šādā gadījumā foto ar putnu.jpg tiek ielādēts ar aprakstu - putnu fotogrāfiju.

    Turklāt img tagā jūs varat norādīt izmērus, tikai platumu vai augstumu, virsrakstu, līdzinājumu, stila klasi vai rāmi.

    Apsveriet citas galvenās atzīmes, kas ir norādītas ķermeņa sadaļā.

    Tag

    Mērķis

    ...

    Saites

    Attēli

    ...

    Punkts. \ T

    Teksta pārsūtīšana uz jaunu līniju

    ...

    Treknrakstā teksts

    ...

    slīprakstā

    ...

    Pārsvītrots teksts

    ...

    Pasvītrots teksts

    ,

    Saraksti

    Tabulas

    Kā tas viss var tikt parādīts galvā?

    Iesācēju izstrādātāji ne vienmēr var nekavējoties uzrādīt visu šo spekulatīvo. Paskatieties uz dažiem tīmekļa lapu struktūru piemēriem, un tad jūs vienkārši kļūst skaidrs.

    Šī ir vieta, kur būt:

    Un tas:

    Stilu izmantošana

    Kā jau tika minēts, stilu var savienot kā failu un norādīt galvas sadaļā. Jebkurā gadījumā nodarbību apraksts ir tieši tāds pats.

    Piemēram, varat norādīt nosaukuma stilu. Tad jums ir nepieciešams rakstīt h1 (jo stils būs otrā līmeņa virsraksts), atveriet iekavās un rakstiet, kādas īpašības būs šajā elementā. Ja jūs zināt pamata angļu valodu, tad nav problēmu. Visas īpašības sauc par cilvēka valodu.

    Ja vēlaties norādīt šo stilu vairākiem elementiem uzreiz, ierakstiet tos atdalot ar komatiem.

    Rezultāts būs sarkans uzraksts.

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

    Jums tie ir jāizmanto šādi.

    Piezīme: ja norādāt standarta elementa stila iestatījumus, jums nav jāraksta vārdu klase nākotnē. Stils tiks piemērots pēc noklusējuma. Klases atribūtā varat norādīt tikai tos stilus, kurus sākat ar punktu.