Bare Bones Web Page: 10 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Ngayon ay lilikha kami ng isang napaka-simple, hubad na web page ng mga buto mula sa simula. Pag-uusapan namin ang tungkol sa mga elemento ng HTML, pag-istilo ng iyong web page (mga kulay, font, pagkakahanay, atbp.), At sa wakas kung paano magsingit ng isang imahe sa iyong web page!

Sa pagtatapos ng pagtuturo na ito, magkakaroon ka ng mga pangunahing kasanayan upang lumikha ng isang web page mula sa simula, at matuklasan na ang pag-coding ay hindi mahirap kung mukhang!

Hakbang 1: Paggamit ng Notepad

Gagamitin namin ang Notepad sa mga bintana upang likhain ang aming unang web page. Bagaman gagawin ang anumang text editor, ang notepad ay paunang naka-install sa mga Windows machine kaya't ito ay isang mahusay na panimulang punto.

Upang buksan ang notepad, pumunta sa iyong search bar sa ibabang kaliwang sulok ng iyong screen at i-type ang "Notepad". Pagkatapos piliin ang application na "Notepad" na lalabas sa mga resulta ng paghahanap. Dapat buksan ang isang bagong window.

Hakbang 2: Pagdaragdag ng Pangunahing Punong Dokumento ng HTML

Ang lahat ng mga web page ay dapat sundin ang isang karaniwang istraktura ng kalansay upang ang iyong web browser (Chrome, Firefox, Edge, Internet Explorer, Safari…) ay maproseso at maipakita ang iyong web page.

Tinawag itong puno ng dokumento ng html. Sa Notepad, i-type ang html na "mga elemento" o "mga tag" tulad ng ipinakita sa shot ng screen. Huwag mag-atubiling kopyahin at i-paste din:

Hakbang 3: Pag-save Bilang Pahina ng.html

Ngayon na mayroon na tayong pangunahing istrakturang html sa Notepad, i-save natin ito upang hindi tayo mawalan ng anumang trabaho, at upang makita natin ang ating mga pagbabago habang sumusulong tayo kasama ang Instructable.

1. Piliin ang 'File'> 'I-save bilang…' (Screenshot 1)
2. Baguhin ang Uri ng File sa 'Lahat ng Mga File' (Screenshot 2)
3. Bigyan ang iyong file ng pangalan na iyong pinili. Tiyaking tandaan kung saan mo ini-save ang dokumento sa iyong computer upang mabuksan mo ito sa paglaon. TANDAAN: Ang pinakamahalagang bahagi ng pag-save ng file na ito ay ang pagdaragdag ng ".html" sa dulo ng pangalan ng file. Papayagan nitong kilalanin ito ng iyong computer bilang isang webpage. Kaya kung nais mong pangalanan ang iyong file na "my_webpage", tiyaking idagdag ang.html sa dulo nito, hal. "my_webpage.html"

Hakbang 4: Pagdaragdag ng isang Pamagat sa Iyong Pahina sa Web

Kaya mayroon kaming pangunahing istrakturang html na kinakailangan para sa mga web browser upang bigyang kahulugan at ipakita ang aming web page, ngunit wala kaming anumang nilalaman. Baguhin natin yan!

Ang unang bagay na dapat nating gawin ay magbigay ng isang Pamagat sa aming web page. Karamihan sa lahat ng mga web page ay may pamagat. Ito ang ipinapakita sa tab sa iyong web browser (tingnan ang shot ng screen). Ibibigay ko sa aking web page ang pamagat na "Website ng Taylor". Upang magawa ito, kailangan naming magdagdag ng elemento ng 'pamagat'.

Website ng Taylor

Sa puntong ito mapapansin mo na ang bawat tag ay may isang "pambungad" na tag at isang "pagsasara" na tag. Kagaya ng

at.

Ito ay upang makilala kung saan nagsisimula ang pamagat, at kung saan ito nagtatapos. Sinusundan ito ng halos lahat ng mga tag na html, subalit may ilang mga pagbubukod.

Hakbang 5: Pagdaragdag ng Nilalaman sa Iyong Pahina sa Web

Sa gayon, mayroon kaming Pamagat para sa aming web page, ngunit wala pa rin kaming aktwal na nilalaman para dito. Magdagdag tayo ng kaunting talino!

Nagdagdag kami ng isang pamagat sa aming web page gamit ang isang 'pamagat' na elemento. Bigyan natin ang aming webpage ng isang malaking, nakakuha ng pansin ng header sa pamamagitan ng paggamit ng isang 'h1' na elemento na isang elemento ng heading.

Website ng Taylor

Maligayang pagdating sa aking web page

Hakbang 6: Pagtingin sa Aming Mga Pagbabago Sa Ngayon

Mayroon kaming pamagat, mayroon kaming nilalaman, suriin natin ang aming web page kung paano ito darating.

1. I-save ang iyong file sa notepad
2. Pumunta sa kung saan mo nai-save ang iyong file at i-double click ito. Dapat itong awtomatikong buksan sa iyong default na web browser. Mukhang maganda!

Hakbang 7: Pagdaragdag ng isang Tag ng Talata

Mayroon kaming isang pamagat, isang heading, ngayon magdagdag tayo ng isang talata na may ilang higit pang teksto. Ang pangalan ng elemento para sa isang talata ay 'p'. Maaari mong makita ang paggamit nito sa ibaba:

Website ng Taylor

Maligayang pagdating sa aking web page

Ngayon ay matututunan natin kung paano lumikha ng napakasimpleng web page na ito!

Tandaan: Maaari mong tingnan ang iyong mga pagbabago anumang oras na gusto mo sa pamamagitan ng pag-save ng notepad at pagbubukas ng file.

Hakbang 8: Bigyan Ito ng Kulay

Nasa paligid namin ang aming webpage, ngunit ito ay payak. Bigyan natin ang aming tag ng talata ng ilang kulay!

Maaari naming kulayan ang iba't ibang mga elemento sa pamamagitan ng pagdaragdag ng isang 'istilo' na katangian sa tag na 'p' bilang detalyado sa ibaba:

Website ng Taylor

Maligayang pagdating sa aking web page

Ngayon ay matututunan natin kung paano lumikha ng napakasimpleng web page na ito!

Hakbang 9: Pagdaragdag ng isang Larawan

Ano ang isang website na walang mga larawan? Magdagdag tayo ng isang larawan sa aming website!

Ang unang hakbang ay upang makahanap ng isang imahe na gusto mo. Gumamit ako ng mga imaheng google upang maghanap para sa isang ginintuang retriever. Hilahin ang imahe at tiyakin na ang url ay nagtatapos sa.jpg,.png,.gif,.jpg, atbp.

Kapag napili mo na ang iyong imahe, kailangan namin itong idagdag sa pahina ng html gamit ang isang 'img' na tag. Ang aking imahe ay:

Idagdag ito sa iyong pahina gamit ang isang 'img' na tag na may isang katangian na 'src':

Website ng Taylor

Maligayang pagdating sa aking web page

Ngayon ay matututunan natin kung paano lumikha ng napakasimpleng web page na ito!

Hakbang 10: Pagtingin sa Huling Produkto

I-save ang file ng notepad, at buksan ang pangwakas na produkto. Dapat mong makita ang iyong web page!