Paljaste luude veebileht: 10 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Täna loome nullist väga lihtsa, paljaste luudega veebilehe. Räägime HTML -elementidest, teie veebilehe kujundamisest (värvid, fondid, joondus jne) ja lõpuks sellest, kuidas pilti oma veebilehele sisestada!

Selle juhendi lõpuks on teil põhioskused veebilehe loomiseks nullist ja avastate, et kodeerimine pole nii raske, kui tundub!

Samm: Notepadi kasutamine

Kasutame oma esimese veebilehe loomiseks Windowsi Notepadit. Kuigi iga tekstiredaktor sobib, on märkmik Windowsi masinatesse eelinstallitud, nii et see on suurepärane lähtepunkt.

Märkmiku avamiseks minge ekraani vasakus alanurgas otsinguribale ja tippige "Notepad". Seejärel valige otsingutulemustes ilmuv rakendus "Notepad". Avanema peaks uus aken.

2. toiming: põhilise HTML -dokumendipuu lisamine

Kõik veebilehed peavad järgima standardset skeleti struktuuri, et teie veebibrauser (Chrome, Firefox, Edge, Internet Explorer, Safari …) saaks teie veebilehte töödelda ja kuvada.

Seda nimetatakse html -dokumentide puuks. Sisestage Notepadis html -i "elemendid" või "sildid", nagu ekraanipildil näidatud. Võite ka kopeerida ja kleepida:

3. toiming. Salvestamine.html -lehena

Nüüd, kui meil on Notepadis oma html -põhistruktuur, salvestagem see nii, et me ei kaotaks tööd, ja et saaksime näha oma muudatusi Instructable'i edenedes.

1. Valige "Fail"> "Salvesta nimega …" (ekraanipilt 1)
2. Muutke failitüübiks „Kõik failid” (ekraanipilt 2)
3. Andke oma failile oma valitud nimi. Märkige kindlasti, kuhu dokumendi arvutisse salvestate, et saaksite selle hiljem avada. MÄRKUS. Selle faili salvestamise kõige olulisem osa on faili nime lõppu lisamine ".html". See võimaldab teie arvutil seda veebilehena ära tunda. Nii et kui soovite oma failile anda nime "minu_veebileht", lisage selle lõppu kindlasti.html, nt. "my_webpage.html"

Samm 4: Pealkirja lisamine oma veebilehele

Seega on meil põhiline html -struktuur, mis on vajalik veebibrauseritele meie veebilehe tõlgendamiseks ja kuvamiseks, kuid meil pole sisu. Muudame seda!

Esimene asi, mida peaksime tegema, on anda oma veebisaidile pealkiri. Enamikul kõigil veebilehtedel on pealkiri. See kuvatakse teie veebibrauseri vahekaardil (vt ekraanipilti). Ma annan oma veebilehele pealkirja "Taylori veebisait". Selleks peame lisama elemendi "title".

Taylori veebisait

Siinkohal märkate, et igal sildil on silt „avamine” ja „sulgemine”. Nagu näiteks

ja.

Selle eesmärk on mõista, kust pealkiri algab ja kus see lõpeb. Peaaegu kõik html -sildid järgivad seda, kuid on ka erandeid.

Samm: lisage oma veebilehele sisu

Noh, meil on oma veebilehe pealkiri, kuid meil pole selle jaoks ikkagi tegelikku sisu. Lisame veidi elegantsi!

Oleme oma veebilehele lisanud pealkirja, kasutades elementi „title”. Anname oma veebilehele suure tähelepanu köitva päise, kasutades elementi „h1”, mis on pealkirja element.

Taylori veebisait

Tere tulemast minu veebilehele

6. samm: meie seniste muutuste vaatamine

Meil on pealkiri, meil on sisu, vaatame oma veebisaidilt, kuidas see siiani läheb.

1. Salvestage fail märkmikusse
2. Minge faili salvestamise kohta ja topeltklõpsake seda. See peaks automaatselt avanema teie vaikimisi veebibrauseris. Hea välja nägema!

7. toiming: lõigusildi lisamine

Meil on pealkiri, pealkiri, lisame nüüd lõigu veel mõne tekstiga. Lõigu elemendi nimi on „p”. Selle kasutamist näete allpool:

Taylori veebisait

Tere tulemast minu veebilehele

Täna õpime, kuidas seda väga lihtsat veebilehte luua!

Märkus. Saate oma muudatusi igal ajal vaadata, salvestades märkmiku ja avades faili.

Samm: andke sellele mõni värv

Veebileht jookseb kohe mööda, kuid see on üsna lihtne. Anname oma lõigusildile veidi värvi!

Saame erinevaid elemente värvida, lisades märgendile „p” atribuudi „style”, nagu allpool kirjeldatud:

Taylori veebisait

Tere tulemast minu veebilehele

Täna õpime, kuidas seda väga lihtsat veebilehte luua!

9. samm: pildi lisamine

Mis on veebisait ilma piltideta? Lisame pildi meie kodulehele!

Esimene samm on leida pilt, mis teile meeldib. Kuldse retriiveri otsimiseks kasutasin Google'i pilte. Tõmmake pilt üles ja veenduge, et URL lõpeks.jpg,.png,.gif,-j.webp

Kui olete oma pildi valinud, peame selle märgendi „img” abil html -lehele lisama. Minu pilt on:

Lisage see oma lehele, kasutades märgendit „img” koos atribuudiga „src”:

Taylori veebisait

Tere tulemast minu veebilehele

Täna õpime, kuidas seda väga lihtsat veebilehte luua!

10. samm: lõpptoote vaatamine

Salvestage märkmiku fail ja avage lõpptoode. Te peaksite oma veebisaiti nägema!