M-am lovit prima oara de notiunea de html atunci cand cutreieram forumurile in cautare de comori pline cu banuti usori de obtinut.Pe unul din forumuri o persoana a spus…nu te increde in astfel de programe(gen PTC, email surveys);invata HTML si CSS, fa un website, tine-te de el si monetizeaza-l.Este mult mai sigur.Ca orice om, curiozitatea m-a lovit asa ca m-am apucat sa caut pe internet informatii in legatura cu acest HTML.Si-am gasit…mai mult decat ma asteptam, pe w3schools si pe multe alte website-uri din aceeasi nisa.Nu mi-am dat seama in acel moment, dar acea cautare a comorii chiar s-a dovedit a fi cu noroc.Ce vreau sa subliniez prin propria-mi poveste e ca in timp ce cautam ceva ireal am descoperit o pasiune.Este esential sa inveti ceva in pasiune, asa ca adresez aceasta serie de tutoriale celor care:

  • Impinsi de curiozitate, vor sa afle modul in care functioneaza un website sau chiar intregul univers numit Internet
  • Sunt dornici sa isi creeze propriul website, dar nu au idee cum
  • Bloggerilor, care au deja un website, dar nu cunosc nici un limbaj de programare web
De asemenea, seria de tutoriale va tacla si „probleme” reale, fiecare cu exemple amanuntite.Esential este ca, inainte de a incepe, sa intelegi ca trebuie sa aloci macar o bucatica din timp pentru a intelege.

Legatura cu celelalte limbaje de programare web

Este important sa intelegem ca, pentru a crea un website modern, web 2.0, un website ce l-am considera astazi obisnuit, trebuie sa imabini armonios mai multe limbaje de programare web.HTML este foarte important caci cu el se creeaza structura, sau mai bine zis scheletul website-ului.Dar HTML nu este un limbaj cu care se pot modifica sau crea elemente de design la un nivel avansat.Se pot utiliza HTML Styles, de care vom vorbi mai tarziu in seria de tutoriale, dar orice webmaster bun ne va spune ca CSS este cea mai buna alegere.CSS merge mana-n mana cu HTML si cu aceste 2 limbaje de programare poti crea designul la orice website de pe internet.

De obicei, website-urile actuale sunt destul de interactive.Userii pot comenta,se pot inregistra, pot incarca fotografii etc.Pentru a realiza toate aceste lucruri este nevoie de alt limbaj de programare si anume de PHP sau de ASP ce sunt un pic mai avansate.

Si in final, daca vrei sa iti faci website-ul mai interactiv, trebuie sa inveti si JavaScript(totusi, eu am preferat sa invat Jquery, e mai simplu, si ma ajuta poate mai mult).

Inainte de inceput

Ca si in oricare alt limbaj de programare, pentru a scrie codul HTML ai nevoie de un editor, in cazul nostru un editor de texte va fi suficient, iar compilatorul este chiar browserul in sine.Am facut o postare ce are o lista cu cele mai bune editoare web, puteti sa o vizitati aici.O sa va fie de mare ajutor caci o sa vedeti…pe masura ce creati website-uri din ce in ce mai mari, un editor bun va spori mult productivitatea.

Primul website in HTML

In exemplele urmatoare vom crea un website gen anii ’90, fara styles sau CSS.Doar un titlu, ceva text si cam atat.Dar inainte de a scrie codul in sine, trebuie sa stii care sunt comentariile in HTML.Acestea sunt mici bucati de text ce sunt citite de catre browser.Ele sunt de mare ajutor caci pot fi utilizate ca niste note pentru webmaster.Pentru a scrie un comentariu trebuie doar sa scrii textul intre <!–  –>.

<html>
<!--In sectiunea head se afla de obicei informatiile ce nu pot fi utilizate de
catre vizitator,
dar care sunt foarte importante pentru buna functionare a website-ului-->
<head>
<title>Primul meu website</title>
</head>
<!--In sectiunea body se afla de obicei continutul, imaginile si linkurile
website-ului-->
<body>
<h1>Primul meu website</h1>
<h2>de MarianPC.eu</h2>
<hr/>
<p>Acesta este doar un paragraf.De obicei intre cele 2 taguri, de inceput si de
final se afla bucatile mai mari de text</p>
</body>
</html>

 

Salveaza fila cu terminatia .html(eu am salvat-o ca index.html) si deschide-o intr-un browser.Ar trebui sa vezi ceva asemanator cu:

Iar acum sa analizam un pic codul de mai sus.Poti vedea ca in limbajul HTML codul este scris intre <> si </>, acestea marcand tagul de inceput, respectiv cel de final.Totusi, exista si taguri care nu vin in perechi, cum ar fi <hr/> cu care s-a creat acea linie orizontala.Pentru a marca „unicitatea” acestor taguri, linia de final se pune dupa caractere.

  • tagul <html> anunta browserul ca fila este una de tip HTML
  • tagul <head> contine elementele ce nu pot fi vazute direct de catre un vizitator, exceptie facand tagul <title> cu care se stabileste titlul unei pagini.De cele mai multe ori, in sectiunea head vor fi tagurile meta, cele pentru scripturi si link.
  • tagul <body> contine elementele ce pot fi vazute direct de catre vizitator, cum ar fi continutul, imaginile, linkurile, formele HTML
  • exista 6 heading-uri in HTML, fiecare variind in marime intr-o ordine descrescatoare.Tagul <h1> este cel mai mare, iar cel <h6> este cel mai mic.Poti crea o noua pagina in care sa testezi acest lucru.
  • tagul <p> se utilizeaza pentru paragrafe si de obicei intre acesta vin bucatile mai mari de continut

In urmatoarea parte a tutorialului vom discuta despre formatarea textului, iar apoi despre linkuri si imagini.

 

Alătură-te conversației

1 comentariu

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Send this to a friend