De ce ar trebui să înveți să codezi (puțin): o introducere în HTML și CSS
Publicat: 2021-08-15Nu a fost niciodată mai ușor să pornești un magazin online. Datorită platformelor precum Shopify, puteți cumpăra o temă, puteți încărca produsele dvs. și puteți vinde clienților dvs. în câteva ore! Bariera de intrare este atât de mică încât aproape oricine o poate face.
Deși este atât de ușor de început, este la fel de ușor să dai simplitatea simplă. În cele din urmă, veți dori să adăugați sau să schimbați ceva în magazinul dvs. și veți realiza că tema dvs. nu o acceptă. Dezvoltatorii nu sunt ieftini și ultimul lucru pe care vrei să-l faci este să plătești pe altcineva pentru ceva ce ai fi putut să faci singur.
Ce se întâmplă dacă ți-aș spune că ai putea petrece puțin timp în avans pentru a afla elementele de bază despre modul în care funcționează site-urile web și ai economisi timp și bani pe drum?
Până la sfârșitul acestui articol, ar trebui să cunoașteți noțiunile de bază ale HTML și CSS și să știți suficient pentru a începe să lucrați în propriul magazin.
Deci, luați câteva minute pentru a vă pregăti și să începem!
Ce este HTML și CSS?
HTML înseamnă Hypertext Markup Language. Este una dintre cele mai vechi și mai importante limbi fundamentale de pe web. Este responsabil pentru structurarea și prezentarea conținutului chiar pe această pagină!
CSS înseamnă Cascading Style Sheets. Este responsabil pentru furnizarea stilului HTML și a formatării.
Împreună, acestea sunt elementele necesare pentru orice site web. În acest articol, vă voi prezenta prin elementele de bază și vă voi arăta cum să codificați și să vă stilizați prima pagină web.
Deoarece sunt un mare fan al lui Bill Murray (care nu este), vom crea propriul nostru altar pe web pentru Bill.
În primul rând, să ne adâncim în HTML și CSS pentru a obține cu adevărat o înțelegere completă a puterii și abilității lor.
Anatomia unui site web
Putem înțelege cu ușurință modul în care HTML și CSS funcționează împreună comparându-le cu părțile structurale ale unei case.
În spatele pereților fiecărei case se află un cadru responsabil pentru structura ei. Gândiți-vă la HTML ca la un cadru de casă. Este responsabil pentru structura unui site web.
Respectând analogia casei noastre, CSS este responsabil pentru lucruri precum culorile vopselei, dimensiunile sufrageriei, culoarea podelelor din lemn și forma și stilul mesei din sufragerie.
Să ne uităm la câteva marcaje HTML de bază și să le parcurgem rând cu rând.
Doctype
Eticheta <! DOCTYPE html> ajută browserul să știe că tipul de document cu care dorim să lucrăm este HTML.
Cap
În interiorul etichetei <head> este locul unde stocăm toate metadatele documentului nostru. Aceste date includ lucruri precum titlul, stilurile (CSS), descrierea și multe altele. Aceste date nu sunt afișate utilizatorului final, dar browserele le folosesc pentru a determina ce document trebuie să fie intitulat sau ce stiluri ar trebui să utilizeze atunci când îl afișează utilizatorului final.
Publicitate
Unele alte elemente găsite în <head> ale unei pagini HTML pot include informații despre autor, descrierea paginii sau un link către o imagine utilizată pentru favicon (pictograma mică dintr-o filă a browserului).
Corp
Eticheta <body> conține toate marcajele (codul) pentru site-ul web. Acesta este singurul cod pe care utilizatorul final îl va vedea când va vizualiza site-ul nostru.
Instrumentele de care aveți nevoie pentru a construi un site web
Pentru a începe să scrieți HTML, s-ar putea să credeți că aveți nevoie de niște programe scumpe și scumpe, dar nu aveți. De fapt, aveți deja ceea ce aveți nevoie.
Dacă utilizați un computer, deschideți programul NotePad. Dacă sunteți pe un Apple Mac, deschideți TextEdit.
Acum că aveți programul dvs. de editare a textului deschis, urmați-l împreună cu mine în timp ce extindem marcajul HTML de bază de mai sus. Copiați (Ctrl + C pe Windows / Cmd + C pe Mac) și lipiți (Ctrl + p pe Windows / Cmd + P pe Mac) următorul cod în editorul de text.
<! DOCTYPE html>
<html>
<head>
<title> Titlul paginii dvs. </title>
</head>
<corp>
<h1> Bună ziua lume! </h1>
<p> Acesta este primul nostru paragraf. </p>
</body>
</html>
Salvați acest fișier pe desktop și deschideți-l în browserul web. Acum ar trebui să vedeți codul tradus sau redat de browser și ar trebui să arate cam așa:
Elementul Heading (<h1>)
Eticheta <h1> este utilizată atunci când doriți să atrageți atenția și definiția anumitor texte. În acest caz, dorim textul „Hello World!” să fie mai mare și mai proeminent decât textul ulterior.
Din cutie, HTML are șase etichete de titlu diferite pe care le puteți utiliza: h1, h2, h3, h4, h5 și h6.
Dimensiunea fontului se va micșora la fiecare „pas în jos” pe care îl faceți; H1 va fi cel mai mare și H6 va fi cel mai mic. În mod implicit, vor avea o anumită marjă (sau spațiu în jurul lor) pentru a le separa de alte elemente de pe pagină și pentru a oferi utilizatorului ierarhie vizuală.
Faceți un minut pentru a experimenta schimbarea titlului, a antetului și / sau a etichetelor de paragraf. După ce efectuați o modificare, salvați-o și apoi reîmprospătați browserul. Felicitări, tocmai ai editat HTML pentru prima dată!
Pare plictisitor, nu?
Să adăugăm ceva stil paginii noastre și să aflăm mai multe despre adevărata putere a CSS.
Pentru a adăuga propriile stiluri la aceste elemente HTML, trebuie să adăugăm o etichetă <style> în interiorul <head> al documentului nostru.
Această etichetă înfășoară toate CSS-urile noastre. Gândiți-vă la ce se află în eticheta <style> ca ghid de stil al browserului.
Sub eticheta <titlu> pe un nou rând, adăugați o etichetă de stil ca aceasta:
<title> Titlul paginii dvs. </title>
Publicitate
<stil>
</style>
În interiorul etichetei de stil este locul în care putem introduce toate declarațiile noastre. O declarație CSS constă dintr-o proprietate urmată de o valoare .
Să facem culoarea <h1> noastră diferită de restul textului nostru, deoarece este cea mai importantă și dorim ca aceasta să iasă în evidență. Adăugați următoarele dintre etichetele <style> , salvați fișierul și reîmprospătați browserul din nou.
<stil>
h1 {culoare: albastru; }
</style>
Ar trebui să vedeți acum ceva care arată așa! Veți observa că „Hello World!” textul este acum albastru. Simplu, nu?
Acolo, ai făcut-o! Ați schimbat cu succes stilul unui element HTML folosind CSS. Nu ne distram inca?
Adăugarea de imagini la pagina noastră
Există multe alte elemente pe care le puteți include pe pagina dvs., dar unul dintre cele mai proeminente de pe orice site web este imaginea atotputernică. Putem adăuga cu ușurință o imagine incluzând fișierul eticheta așa:
<img src = „https://www.fillmurray.com/400/500” >
Notă: Din motive demonstrative, folosesc un serviciu de substituent al imaginii numit www.fillmurray.com. Puteți utiliza o imagine pe computerul dvs. local, dacă preferați acest lucru.
Mod alternativ (Sfat Pro) de a lua o imagine de pe un site web: găsiți o imagine pe un site web pe care doriți să îl utilizați și faceți clic dreapta pe el. Faceți clic pe Copiere adresă imagine și adresa URL a imaginii respective va fi în clipboard. În funcție de browser, formularea poate fi ușor diferită. Folosesc Google Chrome. Nu recomand utilizarea excesivă a hotlink-ului, dar pentru această demonstrație nu este mare lucru.
Copiați și lipiți acest element de imagine și plasați-l sub eticheta de paragraf, astfel încât blocul dvs. complet de cod să arate ca al meu:
<! DOCTYPE html>
<html>
<head>
<title> Titlul paginii dvs. </title>
<stil>
h1 { culoare : albastru;}
</style>
</head>
<corp>
<h1> Bună lume! </h1>
<p> Acesta este primul nostru paragraf. </p>
<img src = „ https://www.fillmurray.com/400/500 ” alt = ”imagine a lui Bill Murray” >
</body>
</html>
Salvați fișierul și reîncărcați browserul și ar trebui să vedeți acum așa ceva:
Dacă ați fi atent, ați observat un alt atribut pe eticheta <img> , alt = ”imaginea lui Bill Murray” . Deoarece browserul descifrează codul și nu poate vedea rezultatul redat ca și mine, are nevoie de o modalitate de a cunoaște contextul a ceea ce afișează.
Publicitate
Prin adăugarea unei etichete ALT (text alternativ) la imaginea noastră, putem spune browserului despre ce este vorba subiectul imaginii noastre.
Acest lucru este, de asemenea, foarte important pentru SEO (optimizarea motorului de căutare) și, mai important, acest text este citit cu voce tare pentru utilizatorii nevăzători care utilizează un cititor de ecran.
Dar ce zici de link-uri?
Nicio introducere în HTML / CSS nu ar fi completă fără acoperirea linkurilor! Atunci când creați un site web, veți dori posibilitatea de a vă conecta, fie că este vorba de surse externe sau de alte pagini interne din propriul dvs. site web.
Să vorbim despre elementul de ancorare. Adevărata magie a unui element ancoră este de fapt atributul său href. Să demonstrăm structura unei etichete de ancorare adăugând un link la pagina Wikipedia a lui Bill.
<a href= "www.google.com"> Citește său de intrare pe Wikipedia </a>
Acest cod îi spune browserului că, atunci când un utilizator face clic pe text: „Citește intrarea lui Wikipedia”, duceți-l la www.google.com.
Să adăugăm acest cod chiar sub elementul de titlu, astfel încât blocul nostru de cod să arate acum:
<! DOCTYPE html>
<html>
<head>
<title> Titlul paginii dvs. </title>
<stil>
h1 { culoare : albastru;}
</style>
</head>
<corp>
<h1> Bună lume! </h1>
<a href= “https://en.wikipedia.org/wiki/Bill_Murray› > Citiți intrarea sa din Wikipedia </a>
<p> Acesta este primul nostru paragraf. </p>
<img src = „https://www.fillmurray.com/400/500” alt = „imagine a lui Bill Murray” >
</body>
</html>
Apăsați salvează și reîmprospătează browserul și, sperăm, al tău arată ca al meu.
Luând-o peste linia de sosire
Am continuat și mi-am dat micul omagiu adus lui Bill Murray și iată rezultatul meu final. Voi parcurge câteva dintre stilurile adăugate de mai jos.
Drumroll, te rog ...
Acum, puteți vedea că acest lucru nu este ceva despre care să scrieți, dar asta este prin design. Acesta este doar vârful aisbergului când vine vorba de modul în care ar putea arăta sau ar putea fi aranjată această pagină. Am vrut să păstrez lucrurile simple, astfel încât să înțelegeți ce face fiecare dintre metodele de styling de mai jos.
Publicitate
Să sărim în micul CSS pe care a trebuit să-l adaug pentru a ajunge până aici.
Aranjarea corpului:
În primul rând, în corpul paginii, am adăugat:
corp {
fundal-culoare: #eee;
font-family: Helvetica, Arial, sans-serif;
text-align: centru;
marja: 25px;
}
culoare de fundal
Am setat culoarea de fundal a paginii la un gri foarte deschis folosind valoarea de culoare hexazecimală #eee. Puteți afla mai multe despre acestea și puteți vedea câteva exemple aici la MOZ.
familie de fonturi
Am vrut să schimb fontul din browserul Times New Roman implicit. Pentru aceasta, am ales Helvetica ca prima mea alegere (dacă utilizatorul are acel font instalat pe computer), Arial ca a doua alegere (dacă utilizatorul nu are Helvetica, va fi implicit Arial) și ca o copie de rezervă finală , un font de bază sans serif.
aliniere text
Am ales să am tot textul pe pagina mea în centru. Există câteva alte opțiuni pentru valori precum stânga și dreapta, dar am crezut că pentru aceasta arăta cel mai bine centrat.
marjă
Am adăugat o mică margine pe corpul documentului pentru a-i oferi spațiu de respirație.
Stilul imaginii noastre:
În cele din urmă, am stilat fața frumoasă a lui Bill, mă refer la elementul de imagine
img {
chenar: 10px solid # 41bcd6;
box-shadow: 2px 5px 5px # 999;
umplutură: 10 px;
raza chenarului: 5px;
}
Nu am făcut mare lucru, dar am vrut să dau fotografiei lui Bill o anumită prezență pe pagină.
frontieră
Am adăugat o margine de 10 px în jurul imaginii. # 41bcd6 este o altă valoare hexadecimală a culorii care redă o culoare albastru deschis (parte a temei mele secrete subliminale de culoare Steve Zissou).
cutie-umbră
Am vrut să dau imaginii o senzație tridimensională, așa că i-am adăugat o umbră ușoară. Proprietatea box-shadow acceptă valorile pixelilor și culorilor care dictează lungimea, neclaritatea și culoarea umbrei. Pentru a afla mai multe despre declarația box-shadow, Moz o descompune bine aici.
căptușeală
Pentru a face ca imaginea să arate mai mult ca o ramă, am adăugat 10 px de umplutură între ea și margine.
frontieră-rază
Doar pentru a ilustra una dintre abilitățile mai cool ale CSS, am făcut colțurile imaginii rotunjite folosind raza de margine. Când am început să construiesc site-uri web, nimic de genul acesta nu exista, iar producerea de colțuri rotunjite pe web era de fapt destul de dificilă. Am parcurs un drum lung de atunci și acum este destul de simplu. Acceptă o valoare precum px sau ems și aici am ales doar să o rotunjesc suficient pentru a observa setând valoarea la 5px.
Concluzie
De-a lungul acestui articol am lucrat împreună pentru a învăța anatomia de bază a unui site web. De asemenea, am învățat câteva HTML și CSS simple care, în cele din urmă, s-au transformat într-un mic omagiu destul de uimitor de o pagină pentru unul dintre cei mai mari actori din toate timpurile dintr-o generație
Cu toată seriozitatea, sper însă că ai reușit să urmărești împreună cu mine și să-ți construiești primul site de bază. Acum, dacă Bill Murray nu este actorul tău preferat, te provoc să editezi acest cod pentru a-ți prezenta actorul, formația sau orice ai vrea.
Dacă trebuie să faceți referire la acest cod în orice moment, reveniți și citiți acest articol sau, ca comoditate, l-am pus pe CodePen aici.
Există atât de multe lucruri distractive pe care le puteți face doar cu HTML + CSS. Iată câteva resurse excelente pentru a vă extinde învățarea:
Publicitate
- Code Academy: introducere 100% GRATUITĂ la cursul HTML / CSS
- CSS Zen Garden: Primul exemplu de pe web care „a dat clic” pentru mine, pentru a mă ajuta să realizez că poți avea 100 de site-uri web cu aspect diferit, care folosesc toți același markup HTML
- Animații CSS
- Mona Lisa folosind numai CSS
- Câine husky animat care folosește numai CSS
- CodePen: CodePen este un instrument online pentru testarea LIVE și prezentarea codului HTML, CSS și JavaScript
Am zgâriat serios doar suprafața din acest articol, așa că vă încurajez să citiți mai multe, să urmați câteva cursuri online și să continuați să vă împingeți cunoștințele!
