/ / HTML puslapio pavyzdys ir pagrindiniai kūrimo principai

HTML puslapio pavyzdys ir pagrindiniai kūrimo principai

Sugalvota daug kalbų, bet HTMLpriklauso skaičiui ypatingų ir geidžiamiausių. Su tuo susijusi daugybė kitų svarbiausių programavimo pastangų. Daug kas tampa prieinama, kai kūrėjo protas yra susipažinęs su žymėjimo kalba „HyperText Markup Language“ (HTML).

html puslapio pavyzdys

Iš esmės, HTML ir per ją nėra nieko sudėtingaPo kelių minučių kiekvienas, nutolęs nuo programavimo ir interneto, užrašų knygelėje sukurs HTML puslapį. Dėmesio vertas pavyzdys, paprastumas, prieinamas visiems.

Bendras aprašymas

HTML failas yra vienas svetainės puslapis, nors su tuo galima ginčytis, tačiau tai, kad vienas failas yra vienas puslapis, iš pradžių suprantama.

Файл HTML начинается с заголовка DOCTYPE, в tai rodo, kad failo tipas yra HTML. Visi puslapio elementai (žymos) nurodomi skliausteliuose. Kiekvienoje poroje („<“ ir „>“) yra viena HTML žyma. Paprastai HTML žymės yra suporuojamos, tai yra, kiekvienai „žymai“ yra „/ tag“. Abi jos yra uždarytos kampiniuose skliaustuose. Yra vienos žymės, iš kurių populiariausias „br /“ yra perėjimas į kitą eilutę.

Didžiausia failo žyma yra pats HTML, įkuriame yra tik dvi žymės: GALVA ir KŪNAS. Pirmajame pateikiami įvairūs aprašymai, nurodomos nuorodos į kitus puslapiui reikalingus failus, gali būti PHP ir „JavaScript“ scenarijai. Antrasis įrašo puslapio turinį. Taip pat žymų ir scenarijų pavidalu.

Paprastas HTML puslapis

Tokio puslapio sukūrimo pavyzdys pateiktas toliau straipsnyje. Gerai apsvarstykime.

Autoriaus pavyzdys nėra paveikslėlis

GALVA skyrius

Pagrindinis žymos „HEAD“ tikslas yra paprastai apibūdinti puslapį ir įprastus scenarijus, nors pastarasis yra gana santykinė sąvoka. Paprastai čia svarbu tik du dalykai:

  • raktiniai žodžiai ir puslapio aprašymas;
  • nuorodos į kitus failus (* .css ir * .js).

Rodant puslapio turinį, šio skyriaus turinys yra tik netiesiogiai prasmingas, nes jis rodo, kad kažkur kituose failuose yra CSS taisyklės žymoms ir scenarijams kitomis kalbomis.

HTML puslapyje yra pavadinimas (TITLE), kurisrodomas, kai lankytojas užveda pelės žymeklį ant skirtuko, kuriame atidarytas puslapis. Tai yra svarbus dalykas, nes jis daro puslapį žymiai reprezentatyvesnį, lengviau pasakojamą, pasirašytą skaitomu tekstu.

pavyzdinis tinklalapis html

META žymos yra svarbios interneto programavimo srityje apskritai, tačiau kai reikia sukurti HTML puslapį bloknotu, nepageidautina apkrauti pavyzdį nereikalingomis konstrukcijomis.

Nuorodos „LINK“ ir „SCRIPT“ turėtų būti specialiaiDėmesio. Pirmasis rodo CSS stiliaus lapo vietą, o antrasis - „JavaScript“ kodo failo vietą. Tokių nuorodų gali būti daug.

Jei žinios turėtų kreiptis į scenarijusJei HTML yra sukietėjęs, tada kaskadinius stiliaus lapus reikia spręsti nedelsiant. CSS failuose pateikiamos visų pirma HTML žymų formatavimo taisyklės.

KŪNO skyrius

Tiesą sakant, HTML puslapio pavyzdys yraskyrius KŪNAS. Čia yra visa informacija, visas svetainės puslapio turinys. Visa informacija pateikiama žymų ir scenarijų pavidalu, pavyzdžiui, įterpiant „JavaScript“ kodą ar PHP programų dalis.

Svarbu suprasti, kad HTML tinklalapio pavyzdysnaršyklę ir tą patį pavyzdį teksto rengyklėje, ypač „Notepad“, toli gražu nėra tas pats dalykas. Pirmuoju atveju mes turime paruoštą HTML tekstą, kuriame vykdomi visi scenarijai. Pavyzdžiui, PHP išsiaiškino savo dalį ir vietoj savo kodo reikiamose vietose suformavo reikalingas žymas. „JavaScript“ taip pat įvykdė savo misiją, nors apie ją vis dar diskutuojama atskirai.

paprastas HTML puslapio pavyzdys

HTML yra žymos, o ne scenarijai. Galiausiai naršyklė rodo tik puslapio turinį, tik jo žymas. Ten nėra PHP kodo.

„JavaScript“ yra ypatingoje padėtyje, jo rūpestis yra aptarnauti puslapį ne tik įkėlimo (perkrovimo) momentu, bet ir tuo metu, kai puslapis yra lankytojo naršyklėje, ir jis jį tiria.

Žemiau pateikiamas paprastas HTML puslapio kodo pavyzdys (tik BODY skyrius).

Autoriaus pavyzdys nėra paveikslėlis

Lankytojo naršyklėje tai atrodo taip.

Autoriaus pavyzdys nėra paveikslėlis

Kode nebuvo nurodyta, kaip jis turėtų atrodytielementai, kuriuos pateikia naršyklė. Visi matomi stiliai yra CSS taisyklėse. Šiuo atveju Mcss / scPhpWordRW.css failas, į kurį buvo nurodyta (žr. Patį pirmąjį HTML puslapio pavyzdį).

Skirtingai nuo HTML, CSS tema yra paprastesnėlabai prieinamos taisyklės ir jų skaičius yra nedidelis, kai HTML puslapio kūrimo pavyzdžiui nereikia nieko kito, išskyrus bloknotą. Viskas yra labai prieinama momentiniam įsisavinimui:

Autoriaus pavyzdys nėra paveikslėlis

Štai kaip paprasta aprašyti žymąscLogo_vDoc, ir šis aprašymas yra toks, kad esant normaliai būsenai žymoje rodomas paveikslėlis „vDoc-logo.png“, o kai pelė yra virš jo, rodomas „vDoc-logo-h.png“.

HTML aprašų struktūra

Kalba nereiškia jokios struktūros irsintaksės samprata čia yra labai santykinė. Čia nėra kintamųjų, tačiau yra daugybė galimybių. Pagrindinis hiperteksto pagrindas yra tas, kad yra elementas (žymė), kuris būtinai turi pavadinimą.

Pora susietą pavadinimą sudaro tikrasis vardas (tagName) ir skliaustai ("<" + tagName + ">"), jei tai yra žymos pradžia, ir "</" + tagName + ">", jei jis parašytas jo pabaiga.

HTML puslapio pavyzdys, apibūdinantis atributus, yra žemiau tekste.

Autoriaus pavyzdys nėra paveikslėlis

Žyma gali turėti atributus, tada jie dedamitarpas po žymos pavadinimo prieš uždarymo kampo skliaustą ">". Atributai, jei jų yra žymoje, rašomi tik žymos pradžioje. Žymos turinys yra tai, kas yra tarp žymos pradžios ir jos pabaigos.

Bendras HTML aprašų turinys

HTML leidžia apibūdinti blokinius ir įterptiniuselementai. Pirmieji užima tam tikrą sritį naršyklės lange, gali būti išdėstyti absoliučiai, tai yra, tinkamoje vietoje HTML puslapio rodymo srityje ir turėti konkretų dydį.

HTML puslapio kūrimo pavyzdys

Paprastai rodomi įterpti elementaivienas srautas, tai yra, kaip puslapiai buvo nurodyti faile, ir rodomi ekrane. Įkeliant puslapį gali būti paveikta bendro srauto rodymas. Blokavimo elementų vieta, matomumas ir kitos savybės gali būti bet kada įtakojamos naudojant „JavaScript“ kodą.

Be paprastų elementų, HTML siūlo aprašyti lenteles ir formas. Šie elementai yra labai paklausūs kuriant kasdienę svetainę.

Lentelės aprašymas: žymos TABLE, TR, TD

Naudodami žymą TABLE, galite sukurti lentelę,nurodyti tam tikrą skaičių TR eilučių ir kiekvienoje eilėje tam tikrą skaičių TD langelių. Skirtingai nei įprasta lentelių struktūra, dėl HTML žymėjimo ypatumų lentelių struktūra yra apribota šia deklaracija, todėl jei kūrėjas nori turėti stačiakampę lentelę, kurioje stulpelių skaičius visose eilutėse yra vienodas, tada jis turi tai stebėti nepriklausomai.

HTML puslapio kodo pavyzdys

Pagrindinė HTML pozicija: darykite viską, kas nurodyta, bet nieko nesuprantamo. Kai kuriais atvejais kiekvienos lentelės eilutės stulpelių skaičius nėra toks svarbus, tačiau jei jums reikia sulieti langelius vertikaliai arba horizontaliai, teks viską skaičiuoti labai atsargiai.

Straipsnyje aiškiai parodytas HTML puslapio pavyzdys, apibūdinantis paprastą lentelę.

Autoriaus pavyzdys nėra paveikslėlis

Čia parodyta trijų eilučių po tris lentelėstulpelių, o pirmoje eilutėje vietoj TD žymos buvo naudojama TH žyma - stulpelio antraštė. Šios dvi žymos neturi didelio skirtumo, tačiau galite naudoti pirmąją, kad atskirtumėte pirmąją lentelės eilutę, o CSS galite pridėti savo stilių prie TH, kuris jį palankiai skiria nuo kitų TD.

Formos aprašymas: žymos FORM, INPUT

Formos yra labiausiai reikalinga HTML žymų dalis. Formų pagalba galite perduoti informaciją. Tiesą sakant, pats puslapis yra informacijos išvestis, tačiau forma yra jo įvestis.

HTML puslapio pavyzdys, apibūdinantis paprastą formą:

Autoriaus pavyzdys nėra paveikslėlis

Yra daug daugiau būdų naudoti formas, betpagrindinės galimybės yra tokios. Galite nurodyti įvesties laukus, priskirti jiems išvaizdą ir tvarkytuvus, kad būtų galima analizuoti vartotojo įvestį. Galite nurodyti paslėptus laukus ir perduoti fono informaciją iš puslapio. Galite paskirti informacijos perdavimo mygtukus, paspaudę ant kurių pradedamas informacijos perdavimo procesas.

Naudojant HTML

Hiperteksto kalbos mokėjimas yra būtina sąlygadirbkite bet kurioje specializacijoje interneto programavimo srityje, tačiau jei reikia rašyti programas PHP ar „JavaScript“, turite puikiai žinoti HTML + CSS.

PHP kalba buvo pažymėta ankstesniame pavyzdyje. PHP veikia serveryje, todėl puslapis su šia forma išskrido iš serverio į naršyklę su užpildytais laukais. Visų pirma, „TestOnBlur“ funkcija, paminėta žymoje INPUT („onblur“ įvykių tvarkyklė), visus parametrus gavo kaip teksto laukus.

HTML puslapio kūrimas bloknotų pavyzdyje

„JavaScript“ veikia naršyklėje irmygtukas, skirtas siųsti duomenis atgal į serverį, veikė teisingai, ty konstrukcija: onclick = jQuery ("# ​​to"). val ("cart"), turite įsivaizduoti ne tik tai, kas yra jQuery, bet ir tai, kas yra #to, val , krepšelis. Tiksliau, jūs turite žinoti pagrindines HTML žymes ir bendras CSS stilių taikymo joms taisykles.

To visiškai pakanka norint greitai pakelti bet kokią specializaciją interneto programavimo srityje.

Patinka:
0
Populiarios žinutės
Dvasinė raida
Maistas
yup