html-i õppimine võrgus nullist. HTML-i põhitõed algajatele. Sildid teksti esiletõstmiseks
See saidi jaotis on täielikult pühendatud saidi loomise kahele keelele, nimelt HTML-ile ja CSS-ile. Siin saate õppida keeli samm-sammult, õppida kõike alates põhitõdedest kuni kõige raskemate hetkedeni.
See jaotis on üles ehitatud materjali samm-sammult õppimise põhimõttel, seetõttu on HTML-i ja CSS-i õppetunni iga pealkirja ees number, mis vastab tunni seerianumbrile. See on loomulik, kui soovite õppida kõike päris põhitõdedest ja mitte ajada oma peas segamini. Kui tead juba midagi HTML- ja CSS-keeltest, siis siit leiad ka puuduolevad teadmised või süvendada õpitut.
Selles jaotises on õppetunnid vastavalt HTML5 ja CSS3 keelestandardite kohta, kui nendest keeltest on mõni uuem versioon, siis kajastuvad need ka selle jaotise uutes tundides ja kindlasti saate teada.
Tõenäoliselt on iga inimene, kes on vähemalt korra elus kokku puutunud veebilehe loomisega, kindlasti kuulnud sellisest kombinatsioonist nagu html ja css, võin julgelt öelda, et kui tahad ise veebilehti teha, siis ilma nende teadmisteta hakkama ei saa. kaks asja.
Kui teil on üldine arusaam sellest, mis html on teie peas, on teil selgelt segane pilt ja ma arvan, et see pole üllatav. On aeg liikuda otse praktika juurde ja luua oma esimene HTML-dokument.
Nagu html-keelel, on ka CSS-il oma omadused, reeglid ja struktuur. Selles õppetükis räägin teile CSS-keele põhikontseptsioonidest, selle struktuurist, ülesehitusest ning me teeme teie esimese CSS-i stiililehe ja õpime, kuidas stiililehte HTML-dokumendiga ühendada.
CSS-i selektorid on keele enda aluseks ning nende õppimine ja mõistmine on väga oluline, seega räägin selles õppetükis veel mitmest selektoritüübist ja kirjeldan nende võimalusi.
Väga oluline punkt kodulehe loomisel on tekstiga töötamine ja nagu aru saate, tuleb osata ka html-s tekstiga töötada ning teada, millised sildid seal on ja kuidas neid kasutada saab.
Kui olete õppinud selgeks kõik tekstiga töötamise HTML-märgised, on nüüd aeg liikuda otse tekstiga töötamise CSS-i, mis laiendab oluliselt teie teadmisi ja võimalusi.
CSS-il on tohutult palju igasuguseid mugavaid omadusi, mis muudavad välimust kvalitatiivselt ning jätkame tekstiga töötamise CSS-i uurimist ning selles õppetükis süveneme tekstiga töötamise teemasse ja vaatame uusi teksti omadusi.
Veebisaidi loomisel piltidega töötamine on üks võtmepunkte nii kujunduse loomisel kui ka lihtsalt oma veebisaidi jaoks materjalide küljendamisel või kirjutamisel.
CSS laiendab märkimisväärselt HTML-objektidega töötamise võimalusi; selles õppetükis tahaksin teile üksikasjalikult rääkida parameetritest, mida saab piltidele rakendada.
Tere kõigile!!! Mul on väga hea meel, et otsustasite vallutada HTML-i põhitõdede kõrgused ja see on õige valik. Lõppude lõpuks peate enne oma esimese veebisaidi loomist teadma HTML-i põhitõdesid. Lisaks peate veebisaidil HTML-kodeerimisega tegelema rohkem kui üks kord. Soovitan väga tundidega tutvuda. HTML algajatele minu ajaveebis ja garanteerin, et pärast selle kursuse läbimist saate hõlpsalt ise veebilehe või isegi veebisaidi luua.
Alustame! Kõigepealt uurime välja HTML– (inglise keelest. Hüperteksti märgistuskeel) on hüperteksti märgistuskeel. Selle töötas esmakordselt välja Briti teadlane Tim Berners-Lee aastatel 1991–1992. HTML oli mõeldud ainult teksti, piltide ja tabelite märgistamiseks veebilehtedel. Nüüd saab HTML-dokumenti sisestada ka programmeerimiskeeli, nagu JavaScript ja VBScript.
HTML ei ole programmeerimiskeel, see on mõeldud ainult tekstidokumentide märgistamiseks.
HTML-i õppimiseks teil peab lihtsalt olema brauser ja tavaline märkmik või . Standardse märkmiku avamiseks tehke arvutis järgmist. "Start" => "Programmid" => "Tarvikud" => "Märkmik".
Kui olete kuulnud programmidest, mis lihtsustavad HTML-koodi kirjutamise tööd (Microsoft FrontPage, Adobe Dreamweaver), siis ma ei soovita neid selles koolitusetapis kasutada. Harjutage oma oskusi tavalises märkmikus või Notepad++ tekstiredaktoris ja selle kursuse läbimisel saate kasutada programme asjade kiirendamiseks. Tellige minu ajaveebi värskendused ja lugege, kuidas kasutada Microsoft FrontPage'i ja Adobe Dreamweaverit.
Parema mõistmise huvides koostasin näite. Vaadake pilti hoolikalt:
Selgitus.
1). Iga HTML-dokument algab selle reaga:
"https://www.w3.org/TR/html4/loose.dtd">
Selle reaga anname brauserile teada, et meie HTML-dokument vastab rahvusvahelise spetsifikatsiooni versioonile 4.01. Tänu sellele reale näeb teie leht välja samasugune. Seda rida pole vaja meeles pidada, HTML-dokument töötab ka ilma selleta. See on lihtsalt selleks, et oleksite teadlik, mis see on.
2). Ja- see on dokumendi algus ja lõpp.
3).
Ja- dokumendi juht. Siia sisestatakse sageli lisateenuse silte, üks neist siltidest on . Teiste teenindusmärgendite kohta saate teada edasistes õppetundides, koolituse selles etapis piisab sellest teabest.
4).
Ja- dokumendi pealkiri. See päis kuvatakse brauseris:
otsingus olen indeksis või Google'is.
5).
Ja
- dokumendi põhiosa. Siin on dokumendi sisu, näiteks tekst, pildid, tabelid, muusika, filmid jne. Lisateavet selle kohta, kuidas lisada muusikat, teksti, pilte dokumendi kehasse, saate järgmistest õppetundidest.
Märge:
Sageli loete ja kuulete sõna "silt". Silt on kõik, mis on sulgude vahel< >. Näiteks:
,
,
,
,
,
jne – kõik need on sildid. Lehte brauseris vaadates silte näha ei ole, kuid kõik, mis sulgudes pole, kuvatakse vaatamisel brauseris.
Silte on palju ja neil on erinevad eesmärgid.
On silte, mis tuleb sulgeda. Näiteks, avage silt
ja sulgege kindlasti silt
Ja seal on üksikud sildid, näiteks see
.
Silt on omamoodi konteiner, mis võib sisaldada teksti, pilte ja muid silte...
○ Pöörake tähelepanu avamis- ja sulgemismärgendite õigele järjestusele:
<тэг1>
<тэг2>
<тэг3>
... тэг3>
тэг2>
тэг1>
Silt, mille me esimesena avasime, suletakse viimasena, teine on eelviimane jne.
○ Siin on näide avamise ja sulgemise siltide valest järjestusest. Selle tellimusega võib veebilehel esineda vigu:
<тэг1>
<тэг2>
<тэг3>
... тэг3>
тэг1>
тэг2>
Viga oli sees<тэг1>Ja<тэг2>
. Olge koodi kirjutamisel ettevaatlik.
Valmis kood. Selline näeb välja veebilehe valmis standardne kohustuslik HTML-kood.
Lehekülje pealkiri
Lehe tekst, tabelid, pildid, muusika ja video.
Ärge heitke meelt, kui saate ülalkirjeldatust vähe või peaaegu mitte midagi aru. Teises tunnis on rohkem harjutamist ja saate kõik ise käsitsi kirjutada ja vaadata, kuidas HTML töötab.
Jätkake järgmise õppetunniga
Otsustasin pöörata rohkem tähelepanu algajatele, kes soovivad omandada teadmisi veebilehe loomise vallas. Minu õpetaja sundis mind seda tegema, sest ta tegi laboritööde juhendites palju vigu. Vaataksin hea meelega allikat, kust haridusteave on võetud, ja jätaksin sinna paar rida oma arvamust. Aga see ei käi praegu selles. Oma esimeses loengus räägin sellest
Mis on HTML-dokumendi struktuur?
Tag teatab, et html-dokumendi struktuur algab, - mis lõpeb. Siltide vahel Suurem osa teabest salvestatakse brauseri ja otsingumootorite jaoks. Siltide sees sisaldab meie lehe pealkirja. Tag näitab, et järgnev on kasutajale mõeldud teave,
See tähendab loomulikult, et kasutajale mõeldud teave hakkab otsa saama.
Nüüd lubage mul veidi selgitada. Kõik sildid ( silt – hüperteksti märgistuskeele element) jagunevad kahte tüüpi: "üksik" ja "sulgev". Lisaks on sildid ümbritsetud järgmiste tähemärkidega <
Ja >
, need on need, mis märgistust eristavad lihttekstist html. Vaatame mõnda lihtsaimat "ühekordset" silti:
— silt, mis vastutab uuele reale murdmise eest kohas, kus see silt on paigaldatud. Vaatame selle sildi abil koodi.
Minu esimene sait
Tere kõigile! Ja see on minu esimene sait.
Tulemust saab vaadata.
— silt, mis tõmbab horisontaalse joone. See silt kehtib plokielementide kohta, rida algab alati uuelt realt. Sellel on 5 atribuuti:
joondus — määrab joone joonduse. Võib võtta väärtuse vasakule, keskele, paremale.
värv – määrab joone värvi.
noshade – joonistab joone ilma 3D-efektideta.
suurus — määrab joone paksuse.
laius — määrab joone laiuse.
Kood kasutades silti :
Minu esimene sait
Tere kõigile! Ja see on minu esimene sait.
Visuaalse näite leiate siit.
Teine "üksik" silt on . Seda silti kasutatakse brauserite ja otsingumootorite jaoks mõeldud teabe salvestamiseks. Otsingumootorid otsivad saidikirjelduste, märksõnade ja muude andmete saamiseks metasilte. Teil on lubatud kasutada piiramatul arvul metasilte, kõik need peavad asuma nende vahel Ja . Iga metasildi parameetrid on kujul "nimi=väärtus", mis määratakse märksõnadega sisu, nimi või http-ekv. Sest metasildid on mõeldud masinatele, need ei muuda visuaalselt, seega annan ainult lähtekoodi:
See rida näitab, et lehe looja usub, et leht kasutab UTF-8 kodeeringut. HTML5-s on kõik muutunud lihtsamaks; kodeeringu määramiseks on vaja ainult järgmist rida: