Ky seksion i faqes i kushtohet tërësisht dy gjuhëve për krijimin e një siti, përkatësisht HTML dhe CSS. Këtu mund të mësoni gjuhët hap pas hapi, të mësoni gjithçka nga bazat deri në momentet më të vështira.

Ky seksion është ndërtuar mbi parimin e një studimi hap pas hapi të materialit, prandaj, para çdo titulli të një mësimi në HTML dhe CSS, ka një numër që korrespondon me numrin rendor të mësimit. Kjo është e natyrshme në rast se dëshironi të mësoni gjithçka nga bazat dhe të mos bëni rrëmujë në kokën tuaj. Nëse tashmë dini diçka rreth HTML dhe CSS, atëherë mund të gjeni edhe njohuritë që mungojnë këtu, ose të thelloni atë që keni mësuar tashmë.

V këtë seksion Leksionet mbi standardet e gjuhëve HTML5 dhe CSS3 janë postuar përkatësisht, nëse ka ndonjë version më të ri të këtyre gjuhëve, ato do të pasqyrohen edhe në mësimet e reja të këtij seksioni dhe do ta zbuloni patjetër.

Ndoshta, çdo person që të paktën një herë në jetën e tij ka hasur në krijimin e një faqe në internet, sigurisht që ka dëgjuar për një paketë të tillë si html dhe css, mund të them me besim se nëse doni të krijoni faqe në internet vetë, atëherë mundeni Mos bëni pa dijeninë e këtyre dy gjërave.

Pasi të keni marrë konceptet e përgjithshme ka qartë një pamje të paqartë se çfarë është html në kokën tuaj, dhe mendoj se kjo nuk është për t'u habitur. Është koha për të shkuar drejtpërdrejt në praktikë dhe për të krijuar dokumentin tuaj të parë html.

Ashtu si html, CSS ka karakteristikat, rregullat dhe strukturën e vet. Në këtë tutorial, unë do t'ju prezantoj me konceptet bazë Gjuha CSS, në lidhje me strukturën e tij, pajisjen dhe ne do të bëjmë të parën Tabela CSS fletë stili dhe mësoni se si të lidhni një fletë stili me një dokument html.

Përzgjedhësit në CSS janë themeli i vetë gjuhës dhe mësimi dhe kuptimi i tyre është shumë i rëndësishëm, kështu që në këtë mësim do t'ju tregoj për disa lloje të tjera përzgjedhësish dhe do t'ju përshkruaj aftësitë e tyre.

Një pikë shumë e rëndësishme në krijimin e një faqe interneti është puna me tekst, dhe siç e kuptoni, ju gjithashtu duhet të jeni në gjendje të punoni me tekst në html dhe të dini se çfarë etiketash ka dhe si mund të përdoren ato.

Pasi të keni mësuar të gjitha etiketat html për të punuar me tekst, tani është koha për të shkuar drejtpërdrejt në CSS duke punuar me tekst, gjë që do të zgjerojë ndjeshëm njohuritë dhe aftësitë tuaja.

CSS ka një numër të madh të të gjitha llojeve të përshtatshme dhe cilësisht të ndryshueshme pamjen pronat dhe ne vazhdojmë të studiojmë Puna CSS me tekst dhe në këtë tutorial, ne do të thellohemi më thellë në temën e punës me tekstin dhe do të shohim vetitë e reja të tekstit.

Puna me imazhe kur krijoni nga faqja, një nga Pikat kryesore, si kur krijoni një dizajn, gjithashtu me një plan urbanistik të thjeshtë ose duke shkruar ndonjë material për faqen tuaj.

CSS zgjeron shumë mundësitë e punës me ndonjë objekte html, në këtë tutorial do të doja t'ju tregoja në detaje për ato parametra që mund të aplikohen në imazhe.

Tani është e vështirë të imagjinohet një person që punon me internetin dhe nuk e di se çfarë është html. Shumë njerëz duan të mësojnë këtë gjuhë. Do të duket, çfarë është më e thjeshtë - ka një numër të frikshëm të madh librash kushtuar kësaj teme. A është html aq kompleks saqë i janë kushtuar vëllime të mëdha?

Në këtë artikull, unë dua të përpiqem t'u jap njohuri themelore rreth temës atyre njerëzve që duan të mësojnë paraqitjen, për t'i dërguar në drejtimin e duhur. Kjo nuk do të thotë se ajo që kam shkruar është një e vërtetë e pandryshueshme. Unë thjesht dua t'u jap fillestarëve pak udhëzime të përgjithshme.

Për të filluar, unë do të doja të drejtoja plan i përafërt të këtij neni. Nëse dikush nuk është i interesuar për diçka, ai mund ta anashkalojë atë me siguri.

• Çfarë etiketash duhet të dini
• Si ta bëjmë të bukur?

Çfarë është html dhe pse është e nevojshme

html nuk është një gjuhë programimi siç mendojnë shumë njerëz. Është thjesht një gjuhë shënjimi. Qëllimi i tij është të përcaktojë strukturën e dokumentit. Nëse dikush ju thotë se html nevojitet për të përcaktuar pamjen e faqes - mos e besoni! Ky person ose është nga e kaluara, ose nuk e kupton plotësisht këtë temë.

html përcakton renditjen semantike (kuptimore) të elementeve. Cili paragraf ndiqet nga cili, cila përmbajtje është e lidhur logjikisht dhe cilat janë grupe krejtësisht të ndryshme të dhënash, ku të futni fotografinë dhe ku të shkoni duke klikuar në këtë lidhje. Në parim, nëse tani do të përdorej vetëm html për paraqitjen e faqeve, të gjitha faqet vështirë se do të ishin shumë të ndryshme në pamje. Nëse dikush thotë se instalimi foto sfondi- detyrë html - pështyj në fytyrë mos e besoni atë.

HTML, si shumë teknologji të tjera të lidhura me ueb-in, mirëmbahet nga W3C. Nëse doni të dini gjithçka nga dora e parë, ju lutemi vizitoni faqen e tyre të internetit. Por unë duhet t'ju paralajmëroj: specifikimet e lëshuara nga W3C janë të natyrës këshilluese, kështu që shfletuesit gjithmonë interpretojnë të njëjtën gjë ndryshe. kodi html... Kjo e bën paraqitjen shumë më të vështirë sesa është në të vërtetë.

Aktualisht specifikimi më i fundit html është 4.0. Ka gjithashtu, gjuha xhtml, i cili është shumë më kërkues për zhvilluesin, sepse përmban standarde më të rrepta. Pra, etiketat në html mund të shkruhen në çdo rast, dhe në xhtml - vetëm me shkronja të vogla. etj. Unë i përmbahem specifikimit xhtml dhe do ta përshkruaj më poshtë.

Gjuha html krijon një grup etiketash. Këto janë udhëzime për shfletuesin që i tregojnë strukturën e dokumentit tuaj. Shënim: struktura. Një teknologji tjetër është përgjegjëse për paraqitjen sot - CSS, e cila do të diskutohet më poshtë. Për të mësuar html, në fakt, ju duhet të mësoni një grup etiketash dhe atributet e tyre dhe kaq! Mund të filloni të krijoni faqe testimi.

Çfarë etiketash duhet të dini?

Për të filluar, duhet të mësoni një grup të vogël etiketash. Tani do të jap një listë të tyre, të grupuara sipas kritereve të caktuara. (Grupimi është vizioni im subjektiv i temës dhe nuk pretendon të jetë absolutisht i vërtetë)

• Bazë: html, kokë, titull, trup;
• Strukturore: div, span;
• Teksti: p, ul, ol, li, h1-h6, br, pre;
• Tabelat: tabela, tr, td;
• Lidhjet: a;
• Multimedia: img, objekt;
• Frames: frameset, frame, iframe;
• Format: forma, futja, zona e tekstit, etiketa, zgjedhja, opsioni;
• Opsionale: hr;
• Speciale: skript, lidhje, meta;

Siç mund ta shihni, nuk ka aq shumë etiketa. Megjithatë, mësimi i tyre mund të marrë një kohë të konsiderueshme, sepse shumë nga këto etiketa mund të pajisen me atribute që i bëjnë këta elementë të sillen ndryshe.

Dikush mund të mërzitet dhe të thotë se di etiketa të tjera që funksionojnë. Po, me të vërtetë, unë kam dhënë një listë të jo të gjitha etiketave të mbështetura nga shfletuesit. Megjithatë, këto etiketa janë themelore, dhe një person që i njeh ato mund të thotë se ai e di html. Me dashje nuk kam përfshirë në listën time etiketa si font, të cilat janë të vjetruara. Këto etiketa janë aq të këqija sa nuk ka kuptim as të flasim për to, sepse tani ka mjete shumë më të fuqishme që ju lejojnë të kontrolloni pamjen e faqeve dhe pjesëve të tyre. Personalisht e konsideroj të nevojshme dhe të mjaftueshme njohjen e etiketave të mësipërme. Sepse pjesa tjetër ose nevojiten shumë rrallë, ose aspak. Prandaj, unë propozoj të filloni të mësoni html duke mësuar këto etiketa.

Si ta bëjmë të bukur?

Kushdo që përpiqet të stilojë një faqe duke përdorur etiketat e mësipërme do të përfundojë me një faqe të stiluar mjaft modeste që do të jetë e bardhë me tekst të zi dhe lidhje blu. Dikush mund të jetë në gjendje të ndryshojë pozicionimin e blloqeve të informacionit duke përdorur tabela dhe të rreshtojë atributet. Dikush do të përpiqet të animojë faqen duke futur fotografi. Megjithatë, ekziston mjet i veçantë për të personalizuar pamjen e faqeve. Kjo është CSS.

Tani pothuajse asnjë faqe nuk është e plotë pa aplikim Teknologjitë CSS... Është në CSS që i është besuar misioni i përcaktimit të formatimit të dokumentit. Sfondet e faqeve, mbushja, shtrirja, shkronjat, ngjyrat dhe më shumë janë në kompetencën e CSS. Prandaj, tani rekomandohet që të mos përdoren etiketat dhe atributet që përcaktojnë pamjen e faqeve dhe elementeve, por të përdoren rregullat CSS. Si të aplikoni CSS është më i mirë lexuar në libra. Por qëllimi im është që nëse hasni në një etiketë ose atribut që përcakton pamjen e një elementi, mendoni 10 herë përpara se ta përdorni! Më mirë zbuloni se cili rregull CSS është përgjegjës për paraqitjen e elementit ashtu siç dëshironi të shfaqet. Me përjashtime shumë të rralla, një rregull i tillë gjendet gjithmonë.

Cila është mënyra më e mirë për të filluar të mësoni paraqitjen?

Është më mirë të filloni të kodoni pasi të kuptoni se si funksionon ueb-i. Personalisht, unë do të hartoja një plan trajnimi si ky:

1. Parimet e të mësuarit punë në internet dhe strukturat klient-server
2. Etiketat mësimore dhe atributet e tyre, me ushtrime praktike mbi aplikimin e tyre
3. Mësoni rregullat e CSS me mësime praktike se si t'i zbatoni ato
4. Eksplorimi i paraqitjes së tabelës
5. Paraqitja e një paraqitjeje të thjeshtë me tabela
6. Paraqitje komplekse me tabela
7. Ekzaminimi i direktivave DOCTYPE
8. Studimi i faqosja e bllokut(etiketë div)
9. Paraqitja e një paraqitjeje të thjeshtë nga divs
10. Paraqitja e një paraqitjeje komplekse nga divat
11. Truket, truket, hacks dhe mençuri të tjera nga guru

Parimisht, për një nivel fillestar të përgatitjes dhe njohjes së bazave të html, mjafton të kalosh vetëm 5 pikat e para. (Ky opsion do të ishte ideal për programuesit e uebit të cilët nuk do të jenë faqe kodimi. Njohuri të html ata duhet vetëm të nxjerrin rezultatin nga skenari.)

Njëherë e një kohë doja të bëja uebsajtin tim të parë të lidhur me IT-në. Nga kjo fushë, unë dija vetëm bazat shumë të thjeshta të HTML dhe ndoshta gjithçka. Por kisha më shumë dëshirë dhe guxim, ndaj pa shumë frikë regjistrova emrin tim të parë të domain-it.

Rruga ime në zotërimin e CSS dhe HTML ishte e gjatë, rreth 2.5 vjet, dhe mendoj se procesi i vetë-mësimit nuk do të përfundojë kurrë. Por, siç e mbaj mend tani, doja shumë të gjeja një pikëmbështetje nga e cila mund të filloja të zotëroja këtë fushë të re për mua, pasi shumë informacion u shembën menjëherë dhe nuk ishte e lehtë për t'u tretur.

I vendosur, regjistrova domenin tim të parë dhe fillova të arrij qëllimet e mia. Në atë kohë, e dija që shumica e faqeve që janë në internet punojnë në sisteme të ndryshme të menaxhimit të materialeve të gatshme, domethënë CMS. Dhe detyra ime e parë ishte të gjeja një CMS.

Kur zgjedh një CMS, i kushtova vëmendje vetëm një gjëje - CMS nuk duhet të jetë kërkuese për burimet e serverit, pasi dëshira, me siguri, e çdo fillestari në këtë fushë, për të minimizuar të gjitha kostot. Epo, fakti që një CMS duhet të jetë në blog është i kuptueshëm.

Pasi shfletova rrjetin për një kohë të gjatë, hasa në CMS Textpattern. Pas 2.5 vjetësh, mund të them me besim se kisha të drejtë me zgjedhjen e Textpattern. Kjo është më CMS më e mirë për blogun, i cili është në publik.

Me performancë të jashtëzakonshme, ky CMS mund të mbahet pothuajse në çdo host që ka mbështetje MySQL dhe PHP. Për momentin unë jam duke përdorur një host të lirë, jo një VPS, dhe unë pret 16 sajte në të. Vizita ditore në të gjitha faqet është afërsisht 5000 vizitorë unikë në ditë. Mendoj se ky është një tregues i mirë i performancës së Textpattern.

Problemi kryesor me të cilin u përballa pas instalimit të këtij CMS është injoranca ime absolute e bazave të CSS. Unë mora pak nga pak informacion nga komuniteti rusishtfolës, derisa përfundimisht hasa në faqen http://htmlbook.ru. Para këtij zbulimi, po mendoja të blija një libër në CSS, por tani më vjen mirë që nuk pata kohë ta bëja këtë, pasi do të ishte një blerje tjetër e një koleksionisti të ri pluhuri.

Në faqen e internetit HTMLbook Kam gjetur shumë informacione të strukturuara mirë. Për një fillestar, është thjesht një thesar. Edhe tani shpesh i drejtohem këtij burimi, pasi nuk mund të mbani mend gjithçka dhe nuk keni nevojë për të. Njohuria kryesore njerëzore është të dini se ku të merrni atë që ju nevojitet!

Nëse jeni vetëm në fillimet e jetës suaj profesionale dhe do të zotëroni CSS dhe HTML, atëherë këshilla ime për ju është: mos blini kopje në letër, të cilat janë të vjetruara përpara publikimit, por përdorni shërbimet WEB që jo vetëm që do t'ju shpëtojnë para, por do të jetë një ndihmë e shkëlqyer që është gjithmonë pranë.

P.S. Gjithmonë pyes veten kur endem në një "blog fillestar të parabërësve" ose sa në modë është tani një "bum" që përpiqet të bëjë shumë para, por në të vërtetë nuk e ka idenë se si ta bëjë vetë. dizajn unik për faqen tuaj dhe rezulton se ka një bandë të pastrehësh të ngjashëm me njëri-tjetrin. Ju, sigurisht, mund të paguani për dizajnin, por kurseni një qindarkë rubla, dhe askush nuk mund ta bëjë këtë më mirë se ju vetë.

Vendosa t'i kushtoj më shumë vëmendje fillestarëve që duan të marrin njohuri në fushën e ndërtimit të faqeve. Për këtë më shtyu mësuesi im, i cili bëri shumë gabime në manualet për punë laboratorike... Me kënaqësi do t'i hidhja një sy burimit nga është marrë infa arsimore dhe do të lija nja dy rreshta të mendimit tim atje. Por tani nuk bëhet fjalë për këtë. Në leksionin tim të parë do të flas për

Cila është struktura e një dokumenti HTML

Etiketë informon se fillon struktura e dokumentit html, - çfarë përfundon. Midis etiketave shumica e informacionit ruhet për shfletuesin dhe motorët e kërkimit. Në etiketa përmban titullin e faqes sonë. Etiketë tregon se informacione të mëtejshme janë të destinuara për përdoruesit, natyrshëm tregon se informacioni për përdoruesit po mbaron.

Tani do të shpjegoj pak. Të gjitha etiketat ( etiketa - një element i gjuhës së shënjimit të hipertekstit) ndahen në dy lloje "të vetme" dhe "mbyllëse". Për më tepër, etiketat janë të mbyllura në karakteret e mëposhtme < dhe > , janë ata që e dallojnë etiketën nga teksti i thjeshtë html... Le të shohim disa nga etiketat më të thjeshta "single":

- një etiketë që është përgjegjëse për mbështjelljen në një linjë të re, në vendin ku është instaluar kjo etiketë. Le të hedhim një vështrim në kodin duke përdorur këtë etiketë.

Përshëndetje të gjithëve!
Dhe kjo është faqja ime e parë.

Ju mund të shihni rezultatin.

• align - Përcakton shtrirjen e vijës. Mund të vendoset në të majtë, në qendër, në të djathtë.
• ngjyra - Vendos ngjyrën e linjës.
• noshade - Vizaton një vijë pa efekte 3D.
• madhësia - Vendos trashësinë e vijës.
• width - Vendos gjerësinë e rreshtit.

Kodi duke përdorur etiketën

Përshëndetje të gjithëve!

Gjendet një shembull vizual.

Një tjetër etiketë "e vetme" është . Kjo etiketë përdoren për të ruajtur informacionin e destinuar për shfletues dhe motorë kërkimi. Motorët e kërkimit shikojnë meta etiketat për të marrë përshkrimet e faqeve, fjalë kyçe dhe të dhëna të tjera. Lejohet një numër i pakufizuar i meta etiketave, të gjitha duhet të jenë ndërmjet dhe ... Parametrat e çdo meta etikete kanë formën "emri = vlera", e cila është e përcaktuar fjalë kyçe përmbajtjen, emri ose http-equiv... Sepse meta etiketat janë të destinuara për makina, ato nuk bëjnë asnjë ndryshim vizual, kështu që unë do të jap vetëm burimi:

Kjo linjë tregon që krijuesi i faqes mendon se faqja po përdor kodimin UTF-8. Gjithçka është bërë më e thjeshtë në HTML5, për të specifikuar kodimin, mjafton vetëm rreshti i mëposhtëm:

Ka të tjerë etiketa të vetme (, ,
, , , ,

Tani le të flasim për mbylljen e etiketave. Vetë emri "etiketë mbyllëse" do të thotë që etiketa kërkon mbyllje të detyrueshme. Kjo bëhet në mënyrë që të kufizohet qartë pjesa e tekstit në të cilën vepron etiketa.

Për një shembull ilustrues, hidhini një sy etiketës e cila përdoret për të theksuar tekstin, e vendos fontin në të theksuar. Etiketat dhe janë kufijtë që përcaktojnë zonën e përzgjedhjes së tekstit. Këtu është kodi ku rreshti i fundit harroi të mbyllte etiketën :

Përshëndetje të gjithëve! Dhe kjo është faqja ime e parë.
Përshëndetje të gjithëve! Dhe kjo është faqja ime e parë.

Siç mund ta shihni, nuk ka asgjë të komplikuar, tani mund të krijoni disa faqe të lidhura.

Ju lejon të anashkaloni këtë veçori dhe të shfaqni tekstin siç kërkohet nga zhvilluesi.

- përcakton një paragraf teksti.  Etiketë 
Është një element blloku, gjithmonë fillon në një rresht të ri, paragrafët e tekstit që ndjekin njëri-tjetrin ndahen me një mbushje.  Sasia e mbushjes mund të kontrollohet duke përdorur stile.  Nëse nuk ka etiketë fundore, fundi i paragrafit konsiderohet të jetë fillimi i elementit tjetër të bllokut.
..
..

- HTML ofron gjashtë tituj në nivele të ndryshme që tregojnë rëndësinë relative të seksionit pas titullit.  Pra, etiketa 
përfaqëson titullin më të rëndësishëm të nivelit të parë dhe etiketën 
shërben për të treguar një titull të nivelit të gjashtë dhe është më pak i rëndësishëm.  Si parazgjedhje, titulli i nivelit të parë shfaqet me tipin më të madh të shkronjave të zeza, titujt e nivelit tjetër janë më të vegjël në madhësi.  Etiketat 
,…,
janë elementë blloku, ato gjithmonë fillojnë në një rresht të ri dhe pas tyre shfaqen elementë të tjerë në rreshtin tjetër.  Përveç kësaj, hapësira e bardhë shtohet para dhe pas titullit.  Etiketa ka një atribut rreshtoj, e cila përcakton shtrirjen e titullit, mund të jetë majtas- rreshtimi i titullit në të majtë, qendër- shtrirje në qendër, drejtë- shtrirje e djathtë, justifikoj- shtrirje e justifikuar (djathtas dhe majtas).  Kjo vlerë funksionon vetëm për një kokë që është më shumë se një rresht në gjatësi.


- është një enë për ndryshimin e karakteristikave të shkronjave si madhësia, ngjyra dhe shkronja.  Edhe pse kjo etiketë ende mbështetet nga të gjithë shfletuesit, ajo është e vjetëruar dhe rekomandohet të hiqet në favor të stileve.  Etiketa ka 3 atribute: ngjyrë- vendos ngjyrën e tekstit, fytyrë- përcakton tipografinë, madhësia- vendos madhësinë e shkronjave në njësi konvencionale.

- shënon tekstin si citat ose fusnotë për një material tjetër.  Kjo përzgjedhje është e dobishme për ndryshimin e stilit të tekstit përmes CSS, dhe është gjithashtu e dobishme për ndarjen e kodit HTML në elemente strukturore.  Shfletuesit zakonisht vendosin tekst brenda një kontejneri me shkronja të pjerrëta.

- tregon se sekuenca e karaktereve është një shkurtim.  Duke përdorur atributin titullin jepet deshifrimi i shkurtesës, i cili bën të mundur kuptimin e shkurtesës për ata persona që nuk e njohin atë.  Përveç kësaj, motorët e kërkimit indeksojnë versionin me tekst të plotë të shkurtesës, i cili mund të përdoret për të përmirësuar renditjen e dokumentit.
Si parazgjedhje, teksti është i mbyllur në kontejner nënvizuar me një vijë me pika.
Më poshtë është kodi ku kam përdorur të gjitha këto etiketa:

 




HTML dhe CSS janë dy nga teknologjitë kryesore për ndërtimin e faqeve në internet.  HTML ofron strukturën e faqes, CSS paraqitjen (vizuale dhe zanore), për një sërë pajisjesh.  Së bashku me grafikën dhe skriptimin, HTML dhe CSS janë baza e ndërtimit të faqeve në internet dhe aplikacioneve në ueb.  Mësoni më shumë më poshtë për:
Çfarë është HTML?
 HTML është gjuha për përshkrimin e strukturës së ueb faqeve.  HTML u jep autorëve mjetet për të:

Publikoni dokumente në internet me tituj, tekst, tabela, lista, foto, etj. 
Merrni informacionin në internet nëpërmjet lidhjeve të hipertekstit, me klikim të një butoni. 
Dizenjoni formularë për kryerjen e transaksioneve me shërbime në distancë, për përdorim në kërkimin e informacionit, bërjen e rezervimeve, porositjen e produkteve etj. 
Përfshini fletëllogaritëse, videoklipe, klipe zanore dhe aplikacione të tjera drejtpërdrejt në dokumentet e tyre. 

 Me HTML, autorët përshkruajnë strukturën e faqeve duke përdorur markup.  Elementet e gjuhës etiketojnë pjesë të përmbajtjes si p.sh "Paragrafi", "lista", "tabela" dhe kështu me radhë.
Çfarë është XHTML?
XHTML është një variant i HTML që përdor sintaksën e XML, gjuhën e shënjimit të zgjeruar.  XHTML ka të gjithë elementët e njëjtë (për paragrafët, etj.) si varianti HTML, por sintaksa është paksa e ndryshme.  Për shkak se XHTML është një aplikacion XML, ju mund të përdorni XML të tjera mjetet me të (siç është XSLT, një gjuhë për transformimin e përmbajtjes XML).
Çfarë është CSS?
CSS është gjuha për përshkrimin e prezantimit të faqeve të internetit, duke përfshirë ngjyrat, paraqitjen dhe shkronjat.  Kjo ju lejon të përshtatni prezantimin me lloje të ndryshme pajisjesh, të tilla si ekrane të mëdha, ekrane të vegjël ose printera. CSSështë i pavarur e HTML dhe mund të përdoret me çdo shënim të bazuar në XML gjuhe gjuhe.  Ndarja e HTML nga CSS e bën më të lehtë mirëmbajtjen e sajteve, ndarjen e fletëve të stilit nëpër faqe dhe përshtatjen e faqeve në mjedise të ndryshme.  Kjo quhet ndarja e strukturës (ose: përmbajtjes) nga prezantimi.
Çfarë është WebFonts?
Uebfontetështë një teknologji që u mundëson njerëzve të përdorin fontet sipas kërkesës në ueb pa kërkuar instalim në sistemin operativ.  W3C ka përvojë në fontet e shkarkueshme përmes HTML, CSS2 dhe SVG...  Deri kohët e fundit, fontet e shkarkueshme nuk kanë qenë të zakonshme në ueb për shkak të mungesës së një formati të ndërveprueshëm të shkronjave.  Përpjekja e WebFonts planifikon ta adresojë këtë përmes krijimit të një formati të hapur të fontit të mbështetur nga industria për Ueb-in (i quajtur "WOFF").


Leksioni ka përfunduar, shpresoj që njohuritë e marra të jenë të dobishme për ju!  Në leksionin tjetër, do t'ju tregoj se çfarë ruan etiketa në vetvete. , do të mësojmë se si të kryejmë të gjitha llojet e manipulimeve me imazhe dhe do të njihemi me tabelat.
Gjatë shkrimit të këtij artikulli, përshkrimi i disa prej etiketave është marrë nga këtu
Me këtë cikël, dua të hap një sërë mësimesh mbi HTML...  E mora këtë vendim sepse do të doja të përpiqesha të mësoja se si të krijoni faqet e përdoruesve nga e para.  Ky mendim ka qenë në kokën time për një kohë të gjatë.  U ngrit pyetja e vetme ishte se ku të filloni, me HTML, apo të vazhdoni drejtpërdrejt me instalimin e motorit dhe konfigurimin e tij të mëtejshëm.
Por nëse filloni me mësimin e motorit, atëherë disa nga përdoruesit që nuk e dinë HTML do të lihen jashtë.  Kështu që vendosa të filloj me bazat dhe ta bëj në mënyrë që edhe çdo fillestar të mund të kuptojë se çfarë dhe si.
Pra, çfarë është saktësisht HTML?
Vetë shkurtesa qëndron për N ureg T ext M arka dhep L apguage ( gjuha e shënjimit të hipertekstit).
Dhe për ta thënë thjesht, atëherë HTMLËshtë një gjuhë e veçantë shënjimi që i shpjegon shfletuesit se si të shfaqë një ose një tjetër faqe interneti...  Kjo do të thotë, me çfarë fonti të shfaqet teksti, në çfarë rendi të renditen elementet, cilët elementë të shfaqen të nënvizuar etj. Dhe në varësi të cilit element do të ndeshet nga shfletuesi, në përputhje me rregullat e përcaktuara në vetë shfletuesin , ky element do të mbetet i shfaqur.  Sidoqoftë, këto rregulla më pas mund të ndryshohen, por unë tashmë do të flas për këtë në mësimet e mia të ardhshme, të cilat do t'i kushtohen CSS.
Së pari, unë propozoj të shqyrtojmë një shembull të faqe e thjeshtë në internet e cila mund të jetë.  Tani nuk duhet të përqendroheni në atë që nënkuptojnë këto ose ato. etiketa...  Gjithçka në kohën e duhur, për fillestarët, kushtojini vëmendje se ku është ajo në kod dhe si lidhet gjithçka me atë që shfaqet në shfletues.  Konsideroni një shembull të dokumentit HTML:

 
 
 
 
 
 
Një ditë të jetës sime
 
Përgatitja për koncertin
 
U zgjova herët sot pasi do të ishte një ditë e vështirë.  Në fund të fundit, sot më duhet të performoj në një koncert para njëqind spektatorëve.  Dhe për t'u siguruar që gjithçka të shkojë mirë, më duhet të përsëris programin e provave.
 
Përsëritje
 
Gjithçka shkoi pa problem.  Askush nga ekipi ynë nuk doli jashtë ritmit dhe siç doli, të gjithë u shqetësuan më kot.
 
Koncert
 
Të gjithë performuan shkëlqyeshëm, megjithëse mendoj se ka pasur një moment kur bateristi ynë ka dalë jashtë ritmit.  Por ne dolëm me zgjuarsi nga situata.
 

Së pari, do t'ju duhet të shkruani këtë tekst në një redaktues teksti (mendoj se më i përshtatshmi është Notepad ++) dhe ruajeni skedarin si index .html diku në diskun tuaj.  Kur klikoni dy herë në skedarin e ruajtur, do të shihni një faqe të diçkaje të tillë.
Ju lutemi vini re se vetë etiketat nuk shfaqen, por shfaqet vetë përmbajtja, e cila është midis tyre.  Dhe nga këtu mund të konkludoni se etiketat veprojnë si një element stilimi në HTML.
Hidhini një sy kodit burimor.  Siç mund ta keni vënë re tashmë, ka një dhëmbëzim të vogël përpara fjalës "Një".  Sidoqoftë, shfletuesi nuk e mori parasysh, thjesht e gëlltiti në heshtje, sikur të mos kishte ekzistuar kurrë.  Për më tepër, nëse përpiqeni të vendosni shumë hapësira midis fjalëve, atëherë të gjitha ato do të perceptohen nga shfletuesi si një hapësirë ​​- HTML ka një veçori të tillë.
Dhe këtu është një këshillë tjetër - kur shkruani kodin HTML, stërviteni veten për të futur ato etiketa që janë të vendosura brenda të tjerëve.  Për shembull, etiketat e titullit dhe të trupit janë të vendosura brenda etiketës html.  Kjo do të thotë që kur shkruani këto etiketa, mos harroni të bëni dhëmbëzimin e duhur.  Zakonisht ato bëhen me dy hapësira, ose skeda - kjo është çështje shije.  Pse është e nevojshme kjo?  Tani, në atë pjesë të vogël të dokumentit, që e dhashë si shembull më sipër, nuk ka shumë informacion, prandaj është mjaft problematike të ngatërrohesh atje.  Sidoqoftë, nëse faqja përmban shumë elementë të mbivendosur, atëherë nuk do të jetë më e lehtë se si të humbisni në këtë kod të madh dhe vështirë të kuptoni se në cilën pjesë të dokumentit jeni aktualisht.  Pra, është më mirë të mësoheni me stilin e mirë menjëherë, atëherë do ta kuptoni vetë dhe do t'ju shërbejë mirë në të ardhmen.
Vlen gjithashtu të specifikoni minimumin më të nevojshëm të etiketave që duhet të jenë në dokumentin HTML.  E kam fjalën për këtë pjesë:

 
 
 
 
 
 

Por edhe nëse kjo pjesë nuk është aty, atëherë shumica e shfletuesve do të mbyllin një sy ndaj gjithë kësaj dhe do të shfaqin përsëri faqen tuaj.  Sidoqoftë, një stil kaq joserioz i kodimit, në të cilin një person kalon një numër të madh etiketash, është një formë e keqe, kështu që këshillohet që të gjithë këta elementë të jenë gjithsesi në faqen tuaj.  Përndryshe, mund të kërcënojë problemin e përputhshmërisë me shfletuesit e tjerë, gjë që si rezultat mund të ndikojë në pamjen e faqes tuaj dhe, si rezultat, në trafik.
Për më tepër, mund të shkruani komente në dokumentin HTML - ky është informacion thjesht shërbimi që është ekskluzivisht për ju.  Zakonisht këto janë disa shënime të rëndësishme që shërbejnë si një kujtesë për ju ose thjesht diçka që ia vlen t'i kushtohet vëmendje.  Komentet nuk përpunohen nga shfletuesi dhe, që do të thotë se përdoruesi nuk do t'i shohë ato.  Zakonisht ato shkruhen kështu:

 
Dhe tani le të përpiqemi të kuptojmë vetë se cila etiketë e shembullit tonë të mësipërm është përgjegjëse për çfarë.
Etiketë html do të thotë që dalja e kodit html fillon.
kokë- seksioni i informacionit të shërbimit.  Ndër të tjera ka titullin, i cili është përgjegjës për tekstin në titullin e dritares së shfletuesit.  Ky seksion mund të trajtohet gjithashtu si informacion që duam t'i tregojmë shfletuesit për këtë faqe.
trupi- fillon pjesa kryesore e dokumentit.
h 1- titulli.
h 2- nëntitull.
fq- paragraf.
Kjo është ndoshta e gjitha!  Nëse ky ishte dokumenti juaj i parë HTML, atëherë urime!  Po, nuk duket aq e mrekullueshme sa do të donim të ishte.  Por megjithatë, ne kemi material mbi të cilin mund të punojmë tashmë.  Dhe në mësimet e ardhshme, gjithçka do të jetë edhe më interesante, dhe gradualisht do të prekim punën me të fletë stili kaskadë (CSS).
 
< Назад 

Për të komentuar, duhet të regjistroheni.