/ / HTML lapas paraugs un pamata izveide

HTML lapas piemērs un veidošanas pamati

Izgudroja daudzas valodas, bet HTML valodapieder pie īpaša un visvairāk pieprasītā. Ar to saistītas daudzas citas galvenās plānošanas iniciatīvas. Daudz kļūst pieejams, ja zināšanas par iezīmēšanas valodu (HTML) atrodas izstrādātāja prātā.

HTML lapas piemērs

Būtībā HTML nav nekas sarežģīts, un caur todažas minūtes, jebkura persona, kas ir vistālāk no programmēšanas un interneta, izveidos Notepad HTML lapu. Piemēram, vērts uzmanību, vienkāršība, patiešām ir pieejama visiem.

Vispārējs apraksts

HTML fails ir viena vietnes lapa, lai gan ar to var runāt, taču tas, ka viens fails ir viens lapa, ir saprotams sākumā.

HTML fails sākas ar DOCTYPE galvenikas norāda, ka faila tips ir HTML. Visi lapas elementi (tagi) ir norādīti leņķa iekavās. Katrā pāra ("<" un ">") ir viena HTML taga. Parasti HTML tagi tiek sapāroti, tas ir, katram "tagam" ir "/ tag". Abas ir slēgtas leņķa iekavās. Ir vieni tagi, no kuriem populārākais "br /" ir pāreja uz nākamo rindu.

Lielākais faila tags ir pats HTML, iekšākas ietver tikai divus tagus: HEAD un BODY. Pirmajā tiek veikti dažādi apraksti, norādītas saites uz citiem lapai nepieciešamajiem failiem, var būt PHP un JavaScript skripti. Otrais ieraksta lapas saturu. Arī tagu un skriptu veidā.

Vienkārša HTML lapa

Šādas lapas izveidošanas piemērs ir sniegts zemāk rakstā. Apsvērsim to uzmanīgi.

Autora piemērs nav attēls

GALVA sadaļa

Galvenes taga HEAD mērķis ir vispārīgi aprakstīt lapu un parastos skriptus, lai gan pēdējais ir diezgan relatīvs jēdziens. Parasti šeit ir svarīgas tikai divas lietas:

  • atslēgvārdi un lapas apraksts;
  • saites uz citiem failiem (* .css un * .js).

Lai parādītu lapas saturu, šīs sadaļas saturam ir tikai netieša nozīme, jo tas norāda, ka kaut kur citos failos ir CSS noteikumi citu valodu tagiem un skriptiem.

HTML lapai ir nosaukums (TITLE), kastiek parādīts, kad apmeklētājs pārvieto peli virs cilnes, kurā lapa ir atvērta. Tas ir svarīgs punkts, jo tas padara lapu daudz reprezentablāku, vieglāk pateikt, parakstītu ar lasāmu tekstu.

Web lapas HTML piemērs

META tagi ir svarīgi interneta programmēšanā kopumā, taču, kad piezīmju blokā ir jāizveido HTML lapa, nav vēlams pārblīvēt piemēru ar nevajadzīgām konstrukcijām.

LINK un SCRIPT saitēm jābūt īpašiUzmanību. Pirmais norāda uz vietu, kur atrodas CSS stila lapa, otrais norāda uz JavaScript koda faila atrašanās vietu. Šādu saišu var būt daudz.

Ja skripti būtu jāpieiet, kad zināšanasJa HTML ir nostiprināts, tad kaskādes stila lapas nekavējoties jārisina. CSS faili jo īpaši nodrošina HTML tagu formatēšanas noteikumus.

ĶERMEŅA sadaļa

Patiesībā HTML lapas piemērs irsadaļa ĶERMENIS. Šeit ir visa informācija un viss vietnes lapas saturs. Visa informācija tiek parādīta tagu un skriptu veidā, piemēram, JavaScript koda vai PHP programmu gabalu ievietošana.

Ir svarīgi saprast, ka HTML tīmekļa vietnes paraugspārlūku un to pašu piemēru teksta redaktorā, jo īpaši piezīmju blokā, tas nebūt nav tas pats. Pirmajā gadījumā mums ir gatavs HTML teksts, kurā tiek izpildīti visi skripti. Piemēram, PHP izstrādāja savu daļu un koda vietā vajadzīgajās vietās izveidoja nepieciešamos tagus. Arī JavaScript ir izpildījis savu misiju, lai gan par to joprojām notiek atsevišķa diskusija.

vienkāršs html lapas piemērs

HTML ir tagi, nevis skripti. Galu galā pārlūkprogramma parāda tikai lapas saturu, tikai tās tagus. Tur nav PHP koda.

JavaScript atrodas īpašā pozīcijā, tā rūpes ir apkalpot lapu ne tikai ielādes (pārkraušanas) brīdī, bet arī brīžos, kad lapa atrodas apmeklētāja pārlūkprogrammā, un viņš to pēta.

Zemāk ir parādīts vienkāršs HTML lapas koda piemērs (tikai sadaļai BODY).

Autora piemērs nav attēls

Apmeklētāja pārlūkprogrammā tas izskatās šādi.

Autora piemērs nav attēls

Kodā nebija norādīts, kā tam vajadzētu izskatītiespārlūkprogrammas sniegtie elementi. Visi redzamie stili ir CSS noteikumos. Šajā gadījumā Mcss / scPhpWordRW.css fails, uz kuru tika atsauce (sk. Pašu pirmo HTML lapas piemēru).

Atšķirībā no HTML, CSS tēma ir vienkāršākaļoti pieejamiem noteikumiem un to skaits ir mazs, ja HTML lapas izveides piemēram nav nepieciešams nekas cits kā piezīmju bloks. Viss ir ļoti pieejams tūlītējai apguvei:

Autora piemērs nav attēls

Lūk, cik viegli ir aprakstīt taguscLogo_vDoc, un šis apraksts ir tāds, ka tagā parastajā stāvoklī tiek parādīts attēls vDoc-logo.png, un, kad pele ir virs tā, tiek parādīts vDoc-logo-h.png.

HTML aprakstu struktūra

Valoda nenozīmē nekādu struktūru unsintakses jēdziens šeit ir ļoti relatīvs. Šeit nav mainīgo, bet ir daudz iespēju. Hiperteksta pamats ir tas, ka ir elements (tags), kuram obligāti ir nosaukums.

Pārī savienota taga gadījumā nosaukums sastāv no faktiskā nosaukuma (tagName) un iekavu iekavām ("<" + tagName + ">"), ja tas ir taga sākums, un "</" + tagName + ">", ja rakstīts tā gals.

HTML lapas piemērs, kas apraksta atribūtus, atrodas zem teksta.

Autora piemērs nav attēls

Tagam var būt atribūti, pēc tam tie tiek ievietotiatstarpe aiz taga nosaukuma pirms aizvēršanas leņķa iekavas ">". Atribūti, ja tagam ir tādi, tiek rakstīti tikai taga sākumā. Taga saturs ir tas, kas atrodas starp taga sākumu un tā beigām.

HTML aprakstu vispārīgs saturs

HTML ļauj aprakstīt blokus un rindaselementi. Pirmie aizņem noteiktu apgabalu pārlūkprogrammas logā, tos var novietot absolūti, tas ir, pareizajā vietā HTML lapas displeja apgabalā, un tiem ir noteikts izmērs.

HTML lapas izveides piemērs

Iekšējie elementi parasti tiek parādītiviena straume, tas ir, kā lapas tika norādītas failā, un tiek parādītas 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 var jebkurā laikā ietekmēt, izmantojot JavaScript kodu.

Papildus vienkāršiem elementiem HTML piedāvā aprakstīt tabulas un veidlapas. Šie elementi ir ļoti pieprasīti "ikdienas vietnes izveidē".

Tabulas apraksts: tagi TABLE, TR, TD

Izmantojot tagu TABLE, varat izveidot tabulu,norāda noteiktu skaitu TR rindu un katrā rindā noteiktu skaitu TD šūnu. Atšķirībā no parastās tabulas organizācijas HTML iezīmēšanas īpatnību dēļ tabulas organizācija aprobežojas ar šo deklarāciju, tādēļ, ja izstrādātājs vēlas, lai būtu taisnstūra tabula, kurā visu rindu kolonnu skaits ir vienāds, tad viņam jāuzrauga tas neatkarīgi.

HTML lapas koda paraugs

Princips HTML pozīcija:dari visu, kas norādīts, bet neko, kas nav saprotams. Dažos gadījumos katrā tabulas rindā kolonnu skaits nav tik svarīgs, taču, ja jums ir jāapvieno šūnas vertikāli vai horizontāli, viss būs jāuzskaita ļoti uzmanīgi.

HTML lapas piemērs, kas apraksta vienkāršu tabulu, ir skaidri parādīts rakstā.

Autora piemērs nav attēls

Šeit parādīts trīs rindu pa trim galdskolonnas, un pirmajā rindā TD taga vietā tika izmantots TH tags - kolonnas virsraksts. Šiem diviem tagiem nav lielas atšķirības, taču jūs varat izmantot pirmo, lai atšķirtu tabulas pirmo rindu, un CSS jūs varat pievienot savu stilu TH, kas to labvēlīgi atšķir no citiem TD.

Veidlapas apraksts: tagi FORM, INPUT

Veidlapas ir HTML tagu pieprasītākā daļa. Ar veidlapu palīdzību jūs varat pārsūtīt informāciju. Faktiski pati lapa ir informācijas izvade, bet forma ir tās ievade.

HTML lapas piemērs, kas apraksta vienkāršu veidlapu:

Autora piemērs nav attēls

Ir daudz vairāk veidu, kā izmantot veidlapas, betgalvenās iespējas ir šādas. Varat norādīt ievades laukus, piešķirt tiem izskatu un apstrādātājus, lai analizētu lietotāja ievadi. Jūs varat norādīt slēptos laukus un nodot fona informāciju no lapas. Informācijas pārsūtīšanai varat noteikt pogas, noklikšķinot uz kuras, tiek uzsākts informācijas pārsūtīšanas process.

Izmantojot HTML

Hiperteksta valodas zināšana ir priekšnoteikumsstrādājiet jebkurā specializācijā interneta programmēšanas jomā, bet, ja jums ir jāraksta programmas PHP vai JavaScript, tad jums perfekti jāzina HTML + CSS.

PHP valoda tika apzīmēta iepriekšējā piemērā.PHP darbojas serverī, tāpēc lapa ar šo veidlapu no servera aizlidoja uz pārlūku ar aizpildītiem laukiem. Jo īpaši INPUT tagā (onblur notikumu apstrādātājs) minētā funkcija TestOnBlur saņēma visus parametrus kā teksta laukus.

HTML lapas izveidošana notepad piemērā

JavaScript darbojas pārlūkprogrammā unpoga datu nosūtīšanai atpakaļ uz serveri darbojās pareizi, tas ir, konstrukcija: onclick = jQuery ("# ​​to"). val ("grozs"), jums ir jābūt idejai ne tikai par to, kas jQuery ir, bet arī tas, kas ir #to, val, cart. Precīzāk, jums jāzina HTML tagi un vispārīgie noteikumi CSS stilu piemērošanai tiem.

Tas ir pilnīgi pietiekami, lai ātri paaugstinātu kvalifikāciju jebkurā specializācijā interneta programmēšanas jomā.