Crearea primului dvs. site web: 10 pași

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

În acest tutorial veți învăța să creați o pagină web de bază care are o foaie de stil legată și un fișier javascript interactiv.

Pasul 1: Crearea folderului

Creați un folder pentru fișierele pe care le vom crea pentru a fi stocate. Simțiți-vă liber să îl denumiți, oricum doriți, nu uitați doar unde se află acesta, deoarece vom salva fișiere în el mai târziu.

Pasul 2: Crearea primului fișier

Deschideți editorul de text preferat. În cazul meu, voi folosi pur și simplu blocnotesul încorporat din Windows 10. Odată ce aveți un nou fișier, tastați următoarele:

Aceasta este prima mea pagină web, adusă de un instructabil

Aceasta este ceea ce este cunoscut sub numele de etichetă HTML. Acesta reprezintă titlul 1. Textul pe care l-am introdus în această etichetă va apărea ca un titlu pe pagină. Este deschis și închis așa. Textul dintre cele două etichete este ceea ce va fi afișat în browserul dvs. web. Porțiunea care spune dă acelei etichete un atribut pe care îl vom referi la pasul x. Odată ce ați terminat, continuați și salvați fișierul în folderul pe care l-am făcut la pasul 1 ca index.html.

Pasul 3: Deschideți fișierul

Acum, după ce am finalizat navigarea către fișierul din folderul pe care l-am creat, faceți clic dreapta pe fișier și selectați opțiunea „deschideți cu” și selectați browserul web pe care îl utilizați. În cazul meu, acesta este google chrome. Acum vizualizați munca depusă până acum!

Pasul 4: Styling-ul paginii

Într-adevăr, site-ul nostru web este destul de simplu. Vom adăuga ceea ce este cunoscut sub numele de foaie de stil în cascadă pentru a condimenta puțin lucrurile. Creați un fișier text nou și tastați următoarele:

h1 {culoare: albastru; text-align: centru;}

Ceea ce îi spunem browserului aici este să găsim orice element dintr-o etichetă h1 (despre care am aflat la pasul 2) și să-i dăm o culoare albastră și să îl aliniem în centrul paginii. Salvați acest fișier în folderul pe care l-am creat la pasul 1 ca style.css.

Pasul 5: conectați Style.css la Index.html

În acest moment avem două fișiere separate care nu știu unul de celălalt. Trebuie să spunem fișierului nostru index.html că avem un fișier style.css la care dorim să se refere și să obțină un stil. Pentru a face acest lucru, vom deschide fișierul index.html în editorul nostru de text și, deasupra etichetei noastre h1, vom adăuga ceea ce este cunoscut sub numele de etichetă link. Eticheta de link face exact așa cum sugerează numele său, se leagă de ceva. În cazul nostru o foaie de stil. Continuați și tastați. Eticheta de legătură este o etichetă de închidere automată, deci nu este necesară o etichetă de încheiere. Relul înseamnă relație și href spune fișierului index unde se află fișierul nostru extern la care facem referire. Acum salvați acel fișier index.html.

Pasul 6: Vizualizați pagina dvs. cu stil nou

Revizitați pasul 3 și reîncărcați pagina dvs. web și aruncați o privire la modul în care reflectă modificările.

Pasul 7: Crearea unui buton

Deschideți fișierul index.html în editorul de text și tastați următoarele:

Faceți clic pe mine!

și salvați fișierul. Aceasta creează un element buton pe pagină. După salvare, redeschideți fișierul așa cum se arată la pasul 3 și asigurați-vă că butonul se află în partea stângă jos a paginii.

Pasul 8: Creați fișierul dvs. Javascript

În cele din urmă, vom crea fișierul nostru javascript. Aceasta este ceea ce va face site-ul nostru interactiv. Deschideți un editor de text și tastați următoarele:

document.querySelector ("butonul #"). addEventListener ("clic", funcție () {

document.querySelector ("# heading"). innerText = "Modificarea titlului din mers"

})

Ceea ce facem este să cerem documentului să ne găsească un element cu ID-ul butonului și vom face ca butonul să răspundă la un eveniment de clic prin schimbarea unui text de element cu ID-ul titlului la „Modificarea titlului din mers . Salvați fișierul ca button.js în folderul pe care l-am creat la pasul 1.

Pasul 9: conectați fișierele Javascript și Index

Așa cum am făcut cu fișierul style.css, trebuie să le spunem fișierului index.html despre fișierul nostru javascript. În partea de jos, sub tot ce am făcut până acum, tastați următoarele:

Eticheta de script ne permite să adăugăm un limbaj de script (în cazul nostru, javascript) pentru a oferi funcționalitate paginii noastre. Îi spunem să caute un fișier numit button.js și să adauge tot codul conținut în fișierul nostru index. După ce ați introdus acest lucru, salvați fișierul și deschideți din nou fișierul așa cum se arată în pasul 3.

Pasul 10: testați butonul nou creat

Acum mergeți mai departe și faceți clic pe buton și urmăriți cum se schimbă titlul!

Felicitări!! Ați creat acum prima dvs. pagină web interactivă! Mă întreb cât de mult mai departe ai putea să știi ce știi acum ??