Bare Bones Web lapa: 10 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Šodien mēs no nulles izveidosim ļoti vienkāršu, tukšu kaulu tīmekļa lapu. Mēs runāsim par HTML elementiem, jūsu tīmekļa lapas veidošanu (krāsas, fonti, izlīdzināšana utt.) Un visbeidzot par to, kā savā tīmekļa lapā ievietot attēlu!

Līdz šīs pamācības beigām jums būs pamatprasmes izveidot tīmekļa lapu no nulles un atklāt, ka kodēšana nav tik grūta, kā šķiet!

1. darbība: piezīmju grāmatiņas izmantošana

Mēs izmantosim Notepad uz logiem, lai izveidotu mūsu pirmo tīmekļa lapu. Lai gan jebkurš teksta redaktors to darīs, piezīmju grāmatiņa ir iepriekš instalēta Windows mašīnās, tāpēc tas ir lielisks sākumpunkts.

Lai atvērtu piezīmju grāmatiņu, dodieties uz meklēšanas joslu ekrāna apakšējā kreisajā stūrī un ierakstiet “Notepad”. Pēc tam atlasiet lietojumprogrammu "Notepad", kas parādās meklēšanas rezultātos. Jāatver jauns logs.

2. darbība. Pamata HTML dokumentu koka pievienošana

Visām tīmekļa lapām ir jāatbilst standarta skeleta struktūrai, lai jūsu tīmekļa pārlūkprogramma (Chrome, Firefox, Edge, Internet Explorer, Safari …) varētu apstrādāt un parādīt jūsu tīmekļa lapu.

To sauc par html dokumentu koku. Notepad ierakstiet html "elementi" vai "tagi", kā parādīts ekrānuzņēmumā. Jūtieties brīvi arī kopēt un ielīmēt:

3. darbība: saglabāšana kā.html lapa

Tagad, kad piezīmjdatorā ir mūsu pamata html struktūra, saglabāsim to, lai mēs nezaudētu darbu un lai mēs varētu redzēt mūsu izmaiņas, virzoties uz Instructable.

1. Atlasiet “Fails”> “Saglabāt kā…” (1. ekrānuzņēmums)
2. Mainiet faila veidu uz “Visi faili” (2. ekrānuzņēmums)
3. Piešķiriet savam failam jūsu izvēlēto nosaukumu. Noteikti atzīmējiet, kur datorā saglabājat dokumentu, lai to varētu atvērt vēlāk. PIEZĪME. Vissvarīgākā šī faila saglabāšanas daļa ir faila nosaukuma beigās pievienot ".html". Tas ļaus jūsu datoram to atpazīt kā tīmekļa lapu. Tātad, ja vēlaties savam failam piešķirt nosaukumu "my_webpage", tā beigām noteikti pievienojiet.html, piem. "my_webpage.html"

4. darbība: virsraksta pievienošana savai tīmekļa lapai

Tātad mums ir pamata html struktūra, kas nepieciešama, lai tīmekļa pārlūkprogrammas interpretētu un parādītu mūsu tīmekļa lapu, taču mums nav nekāda satura. Maināsim to!

Pirmā lieta, kas mums jādara, ir piešķirt mūsu tīmekļa lapai nosaukumu. Lielākajai daļai visu tīmekļa lapu ir nosaukums. Tas tiek parādīts jūsu tīmekļa pārlūkprogrammas cilnē (skatiet ekrānuzņēmumu). Es savai tīmekļa lapai piešķiršu nosaukumu "Teilora vietne". Lai to izdarītu, mums jāpievieno elements “title”.

Teilora vietne

Šajā brīdī jūs pamanīsit, ka katrai atzīmei ir tags "sākuma" un "noslēguma". Piemēram, un.

Tas ir, lai saprastu, kur sākas nosaukums un kur tas beidzas. To ievēro gandrīz visi html tagi, tomēr ir daži izņēmumi.

5. darbība: satura pievienošana savai tīmekļa lapai

Nu, mūsu tīmekļa lapai ir nosaukums, bet mums joprojām nav reāla satura. Pievienosim kādu nojautu!

Mēs savai tīmekļa lapai esam pievienojuši nosaukumu, izmantojot elementu "title". Piešķirsim savai tīmekļa lapai lielu, uzmanību piesaistošu galveni, izmantojot elementu “h1”, kas ir virsraksta elements.

Teilora vietne

Laipni lūdzam manā tīmekļa vietnē

6. solis: mūsu līdzšinējo izmaiņu apskate

Mums ir nosaukums, mums ir zināms saturs. Apskatīsim mūsu tīmekļa lapu, lai uzzinātu, kā tas notiek līdz šim.

1. Saglabājiet failu piezīmju grāmatiņā
2. Dodieties uz vietu, kur saglabājāt failu, un veiciet dubultklikšķi uz tā. Tam automātiski jāatver noklusējuma tīmekļa pārlūkprogramma. Izskatās labi!

7. darbība: rindkopas birkas pievienošana

Mums ir nosaukums, virsraksts, tagad pievienosim rindkopu ar vēl kādu tekstu. Rindkopas elementa nosaukums ir “p”. Jūs varat redzēt tā izmantošanu zemāk:

Teilora vietne

Laipni lūdzam manā tīmekļa vietnē

Šodien mēs iemācīsimies izveidot šo ļoti vienkāršo tīmekļa lapu!

Piezīme. Jūs varat apskatīt izmaiņas jebkurā laikā, saglabājot piezīmju grāmatiņu un atverot failu.

8. solis: piešķiriet tai kādu krāsu

Mūsu tīmekļa vietne tiek virzīta tieši garām, taču tā ir diezgan vienkārša. Piešķirsim mūsu rindkopas atzīmei kādu krāsu!

Mēs varam krāsot dažādus elementus, pievienojot atribūtu “style” atzīmei “p”, kā aprakstīts tālāk:

Teilora vietne

Laipni lūdzam manā tīmekļa vietnē

Šodien mēs iemācīsimies izveidot šo ļoti vienkāršo tīmekļa lapu!

9. darbība: attēla pievienošana

Kāda ir vietne bez attēliem? Pievienosim bildi mūsu mājas lapai!

Pirmais solis ir atrast attēlu, kas jums patīk. Es izmantoju google attēlus, lai meklētu zelta retrīveri. Pavelciet attēlu uz augšu un pārliecinieties, ka URL beidzas ar.jpg,.png,.gif,-j.webp

Kad esat izvēlējies savu attēlu, mums tas jāpievieno html lapai, izmantojot tagu “img”. Mans attēls ir:

Pievienojiet to savai lapai, izmantojot tagu “img” ar atribūtu “src”:

Teilora vietne

Laipni lūdzam manā tīmekļa vietnē

Šodien mēs iemācīsimies izveidot šo ļoti vienkāršo tīmekļa lapu!

10. darbība. Galaprodukta apskate

Saglabājiet piezīmju grāmatiņas failu un atveriet galaproduktu. Jums vajadzētu redzēt savu tīmekļa lapu!