Jump to content
cyber_cobra

HTML - Ce este HTML , folosirea limbajului

Recommended Posts

Lectia1

1: HTML , HTML este un intreg de coduri logice care constituie aparitia unui document web si a informatiilor pe care le detine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, a?a se numesc si arata a?a: < >.

EX:

<BODY> sau <FONT>

Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element de închidere distins prin "/" in interiorul parantezei deschise "<".

EX:

<FONT> ... </FONT>

Primul cuvant care apare inauntru "<" se numeste element sau eticheta HTML si spune browser-ului sa faca ceva, precum <FONT>

Cuvintele care urmeaza dup? element in interiorul "< >"se numesc atribute care descriu propriet??ile elementului. Cum ar fi : culoarea, m?rimea, etc.

Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre ghilimele (" ") valorile atributelor.

Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.

EX de FONT atributul COLOR si valoarea BLUE:

<FONT COLOR="BLUE">acest text va fi albastru</FONT>

2: Structura documentului HTML

Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.

- La început un element HTML cuprinde datele documentului. Acest element contine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web.

EX:

<html>
<head>
<title>Titlu Documentului-Cyber_Cobra</title>
</head>
<body>
Continutul paginii
</body>
</html>

3: Structura generala a unui document HTML

<HTML>

<HEAD> Acesta are si el mai multe sub-elemente:

<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu </TITLE>

<BASE> Poate fi folosit pentru a înregistra loca?ia documentului in forma URL. (Necesar daca documentul nu este accesat in loca?ia lui originala). Se încheie cu </BASE>

<LINK> Indica o rela?ie dintre document si alte obiecte de pe WEB. Se încheie cu </LINK>

<META> Aici sunt scrise informa?ii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi g?site de motoarele de c?utare. Se încheie cu </META>

<SCRIPT> Con?ine oricare din JavaScript sau VB Script. Se încheie cu </SCRIPT>

<STYLE> Con?ine informa?ii privind stilul, grafica informa?iilor care vor ap?rea pe pagina. Se încheie cu </STYLE>

Aici se încheie elementele adaugate in HEAD

</HEAD>

<BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>

Se încheie cu

</BODY>

</HTML>

Lectia2

1: Creearea si editarea paginilor - Crearea bazei de început a unui document

Cum ai vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.

Pentru început deschide aplicatia NotePad si scrie structura de baza a unei pagini web. Aceasta este:

<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>

Acum pagina ta are HEAD si BODY in interiorul bazei <HTML>.

In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completezi cu un text reprezentativ ca titlu al documentului dv.; si in BODY un text "Continut".

Ceea ce scrii la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). La TITLE poti pune orice text, indicat sa nu depaseasca 70 caractere

Ceea ce adaugi intre tag-urile <body> </body> reprezinta continutul paginii, care va fi afisat in browser.

EX cum ar putea fi completat tag-ul TITLE si un mic continut in pagina:

<html>
<head>
<title>Cyber_Cobra</title>
</head>
<body>
<h1>Pagina HTML</h1>
WTF you whant
</body>
</html>

<h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.

- Ca sa vezi rezultatul, copie acest cod intr-o pagina noua deschisa cu Notepad si apoi salveaza fisierul cu extensia .html. Daca nu stii deja, pentru a-l salva alege la "Save as type" - All Files, apoi la "File name" si scriei numele si extensia (ex.: "pagina.html"). Dupa ce a fost salvat fisierul, deschide-l cu un browser (doar cu dublu-click pe el).

2: Setarea proprietarilor documentului

Proprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.

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).

3: Elementul BODY

Acestui element ii poti adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor.

Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard, de obicei fondul este alb.

Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul BGCOLOR.

Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:

<body bgcolor="#0000ff"></body>

3.1: Culoarea textului

Atributul TEXT controleaza culoarea textului normal din document.

Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi link-ul.

Culoarea standard pentru text este Negru.

Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT va fi adaugat astfel:

<body bgcolor="#0000ff" text="#ff0000"></body>

3.2: Link-uri (LINK, VLINK si ALINK)

Aceste atribute controleaza culoarea link-ului in diferite stari

1. LINK - culoarea initiala a link-ului. Standard este albastru

2. VLINK - culoarea unui link vizitat. Standard este purpuriu.

3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.

Modul de setare al acestor atribute este urmatorul:

<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00"></body>

Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.

3.3: Folosirea unei imagini ca fond pentru pagina (background)

Elementul body ofera posibilitatea înlocuiri fondului paginii cu o imagine (Background image). Daca imaginea este mai mica decat dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi întreg cadru documentului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului.

EX de cod HTML cu imagine pentru background este urmatorul:

<body background="imagine.gif" bgcolor="#ffffff"></body>

In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine.gif" si de asemenea am setat BGCOLOR astfel incat in timpul procesului de încarcare a imaginii culoarea fondului va fi alba.

Dupa ce ai 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".

Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alege 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, Google Chrome). Sau deschide browser-ul si din comanda Open deschide documentul pe care l-ati salvat.

Pentru a continua munca, 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.

Daca va place voi continua .

Link to comment
Share on other sites

http://www.marplo.net/html/crearea_pagini.html

Oricum era bine sa vorbesti despre standarde, versiuni, diferente intre html4 si html5, si poate te lua lumea in serios. Oricat de jos cred unii ca a ajuns nivelul de cunostinte al comunitatii totusi, pentru multi, html(4) e banal.

Nu o lua personal :)

Link to comment
Share on other sites

http://www.marplo.net/html/crearea_pagini.html

Oricum era bine sa vorbesti despre standarde, versiuni, diferente intre html4 si html5, si poate te lua lumea in serios. Oricat de jos cred unii ca a ajuns nivelul de cunostinte al comunitatii totusi, pentru multi, html(4) e banal.

Nu o lua personal :)

Nu o iau personal , de asta i'am si zis sa dea un search , eram sigur ca gaseste sursa :)

Daca este vreo problema ca nu am pus sursa ok , data viitoare o voi pune .

EDIT : Ai spus bine " pentru multi " , nu pentru toti , deci este bun un tutorial ca acesta .

In search on forum nu am gasit nimic asemanator , deci am decis sa il pun .

Edited by cyber_cobra
Link to comment
Share on other sites

Apreciem tutorialele totusi una din regulile forumului este ca atunci cand copiezi/traduci/adaptezi/te inspiri din alt tutorial sa postezi sursa/sursele.

In cazul in care nu le-ai citit deja, iti sugerez sa treci pe aici si sa iei aminte la ele deoarece nerespectarea lor va aduce sanctiuni.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...