[Premiera!!!!]Introducere in HTML!!!

Scris de Stealch Dum Apr 03, 2011 3:53 am

Acest tutorial este Exclusiv pentru cei care vor sa faca Situri de metin2..Indexuri/situri!!!Va zic cu mana pe inima ca e Essential!!pentru un programator in devenire.
Sursa:Hectore
Fiti foarte atent si sa stiti ca nu eu st sursa da trebuia sa pun pe Games-Hit acest tutorial!!!

Pagina HTML este un fisier text salvat cu extensia .html
Un scrip HTML se poate creea astfel: Cu Notepad , se scrie scriptul HTML apoi din meniul FILE se selecteaza optiunea SAVE AS apoi la File name se scrie Index.html si se salveaza scriptul in calculator.
Pagina principala trebuie denumita Index.html
Apoi iti faci un cont pe site http://www.lx.ro sau pe http://www.hi2.ro si scriptul pe care l-ai creeat se uploadeaza pe site.
Tagurile sunt niste marcaje sau etichete pe care Limbajul HTML le foloseste alaturi de texte pentru a ajuta browserul de internet sa afiseze corect continutul pagini web.
/ ( Se numeste Slesh )
< > ( Se numesc tag-uri )
<...> este tagul de deschidere iar </...> este tagul de inchidere.
In loc de acele puncte ... se va scrie un cuvant, sa dam un exemplu: <b>Site meu</b>
<html> ( Acesta este tagul de deschidere urmat de continutul pagini tale web apoi se va inchide acest tag </html>
( Tagurile se pot scrie si cu litere mici si cu litere mari - Este recomandat ca tagurile sa fie scrise cu litere mici )
&nbsp ( Acest cuvant va fi folosit ca spatiu )
© ( Realizeaza simbolul (c) care inseamna copyright )

Tag-uri HTML:

<html> ( Se scrie la inceputul fiecarei pagini web )
</html> ( Se scrie la sfarsitul fiecarei pagini web )
<body>...</body> ( Acest tag se scrie la inceputul pagini web adica dupa tagul <html> Intre tagul <body> se va scrie continutul pagini web, apoi la sfarsit cand ai terminat de scris scriptul se inchide cu tagul </body> tot ce va fi scris dupa acest tag browserul nu va mai afisa nimic )
<title>...</title> ( Titlul pagini web, acest titlu apare sus in partea stanga a browserului )
<hn>...</hn> ( Heading - Nivel de subtitlu al documentului )
<center>...</center> ( Scrisul va fi afisat in centru )
<h1>...</h1> ( <h2> sau <h3> sau <h4> etc este dimensiunea literei care va fi dat de nr heading-ului. EX: <h2 align="center">pagina mea web </h2> Titlul apare la mijlocul pagini web )
<b>...</b> ( Stilul bold, adica ingrosat )
<small>...</small> ( Fond micsorat )
<strong>...</strong> ( Evidentiere logica puternica - asemanator cu stilul bold )
<i>...</i> ( Scris italic, adica inclinat )
<em>...</em> ( Caractere inclinate - stil logic de evidentiere )
<u>...</u> ( Scris subliniat )
<strike>...</strike> ( Stilul taiat )
<s>...</s> ( Caractere taiate )
<del>...</del> ( Text taiat cu o linie orizontala )
<sup>...</sup> ( Stilul exponent )
<sub>...</sub> ( Stilul indice )
<tt>...</tt> ( Text cu font monospatiu )
<p>...</p> ( Paragraf - Un paragraf se va alinia singur la stanga, sa dam un exemplu: <p align="center"> Paragraful va aparea in centrul pagini apoi scrii tagul de inchidere </p> )
<br> ( Linie noua - trecerea pe urmatorul rand, acest tag nu are tag de inchidere )
<head>...</head> ( Antet )
<hr> ( Linie orizontala pe toata lungimea pagini web, acest tag nu are tag de inchidere )
<font>...</font> ( Font, sa dam un exemplu: <font size=10> asta inseamna ca marimea scrisului va fi de 10 )
<big>...</big> ( Text mare )
<mic>...</mic> ( Text mic )
<img> ( Pentru a afisa o imagine - nu are tag de inchidere )
<a>...</a> ( Este folosit pt a creea un link catre un document, ex: <a href="mailto:vasy_smenaru000@yahoo.com">Send Mail </a> este un link care cand dai click pe el iti da posibilitatea sa trimiti un mail sau de exemplu: <a href="www.google.ro">Google</a> Un link, atunci cand dai click pe el te da pe site-ul http://www.google.ro )
<table>...</table> ( Este tagul care defineste un tabel - Un tabel este divizat in randuri cu ajutorul tagului <tr> si fiecare rand este impartit in celule de date cu ajutorul tagului <td> )
<thead>...</thead> ( Defineste titlul tabelului )
<tbody>...</tbody> ( Defineste corpul unui tabel )
<th>...</th> ( Defineste o celula cap de tabel )
<td>...</td> ( Defineste o celula din tabel )
<tr>...</tr> ( Defineste un rand din tabel )
<dd>...</dd> ( Definitia )
<dl>...</dl> ( Lista de definitii )
<dt>...</dt> ( Termenul definit )
<ol>...</ol> ( Lista ordonata )
<ul>...</ul> ( Lista neordonata )
<li>...</li> ( Elementul listei )
<caption>...</caption> ( Defineste un camp asociat tabelului pt introducerea unei explicatii )
<colgrup>...</colgrup> ( Defineste grupuri de coloane ale tabelului )
<col>...</col> ( Defineste valorile atributului pentru una sau mai multe coloane dintr-un tabel, <col width=x> defineste latimea unei coloane exprimata in pixeli )
<tfoot>...<tfoot> ( Defineste un subsol de tabel )
<frame>...</frame> ( Defineste o sub fereastra - un cadru, este folosit pentru a afisa mai multe documente HTML intr-o fereastra )
<frameset>...</frameset> ( Defineste un set de cadre )
<iframe>...</iframe> ( Defineste o sub fereastra inline )
<noframe>...</noframe> ( Defineste o sectiune noframei este folosit doar pentru IE )
<pre>...</pre> ( Informatie preformata )
...</!-- --> ( Comentariu HTML - Ce vei scrie aici nu va aparea pe site, aici vei scrie doar informatii de care ai tu nevoie pt a nu uita )
<cite>...</cite> ( Citat - citare bibliografica )
<code>...</code> ( Cod de computer - listing de program )
<kbd>...</kbd> ( Text de la tastatura )
<basefont>...</basefont> ( Fondul scrisului - ex: <basefont size=n> in loc de n se scrie marimea fondului din pagina )
<form>...</form> ( Formular )
<fieldset>...</fieldset> ( Imparte formularul in parti logice )
<input>...</input> ( Element sau camp al formularului - valori posibile: text, password, checkbox, hidden, file, radio, submit, reset, image )
<select>...</select> ( Grup de casete de validare - lista selectii din formular )
<option>...</option> ( Element al listei de selectii )
<textarea>...</textarea> ( Camp de intrare de tip text pe lini multiple )
<legend>...</legend> ( Numele asociat setului de campuri )
<style>...</style> ( Specifica informatii referitoare modelului de stiluri )
<script>...</script> ( Include un script de regula javascript )
<button>...</button> ( Cu acest tag poti introduce butoane pe site )
<var>...</var> ( Program sau variabila )
<!doctype>...</!doctype> ( Tipul documentului )
<area>...</area> ( Arie folosita la hartile de imagini )
<bgsound>...</bgsound> ( Adauga paginii muzica )
<div>...</div> ( Formateaza un sir de caractere )
<link>...</link> ( Link - legatura )
<meta>...</meta> ( Meta informatii despre pagina )
<samp>...<.samp> ( Monstra de cod )
<span>...</span> ( Formateaza mai multe elemente )
<embed>...</embed> ( Este folosit pentru a adauga sunete si videoclipuri )
<marquee>...</marquee> ( Cand folosesti acest tag scrisul se va plimba de la dreapta la stanga )

Atributele:
Atributele pot fi definite ca niste propietati ale tagurilor :

type ( Optiune )
action ( Precizeaza ce se va intampla cu datele formularului, se foloseste impreuna cu tagul <form> )
method ( Metoda utilizata pt expedierea datelor formularului, modul in care datele sunt transmise serverului GET sau POST - se foloseste impreuna cu tagul <form> )
get ( Datele din formular sunt adaugate la adresa URL precizata de atributul action, se foloseste impreuna cu tagul <form> )
post ( Datele sunt expediate separat, se foloseste impreuna cu tagul <form> )
submit ( Trimite )
reset ( Sterge )
checkbox ( Caseta de validare )
button ( Buton )
radio ( Selectarea unui singur element dintr-un grup )
file ( Fisier pt upload )
image ( Butonul va fi inlocuit cu o imagine )
name ( Numele asociat campului respectiv )
value ( Valoarea continutului prestabilit al campului de text - se foloseste impreuna cu tagul <form> )
checked ( Optiune buton/caseta marcata in mod prestabilit - se foloseste impreuna cu tagul <form> )
size ( Numar de caractere, dimensiune in unele cazuri se foloseste pentru inaltimea riglei, EX: size=n dimensiunea textului este 1-7, n este marimea cuprinsa intre 1 si 7 )
maxlenght ( Numar maxim de caractere )
readonly ( Datele prezentate in camp nu pot fi modificate )
color=s ( Culoare textului, in loc de s se scrie codul culorii care se foloseste in general cu tagul <font> sa dam un exemplu: <font color="cod culoare"> culoarea selectata va fi culoare scrisului )
align=x ( Alinierea stanga, dreapta sau in centru - in loc de x scrii left, right sau center )
multiple=x ( Permite selectia unor articole de meniuri multiple - se foloseste impreuna cu tagul <select> )
center ( Inseamna in centrul pagini )
left ( Inseamna in stanga pagini )
right ( Inseamna in dreapta pagini )
De exemplu in loc de cuvantul "center" se poate pune left sau right atunci cuvantul va aparea in stanga sau dreapta pagini web.
bgcolor ( Se foloseste in general cu tagul <body> sa dam un ex: <body bgcolor="#FF9900"> codul #FF9900 este codul culorii portocalii asa va fi fondul pagini tale web )
background ( Inseamna imaginea de fundal, imaginea de fundal se foloseste impreuna cu tagul <body> )
text ( Culoarea textului pe pagini - se foloseste in general cu tagul <body> )
link ( Culoarea legaturilor nevizitate din pagini - se foloseste in general cu tagul <body> )
vlink ( Culoarea legaturiilor vizitate din pagini - se foloseste in general cu tagul <body> )
alink ( Culoarea legaturiilor pe durata clickului executat de utilizator - se foloseste in general cu tagul <body> )
width=x ( Latimea riglei in pixeli sau in procente - se foloseste in general cu tagul <hr> )
noshade ( Dezactiveaza afisarea umbrei pentru rigla orizontala - se foloseste in general cu tagul <hr> )
top ( Sus - este folosit in general cu tagul <img> )
middle ( In mijloc - este folosit in general cu tagul <img> )
botton ( Jos - este folosit in general cu tagul <img>)
height=x ( Inaltimea imaginii in pixeli - este folosit in general cu tagul <img> )
width=x ( Latimea imaginii )
border=x ( Chenarul din jurul imagini - este folosit in general cu tagul <img> )
hspace=x ( Spatiul suplimentar pe orizontala in jurul imagini, in pixeli - este folosit in general cu tagul <img> )
vspace=x ( Spatiul suplimentar pe verticala din jurul imagini, in pixeli - este folosit in general cu tagul <img> )
rows=x ( Numarul de linii al casetei de text - se foloseste in general cu tagul <textarea> )
cols=x ( Numarul de coloane, caractere pe linie al casetei de text - se foloseste in general cu tagul <textarea> )
tabindex=x ( Specifica ordinea elementelor atunci cand utilizatorul apasa tasta TAB - se foloseste in general cu tagul <legend> )
language ( Limbaj, limbajul utilizat - se foloseste in general cu tagul <script> )
event ( Eveniment care declanseaza executia unor scripturi specifice - se foloseste in general cu tagul <script> )
for ( Numele obiectului din pagina caruia actioneaza scriptul - se foloseste in general cu tagul <script> )
Comenzile submit, reset, checkbox, button, radio, file, image, name, size, maxlenght, readonly, se folosesc de obicei cu tagul <input> adica <input type="... ..." in loc de aceste puncte .. .. se scrie una dintre comenzi ex: <input type="submit"> .