Ndërtimi i faqes tuaj në internet për fillestarët: 5 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:17

Pavarësisht nëse keni ëndërruar ndonjëherë të jeni një programues kompjuteri ose keni përdorur ndonjëherë një faqe në internet, të cilën le ta pranojmë, jemi pothuajse të gjithë ne, teknologjia e informacionit është bërë shtylla kurrizore e biznesit. Megjithëse programimi mund të duket pak i frikshëm në fillim, qëllimi im është t'ju mësoj bazat themelore të dizajnit të uebit, në mënyrë që pas këtij mësimi, të jeni në gjendje të krijoni faqen tuaj në internet. Me këtë jashtë rrugës, le të arrijmë tek ajo!

Furnizimet

• Një kompjuter Macintosh ose Windows (megjithëse shpërndarjet Linux gjithashtu mund të përdoren, po i anashkaloj tani për tani pasi kjo është një hyrje fillestare).
• Zgjedhja juaj e redaktuesit të tekstit (Notepad në Windows, TextEdit në Mac) ose zgjedhja juaj e IDE. Në përvojën time, kam gjetur që Visual Studio Code të funksionojë më mirë për veten time, kështu që unë gjithashtu do të rekomandoja ta kontrolloni këtu: https://code.visualstudio.com/ për të mos përmendur që funksionon në të gjitha platformat e OS.

Hapi 1: Etiketat dhe pak histori

Pasi të keni vendosur për zgjedhjen tuaj të redaktuesit të tekstit ose IDE, le të fillojmë me bazat.

Besoni apo jo, Gjuha e Markupit HTML ose HyperText ka qenë rreth 30 vjet tani dhe me çdo vit ka ardhur gjithnjë e më shumë përmirësime në gjuhë. Tani, ju mund të pyesni, si e interpreton një shfletues atë që duhet vendosur në ekran? Kjo bëhet në disa pjesë:

Formatimi i dokumentit HTML është i lehtë. Ju keni dy seksione të njohura si koka dhe trupi. Koka e një faqe në internet përmban kod që nuk është i dukshëm për përdoruesit. Kjo përdoret për lidhjen e stileve dhe deklarimin e pjesëve të tjera të nevojshme të nevojshme që faqja të shfaqet siç duhet. Duke ndjekur kokën, trupi është ashtu siç tingëllon, trupi i faqes në internet. Këtu ju mund të flisni me zërin tuaj dhe t'i tregoni auditorit aftësitë tuaja fantastike HTML! Tani nuk është aq e thjeshtë sa thjesht të shtypni tekstin në trup dhe ta shfaqni atë saktësisht ashtu siç dëshironi, por është pothuajse aq e lehtë në një kuptim me përdorimin e gjërave që ne i quajmë etiketa.

Këtu janë disa nga etiketat themelore HTML:

• titulli - i cili përdoret për t'i treguar shfletuesit se cili është titulli i faqes. Kjo është gjithashtu ajo që shihni kur shikoni skedën e një faqe në internet.
• h1, h2, h3, h4 - të cilat përdoren për madhësi të ndryshme të titujve me h1 që është më i madhi dhe h4 është më i vogli. Unë do të mbuloj më shumë për këtë në pjesën tjetër.
• p - paragrafi, i përdorur për shkrimin e paragrafëve të tekstit. Ashtu si paragrafët në një letër.
• br - pushim, i cili fut një pushim në përputhje me tekstin.
• a - përdoret për krijimin e lidhjeve me faqe të tjera, si një lidhje e klikueshme.
• img - përdoret për lidhjen e një imazhi me faqen në internet.
• ul, ol, li - lista të parregulluara, lista të renditura dhe artikuj të listës.
• - përdoret për të bërë komente brenda kodit që nuk do të shihen nga përdoruesi përfundimtar.

Dhe këtu janë disa etiketa CSS (vizuale):

• ngjyra - përdoret për të caktuar një ngjyrë specifike në një element specifik ose të vendosur në faqen në internet.
• font-size-përdoret për të ndryshuar madhësinë e fontit në faqe.
• ngjyra e sfondit-përdoret për të ndryshuar ngjyrën e sfondit të një elementi të caktuar ose të gjithë faqes.

Unë gjithashtu kam bashkangjitur një fletë mashtrimi të vogël për t'ju ndihmuar nëse ndiheni pak të humbur, por mos u shqetësoni, do ta merrni vesh shpejt! Për më tepër, www.w3schools.com është gjithashtu një burim fantastik për çdo nga pyetjet tuaja të programimit. Ata patjetër më kanë kursyer një kohë ose gjithashtu.

Në thelb, mënyra se si shfletuesi lexon skedarin është e lehtë. Shkon rresht pas rreshti dhe proceset funksionojnë sipas funksionit. Karakteret përdoren për të deklaruar një etiketë të tillë si

dhe përdoren për të mbyllur etiketën si p.sh

Me Kjo është e rëndësishme, përndryshe shfletuesi nuk do të ndalet. Në mes të

dhe

etiketat, është vendi ku futni gjithçka që dëshironi!

Hapi 2: Konfigurimi i redaktorit

Tani që kemi mbuluar pak për elementët bazë të një faqe në internet HTML, le të futemi dhe ta provojmë atë për veten tonë. Për këtë hap tjetër, unë do të përdor Visual Studio Code për të programuar faqen e internetit, por paraqitja e kodit do të jetë e njëjtë nëse jeni më të kënaqur me përdorimin e Notepad ose TextEdit.

Brenda Notepad:

• Me Notepad, programi fillon me një skedar bosh që e bën super të lehtë fillimin. Kjo gjithashtu do të na lejojë të hidhemi disa hapa në krahasim me përdorimin e VS Code. Le të fillojmë duke ruajtur skedarin në formatin e duhur.
• Klikoni Skedar> Ruaj
• Vendosni një emër për skedarin tuaj të ndjekur nga.html dhe nën Ruaj si lloj, zgjidhni të gjithë skedarët. Kliko ruaj.

Brenda Kodit VS:

• Mënyra më e mirë për ju që të përfitoni nga të gjitha tiparet e IDE është të filloni duke krijuar skedarin dhe duke i treguar IDE se çfarë lloj skedari është. Kjo mund të bëhet si më poshtë:
• Klikoni Skedar> Skedar i ri
• Hapet një skedar bosh
• Tjetra, do të dëshironi të filloni duke ruajtur skedarin, edhe pse bosh, pasi kjo do të lejojë që IDE të jetë në gjendje të kuptojë se çfarë lloj skedari do të jetë produkti përfundimtar. Kur kurseni sigurohuni që të përfshini shtesën.html në fund të emrit të skedarit. Kliko ruaj.

Hapi 3: Propozimet

Pasi të keni ruajtur me sukses skedarin tuaj të skedarit.html, le të fillojmë duke krijuar kornizën për faqen tonë në internet. Mos harroni nga lart se cilat pjesë kryesore të skedarit duhet të deklarojmë para se të fillojmë me krijimin e pjesës tjetër të faqes HTML. Këshillë: kur filloni kornizën për sitin, etiketa! DOCTYPE HTML i tregon shfletuesit se skedari që po lexon është një skedar html. Kjo mund të jetë e dobishme nëse keni lloje të ndryshme të kodit në të njëjtën skedar dhe dëshironi të kaloni midis interpretuesve. Për qëllimin e këtij udhëzimi, ne nuk do ta prekim shumë këtë, por nëse pas këtij udhëzuesi jeni kurioz të shikoni më shumë rreth zhvillimit të HTML, mos ngurroni t'i jepni një hap. Unë do të fut etiketën! DOCTYPE HTML në krye të skedarit për praktikën më të mirë. Mos harroni të hapni dhe mbyllni me.

Këtu ju vjen në ndihmë ruajtja e skedarit para se të filloni programimin, tani që IDE e di se po punon me një skedar HTML, do të përdorë intellisense për të përfunduar shprehjen dhe për të ofruar sugjerime në mënyrë që të mos harroni rastësisht të mbyllni një etiketë Me Vini re se për ata prej jush që po përdorin Notepad, intellisense nuk është i disponueshëm si në IDE. Fillojmë duke futur etiketat e kokës dhe trupit si më poshtë: (shiko imazhin e dytë).

Tani që konfigurimi i dokumentit ka përfunduar, ne jemi në gjendje të dalim në gara dhe të argëtohemi!

Hapi 4: Kodi; Kodi; Kodi;

Ne mund të fillojmë duke futur një titull për skedarin tonë të krijuar rishtas. Shkruani çfarë të doni. Mos harroni se ky është emri që shfaqet në skedën e shfletuesit. Le të fillojmë gjithashtu duke futur një titull për faqen tonë. Kujtoni nga më parë se si e bëjmë këtë. A kam dëgjuar h1/2/3/4? Kjo është e drejtë!

Para se të vazhdojmë, më duket e dobishme të hapim skedarin tonë në një dritare të shfletuesit, në mënyrë që të shohim në kohë reale se si reflektojnë ndryshimet tona në shfletues. Ju mund ta bëni këtë duke klikuar Skedar> Ruaj për të ruajtur skedarin, duke lundruar në dosjen në të cilën është ruajtur skedari HTML, për mua kjo është desktopi dhe përdorni shfletuesin e zgjedhur për të hapur skedarin dhe a do ta shikonit atë, atje është uebfaqja juaj! Shënim: Unë personalisht përdor Safarin si shfletuesin tim të zgjedhur në kompjuterin tim, megjithatë, në zhvillimin e uebit, Firefox është shfletuesi standard i artë për testim pasi funksionon me pothuajse çdo gjuhë të skriptimit të uebit.

Siç mund ta shihni, titulli po shfaqet në skedë, si dhe shihni titullin tonë h1. Unë preferoj që të dy dritaret e shfletuesit të skedarit të hapen së bashku me IDE pasi kur bëni një ndryshim në IDE dhe ruani, ndryshimet bëhen menjëherë në shfletues.

Mos ngurroni të provoni të shtoni etiketa dhe të luani me gjërat e ndryshme që mund të bëni me HTML. Siç mund ta shihni më poshtë, unë kam shtuar disa paragrafë, ndërprerje, hiperlidhje të jashtme në Instructables.com, një imazh, (i cili ose mund të lidhet nga një burim i jashtëm ose brenda të njëjtit direktori ku ruhet skedari. HTML), një shembull i një liste të parregulluar, një listë të renditur dhe së fundi një koment.

Nëse dëshironi të provoni të shtoni disa ngjyra dhe opsione rregullimi, mund të futni një etiketë stili në kokën e skedarit. Kjo është pika në të cilën kjo kalon nga HTML në CSS, por për hir vizual, unë do të fus disa rreshta në mënyrë që të shihni se si funksionon kjo. Në thelb se si funksionon CSS, ju lejon të kontrolloni elementet HTML brenda funksioneve duke përdorur kllapa {} për të futur kodin tuaj për një element specifik HTML.

Hapi 5: Mendimet përfundimtare

Dhe ja ku e keni; keni krijuar me sukses faqen tuaj të parë në internet! Meqenëse ky është një udhëzues fillestar, unë dua ta bëj përvojën tuaj të parë me HTML një të këndshme. Mënyra më e mirë për të mësuar në përvojën time është të zhyteni dhe të provoni gjërat në dorë, të shihni se çfarë mund të bëni me kodin tuaj dhe gjithashtu të shihni se si mund ta prishni kodin tuaj. Kjo ndërton integritet dhe ju ndihmon të kuptoni më mirë se si dhe pse kodi funksionon ashtu siç funksionon. Mos harroni se www. W3Schools.com është një burim i shkëlqyeshëm për pyetje dhe ato madje ofrojnë një sandbox virtual brenda shfletuesit për të provuar kodin tuaj. Shpresoj se keni mësuar diçka dhe kodim të lumtur!