Pagina web Bare Bones: 10 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

Astăzi vom crea de la zero o pagină web foarte simplă, cu oase goale. Vom vorbi despre elemente HTML, stilul paginii dvs. web (culori, fonturi, aliniere etc.) și, în cele din urmă, cum să inserați o imagine în pagina dvs. web!

Până la sfârșitul acestui instructiv, veți avea abilitățile de bază pentru a crea o pagină web de la zero și veți descoperi că codarea nu este atât de dificilă pe cât pare!

Pasul 1: Utilizarea Notepad-ului

Vom folosi Notepad pe Windows pentru a crea prima noastră pagină web. Deși orice editor de text va face, notepad-ul este preinstalat pe mașinile Windows, deci este un punct de plecare excelent.

Pentru a deschide blocnotesul, accesați bara de căutare din colțul din stânga jos al ecranului și tastați „Notepad”. Apoi selectați aplicația „Notepad” care apare în rezultatele căutării. Ar trebui să se deschidă o nouă fereastră.

Pasul 2: Adăugarea arborelui documentului HTML de bază

Toate paginile web trebuie să urmeze o structură scheletică standard pentru ca browserul dvs. web (Chrome, Firefox, Edge, Internet Explorer, Safari …) să proceseze și să afișeze pagina dvs. web.

Aceasta se numește arborele documentului html. În Notepad, tastați „elementele” sau „etichetele” html așa cum sunt afișate în captura de ecran. Simțiți-vă liber să copiați și să lipiți și:

Pasul 3: Salvarea ca pagină.html

Acum că avem structura noastră de bază html în Notepad, să o salvăm astfel încât să nu pierdem niciun lucru și astfel încât să putem vedea schimbările noastre pe măsură ce progresăm de-a lungul Instructable.

1. Selectați „Fișier”> „Salvați ca…” (Captura de ecran 1)
2. Schimbați tipul de fișier la „Toate fișierele” (captura de ecran 2)
3. Dați fișierului un nume la alegere. Asigurați-vă că notați unde salvați documentul pe computer, astfel încât să îl puteți deschide mai târziu. NOTĂ: Cea mai importantă parte a salvării acestui fișier este adăugarea „.html” la sfârșitul numelui fișierului. Acest lucru va permite computerului dvs. să îl recunoască ca o pagină web. Deci, dacă doriți să denumiți fișierul dvs. „pagina_mei_de_pagina”, asigurați-vă că adăugați.html la sfârșitul acestuia, de ex. „pagina_meu_mei.html”

Pasul 4: Adăugarea unui titlu la pagina dvs. web

Deci, avem structura html de bază necesară pentru ca browserele web să interpreteze și să afișeze pagina noastră web, dar nu avem conținut. Să schimbăm asta!

Primul lucru pe care ar trebui să-l facem este să oferim un titlu paginii noastre web. Majoritatea tuturor paginilor web au un titlu. Aceasta este ceea ce se afișează pe fila din browserul dvs. web (consultați captura de ecran). Voi da paginii mele web titlul „Site-ul lui Taylor”. Pentru a face acest lucru, trebuie să adăugăm un element „title”.

Site-ul lui Taylor

În acest moment veți observa că fiecare etichetă are o etichetă „de deschidere” și o etichetă „de închidere”. Precum

și.

Aceasta este pentru a discerne unde începe titlul și unde se termină. Aproape toate etichetele html urmează acest lucru, totuși există câteva excepții.

Pasul 5: Adăugarea de conținut la pagina dvs. web

Ei bine, avem un titlu pentru pagina noastră web, dar încă nu avem conținut real pentru acesta. Să adăugăm ceva fler!

Am adăugat un titlu pe pagina noastră web folosind un element „title”. Să oferim paginii noastre web un antet mare, care atrage atenția, folosind un element „h1” care este un element de antet.

Site-ul lui Taylor

Bun venit pe pagina mea web

Pasul 6: Vizualizarea schimbărilor noastre până acum

Avem un titlu, avem ceva conținut, haideți să verificăm pagina noastră web cu privire la evoluția sa până acum.

1. Salvați fișierul în notepad
2. Accesați locul unde ați salvat fișierul și faceți dublu clic pe el. Ar trebui să se deschidă automat în browserul dvs. web implicit. Arata bine!

Pasul 7: Adăugarea unei etichete de paragraf

Avem un titlu, un titlu, acum să adăugăm un paragraf cu mai mult text. Numele elementului pentru un paragraf este „p”. Puteți vedea utilizarea acesteia mai jos:

Site-ul lui Taylor

Bun venit pe pagina mea web

Astăzi vom învăța cum să creăm această pagină web foarte simplă!

Notă: Puteți vizualiza modificările oricând doriți salvând blocnotesul și deschizând fișierul.

Pasul 8: dă-i o culoare

Avem pagina noastră web rulând chiar de-a lungul, dar este destul de simplu. Să dăm culoare etichetei noastre de paragraf!

Putem colora diferite elemente adăugând un atribut „stil” la eticheta „p”, după cum este detaliat mai jos:

Site-ul lui Taylor

Bun venit pe pagina mea web

Astăzi vom învăța cum să creăm această pagină web foarte simplă!

Pasul 9: Adăugarea unei imagini

Ce este un site web fără imagini? Să adăugăm o poză pe site-ul nostru!

Primul pas este să găsiți o imagine care să vă placă. Am folosit google images pentru a căuta un golden retriever. Trageți imaginea în sus și asigurați-vă că adresa URL se termină cu.jpg,.png,.gif,-j.webp

După ce v-ați ales imaginea, trebuie să o adăugăm la pagina html folosind o etichetă „img”. Imaginea mea este:

Adăugați-l la pagina dvs. utilizând o etichetă „img” cu un atribut „src”:

Site-ul lui Taylor

Bun venit pe pagina mea web

Astăzi vom învăța cum să creăm această pagină web foarte simplă!

Pasul 10: Vizualizarea produsului final

Salvați fișierul Notepad și deschideți produsul final. Ar trebui să vă vedeți pagina web!