Tutorial HTML - Layouts

  »   HTML  »   Tutoriale HTML - Layouts

Acesta este un exemplu simplu de cum se poate crea un layout folosind tagul div:

html<div id="my_container">
	
	<div id="my_header">
		<h1>Tutoriale HTML</h1>
	</div>
	
	<div id="my_nav">
		HTML<br>
		XHTML<br>
		CSS<br>
	</div>
	
	<div id="my_section">
		<h1>HTML</h1>
		<p>Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin HTML.</p>
		<p>Hyper Text Markup Language sau pe scurt HTML. HTML a aparut ca o modalitate de a prezenta informatia structurata pe titluri paragrafe sau blocuri de text. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS.</p>
	</div>
	
	<div id="my_footer">
		<p>Copyright tutorialehtml.com</p>
	</div>
	
</div>

Demo

Tutoriale HTML

HTML
XHTML
CSS

HTML

Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin HTML.

Hyper Text Markup Language sau pe scurt HTML. HTML a aparut ca o modalitate de a prezenta informatia structurata pe titluri paragrafe sau blocuri de text. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS.

Iata si css-ul folosit. Daca ai probleme in a intelege codul de mai jos, iti recomand sa citesti tutorialul complet css.

css<style>
	#my_header {
		background-color:#337AB7;
		color:white;
		text-align:center;
		padding:5px;
	}
	#my_nav {
		line-height:30px;
		background-color:#C0E0EE;
		height:300px;
		width:20%;
		float:left;
		padding:5px;	      
	}
	#my_section {
		width:80%;
		float:left;
		padding:10px;	 	 
	}
	#my_footer {
		background-color:#337AB7;
		color:white;
		clear:both;
		text-align:center;
	   padding:5px;	 	 
	}
</style>

Un layout asemanator se poate obtine, folosind table. Pe de alta parte un table este foarte folositor. Intr-un tabel poate fi introdus cam orice element, chiar si un alt tabel.

HTML - layout standard

Un layout standard consta intr-un banner in zona de sus a paginii un meniu in partea din stanga iar zona de continut in partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un website, iar dupa parerea mea un model foarte

html<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400">
	<tr height="50">
		<td colspan="2" bgcolor="white"> 
		
			<table title="Banner" id="banner" border="0"> 
				<tr>
					<td>Aici poti sa pui un baner, logo, etc</td>
				</tr> 
			</table>
		
		</td>
	</tr>
	<tr height="200">
		<td bgcolor="white"> 
		
			<table id="navigation" title="Navigation" border="0">
				<tr>
					<td>Link-uri!</td>
				</tr>
				<tr>
					<td>Link-uri!</td>
				</tr>
				<tr>
					<td>Link-uri!</td>
				</tr>
			</table> 
			
		</td>
		<td bgcolor="white">
			
			<table title="Content" id="content" border="0">
				<tr>
					<td>Continutul sitului va fi plasat aici</td>
				</tr> 
			</table> 
			
		</td>
	</tr>
</table>

Aceasta este o abordare de baza. Dupa cum vei observa daca vei folosi aceste layout-uri in paginile tale, va daveni foarte complex pe masura ce vei adauga continut. Cu toate acestea este important sa specifici inaltimea (height) si latimea (width). Cu cat vei fi mai specific in stabilirea acestor atribute cat si a altora cu atat mai putine bug-uri vei avea.