Faqja e internetit e Bare Bones: 10 hapa

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

Sot ne do të krijojmë një faqe interneti shumë të thjeshtë dhe të zhveshur nga e para. Ne do të flasim për elementët HTML, stilimin e faqes tuaj të internetit (ngjyrat, fontet, shtrirjen, etj.), Dhe së fundi si të futni një imazh në faqen tuaj të internetit!

Deri në fund të këtij udhëzimi, do të keni aftësitë themelore për të krijuar një faqe në internet nga e para dhe zbuloni se kodimi nuk është aq i vështirë sa duket!

Hapi 1: Përdorimi i Notepad

Ne do të përdorim Notepad në Windows për të krijuar faqen tonë të parë në internet. Edhe pse çdo redaktues teksti do të bëjë, fletore vjen e para-instaluar në makinat Windows kështu që është një pikënisje e shkëlqyer.

Për të hapur fletoren, shkoni te shiriti i kërkimit në këndin e poshtëm të majtë të ekranit tuaj dhe shkruani "Notepad". Pastaj zgjidhni aplikacionin "Notepad" që shfaqet në rezultatet e kërkimit. Duhet të hapet një dritare e re.

Hapi 2: Shtimi i Pemës Themelore të Dokumentit HTML

Të gjitha faqet e internetit duhet të ndjekin një strukturë standarde skeletore në mënyrë që shfletuesi juaj i uebit (Chrome, Firefox, Edge, Internet Explorer, Safari …) të përpunojë dhe shfaqë faqen tuaj të internetit.

Kjo quhet pema e dokumentit html. Në Notepad, shkruani html "elementët" ose "etiketat" siç shfaqet në pamjen e ekranit. Mos ngurroni të kopjoni dhe ngjisni gjithashtu:

Hapi 3: Ruajtja si faqe.html

Tani që kemi strukturën tonë bazë html në Notepad, le ta ruajmë atë në mënyrë që të mos humbasim asnjë punë dhe në mënyrë që të shohim ndryshimet tona ndërsa përparojmë përgjatë Instructable.

1. Zgjidhni "Skedar"> "Ruaje si …" (Pamja e ekranit 1)
2. Ndryshoni llojin e skedarit në "Të gjitha skedarët" (Pamja e ekranit 2)
3. Jepni skedarit tuaj një emër të zgjedhur. Sigurohuni që të vini re se ku jeni duke e ruajtur dokumentin në kompjuterin tuaj, në mënyrë që ta hapni më vonë. SHOTNIM: Pjesa më e rëndësishme e ruajtjes së këtij skedari është shtimi i ".html" në fund të emrit të skedarit. Kjo do të lejojë që kompjuteri juaj ta njohë atë si një faqe në internet. Pra, nëse doni ta emërtoni skedarin tuaj "my_webpage", sigurohuni që të shtoni.html në fund të kësaj, p.sh. "my_webpage.html"

Hapi 4: Shtimi i një Titulli në Uebfaqen tuaj

Pra, ne kemi strukturën bazë html të nevojshme për shfletuesit e uebit për të interpretuar dhe shfaqur faqen tonë të internetit, por ne nuk kemi asnjë përmbajtje. Le ta ndryshojmë atë!

Gjëja e parë që duhet të bëjmë është t'i japim një Titull faqes sonë të internetit. Shumica e të gjitha faqeve të internetit kanë një titull. Kjo është ajo që shfaqet në skedën në shfletuesin tuaj të internetit (shikoni pamjen e ekranit). Unë do t'i jap faqes sime të internetit titullin "Faqja e internetit e Taylor". Për ta bërë këtë, duhet të shtojmë një element 'titull'.

Uebfaqja e Taylor

Në këtë pikë do të vini re se çdo etiketë ka një etiketë "hapëse" dhe një etiketë "mbyllëse". Të tilla si

dhe

Kjo është për të dalluar se ku fillon titulli dhe ku përfundon. Pothuajse të gjitha etiketat html e ndjekin këtë, megjithatë ka disa përjashtime.

Hapi 5: Shtimi i përmbajtjes në faqen tuaj në internet

Epo, ne kemi një Titull për faqen tonë të internetit, por ende nuk kemi ndonjë përmbajtje aktuale për të. Le të shtojmë pak dhunti!

Ne kemi shtuar një titull në faqen tonë të internetit duke përdorur një element 'titull'. Le t'i japim faqes sonë të internetit një titull të madh dhe tërheqës të vëmendjes duke përdorur një element 'h1' i cili është një element titulli.

Uebfaqja e Taylor

Mirë se vini në faqen time në internet

Hapi 6: Shikimi i Ndryshimeve tona Deri tani

Ne kemi një titull, kemi një përmbajtje, le të shikojmë faqen tonë në internet se si po vjen deri tani.

1. Ruani skedarin tuaj në fletore
2. Shkoni atje ku keni ruajtur skedarin tuaj dhe klikoni dy herë mbi të. Duhet të hapet automatikisht në shfletuesin tuaj të paracaktuar të uebit. Dukej mirë!

Hapi 7: Shtimi i një etikete paragrafi

Ne kemi një titull, një titull, tani le të shtojmë një paragraf me një tekst më shumë. Emri i elementit për një paragraf është 'p'. Ju mund ta shihni përdorimin e tij më poshtë:

Uebfaqja e Taylor

Mirë se vini në faqen time në internet

Sot do të mësojmë se si të krijojmë këtë faqe interneti shumë të thjeshtë!

Shënim: Ju mund t'i shihni ndryshimet tuaja në çdo kohë që ju pëlqen duke ruajtur fletoren dhe duke hapur skedarin.

Hapi 8: Jepini Ngjyrë

Ne kemi uebfaqen tonë duke u përpiluar menjëherë, por është mjaft e thjeshtë. Le t'i japim etiketës së paragrafit tonë një ngjyrë!

Ne mund të ngjyrosim elementë të ndryshëm duke shtuar një atribut 'style' në etiketën 'p' siç përshkruhet më poshtë:

Uebfaqja e Taylor

Mirë se vini në faqen time në internet

Sot do të mësojmë se si të krijojmë këtë faqe interneti shumë të thjeshtë!

Hapi 9: Shtimi i një fotografie

Çfarë është një faqe interneti pa fotografi? Le të shtojmë një fotografi në faqen tonë të internetit!

Hapi i parë është të gjeni një imazh që ju pëlqen. Kam përdorur imazhe të Google për të kërkuar një retriever të artë. Tërhiqeni figurën lart dhe sigurohuni që url -ja të përfundojë në.jpg,.png,.gif,.jpg, etj.

Pasi të keni zgjedhur imazhin tuaj, ne duhet ta shtojmë atë në faqen html duke përdorur një etiketë 'img'. Imazhi im është:

Shtojeni atë në faqen tuaj duke përdorur një etiketë 'img' me një atribut 'src':

Uebfaqja e Taylor

Mirë se vini në faqen time në internet

Sot do të mësojmë se si të krijojmë këtë faqe interneti shumë të thjeshtë!

Hapi 10: Shikimi i Produktit Final

Ruani skedarin e fletores dhe hapni produktin përfundimtar. Ju duhet të shihni faqen tuaj të internetit!