Ky artikull nuk synon të jetë një udhëzues shterues për gjuhën e shënjimit HTML. Ai përshkruan bazat e HTML - parimet themelore, konceptet dhe përkufizimet e kësaj teknologjie, duke zotëruar të cilat, lehtë mund të vazhdoni në studimin e kodimit HTML.
Për të studiuar mësimin, shkarkoni arkivin me skedarët e nevojshëm.
HTMLështë një gjuhë shënjimi dokumentet... Shqiptimi i saktë - HT Em El.
A keni punuar ndonjëherë në një redaktues dokumentesh Word ose aplikacione të ngjashme zyre? Me siguri e dini se ky lloj redaktuesi ka mundësi të pasura për redaktim teksti, pozicionimin e elementeve, futjen e fotografive etj.
Pse, ju pyesni, shkruani një artikull HTML për përpunuesit e tekstit? Ja pse. Nëse e kuptoni se çfarë është një redaktues zyre? Është një aplikacion për redaktimin dhe shfaqjen e dokumenteve.
Fjala kyçe këtu është dokument ... Kjo do të thotë, ne krijojmë, modifikojmë dhe shikojmë një dokument në ndonjë program, në këtë rast, në një redaktues zyre. Nëse hapim një dokument të tillë në një redaktues të thjeshtë teksti, për shembull, në Notepad, do të shohim shumë simbole dhe shenja të çuditshme. Kjo rrëmujë simbolesh është e pakuptueshme për njerëzimin, por kompjuterët mund ta kuptojnë atë. Falë kësaj gjuhe të brendshme, dokumenti Word fiton një strukturë dhe pamje të caktuar në vetë redaktuesin dhe dokumenti shfaqet para nesh në të gjithë lavdinë e tij me tekst të formatuar dhe fotografi në vend të tij.
HTMLështë një gjuhë e shënjimit të dokumentit për shfletuesin... Fjala "këtu është shfletuesi, dhe dokumenti është faqja HTML. Kjo është vetë baza e teknologjisë HTML, kuptimi i së cilës është i nevojshëm për të mos ngatërruar gjuhën e shënjimit të dokumenteve të uebit me gjuhët e programimit. Emri flet vetë - me ndihmën e HTML ne shënoj ku elementi, fotografia ose teksti do të shfaqet në faqe dhe në çfarë rendi do të ndjekin njëri-tjetrin.
Po, shtypja dhe formatimi i tekstit në aplikacionet e zyrës nuk ka të bëjë fare me programimin. Por një lexues i vëmendshëm do të vërejë një detaj të rëndësishëm - në një përpunues teksti ne shtypim, modifikojmë dhe formatojmë tekstin dhe fotografitë duke përdorur butona dhe meny vizuale, por pse kodi HTML shkruhet me dorë? Pse të mësoni kaq shumë detaje teknike të shkrimit të shënimit për një dokument?
Në fakt, ka shumë redaktues me të cilët mund të krijoni dhe modifikoni faqe HTML në analogji me Word. Kjo do të thotë, kodi burimor HTML është i fshehur për ne dhe ne nuk hyjmë në të.
Një lloj Word për HTML. Redaktorë të tillë vizualë quhen:
WYSIWYG redaktorët - W kapelë Y ou S ee Unë s W kapelë Y ou G etj. Kjo do të thotë, nëse përkthehet në Rusisht: ajo që shohim është ajo që marrim.
Unë i quaj “vuzivugi”. Edhe pse kjo nuk është fonetikisht e saktë, ajo tregon qartë pakuptimësinë e kësaj shpikjeje. Fillestarët shpesh përdorin redaktorë të tillë për të krijuar faqet e tyre të para. Sigurisht, kjo është e përshtatshme - nuk keni nevojë të gërmoni në studimin e etiketave, stileve të dizajnit dhe gjërave të tjera, në shikim të parë, të pakëndshme dhe komplekse. Vetë redaktori i konverton automatikisht veprimet tona në kod HTML.
Por, siç thonë ata, asgjë nuk ndodh. Më konkretisht, kjo qasje ka të meta shumë serioze. Çfarë i pengon të gjithë të përdorin redaktuesit vizualë për të dizajnuar faqe HTML? Fakti është se faqet e formuara në këtë mënyrë kanë, si rregull, shumë kode të tepërta, shumë gabime nga pikëpamja semantike. Tani, natyrisht, nuk ka probleme me një lidhje interneti me shpejtësi të lartë dhe ndryshimi në madhësinë e faqes prej 400 kb dhe 100 kb nuk është i rëndësishëm për shpejtësinë, megjithatë, një kod HTML i optimizuar dhe i shkruar saktë eliminon shumë probleme dhe jep shumë. nga avantazhet, përkatësisht:
- Një kod kompetent HTML ka një efekt pozitiv në optimizimin e motorit të kërkimit, shpejtësinë e zvarritjes së një faqeje nga një robot kërkimi. Kilobajtë e gjeneruar të kodit janë të papranueshëm dhe madje të dëmshëm këtu;
- Kodi HTML i krijuar nga redaktori WYSIWYG ka shumë gabime semantike. Kjo do të thotë, etiketat e krijuara nga një redaktues i tillë përdoren për qëllime të tjera, ku duhet të përdorni, për shembull, lista
- , redaktori do të gjenerojë një tjetër etiketë të panevojshme për ne. Varet, natyrisht, nga redaktori, por këtu nënkuptojmë zgjidhje komplekse për krijimin e faqeve, dhe jo redaktim të thjeshtë të tekstit në zonën e tekstit duke përdorur mjetet WYSIWYG.
- Gjenerohen shumë etiketa të panevojshme dhe struktura e dokumentit është e fryrë. Le të themi se lëvizni një element në një program të tillë fillimisht në të djathtë, pastaj në të majtë, pastaj në qendër - çdo veprim lë një gjurmë në kodin origjinal HTML. Një redaktues është një program dhe ai nuk mund të dijë se çfarë saktësisht dëshironi të merrni si rezultat, ai gjeneron mijëra kode duke marrë parasysh të gjitha opsionet e mundshme për sjelljen e dokumentit në shfletues.
- Si rregull, redaktorët për vizualizimin e kodit HTML bëhen shpejt të vjetëruar. Dhe për shkak të mungesës së interesit nga ana e profesionistëve, ata në përgjithësi humbasin mbështetjen dhe ndalojnë së zhvilluari. Dhe HTML po evoluon. Gjithçka po zhvillohet, përveç vuzivugi. Prandaj, ata nuk mund të gjenerojnë kod të saktë dhe modern në të cilin do të përfshiheshin çipa dhe zgjidhje të reja.
- Është ndëshkim qiellor të mbështetësh dhe zhvillosh projekte të tilla. Përdorimi i modeleve dhe ripërdorimi i kodit është jashtë diskutimit.
Pra, ne do të shkruajmë HTML vetëm me stilolapsa. Mjetet adekuate për redaktimin vizual të HTML nuk janë shpikur ende dhe nuk ka gjasa të shfaqen. Gjuha e shënjimit HTML është e lehtë për t'u mësuar dhe kuptuar, dhe ka shumë mjete për automatizimin e shkrimit të kodit HTML, por më shumë për këtë në mësime të tjera.
Duke u kapur pak me një redaktues WYSIWYG, gurutë e rinj HTML e lënë këtë profesion të pashpresë dhe vazhdojnë.
Struktura e dokumentit HTML
Unë rekomandoj shkarkimin dhe instalimin e redaktuesit Sublime Text për klasat. Nuk ju rekomandoj të përdorni "Notepad" të integruar të Windows për paraqitjen HTML, nëse nuk dëshironi të prishni psikikën tuaj në fazat e hershme të mësimit të HTML.
Ne vendosëm që do të shkruanim kodin HTML të dokumentit me dorë, d.m.th make up. Paraqitja HTML- procesi i krijimit të një dokumenti HTML. Në njerëzit e zakonshëm dhe qarqet e ditur - vetëm paraqitje. Çdo dokument ka një strukturë dhe rregulla të caktuara ndërtimi. Nga çfarë elementësh përbëhet kodi, cila është struktura e HTML?
Le të krijojmë një shabllon fillestar në kompjuter - një skedar index.html, hapeni me një redaktues dhe ngjisni kodin e mëposhtëm në të:
Pra, me radhë nga shembulli.
- lloji i dokumentit (doctype)
Ky konstruksion tregohet gjithmonë në fillim të dokumentit në mënyrë që shfletuesi "të kuptojë" saktë se cili version i HTML përdoret për të ndërtuar dokumentin.
Për shkak të faktit se HTML është vazhdimisht në zhvillim, ai ka disa versione, si çdo produkt softuer. Versioni aktual i HTML është i 5-ti dhe i dhënë në shembull doktipiështë relevante.
Në parim, nuk ka kuptim të thellohemi në studimin e llojeve të dokumenteve, sepse me lëshimin e HTML5 ky ndërtim është bërë standard. Thjesht futeni atë në fillim të dokumentit tuaj sa herë që filloni të kodoni paraqitjen e faqes suaj të internetit.
- fillimi i dokumentit
Etiketa e parë që shohim pas doctype është .
Etiketa HTML- njësia strukturore e shënjimit të dokumentit HTML. Kodi HTML përbëhet nga tulla të quajtura etiketa. Çdo etiketë ka funksionin e vet dhe të mësuarit e gjuhës së shënjimit HTML në fund të fundit ka të bëjë me mësimin e etiketave dhe vetive të tyre në një dokument.
Dua të vërej se të mësuarit e HTML nuk është aq e vështirë sa mund të duket në shikim të parë. Mësimi i etiketave të përdorura në shënimin e dokumentit nuk është një barrë aq e madhe për trurin.
Pra, shënimi i dokumentit fillon me etiketën dhe përfundon me një etiketë mbyllëse... Çdo etiketë që përmban etiketa ose elemente të tjera duhet të mbyllet etiketa mbyllëse... Për shembull, , ,
, etj.Etiketë kërkohet, pasi përmban të gjithë strukturën e dokumentit dhe është një mbështjellës për pjesën tjetër të elementeve.
Etiketë
Më tej, ne shohim etiketë , i cili përmban elementë të tjerë që nuk janë ende të qartë për ne. Përmban elementë të tjerë - kjo do të thotë që elementët ose etiketat janë të vendosura midis etiketave hapëse dhe mbyllëse të strukturës:
<тег>përmbajtje ose etiketa të tjeraтег>
Etiketë
ka për qëllim të ruajë informacionin meta të një dokumenti HTML, domethënë informacionin që nuk shfaqet në vetë dokumentin, por është i rëndësishëm dhe përcakton kryesisht se si do të duket dhe sillet dokumenti.Ky etiketë kërkohet në dokument.
Etiketë - titulli i dokumentit
Drejtimi
Etiketa meta
Etiketa meta- një etiketë e specializuar e krijuar për të ofruar të dhëna të strukturuara për një faqe. Meta etiketat përdoren më së shpeshti në një etiketë
... Etiketat meta janë opsionale në strukturë HTML dokument.Favicon
Bashkëngjit një skedar me imazhin e faviconit në dokument. Favicon- një ikonë miniaturë e shfaqur pranë emrit të dokumentit në një skedë shfletuesi. Favicon është një skedar grafik 16 x 16 (ose 32 x 32) piksel që mund të jetë në formate të ndryshme, si png, jpg, ico, gif. Tradicionalisht përdoret formati ico. Faviconët e animuar janë skedarë gif që përmbajnë animacion. Ju mund të shikoni një favicon të animuar, për shembull, në VKontakte kur vjen një mesazh i ri.
Stilet e dokumenteve CSS
Përfshin një skedar CSS me fletë stilesh HTML në dokument.
CSS - kaskadë Stilet e dokumenteve HTML. Çdo etiketë që është në etiketë
Shënim: pronë href ndërtimet specifikon vendndodhjen e skedarit të jashtëm. Në shembullin tonë, skedari stil.css dhe favicon.ico janë në të njëjtën dosje me skedarin index.html. nuk ka një etiketë fundore.
Etiketë
Etiketë
|
I tregon shfletuesit se gjithçka midis këtyre etiketave duhet të shfaqet në dritaren e shfletuesit tuaj. Këtu janë etiketat kryesore që mund të jenë të pranishme në absolutisht çdo dokument. Etiketa trupore shërben si trupi kryesor i faqes, i cili përfshin të gjithë përmbajtjen e saj. Këshillohet që ta hapni këtë etiketë dhe mos harroni ta mbyllni në fund të dokumentit.
Titujt e faqeve h1 h2 h3
Le të shkojmë më tej, ne shohim etiketën
, i cili gjithashtu hapet dhe mbyllet. Ky etiketë tregon titullin kryesor të tekstit, në shumicën e rasteve titulli i faqes është nën titullin H1. Në fakt, ka vetëm gjashtë të dhëna titujsh. ... Ato përdoren gjithashtu në SEO, por kjo është një temë paksa e ndryshme. Unë patjetër do të theksoj një artikull për këtë dhe do të jap një përshkrim të hollësishëm për ta, do të regjistroheni në përditësimet e blogut në mënyrë që të mos humbisni asgjë.
... Ato përdoren gjithashtu në SEO, por kjo është një temë paksa e ndryshme. Unë patjetër do të theksoj një artikull për këtë dhe do të jap një përshkrim të hollësishëm për ta, do të regjistroheni në përditësimet e blogut në mënyrë që të mos humbisni asgjë.
... Ato përdoren gjithashtu në SEO, por kjo është një temë paksa e ndryshme. Unë patjetër do të theksoj një artikull për këtë dhe do të jap një përshkrim të hollësishëm për ta, do të regjistroheni në përditësimet e blogut në mënyrë që të mos humbisni asgjë.
... Ato përdoren gjithashtu në SEO, por kjo është një temë paksa e ndryshme. Unë patjetër do të theksoj një artikull për këtë dhe do të jap një përshkrim të hollësishëm për ta, do të regjistroheni në përditësimet e blogut në mënyrë që të mos humbisni asgjë.
Prania e një titulli të tillë në artikull do të luajë një rol të rëndësishëm në promovimin e faqes. Për më tepër, përdorimi i tyre ju jep një strukturë të qartë të faqes, titullin, nëntitujt, pikat kryesore, nënparagrafët e kështu me radhë. Përdorni gjithmonë dhe zbatojini ato në praktikë. Në shumë CMS, si WordPress, kur shkruani tekst, do të vini re "titulli 1", "titulli 2", "titulli 3" e kështu me radhë. Ata janë përgjegjës për h1, h2 dhe h3.
Nëse jeni duke shkruar kopje trupore nga një paragraf i ri, ju shkruani etiketën
Në fillim dhe mbylleni në fund
... Shënimi i një paragrafi në html është i njëjtë me krijimin e një paragrafi të ri në një dokument MS Word. Nuk kam shtuar asgjë të re në dokument. Por, kjo nuk është gjithçka që duhet të jetë e pranishme në dokumentin html. Le të shohim një shembull tjetër, përshkrimi do të jetë pak më vonë.
Ky tekst do të jetë i guximshëm, dhe ky është gjithashtu italik
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >dokument HTML< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
Elementet bazë të kokës dhe titullit
Çdo dokument ka një element kokë dhe një element Titulli. E para
që vjen menjëherë pas etiketës së parë ... Ky etiketë përmban të gjithë informacionin rreth faqes, ai gjithashtu përmban elementin
< / html > |
Siç mund ta shihni, nuk ka asgjë të komplikuar. Këtu janë etiketat më themelore që duhet të jenë të pranishme në çdo dokument html. Mos harroni të mbyllni secilën prej tyre, përndryshe shfletuesi nuk do të jetë në gjendje të perceptojë pamjen e plotë të kodit. Kjo duhet të dihet dhe mbahet mend gjithmonë. Pastaj filloni të futni tekst, fotografi, video etj. Por kjo tashmë do të jetë në artikuj të tjerë.
Redaktori i Notepad ++
Përdorni Notepad ++ për të punuar me kodin. Është falas, nuk është e vështirë ta gjesh në internet. Është shumë i përshtatshëm për perceptimin e çdo kodi, etiketa hapëse dhe etiketa mbyllëse tregohen gjithashtu me lehtësi. Ne mbështesim sintaksën e më shumë se 40 gjuhëve të programimit. Vetëm ajo që ju nevojitet për të mësuar bazat e html.
Notepad është superior në çdo mënyrë ndaj një fletoreje të zakonshme. Për lehtësi, thjeshtësi dhe mësim maksimal, ky redaktues fillimisht duhet të instalohet në kompjuterin tuaj. Avantazhi dhe komoditeti më i rëndësishëm, redaktori i Notepad ++ tregon sugjerime kur shkruani kodin, gjë që e bën punën tuaj më të shpejtë dhe më të mirë ndonjëherë.
Elementi DOCTYPE
Çdo dokument duhet të ketë gjithashtu një element të tillë doctype. Për çfarë është dhe çfarë duhet të jetë në të. Zakonisht njerëzit nuk janë shumë të dhënë pas këtyre linjave, ata kopjojnë veten në dokumente dhe punojnë me qetësi. Këta elementë i tregojnë shfletuesit se cili version i html përdoret në dokument, cili përshkrim i faqes, cili kodim është përdorur, cilat fjalë kyçe janë përfshirë, kush është autori dhe si quhet faqja.
Zakonisht ato vendosen në fillim. Ka disa opsione dhe të gjitha ndryshojnë nga njëri-tjetri, unë do të shkruaj një shembull që përdoret më shpesh. Ky bosh mund të përdoret si një shabllon i gatshëm. Më tej, do të ketë një përshkrim të qartë të secilës rresht, nuk duhet të ketë probleme me këtë.
Shkurtimisht në gjuhë të thjeshtë për bazat e html: Kjo linjë i tregon shfletuesit se ky dokument është XHTML versioni 1.0, përdoret anglishtja dhe gjithë kjo rrëmujë ndodhet në këtë adresë. Më pas, në etiketën meta, ne tregojmë kodimin që përdoret. Windows 1251 përdoret më shpesh.
Përshkrimi - prek temën e SEO, një nga tre etiketat kryesore, i cili duhet të jetë i pranishëm absolutisht në çdo dokument, ky etiketë tregon përshkrimin e faqes. Çfarë është shkruar në këtë faqe, një përshkrim i shkurtër, jo më shumë se dy fjali. Etiketa e fjalëve kyçe, tema e SEO është gjithashtu e prekur, kjo etiketë kërkohet. Ai përmban fjalë kyçe me të cilat përdoruesit e internetit do t'ju gjejnë përmes motorëve të kërkimit.
Etiketa e titullit përmban titullin e vetë dokumentit, titullin e tij, të cilin e shohim në shfletues. Ndoshta etiketa më e rëndësishme në të gjithë dokumentin që ka ndikimin më të madh në promovimin e faqes. Artikulli mbi shtimin dhe stilimin përmban një përshkrim të kësaj etikete në më shumë detaje.
Çfarë duhet të mbani mend nga ky mësim në lidhje me bazat e html:
- Pothuajse të gjitha etiketat hapen dhe mbyllen;
- Dokumenti fillon me një etiketë ;
- Prania e etiketës ;
- Prania e etiketës ;
- Struktura e qartë e dokumentit html.
Të gjitha faqet kryesore duhet të emërtohen gjithmonë me fjalën indeks... Pra pranohet dhe kështu të gjithë janë mësuar me të, pavarësisht se cila do të jetë shtrirja e skedarit, mund të jetë html dhe php. Gjithmonë quhet kështu.
Shikoni një video mbi bazat e html nga Webformyself.
Gjuha e shënjimit të hipertekstit, elementet bazë dhe struktura. Do të përpiqem t'i përshkruaj të gjitha këto dhe shumë më tepër në blogun tim. Para së gjithash, do të shkruhen informacione të dobishme për fillestarët, do të sigurohet një kod shembull dhe mundësia për të shkarkuar vetë shembullin së bashku me faqen e përfunduar.
Pershendetje te gjitheve!!! Më vjen shumë mirë që keni vendosur të pushtoni majën e bazave të HTML dhe kjo është zgjedhja e duhur. Në fund të fundit, përpara se të krijoni uebsajtin tuaj të parë, duhet të dini bazat e HTML. Për më tepër, do t'ju duhet të merreni me kodimin HTML në një faqe interneti më shumë se një herë. Unë rekomandoj shumë leximin e mësimeve HTML për fillestarët në blogun tim, dhe ju garantoj që pas marrjes së këtij kursi, ju mund të krijoni lehtësisht një faqe interneti apo edhe një faqe interneti vetë.
Le të fillojmë! Së pari, le të zbulojmë
HTML- (nga anglishtja. H ypert ext M arkup L gjuh) është një gjuhë shënjimi e hipertekstit. Ajo u zhvillua për herë të parë nga shkencëtari britanik Tim Berners-Lee në 1991-1992. HTML kishte për qëllim vetëm të shënonte tekstin, imazhet dhe tabelat në faqet e internetit. Tani gjuhë programimi si JavaScript, VBScript mund të futen gjithashtu në dokumentin HTML.
HTML nuk është një gjuhë programimi, ajo ka për qëllim vetëm të shënojë dokumente tekstuale.
Për të mësuar HTML ju vetëm duhet të keni një Browser dhe Notepad standard në kompjuterin tuaj ose.
Për të hapur Notepad standard, bëni sa më poshtë në kompjuterin tuaj: "Start" => "Programet" => "Accessories" => "Notepad"
.
Nëse keni dëgjuar për programe që thjeshtojnë punën e shkrimit të kodit HTML (Microsoft FrontPage, Adobe Dreamweaver), atëherë unë nuk rekomandoj përdorimin e tyre në këtë fazë të trajnimit. Shkruani dorën tuaj në një fletore standarde ose në redaktuesin e tekstit Notepad ++, dhe kur të merrni këtë kurs, mund të përdorni programe për të shpejtuar. Abonohuni në përditësimet e blogut tim dhe lexoni se si të përdorni Microsoft FrontPage, Adobe Dreamweaver.
Për një kuptim më të mirë, unë kam përgatitur një shembull. Konsideroni me kujdes vizatimin:
Sqarim.
një). Çdo dokument HTML fillon me një rresht si ky:
"https://www.w3.org/TR/html4/loose.dtd">
Me këtë rresht, ne i tregojmë shfletuesit se dokumenti ynë HTML përputhet me specifikimin ndërkombëtar versionin 4.01. Falë kësaj linje, faqja juaj do të duket e njëjtë.
Nuk është e nevojshme të mbani mend këtë rresht, dokumenti HTML do të funksionojë pa të. Kjo është në mënyrë që ju të dini se çfarë është.
2). dhe- ky është fillimi dhe fundi i dokumentit.
3).
dhe- kreu i dokumentit. Etiketat shtesë të shërbimit shpesh futen këtu, një nga këto etiketa është4).
Ky titull do të shfaqet në shfletuesin:
në kërkimin I ndex ose në Google.
5).
dhe- trupi i dokumentit.Këtu ndodhet përmbajtja e dokumentit, për shembull, teksti, fotografitë, tabelat, muzika, filmat, etj. Në mësimet e mëposhtme do të mësoni më shumë se si të futni muzikë, tekst, fotografi në trupin e një dokumenti.
Shënim:
Shpesh do t'ju duhet të lexoni dhe dëgjoni fjalën "tag".
Një etiketë është gjithçka midis kllapave< >... Për shembull:
,
,
Etiketat nuk janë të dukshme kur shikoni faqen në një shfletues, por çdo gjë që nuk është në kllapa do të shfaqet në shfletues kur të shikohet.
Ka shumë etiketa dhe ato janë të ndryshme në qëllim.
Ka etiketa që duhen mbyllur. Për shembull,
hape etiketën
dhe sigurohuni që ta mbyllni etiketën
Dhe ka etiketa të vetme, për shembull, kjo
.
Një etiketë është një lloj kontejneri që mund të përmbajë tekst, imazhe dhe etiketa të tjera ...
○ Kushtojini vëmendje sekuencës së saktë të hapjes dhe mbylljes së etiketave:
<тэг1> <тэг2> <тэг3> ... тэг3> тэг2> тэг1>
Etiketën që hapëm i pari - mbyllim të fundit, të dytin - të parafundit, etj.
○ Dhe këtu është një shembull i një sekuence të pasaktë të etiketave të fillimit dhe të përfundimit. Me këtë urdhër, mund të ketë gabime në faqen e internetit:
<тэг1> <тэг2> <тэг3> ... тэг3> тэг1> тэг2>
Gabimi ishte në<тэг1>dhe<тэг2>
.
Kini kujdes kur shkruani kodin.
Kodi gati.
Kështu duket kodi HTML i kërkuar standard i përfunduar për një faqe interneti.
Mos u dekurajoni nëse nga të gjitha sa më sipër nuk keni kuptuar pak ose pothuajse asgjë. Në mësimin e dytë, do të ketë më shumë praktikë, dhe ju mund të shkruani manualisht gjithçka vetë dhe të shihni se si funksionon HTML.
Kaloni në mësimin tjetër
Gjuhët e hipermarkup-it si html dhe CSS nuk janë aq të vështira për t'u mësuar sa mund të duken kur mësuat për herë të parë rreth tyre. Ato bazohen në parime krejtësisht të natyrshme dhe të kuptueshme, duke i zotëruar të cilat lehtë mund të zgjidhni probleme të shumta që shfaqen në punën e faqes tuaj.
Njohuritë themelore të bazave të html dhe CSS do t'ju lejojnë të eliminoni në mënyrë të pavarur problemet e vogla të pashmangshme në funksionimin e një burimi në internet, të modifikoni informacionin në sit, të vendosni hiperlidhje, të vendosni imazhe, të nënvizoni informacionin e nevojshëm në mënyra të ndryshme.
Html - baza e paraqitjes dhe komponenti bazë në organizimin e elementeve të faqes
Html është baza mbi të cilën mbivendosen më pas njohuri të tjera rreth menaxhimit të burimeve dhe organizimit të elementeve të tij. Kjo gjuhë shënjimi është një nga më të rëndësishmet dhe më të përdorurat. Dhe janë pikërisht aftësitë e html që ju lejojnë të vendosni elementë në një faqe interneti në vendin e duhur dhe t'u jepni atyre madhësinë dhe pamjen e dëshiruar.
Informacioni që shënohet duke përdorur html lexohet nga aplikacione të zhvilluara posaçërisht, të njohura më mirë si shfletues ose shfletues të internetit. Shfletuesit më të përdorur të internetit sot janë:
- Internet Explorer
- Google Chrome;
- Opera;
- Mozilla Firefox.
Në të njëjtën kohë, krijuesit e shfletuesit mund të gjenerojnë në mënyrë të pavarur grupe të reja elementesh për html. Në fund të viteve '90, ishte pikërisht për shkak të krijimtarisë kaq aktive të zhvilluesve konkurrues të shfletuesve që u formua fenomeni i "luftës së shfletuesve". Thelbi i tij zbriste në faktin se disa faqe html shfaqen saktë në një shfletues të internetit, ndërsa në një tjetër përdoruesi i sheh ato me gabime. Mënyra e vetme për të dalë nga një situatë konflikti në shfletues është përdorimi i një plani ndër-shfletuesi.
Redaktorët për krijimin e faqeve html
Ju mund të krijoni ose modifikoni një faqe html duke përdorur redaktuesit html. Më i thjeshti dhe më i famshmi është redaktori i tekstit Notepad, i cili nuk është shkruar posaçërisht për të punuar me shënimin html, por e mbështet këtë veçori. Më funksionale dhe të dizajnuara posaçërisht për të punuar me html janë redaktorët:
- Notepad ++ - punon me kodin burimor dhe është falas.
- Macromedia Dreamweaver - ndryshon në një sërë funksionesh të përparuara për redaktim dhe shikim të shënimit të krijuar, dhe gjithashtu ka aftësinë për të treguar faqen e përfunduar.
- Adobe Dreamweaver - si redaktori i mëparshëm, ai ka funksionin e shfaqjes së faqes së përfunduar, domethënë i lejon përdoruesit të shikojë versionin e redaktuar në formën në të cilën do të shfaqet në shfletues. Ky program është një version i mëvonshëm, i cili u shfaq si rezultat i përmirësimit të redaktorit të tyre nga specialistë të Adobe të blerë nga Macromedia. Për shkak të kësaj, Macromedia Dreamweaver dhe Adobe Dreamweaver janë shumë të ngjashëm.
- Microsoft Front Page është pjesë e paketës Office dhe ka aftësi të mjaftueshme për përpunimin dhe krijimin e HTML-markup.
Etiketat bazë
Një dokument që përdor shënjimin html është një grup i thjeshtë komponentësh që janë të segmentuar me karaktere speciale të quajtura etiketa. Etiketat mbyllin një element, duke i dhënë kështu një pamje të caktuar dhe duke përcaktuar vendin e tij. Ka edhe raste kur etiketa nuk mbyll asgjë: kjo ka të bëjë me kombinimin
që ia kalon vijës.
Etiketa që vjen përpara elementit të mbyllur quhet etiketa hapëse dhe duket kështu< тег >... Etiketa që është pas elementit të mbyllur quhet etiketa mbyllëse dhe duket kështu тег >... Kërkohet prania e një prerje (/) për të mbyllur etiketën, përndryshe komponenti nuk do të funksionojë. Ky rregull zbatohet për shumicën e etiketave, përveç atij të përmendur më sipër
dhe disa të tjerë. Etiketat kryesore html janë:
- - një etiketë që tregon drejtpërdrejt se skedari i përket formatit html;
- - një etiketë që është e padukshme në dokument dhe ka për qëllim të përcaktojë emrin e dokumentit dhe karakteristikat e tij për robotët e kërkimit;
- - një etiketë që përcakton kufijtë e pjesës së dukshme të dokumentit;
- , ,, - etiketa të formatimit të tekstit dhe krijimit të tekstit të theksuar, tekstit të pjerrët, ndarjes së një paragrafi, formimit të numrave.
Krahas etiketave, rezultati i të cilave vizitori i faqes shikon në formën e drejtshkrimeve të theksuara ose të pjerrëta, ka edhe etiketa shërbimi, të cilat quhen meta-etiketa dhe u japin informacionin e nevojshëm motorëve të kërkimit, shfletuesit, por nuk janë të dukshme për përdoruesin mesatar.
Për të krijuar një faqe html, duhet të ndiqni hapat e përshkruar më poshtë në sekuencë. Ju mund të përdorni një fletore të rregullt.
1) Krijoni një dokument. Fusni kodin e mëposhtëm në të:
Përmbajtja e këtij elementi do të shfaqet në shfletues
Shënim: domosdoshmërisht në "
»Tregoni kodimin e dokumentit siç tregohet më sipër.2) Tjetra: skedar - ruaj si. Në fushën "lloji i skedarit", në vend të "txt", zgjidhni "Të gjithë skedarët" (të gjithë skedarët), në fushën e faqes së kodit (kodimi i faqes) - zgjidhni 65001 (UTF-8), në fushën "emri i skedarit" pas emrin e dokumentit, vendosni një pikë dhe zgjatjen html (.html), më pas klikoni ruaj. Tani kemi një dokument të dytë në të njëjtën dosje, por këtë herë në html. Kjo është faqja jonë e internetit, e cila tani mund të hapet në çdo shfletues.
Shembuj të kodit HTML
- Teksti në paragrafë
Paragrafi 1
Paragrafi 2
Paragrafi 3
- Titujt dhe paragrafët e linjës qendrore
Ky titull është i përqendruar.
Titulli i nivelit të dytë është i përqendruar.
Teksti i paragrafit është në qendër.
- Meta etiketat, titulli i faqes (titulli), përshkrimi i faqes (përshkrimi) dhe fjalë kyçe
Paragrafi me fjalë kyçe të specifikuara në "fjalë kyçe"
CSS - mekanizmat plotësues html
Aty ku funksionaliteti html është i pamjaftueshëm, Cascading Style Sheets - CSS vjen në ndihmë. Ato janë opsione më të avancuara dhe më të fuqishme për ndryshimin e pamjes së një ueb faqeje. CSS funksionon në lidhje me aftësitë html. Këto dy grupe parametrash ndërveprojnë dhe nuk zëvendësojnë njëra-tjetrën në asnjë mënyrë.
Opsionet CSS mund të vendosen në vetë dokumentin në ueb duke përdorur:
- etiketa që janë midis etiketave dhe;
- një atribut stili i vendosur brenda çdo etikete tjetër.
Gjithashtu sugjerimet CSS mund t'i bashkëngjiten një dokumenti në internet me:
- etiketë vendosur në mes dhe;
- Direktiva @import vendoset midis etiketave.
Në procesin e shkrimit të një fletë stili, duhet të ndiqni rreptësisht një sintaksë të veçantë që supozon vartësinë e elementeve dhe hierarkinë e tyre, në të cilën pozicionet shpërndahen midis treguesit, pronës, vlerës, përshkrimit dhe vargut. Në këtë rast, kllapat kaçurrelë përdoren për të treguar vetitë dhe disa veçori mund t'i caktohen çdo etikete menjëherë.
Mënyrat për të përfshirë fletët e stilit CSS
Ka disa mënyra për të lidhur CSS me html:
- tabela inline, në të cilat një fletë stili është ngulitur në kokën e faqes duke përdorur një etiketë;
Ztx {
font-size: 12px;
color: #4A4A4A;
}
Ztx_2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 18px;
color:#F00;
background-color:#3FF;
}
Отформатированный текст
К этому тексту уже применён второй стиль
Примечанеие: «font-family» — это название шрифта, «font-size» — размер шрифта, «color» — цвет шрифта, «background-color» — цвет фона.
- внутренние таблицы CSS, когда таблица помещается внутри элемента html;
Отформатированный текст
К этому тексту уже применёт второй стиль
- внешние таблицы CSS, при использовании этого способа подключения таблицы стилей создаются отдельным файлом.
Такой способ является наиболее удобным и поэтому часто используемым. Подключение в данном случае производится с использованием тега и будет выглядеть следующим образом:
Это заголовок первого уровня
Здесь просто текст
Это заголовок второго уровня
Здесь просто текст
А вот содержимое CSS файла «style.css» таким образом для текста, которому присвоен класс «form» применяются стили, в данном случае: название шрифта, размер шрифта и цвет фона.
Form {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-color:#3FF;
}
Информационный материал подготовлен сотрудниками студии веб-дизайна «БЕЛЫЙ ПАРУС»
Мы искренне надеемся, что он будет полезен всем, кто решил овладеть основами html и css.
This entry was posted on Воскресенье, Март 17th, 2013 at 08:47 and is filed under . You can follow any responses to this entry through the feed. Responses are currently closed, but you can from your own site.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: <имя тега> … имя тега> . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел,