Në përgjithësi, do të vlerësoj kohën për studimin bazë html si 2-8 orë, pjesa tjetër është fakultative. Dhe, sigurisht, koha e studimit varet nga interesi. Unë rekomandoj ta ndani në disa ditë nga 20-30 minuta secila.
Ju jeni gati? Atëherë le të shkojmë!
Ne NUK kemi nevojë për një lidhje interneti për të krijuar një faqe në html.
do të na duhet
1) Zgjidhni redaktori i tekstit. mjafton për herë të parë Notepad(në të na duhet vetëm komanda Ruaj si)| Nëse dëshironi të filloni menjëherë programimin në redaktues të specializuar të tekstit, atëherë kushtojini vëmendje: 1) për Dritaret NotePad++(Shkarko ose) jotip(Shkarko) 2) për Mac Dhe linux Dallimi i tyre nga redaktuesit e zakonshëm të tekstit qëndron kryesisht në faktin se ata bëjnë dhëmbëzimin automatik, ! bëjnë të mundur riruajtjen e skedarit në një kodim tjetër (vini re se do ta hasni në të ardhmen), ngjyrosni etiketat me ngjyra të ndryshme, siç është kodi në fund të mësimit. Në një redaktues të rregullt, do të jetë një ngjyrë. |
2) Çdo shfletues interneti si p.sh Internet Explorer për Windows ose safari për Mac OS X dhe iOS. Po, edhe ju mundeni Mozilla, Google Chrome, Opera, Yandex Dhe Postë shfletues etj.
Le të fillojmë të krijojmë një faqe HTML
1) krijoni një dosje në desktop html. Ne do ta bëjmë këtë në mënyrë që mësimet të jenë të strukturuara dhe të përfshira në një vend.2) Krijo skedarin tonë në një redaktues teksti siç është Notepad. Me tutje Ruaj si.
Kodimi është më mirë të zgjidhni UTF-8, pastaj zgjidhni të gjitha llojet e skedarëve dhe zgjidhni një emër skedari me .html në fund, për shembull index.html
Ne zgjedhim si drejtori (dosje) ku të ruajmë html
Klikoni ruaj. Gati!
Shpesh shtrohet pyetja se çfarë zgjerimi i skedarit nuk është i dukshëm. Le ta marrim me radhë
Mundësia për të parë shtesat e skedarëve mund të ndihmojë në përcaktimin e llojit të skedarit dhe ju lejon të bëni manualisht (me komandën riemërto) ndryshoni jo vetëm shtrirjen, por edhe llojin e skedarit (për shembull, nga txt në html)
| NUK duhet të duket kështu: foto, dokument teksti, lojë kështu duhet të duket: foto.jpg; dokument teksti.txt; lojë.exe Por nëse emrat e skedarëve tuaj ende duken si në opsionin e parë (PA, për shembull, .txt ; jpg ; .exe në fund të emrit të skedarit), bëni sa më poshtë: Ne shikojmë cilësimet e skedarëve dhe dosjeve: Për Windows XP Hapni çdo dosje - Mjetet (në krye në panel) - Opsionet e dosjeve - Shikoni - Fshihni shtesat për skedarët e regjistruar (çzgjidh) - Apliko Për Windows 7 Hap çdo dosje - Organizo - Opsionet e skedarit dhe kërkimit - Shiko - Fshih shtesat për llojet e skedarëve të regjistruar (çzgjidh) - Apliko Për MacOS Ne klikojmë në desktop - Gjetësi - Preferencat (Cilësimet) - Të avancuara (Avancuar) - kontrolloni kutinë në Shfaq të gjitha shtesat e skedarëve (Shfaq shtesat e të gjithë skedarëve) - Apliko |
3) ngjisni në të të gjithë kodin (së bashku me komentet) më poshtë:
Titulli i faqes sime
4) hapni skedarin. Ju mund të zgjidhni një shfletues tjetër për të hapur këtë skedar, për këtë ne shtypim butonin e djathtë të miut në skedarin tonë index.html - Për të hapur me dhe zgjidhni një shfletues nga lista, për shembull, Internet Explorer, Google Chrome, Mozilla, Shfletuesi Yandex, etj.
Si rezultat, duke hapur Shfletuesin e Internetit, rezulton index.html, Ju duhet të shihni një faqe si kjo:
Foto 1.
Në Figura 1 ne shohim se si shfletuesi shfaqi faqen tuaj si rezultat. Teksti i elementeve të mëposhtëm është theksuar me të kuqe:
Titulli i faqes sime
Kjo është faqja ime e parë në internet!
Në kodin më poshtë mund të shihni minimumin bazë të një dokumenti html. Duhet të mësohet dhe të mos ngatërrohet vende-vende duke hapur dhe mbyllur etiketat.
Etiketë kokë zgjedh kreun e dokumentit. Ai përmban elemente që lidhen kryesisht me ndihmën e Browser-it në përpunimin e elementeve të faqes tuaj (titulli, fjalë kyçe, autorësia, etj.) Konkretisht për përmbajtjen e tij do të flasim më vonë.
Etiketë titullin qëndron për titullin e faqes. Ky është etiketa e vetme që përmbahet në kokë Ajo që shfaqet në faqe. Ajo që futni pas hapjes dhe para etiketës mbyllëse do të jetë Titulli i faqes tuaj në internet
Etiketë trupi qëndron për trupin e faqes. Çfarë të shkruani pas etiketave të hapjes dhe mbylljes trupi dhe do të jetë përmbajtja e faqes tuaj
Çdo titull
Vetëm tekst
Teksti në një paragraf. Do të fillojë në një linjë të re dhe do të përfundojë me një etiketë mbyllëse.
Teksti tjetër
Pothuajse të gjitha etiketat në HTML hapja dhe mbyllja(një përjashtim është, për shembull, etiketa img, që do të thotë të futësh një imazh).
Edhe një herë, ju kujtoj se është e rëndësishme të mos harroni të shkruani etiketa mbyllëse për të gjitha llojet e tjera të etiketave, përndryshe Shfletuesi nuk do të kuptojë saktësisht se ku dëshironi të përfundoni këtë apo atë element. Si më poshtë:
Unë dua të theksoj tekstin të guximshme, dhe kjo me shkronja të pjerrëta
E kemi harruar qëllimisht etiketën mbyllëse b pas fjalës me shkronja të zeza. Si rezultat, shfletuesi shfaqi sa vijon
Unë dua të theksoj tekstin të guximshme, dhe kjo me shkronja të pjerrëta
Siç mund ta shihni, teksti deri në fund do të jetë me shkronja të theksuara, dhe ai që është menduar të jetë i pjerrët do të jetë i theksuar dhe i pjerrët. Kështu që kini kujdes!
5) Nëse dëshironi të redaktoni diçka në skedarin tuaj index.html(dhe tani hapet si parazgjedhje vetëm nga shfletuesi), më pas shtypim butonin e djathtë të miut në skedarin tonë index.html- zgjidhni Për të hapur me dhe nga lista zgjedhim tashmë një redaktues teksti, ai do të jetë ose Notepad, ose një redaktues tjetër teksti që keni instaluar.
Në parim, ai shpjegoi bazat. Deri më tani, faqja html duket mjaft e thjeshtë, por në mësimet e ardhshme do t'ju tregoj në detaje për këto dhe elementë të tjerë dhe qëllimin e tyre - ne do të fusim imazhe, do të bëjmë lidhje dhe shumë më tepër)
urime!
A është e lehtë?)
Mësimi 2
Ne krijojmë faqen e parë html.
Në këtë mësim, ju do të krijoni faqen tuaj të parë të internetit duke ndjekur udhëzimet e mia. Deri më tani, nuk keni nevojë të gërmoni se çfarë lloj karakteresh të pakuptueshëm do të duhet të përdorni. Në këtë tutorial ne po krijojmë një faqe, dhe në dy mësimet e ardhshme do të kuptojmë plotësisht çdo karakter të shkruar.
Gjëja e parë që bëjmë është krijimi i një dosjeje në desktop dhe emërtimi i saj Site. I gjithë krijimi ynë i mëtejshëm do të bëhet në këtë dosje.
Tani le të hapim Notepad++ që kemi instaluar. (Nëse nuk e keni bërë tashmë, atëherë udhëzimet e instalimit). Si parazgjedhje, programi duhet të jetë në drejtorinë /Program Files/Notepad++/, ose mund ta ekzekutoni përmes Start. Hapni programin dhe ngjisni tekstin e mëposhtëm në të:
<html>
<head>
<title>Sajti im i parë </title>
</kokë>
<trup>
Përshëndetje! Kjo është faqja ime e parë në internet!
</trup>
</html>
Shumica e faqeve Runet përbëhen nga faqe html të shkruara në kodim UTF-8. Në mënyrë që faqet tona të shfaqen saktë në shfletues, ne do të përdorim gjithashtu këtë kodim.
Tani duhet ta ruajmë skedarin tonë në formatin html.
Mos harroni se Notepad ++ është një redaktues teksti, që do të thotë se për momentin kemi një skedar teksti të rregullt me një grup karakteresh. Në mënyrë që shfletuesi ynë të shfaqë faqen e tekstit që kemi krijuar si një faqe interneti, duhet ta konvertojmë atë në një skedar html.
Për ta bërë këtë, shtypni butonin "File" në menunë e sipërme, pastaj "Ruaj si", zgjidhni direktorinë (shtegun) ku do të ruhet skedari, ruajeni në dosjen që krijuam: Desktop / Site /, pastaj më e rëndësishmja. , zgjidhni llojin e skedarit të dëshiruar, në rastin tonë është Hyper Text Markup Language (html).
urime! Sapo keni krijuar faqen tuaj të parë të internetit! Tani mund të shkoni te dosja "Site" dhe të ekzekutoni skedarin e krijuar. Faqja do të hapet me një shfletues dhe do të shihni që në vend të karaktereve të pakuptueshme që kemi futur, shfletuesi shfaq informacione mjaft të kuptueshme në ekran.
Ose , ose më mirë akoma, të katërt, sepse shumë elementë HTML shfaqen ndryshe në shikues të ndryshëm dhe është më mirë t'i mbani nën kontroll këto dallime.
Përveç shfletuesit, do të na duhet çdo redaktues teksti, për shembull, Notepad nga Windows ose Notepad, por Dreamweaver është ideal. Programi nevojitet për të përgatitur skedarët HTML dhe shfletuesi nevojitet për të parë dhe kontrolluar daljen. Me ndihmën e këtyre mjeteve, ne do të krijojmë një faqe WEB në kompjuterin tonë lokal, pas kësaj do ta vendosim në një nga serverët WWW në internet, duke i bërë kështu faqet tuaja WEB të disponueshme për të gjithë botën.
Përgatitja për të krijuar një faqe WEB
Si shembull, le të përgatisim faqet WEB të një kompanie të caktuar. Le ta quajmë "Company SD", le të themi se punon në fushën e sistemeve të kontrollit automatik. Qëllimi i faqes WEB është t'i tregojë botës për kompaninë, fushën e saj të veprimtarisë, për të gjetur partnerë dhe klientë.
Skedarët e faqes sonë WEB kanë nevojë për një dosje të veçantë.
Krijoni një dosje me emrin WEB në çdo hard disk të kompjuterit tuaj. Tani le të hapim programin Notepad dhe të fillojmë punën.
Hapni një program, për shembull Notepad, duke klikuar butonin Start në Taskbar dhe duke zgjedhur Programs - General - Notepad nga menyja që shfaqet.
Mund të përdorni çdo redaktues tjetër teksti. Por në këtë rast, duhet ta ruani skedarin si tekst të thjeshtë në mënyrë që të shmangni përfshirjen e shenjave të formatimit të palëve të treta në dokumentin WEB.
Së pari, le të prezantojmë etiketat kryesore që përcaktojnë strukturën e çdo dokumenti HTML. Kujtojmë që në kodin HTML lejohet të përdoret çdo rast i karaktereve - sipërme ose të poshtme.
Etiketat e 1-rë
Futni etiketat kryesore të mëposhtme nga tastiera, duke vendosur ndonjë prej tyre, duke mos llogaritur etiketën e mbylljes, në linjën më të re.
Për të futur etiketa të çiftuara, mund të përdorni operacionet e kopjimit dhe ngjitjes përmes kujtesës së Windows me shtimin e mëposhtëm të një prerje /.
Kujtojmë se 1 Dhe e fundit etiketat nënkuptojnë fillimin dhe fundin e dokumentit, përkatësisht, elementin
… përcakton titullin e faqes WEB, element …është trupi i dokumentit, dhe në elementMes hapjes
Kujtoni që titulli i faqes WEB duhet të jetë i vogël dhe të tregojë përmbajtjen e saj në masën më të madhe.
Detyra jonë e radhës është të ngjitemi në trupin e dokumentit midis etiketave
… një tekst i vogël - mirëseardhje për të ftuarit e faqes WEB.Fusni një vijë të zbrazët midis etiketave
Dhe dhe shkruani tekstin e mëposhtëm në të:Mirë se vini në faqen e kompanisë SD! Këtu do të mësoni për aktivitetet tona, për produktet softuerike të kompanisë sonë dhe për pajisjet që ne prodhojmë.
Për çdo faqe WEB mund të gjeni ngjyrën e sfondit dhe ngjyrën e tekstit. Kjo bëhet duke përdorur atributet bgcolor dhe tekst të etiketës hapëse.
. Ekzistojnë dy opsione për të specifikuar një ngjyrë si një vlerë atributi:- tregues verbal i emrit të ngjyrës, për shembull, e bardhë (borë e bardhë). Ka gjashtëmbëdhjetë emra të tillë në HTML;
- një numër në shënimin heksadecimal, për shembull, "#ffffff" - e bardhë e pastër, e cila tregon se si formohet ngjyra nga ngjyrat kryesore - të kuqërremta, jeshile dhe blu.
Ngjyrosja e faqes së parë të internetit
Natyrisht, treguesi verbal i ngjyrës është më i rehatshëm dhe i kuptueshëm. Nga ana tjetër, emërtimet numerike janë më të fuqishme sepse ju lejojnë të specifikoni në të vërtetë ndonjë nga 16,777,215 ngjyrat, ndërsa emërtimet verbale janë të kufizuara në vetëm gjashtëmbëdhjetë ngjyra.
Le të rendisim disa emra ngjyrash: e zezë (e errët), gri (grija), e kuqe (e kuqërremtë), jeshile (e gjelbër), aqua (blu).
Le të përdorim si shembull për sfondin e faqes sonë WEB ngjyrën blu (blu), dhe për tekstin - të verdhë (e verdhë).
Ngjitni në etiketën hapëse
atributet bgcolor="blu" dhe text="verdhë". Kjo etiketë duhet të duket si kjo:
Përveç specifikimit të ngjyrës, mund të përdorni edhe një skicë të parapërgatitur për sfondin e faqes WEB. Por ne do të flasim për këtë në të ardhmen.
Në dritaren e programit Notepad, zgjidhni komandën e menusë File - Save (File - Save). Dialogu Ruaj si do të shfaqet në ekran.
Hapni dosjen WEB të krijuar më parë, në të cilën duhet të ruhen të gjithë skedarët e faqes WEB.
Në fushën e futjes së emrit të skedarit, shkruani other.html - kështu do ta emërtojmë këtë skedar.
Ju lutemi vini re: duhet të specifikoni shtrirjen e emrit të skedarit HTML në mënyrë që shfletuesi të mund ta hapë atë. Ju gjithashtu mund të shkruani htm, por ky është tashmë një format i vjetëruar dhe nuk rekomandohet fuqimisht ta përdorni.
Shihni rezultatin e punës
Tani mund të shikoni rezultatet e punës sonë.
Pa u mbyllur, minimizoni dritaren e Notepad.
Hapni dosjen WEB në të cilën keni ruajtur skedarin other.html duke përdorur programin Windows Explorer dhe klikoni dy herë mbi ikonën e tij. Shfletuesi i paracaktuar do të hapet dhe dokumenti other.html do të hapet në dritaren e tij.
Shikoni, titulli i dritares së shfletuesit tregon titullin e dokumentit që kemi futur në element
Ndoshta në shfletuesin tuaj madhësia e shkronjave të tekstit do të jetë më e madhe ose më e vogël se në foto. Në këtë rast, zgjidhni komandën e menysë View - Font Size - Medium (View - Text Size - Medium) në shfletuesin e Internet Explorer për të vendosur madhësinë mesatare të shkronjave.
Duhet të kuptohet se shfletues të ndryshëm mund të shfaqin përmbajtjen e të njëjtit skedar HTML ndryshe. Prandaj, kur zhvilloni faqe WEB, është më mirë që gjithmonë të shikoni rezultatin në të gjithë shfletuesit më të njohur - Internet Explorer, Opera, Mozilla. Në këtë rast, do të bindeni se i ftuari i faqes suaj WEB do të shohë saktësisht atë që dëshironi t'i tregoni.
Shikoni skedarin e krijuar në një shfletues tjetër. Në këtë fazë të punës, dallimet nuk do të jenë të dukshme.
Pa mbyllur, minimizoni dritaret e shfletuesit.
Sepse në element
Nëse e kemi futur tekstin pa e ndarë në paragrafë, atëherë në shfletues ai shfaqet si paragrafi i parë dhe rreshtohet në të majtë. Tani duhet t'i japim tekstit një pamje më të bukur.: HTML - Gjuha e shënjimit të hipertekstit (ose gjuha e shënjimit të hipertekstit).
Pra, le ta njohim më mirë.
Për të filluar, krijoni një skedar në kompjuterin tuaj me çdo emër dhe shtesë.html (titulli duhet të jetë në anglisht)- për shembull index.html). Për të krijuar një skedar të tillë - krijoni një dokument teksti të thjeshtë ("Start" - "Të gjitha programet" - "Accessories" - "Notepad") dhe kurseni ("Skedar" - "Ruaj si") atë kudo duke futur emrin dhe shtesën (Ndodh që kur futni shtesën, Notepad ende e ruan atë si skedar teksti, por ne kemi nevojë për një skedar ueb. Për ta bërë këtë, përpara se të ruani, zgjidhni llojin e skedarit - "Të gjithë skedarët (*.*)").
Ky nuk është një parakusht (pasi mund të ndryshoni emrin e faqes së parë në cilësimet e serverit), por një rregull me shije të mirë. Emri i faqes së parë preferohet të jetë indeks (index.html), pasi serveri, kur hyn në të, lëshon një skedar me të njëjtin emër - index.
Nëse ruhet saktë, ikona e skedarit duhet të ndryshojë në ikonën e shfletuesit (Internet Explorer si parazgjedhje).
Tani hapeni këtë skedar me notepad dhe kopjoni kodin e mëposhtëm atje.
Kjo është faqja e parë e internetit!
Ruani dhe hapeni përmes shfletuesit.
Urime, sapo keni krijuar faqen tuaj të parë të internetit.
Teksti "Kjo është faqja e parë e internetit!" ju mund ta ndryshoni atë në ndonjë tjetër, si kjo - "Kjo është faqja ime e parë e internetit!!!". kurseni, përditësoni shfletuesin, admironi rezultatin.
Por faqja jonë nuk ka një kokë.
Ne duhet ta rregullojmë këtë - ne do të shkulim pak kodin, ose më mirë, do të shtojmë "Kreu i faqes" në të duke përdorur etiketa
DheRuani, përditësoni, shijoni. Tani faqja jonë ka një kokë.
Përshkrimi i etiketave.
Etiketa e parë është (kjo etiketë është e çiftuar, d.m.th. etiketa mbyllëse kërkohet) - përdoret si një kontejner brenda të cilit është e gjithë përmbajtja e faqes (teksti, imazhet, etj.). Edhe pse kjo etiketë ( Dhe) është opsionale, por përdorimi i tij tregon sjellje të mira. Prandaj, ju këshilloj ta përdorni.
Etiketa tjetër - . Kjo është gjithashtu një etiketë çifti (
Dhe). Ky etiketë nuk shfaqet në faqe (përveç titullit), por kërkohet të specifikohen parametrat shtesë të faqes - përshkrimi i faqes (përdoret nga motorët e kërkimit), fjalë kyçe (të përdorura nga motorët e kërkimit), stilet, skriptet, titulli dhe më shumë. .Etiketë
Dhe e fundit, në kodin tonë, etiketa - . Gjithashtu një etiketë çift (
Dhe), brenda së cilës është e gjithë pjesa e dukshme e faqes, d.m.th. tekste, foto, lidhje, në përgjithësi, informacione që dëshironi të vendosni në faqe.Në mësimin tjetër do të flasim për llojet e etiketave dhe rregullat për shkrimin e tyre.
Çdo webmaster fillestar duhet ta dijë si të krijoni një faqe html, dhe bëhet shumë lehtë dhe thjesht. Mund t'ju them me besim se pasi të lexoni këtë artikull, do ta bëni krijoni faqe html pa asnjë vështirësi.
Ju mund të shkruani kodin html në çdo redaktues teksti (madje edhe në notepad), por ju rekomandoj që së pari të përdorni një redaktues kaq të mrekullueshëm si bllok shënimesh ++. Është shumë i përshtatshëm dhe i lehtë për t'u përdorur. Mund ta shkarkoni nga faqja zyrtare https://notepad-plus-plus.org.
Avantazhi kryesor i këtij redaktuesi është se ai ka theksimin e kodit. Më besoni, kjo është shumë e përshtatshme, sepse. menjëherë vihet re se ku hapet etiketa dhe ku mbyllet.
Ne hapim programin dhe siç vutë re një skedar i ri me emrin e re 1, u krijua automatikisht.
Fazat e krijimit të një faqe html
Tani ne krijojmë nga një skedar i ri dokument html në mënyrën e mëposhtme:
1. Shkoni te menyja e skedarit dhe zgjidhni artikullin ruaj si… ose shtypni butonat e nxehtë ( Ctrl+Alt+S)
2. Në dritaren që shfaqet, zgjidhni vendndodhjen ku duam të ruajmë skedarin.
3. Në fushë Emri i skedarit shkruaj indeks dhe zgjidhni lloji i skedarit Skedari i gjuhës së shënjimit të hiper tekstit (*html; *htm; *shtml; *shtm; *xhtml;*hta).
Pasi të jetë përzgjedhur lloji i skedarit, në fund emri i skedarit futet automatikisht
Mbyllni Notepad++ dhe shkoni te dosja e specifikuar ku kemi ruajtur skedarin. Është krijuar një skedar indeks, me shtesën html dhe me ikonën e shfletuesit që keni instaluar si parazgjedhje. Kur klikoni dy herë, skedari hapet në shfletuesin tuaj. Shfletuesi im i paracaktuar është opera, kështu që skedari i ruajtur duket si ky:
Pasi hapëm skedarin në shfletues, nuk shohim asgjë sepse skedari ynë është bosh, nuk ka asnjë rresht të vetëm kodi html në të. Le të rregullojmë situatën, të shkruajmë disa rreshta kodi në skedar. Për ta bërë këtë, shkoni te dosja me skedarin tonë, klikoni me të djathtën mbi të dhe zgjidhni artikullin në menunë që shfaqet. .
Skedari do të hapet në Notepad++. Tani le të shkruajmë kodin e mëposhtëm në skedar:
Përshendetje Botë
Ekziston edhe një mënyrë tjetër për të ruajtur një skedar, duhet të klikoni në ikonën e diskut të diskut që ndodhet në shiritin e veglave.
