Atunci când ai primul contact cu un site, se întâmplă să îţi placă sau să nu îţi placă ce vezi. De la font şi culori, de la modul în care sunt structurate elementele (meniu, categorii), până la sistemul de navigare (care trebuie să fie cât mai intuitiv şi mai prietenos), fiecare dintre acestea contribuie la impresia generală pe care o pagină web o amprentează asupra vizitatorului.
Dacă la finalul modului anterior am învăţat despre diagrama unui site şi cum trebuie să se prezinte el (secţiuni, meniu, poziţii), modulul 3 al cursului de Design şi programare web de la Eurocor te introduce în modul de creare efectivă a unei pagini Web. Aşadar, în prezentul modul începi să înveţi câteva noţiuni despre „cum se mănâncă” acest HTML.
Cum să creezi o pagina web
CE ESTE HTML?
(HyperText Markup Language)
Oricine, fără să fie vreun avansat în ale programării, a auzit măcar o dată despre acronimul HTML.
Deci, HTML este un limbaj de marcare (sau de programare) utilizat la crearea website-urilor.
Acesta cuprinde o serie de coduri, scrise într-un anume fel şi ordine într-un fişier text ales de programator (de regulă, Notepad, Notepad++).
Fişierul trebuie salvat ca tip de fişier html pentru ca acesta să poată fi deschis cu orice browser (Internet Explorer, Chrome, Mozilla Firefox etc).
Browserul este cel care „translatează” textul aducându-l într-o formă vizibilă, coerentă pentru orice vizitator necunoscător (adică forma pe care o vezi atunci când accesezi orice website).
Pentru a-l scrie, limbajul de marcare HTML foloseşte:
Elemente (funcţiile limbajului). Ex: html, head, body, table.
Concret: elementul table este utilizat pentru a introduce un tabel într-o pagină HTML.
Atribute (proprietăţi asociate elementelor). Ex: align, border, id.
Concret: atributul align=”center” va face ca tabelul să fie poziţionat pe centrul paginii
În acest modul 3 am citit despre:
Tipuri de date HTML
Culori, lungimi, caractere izolate, tipuri de link-uri etc.
Structura globală a unui document HTML
Orice document HTML este compus din trei părţi: elementul HEAD, linie cu informaţii despre versiunea doc-ului HTML şi elementul BODY (conţinutul actual al documentului).
Exemple HTML, linii de cod
Exemple de website-uri bazate pe HTML
La finalul capitolului, am găsit şi un studiu de caz – realizarea unei pagini HTML
Şi pentru a vedea că nu este chiar atât de greu, pe cât s-ar crede, să scrii folosind limbajul HTML, iată un exemplu de document HTML, o structură de bază.
Pasii sunt:
1.Deschizi editorul Notepad (eu recomand Notepad++). Pe fiecare rând apare scris câte ceva. Elementele HEAD, TITLE şi BODY, după cum se observă, sunt acolo. Ele sunt indispensabile în construcţia oricărei pagini.
- La final, salvezi ca fişier de tip .html (mergi în File -Save As -Save as type, selectând din listă Hyper Text Markup).
-
Deschizi folderul în care ai salvat fişierul şi, după modelul de mai sus, se va deschide pagina….Taa-daaa! Adică tot ce ai muncit.
A se reţine că:
<> este tag de deschidere
</> este tag de închidere
Ca exemplu, titlul dat de mine este: My Pure Style
Conţinutul este format dintr-o sintagmă (dar acolo se va scrie orice şi oricât text se doreşte).
Ceea ce poţi vedea atunci când deschizi fişierul este ce ai scris în cadrul elementului BODY (în cazul meu, sintagma Un site pentru toata lumea).
Elementul TITLE nu se regăseşte efectiv acolo, fiindcă el NU reprezintă o parte a curgerii textului. Elementula acesta se interpretează, de exemplu, ca antet de pagină sau ca titlu al documentului. Programatorii îl utilizează pentru identificarea conţinutului unui document.
Eu zic ca Webdesign-ul, programarea, este un domeniu fascinant care da, dacă îţi place, nu mai există loc de plictiseala sau de rutină. Asta pentru că, la fel ca în orice domeniu creativ, realizarea unui website îţi pune la încercare imaginaţia, viziunea, atenţia, meticulozitatea.
Dacă ţi-am suscitat interesul, ce mai aştepţi? Ai o mică pistă despre cum să creezi o pagină web. Apucă-te chiar azi să înveţi cât mai multe despre HTML, exersează, intră-ţi în mână, realizează website-uri şi… cine ştie, dacă eşti bun, faci şi bani. Şi încă ce bani poţi să faci cu aşa ceva.
parte simpla o stiu si eu ca pe asta am dat examen in anul 3 facultate la informatica si mi-a iesit bine un site simplu de prezentare de produs. Restul nu stiu daca se poate invata dintr-o carte sau dintr-un curs, fara sa iti explice cineva cand ai intrebari.
Eu ca absolventa de Filologie, nu prea am putut vorbi de informatica prin facultate. Insa, ma incanta, pur si simplu, lumea digitala si imi place sa ma tot perfectionez in sfera aceasta.
Cred ca aplicand in mod practic ceea ce ai invatat te va ajut asa intelegi mai clar informatiile teoretice.
De la Eurocor am tot vrut sa imi iau cursuri, dar sunt atat de multe posibilitati incat nu am stiut ce sa aleg mai intai 🙂 )))
Daca mai pui ca eu am si urmat perioada trecuta un curs de WebDesign, da, ma ajuta foarte mult acesta. Ca am ramas cu nelamuriri destule de acolo :-).
[…] din zona de confort. Deja nu mai vorbim despre banale noţiuni de HTML. Chiar şi modulul 3, despre cum să creezi o pagină html, mi s-a părut rezonabil, cu anumite noţiuni mă mai […]
[…] aplicaţia Adobe Dreamweaver se pot crea de la simple pagini HTML, până la un website, în adevăratul sens al cuvântului (luat de la zero sau nu chiar). Să […]