[Ctrl-D] Codează prima pagină web

Articol preluat de pe ctrl-d.ro în scop de arhivare. Data inițială a publicării: 20 iunie 2017.

Codarea unui site web nu este o sarcină ușoară însă având atât de multe resurse la îndemână, practic oricine se poate apuca de învățat, iar în câteva săptămâni poate stăpâni bazele. Site-urile sunt doar blocuri de text și imagini, iar codul este instrumentul pe care îl folosim pentru a defini reguli de aranjare a conținutului în pagină.

Cele două limbaje de bază: HTML și CSS

Codul HTML definește structura conținutului unei pagini web.

HTML nu este un limbaj de programare, ci este definit ca un limbaj de markup (HyperText Markup Language).

Folosind etichete care se deschid cu <NumeEtichetă> și </NumeEtichetă> definim elemente precum paragrafe, titluri, imagini, filme și zone precum header, sidebar, footer. Codul HTML se scrie în fișiere cu extensia .html sau .htm.

Codul CSS (Cascading Style Sheet) este un standard care adaugă formatare elementelor dintr-un document HTML.

Stilurile pot fi adăugate direct pe pagina cu HTML între etichetele <style> și </style> sau într-un fișier separat cu extensia .css.

Aceste două limbaje sunt dezvoltate continuu de World Wide Web Consortium care în colaborare cu dezvoltatorii celor mai populare browsere dezvoltă standarde pentru a oferi o experienţă plăcută și modernă tuturor utilizatorilor internetului.

Tool-uri de care ai nevoie pentru coding

În primul rând ai nevoie de un editor de text special pentru scrierea codului.

Desigur, foarte multă lume a început să codeze în Notepad, dar un editor mai sofisticat te poate ajuta să treci de primele lecții puțin mai ușor.

Eu am început cu Notepad, apoi Notepad++ iar primul editor serios (așa credeam eu pe vremea aia) a fost Dreamweaver.

Acum avem la dispoziție software light și totuși creat special pentru codarea unui site. Eu folosesc Atom – cred că este cea mai bună opțiune pentru început fiind ușor de învățat și putând fi folosit pentru orice fel de coding nu doar web development, dar mai sunt și alte opțiuni:

Sublime Text (trial gratuit nelimitat)
Brackets (gratuit)
Visual Studio Code (gratuit)
Vim (gratuit)

Şi din categoria IDE (Integrated Development Environment):

Un IDE oferă ceva mai multe funcții decât un simplu editor text, este destul de complicat pentru început dar nu este rău să știți despre exitența acestora.

Pentru site-uri simple, statice, care folosesc doar HTML și CSS nu mai ai nevoie de altceva, însă pentru a putea scrie și deschide într-un browser site-uri ce folosesc și PHP vei avea nevoie de software care să ruleze un server local.

Cea mai simplă opțiune este XAMPP, dar mai ai la dispoziție WAMP, MAMP (pentru Mac) sau Vagrant (dar nu recomand Vagrant pentru început deoarece complică procesul degeaba pentru site-urile statice).

Eu folosesc Prepros pentru orice tip de site, deoarece este un program foarte complet. La crearea unui proiect nou lansează un server care îmi permite să văd rezultatele instant (nu este nevoie de refresh în browser) și poate fi folosit împreună cu XAMPP sau Vagrant.

Primii pași

Încep prin a face un folder nou (de cele mai multe ori în folderul Dropbox pentru a avea o copie în cloud a codului) cu următoarea structură:

folder proiect
- css
  - master.css
- js
  - app.js
- img
- index.html

Următorul pas este să adaug folderul proiectului în Prepros pentru a beneficia de funcția live reload, apoi deschid proiectul în editorul de text, în cazul meu Atom.

Structura de bază pentru un fișier HTML este următoarea:

<!DOCTYPE html> //astfel se declară versiunea de HTML folosit

<html lang="ro"> //tag-ul anunță browserul că urmează cod HTML

<head> //acesta este elementul care înconjoară tot conținutul headerulul (nu header-ul vizibil al site-ului, ci un header cu informații meta, precum titlul site-ului, descrierea și multe alte informații care nu sunt neapărat vizibile pe pagină)

<meta charset="utf-8"> //acest tag declară setul de caractere folosite

<title></title> //tag-ul <title> conține titlul paginii

<meta name="description" content=""> //tag-ul meta poate fi de mai multe tipuri, dar de cele mai multe ori conține descrierea unui site

<link rel="stylesheet" href="css/master.css"> //folosind tag-ul <link> atașăm un fișier CSS la pagină

</head> //tag-ul închide zona header-ului

<body> //tag-ul <body> definește corpul fișierului HTML

<script src="js/app.js"></script> //tag-ul <script> este folosit pentru a atașa fișiere cu cod JavaScript unei pagini

</body> //tag-ul închide corpul fișierului

</html> //tag-ul anunță finalizarea codului HTML

La care mai poți adăuga:

//tag-ul necesar pentru a putea face un site responsive

fill

//astfel definești un favicon, iconița care apare în tab-ul browserului și în bara de bookmark-uri

<link rel="icon" href="favicon-32x32.png" sizes="32x32">

coduri de tracking
librării CSS (precum Bootstrap sau Foundation) folosind tag-ul <link>
librării JS (Angular, jQuery) folosind tag-ul <script>

Tag-uri HTML

<!–…–>	Definește un comentariu care nu va fi procesat de browser (nu apare pe pagină)
<!DOCTYPE>	Definește versiunea de HTML utilizată.
<div>	Definește o secțiune dintr-un document HTML.
<a>	Definește un link.
<img>	Definește o imagine.
<p>	Definește un paragraf.
<h1> – <h6>	Definește un antet. H1 definește cel mai mare antet de pe pagină, H6 definește cel mai mic antet de pe pagină.
<input>	Definește un câmp în care se poate introduce text sau poate fi folosit pe post de buton în funcție de tipul de input definit: buton, checkbox, radio, parolă, număr, telefon, e-mail, adresă, timp, URL.
<select>	Definește un câmp de tip dropdown.
<option>	Defineste o opțiune dintr-un câmp dropdown.
<textarea>	Definește un câmp de tip text în care se poate introduce text pe mai multe rânduri.
<button>	Definește un buton.
<header>	Definește header-ul unei pagini sau al unei secțiuni.
<nav>	Definește un meniu.
<footer>	Definește footer-ul unei pagini sau al unei secțiuni.
<section>	Definește o secțiune dintr-o pagină.
<article>	Definește un articol.
<video>	Definește un film.
<table>	Definește un tabel.
<thead>	Definește header-ul unui tabel.
<tfoot>	Definește footer-ul unui tabel.
<tr>	Definește un rând dintr-un tabel.
<td>	Definește o celulă dintr-un tabel.
<th>	Definește o celulă din header-ul unui tabel.
<b>, <strong>	Bolduiește unul sau mai multe cuvinte.
<i>, <em>	Italicizează unul sau mai multe cuvinte.
<u></u>	Subliniază unul sau mai multe cuvinte.

Un layout basic

Recomandări pentru codul HTML

Codul HTML trebuie să fie cât mai curat, ordonat și comentat.

Comentarii în cod

Gândește-te că va trebui să lucrezi la un site peste 10 ani.

N-ai cum să îți aduci aminte structurile de cod, așa că niște comentarii te pot ajuta enorm.

Comentariile nu sunt doar pentru tine, sunt și pentru un potențial coleg sau colaborator care va avea acces la codul pe care l-ai scris.

Cod ordonat și curat

Ideal ar fi să nu te repeți atunci când codezi.

Un developer foarte bun ar trebui să poată scrie blocuri de cod HTML ce pot fi reutilizate pentru secțiuni total diferite din site prin adăugarea sau eliminarea câtorva tag-uri, clase, id-uri sau atribute.

Folosește denumiri cât mai descriptive pentru ID-uri și clase CSS.

Recomandări pentru codul CSS

Codul CSS poate ieși de sub control relativ ușor deoarece orice element de pe o pagină web poate fi afectat folosind reguli CSS.

O pagină cu foarte mult conținut poate avea atașat un fișier cu foarte multe reguli CSS. Este recomandat să comentezi și codul CSS. Poți face asta adăugând două slash-uri consecutive înaintea unui comentariu.

Pașii următori

În principiu trebuie să urmărești cât mai multe surse pentru a fi mereu la curent cu noutățile din domeniu.

Apar atât de multe tehnologii și metode noi de coding încât nu prea ai cum să faci față. De aceea trebuie să te specializezi pe o anumită ramură din Web Development.

Prima recomandare din categoria materiale ar fi articolul despre resurse și inspirație pentru un web developer.

Apoi, recomand cu căldură Reddit (subreddit-urile /r/webdev/, /r/web_design/, /r/jquery, /r/wordpress) pentru că acolo se oferă ajutor și ghidare gratuită, se postează tot soiul de tutoriale și în general comunitatea este destul de la zi când vine vorba de tehnologii noi.

Aici ai un link de download pentru o arhivă ce conține codul pentru layout-ul basic. Joacă-te cu el, îmbunătățește-l sau codează propria versiune.