Bare Bones Webblad: 10 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

Vandag gaan ons 'n baie eenvoudige, kaal bene -webblad van nuuts af skep. Ons sal praat oor HTML -elemente, die styl van u webwerf (kleure, lettertipes, aanpassing, ens.), En uiteindelik hoe u 'n prent op u webblad kan plaas!

Aan die einde van hierdie instruksies het u die basiese vaardighede om 'n webblad van nuuts af te skep en te ontdek dat kodering nie so moeilik is as wat dit lyk nie!

Stap 1: Gebruik Notepad

Ons gaan Notepad op vensters gebruik om ons eerste webblad te skep. Alhoewel enige teksredakteur dit sal doen, word die notaboek vooraf geïnstalleer op Windows-masjiene, dus dit is 'n uitstekende beginpunt.

Om die notaboek oop te maak, gaan na u soekbalk in die onderste linkerhoek van u skerm en tik 'Notepad'. Kies dan die "Notepad" -program wat in die soekresultate verskyn. 'N Nuwe venster moet oopmaak.

Stap 2: Voeg die basiese HTML -dokumentboom by

Alle webblaaie moet 'n standaard skeletstruktuur volg sodat u webblaaier (Chrome, Firefox, Edge, Internet Explorer, Safari …) u webbladsy kan verwerk en vertoon.

Dit word die html -dokumentboom genoem. Tik in Notepad die html "elemente" of "etikette" soos dit op die skermskoot verskyn. Kopieer en plak ook gerus:

Stap 3: Stoor as 'n.html -bladsy

Noudat ons ons basiese html -struktuur in Notepad het, laat ons dit stoor sodat ons geen werk verloor nie, en sodat ons ons veranderinge kan sien namate ons met die instruksies vorder.

1. Kies 'Lêer'> 'Stoor as …' (skermkiekie 1)
2. Verander die lêertipe na 'Alle lêers' (skermkiekie 2)
3. Gee u lêer 'n naam van u keuse. Let op waar u die dokument op u rekenaar stoor, sodat u dit later kan oopmaak. OPMERKING: Die belangrikste deel van die stoor van hierdie lêer is om ".html" aan die einde van die lêernaam toe te voeg. Dit sal u rekenaar toelaat om dit as 'n webblad te herken. As u dus u lêer 'my_webpage' wil noem, moet u.html daaraan byvoeg, bv. "my_webbladsy.html"

Stap 4: Voeg 'n titel by u webwerf

Ons het dus die basiese html -struktuur wat nodig is vir webblaaiers om ons webblad te interpreteer en te vertoon, maar ons het geen inhoud nie. Kom ons verander dit!

Die eerste ding wat ons moet doen, is om 'n titel aan ons webwerf te gee. Byna alle webblaaie het 'n titel. Dit is wat op die oortjie in u webblaaier verskyn (sien skermkiekie). Ek gaan my webblad die titel "Taylor's Website" gee. Om dit te kan doen, moet ons 'n 'titel' -element byvoeg.

Taylor se webwerf

Op hierdie punt sal u agterkom dat elke etiket 'n 'opening' -tag en 'n' afsluit 'tag het. Soos

en.

Dit is om te onderskei waar die titel begin en waar dit eindig. Byna alle html -etikette volg hierop, maar daar is enkele uitsonderings.

Stap 5: Voeg inhoud by u webblad

Ons het 'n titel vir ons webwerf, maar ons het nog steeds geen werklike inhoud daarvoor nie. Kom ons voeg 'n bietjie flair by!

Ons het 'n titel by ons webblad gevoeg met 'n 'titel' -element. Kom ons gee ons webblad 'n groot kop met aandag, deur 'n 'h1' -element te gebruik, wat 'n opskrifelement is.

Taylor se webwerf

Welkom by my webblad

Stap 6: Bekyk ons veranderings tot dusver

Ons het 'n titel, ons het 'n bietjie inhoud, kom ons kyk na ons webblad hoe dit tot dusver kom.

1. Stoor u lêer in die notaboek
2. Gaan na die plek waar u u lêer gestoor het en dubbelklik daarop. Dit moet outomaties in u standaardblaaier oopgemaak word. Lyk goed!

Stap 7: Voeg 'n paragraafmerker by

Ons het 'n titel, 'n opskrif, laat ons nou 'n paragraaf byvoeg met nog 'n bietjie teks. Die elementnaam vir 'n paragraaf is 'p'. U kan hieronder sien hoe dit gebruik word:

Taylor se webwerf

Welkom by my webblad

Vandag sal ons leer hoe om hierdie baie eenvoudige webwerf te skep!

Opmerking: u kan u veranderings altyd sien deur notepad op te slaan en die lêer oop te maak.

Stap 8: Gee dit 'n bietjie kleur

Ons webblad rol reg langs, maar dit is redelik eenvoudig. Laat ons ons paragraafmerk 'n bietjie kleur gee!

Ons kan verskillende elemente inkleur deur 'n 'styl' -eienskap by die' p' -tag te voeg, soos hieronder uiteengesit:

Taylor se webwerf

Welkom by my webblad

Vandag sal ons leer hoe om hierdie baie eenvoudige webwerf te skep!

Stap 9: Voeg 'n prentjie by

Wat is 'n webwerf sonder foto's? Kom ons voeg 'n foto by ons webwerf!

Die eerste stap is om 'n prentjie te vind waarvan u hou. Ek het google images gebruik om na 'n golden retriever te soek. Trek die prentjie omhoog en maak seker dat die url eindig op.jpg,.png,.gif,.jpg, ens.

Nadat u u prent gekies het, moet ons dit met 'n 'img' -etiket by die html -bladsy voeg. My beeld is:

Voeg dit by u bladsy met 'n 'img' -merker met 'n' src' -kenmerk:

Taylor se webwerf

Welkom by my webblad

Vandag sal ons leer hoe om hierdie baie eenvoudige webwerf te skep!

Stap 10: Bekyk die finale produk

Stoor die notaboeklêer en maak die finale produk oop. U behoort u webwerf te sien!