Structura HTML 5 Sublimetext

Invata HTML de la zero

Daca doresti, se poate invata HTML de la zero in mod lejer 4 saptamani, iar daca ai la dispozitie mult timp si multa ambitie atunci ajunge sa aloci un weekend. 

Am creat o lista pentru tine cu cele mai importante capitole din HTML, dar asta nu inseamna ca este de ajuns. Iti recomand si ordinea in care trebuie sa inveti. Mai mult am trecut si timp estimativ pentru a invata capitolele din HTML.

1. Structura HTML 5

Structura unui HTML 5. Continutul paginii se va insera in eticheta <body>.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Structura fisier HTML5</title>
</head>

<body>
	<header>
           Antet
	</header>

	<section>

		Continut
	</section>

	<aside>
		Panoul din dreapta
	</aside>

	<footer>
		<p>Copyright - Numele tau</p>
	</footer>

</body>

</html>

2. Formatare text in HTML

Cele mai populare etichete pentru formatarea textului sunt:

  • <b>Text bolduit</b>
  • <em>Text italic</em>
  • <u>Text subliniat</u>

3. Linkuri in HTML

Presupun ca ti-ai creat 2-3 pagini HTML.  Fie de exemplu: home.html, pagina1.html si pagina2.html . Pentru a avea cate un link in home.html catre cele doua pagini html vom folosi eticheta <a> .

<a href="pagina1.html"> Pagina 1</a>
<a href="pagina2.html"> Pagina 2</a>

4. Imagini

Inserarea imaginilor in fisier HTML se face utilizand eticheta <img>. De exemplu ai o poza in aceeasi folder cu fisierul HTML, care se numeste poza.jpg .  Codul pentru a insera imaginea este urmatorul:

<img src="poza.jpg" />

5. Tabele

Eticheta <table> pentru tabele se foloseste tot mai rar, de cativa ani buni se va lucreaza cu <div> sau lista <ul> sau <ol> .

Pentru a defini o tabela se va utiliza eticheta <table>, pentru crearea unui rand nou eticheta <tr>, iar pentru coloane <td>. Daca un rand din tabela are o singura coloana se scrie si eticheta <td> .

Exemplu: un tabel cu 2 randuri si 2 coloane.

<table>
<tr>
    <td> Linia 1 coloana 1</td>
    <td> Linia 1 coloana 2</td>
</tr>
<tr>
    <td> Linia 2 coloana 1</td>
    <td> Linia 2 coloana 2</td>
</tr>
</table>

6. Liste

Exista doua tipuri de liste: lista ordonate folosind <ol> si liste neordonate folosind <ul>. Pentru a defini elementele listei se va folosi eticheta <li> indiferent ca lista este ordonata sau nu.

Exemplu lista cu limbaje:


<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>Javascript</li>
</ul>

7. Divuri

Etichetele <div> sunt elemente bloc care delimiteaza zone in pagina HTML.   Pentru a crea 3 zone in fisier HTML poti utiliza urmatorul exemplu:

<div>Zona 1</div>
<div>Zona 2</div>
<div>Zona 3</div>

Bineinteles Zona1 poate sa fie headerul, Zona2 continutul si Zona3 footerul.

8. Layout

Layoutul este structura fisierului nostru HTML impartita pe zone. Se poate folosi pentru delimitarea zonelor atat eticheta <div> cat si eticheta <table> . Este recomanda folosirea etichetelor <div> .

9. Formulare in HTML

Formularul in HTML  este cel mai important capitol. Nu exista pagini fara un formular de logare / inregistrare sau formular contact.

Urmatorul cod creeaza un formular de contact.

<form>
    <p>Nume: <input type="text" name="nume" /></p>
    <p>Email: <input type="text" name="email" /></p>
    <p>Subiect: <input type="text" name="subiect" /></p>
    <p>Mesaj: <textarea name="mesaj" ></textarea></p>
    <p><input type="submit" value="Trimite" /></p>
</form>

Explicatii:

  • <p> este folosita pentru a delimita un paragraf ( o zona ) . Se poate folosi si eticheta <div>
  •  <input type=”text” name=”email”> este eticheta pentru camp text pe care l-am botezat „email”.
  • <textarea> este un camp mare, este folosita pentru introducerea textelor lungi.

Daca doresti sa inveti mai multe despre HTML sau sa urmezi un CURS PHP pentru incepatori  intra pe pagina de contact.

 

Anunțuri

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s