Curs Html

Sunt mai multe programe prin care se pot crea pagini web, chiar fara a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text simple sunt programele de baza, si cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad (sau NotePad++), care este folosit si pentru acest curs, dar poate fi utilizat orice editor de text. Pentru începatori si pentru usurinta cu care se lucreaza, eu recomand folosirea aplicatie Notepad++.


1. Crearea bazei de început a unui document

HTML contine elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.
Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Aceasta este:

<!DOCTYPE html>
<html>
<head>
<title> Titlul </title>
</head>
<body>
<h1>Titlu afisat in pagina</h1>
 Continut
</body>
</html>
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un text reprezentativ ca titlu al documentului dv.; si in BODY titlul care va fi afisat in pagina (in tag <h1>) si un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat mai bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe portaluri de cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pagina:
<!DOCTYPE html>
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>
</head>
<body>
<h1>Pagina HTML</h1>
 Lectii, exemple si explicatii.
</body>
</html>
- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la "Save as type" - All Files, apoi la "File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa ce a fost salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

Setarea stilului paginii

- Proprietatile de stil ale elementelor din pagina pot fi controlate in atributul style, de exemplu cum ar fi culorile pentru fondul paginii si pentru text.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB (Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.
De exemplu: #00aa11  reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru mai putin (11).

Elementul BODY


Salvare pagina html

Dupa ce a-ti creat baza de început a unui document si a-ti setat proprietatile, trebuie sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul îl poate recunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau ".html". De obicei se foloseste ".html".
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File comanda Save si salvati fisierul cu orice nume doriti, dar cu extensia html (sau "htm") - (La File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu scrieti extensia, NotePad va salva documentul in format "txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
- Pentru a continua lucrarea, a face modificari paginii sau pentru a adauga altceva in documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.
Aici puteti vedea structura generala a unei pagini Web

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Creare si editare pagini HTML

Last accessed pages

  1. Creare link-uri (20329)
  2. Utilizarea .htaccess (623)
  3. Trecutul continuu - Exercitii si teste incepatori (13529)
  4. Sufixele ful, less si nees - Test engleza (4861)
  5. Trecut nedefinit vs imperfect (564)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (503)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (444)
  3. Coduri pt culori (282)
  4. Formatare text in pagina html (164)
  5. Creare si editare pagini HTML (159)