<!DOCTYPE html>
// Doctype es sumament important per a que els navegadors
// interpretiguen com a codi actual la pagina web
<h1>
// existixen 6 tipos de headers <h1...h6>// Estes nomes han de tindre tituls i subtituls de seccions
// Aquesta informacio es indexada per els buscadors
<h1> Soc un titul</h1>
<p>
// per a fer punt i a part a un parraf lo correcte es afegir// un altre parraf.
<p> Hola don pepito </p>.
<p> Hola don Jose </p>
<hr>
// Genera un separador com una linea negra<!-- Comentaris -->
// Comenta texte o informacio, es multilina.// El contingut dels comentaris es pot revisar desde la consola
// de inspeccio de chrome, mozilla, etc.
<span>
// serveix per a referenciar texte dins de altres etiquetes.// span indexa informacio als buscadors.
// Podem remarcar visualment sempre podem afegirli un
// primer style:
<p>
Hola mon que tal, aqui tenim un
<span style="color:blue"> Misatge remarcat <span>
Per a que els indexadors de informaico ho troben millor
</p>
<br>
// Genera un salt de linea, aquest pot estar dins de un <p>// o fora com un element mes.
<a href="">
// ancla un link cap a una direccio<a href="www.eric-sama.com"> mi web </a>
// obri una nova pestaña a la direccio
<a href="www.eric-sama.com" target="_blank"> mi web </a>
<img>
// Adereix una imatge, podem generar un tag autotancat<img src="ruta/directori/image.png" />
// Podem modificar les propietats de altura i amplada juntament
// nomes modificant una de les dos propietats "widht o height"
// Mantenint una correlacio amb les mides de la imatge o
// deformarla aplicant noves normes de visualitzacio
// Correlacional amplada x altura
<img src="ruta/directori/image.png" widht="400"/>
// Deformada amplada x altura
<img src="ruta/directori/image.png" widht="400" height="100"/>
<form action="/formulario" method="">
// Dins de form introduirem etiquetes per a recaudar informacio// del usuari
// action = equival a la accio que fara cuan donesem a submit
// metod = Existeixen 2 metodes:
// GET envia el valor dels camps a trabes de la URL fins a 256 caracters url
// POST no es segur com get, nomes enviara les dades ala cabecera.
// LA FORMA CORRECTA DE ENVIAR INFORMACIO ES AMB CERTIFICATS
Etiquetes internes form:
<label for="nombre">nombre</label>
// for="id" permet que al fer click s'active la entrada
<input type="text" id="nombre" name="" placeholder="Nombre"/>
// input corresponent.
// type="" Y han diferents typus de entrades, per defecte es text
// submit = botton
// email = espera un valor imail,
// password = oculta lo que entra
// radio = es transforma en un botto de radio
// checkbox = casilla clickeable
// file = espera que ingreses un archiu
//
// name="" la propietat de name el servidor interpretara un
// objecte de formulari, en forma de clau,
// i un valor de contingut
//
// placeholder="" es una forma similar a lavel, on ens indicara
// el valor a contindre de una manera suau i desapareixera
// al fer click
<label for="nombre">comentario</label>
<textarea rows="10" cols="50" id="comentario" placeholder="Ingrese comentario" name="comentario"></textarea>
// textarea ens permet la entrada de un text.
// rows="" Numero de files
// cols="" Numero de columnes
<input type="submit" />
// submit genera un boto
// Aquest boto agarrara totes les entrades i les enviara al servidor
<button type="button/resset/submit">Enviar</enviar>
// button = sera nomes un boto al cual aurem de
// especificar amb js el comportament que tindra
//
// resset = resetejara els valors predeterminadament
//
// submit = enviara el contingut del formulari
// la targeta button es mol mes personaliitzable que input
<ul>
// agregar una llista no ordenada
<ul>
<li>element1</li>
<li>element1</li>
<li>element1</li>
</ul>
<ol>
// agrega una llista ordenada
<ol>
<li value="50">element1</li>
// comensaria a llistar a partir del 50
<li>element1</li>
<li>element1</li>
<ol>
<li style="list-style-type: lower alpha";>element1</li>
// Style predefinit de llistat
<li>element1</li>
<li>element1</li>
</ol>
</ol>
<table style="width: 500px;" >
//agrega una tabla amb una amplada de 500px<table>
<thead>
// Iniciem la capçalera o el tituls de les collumntes
<tr>
<th<Producto</th>
<th>Precio</th>
</tr>
</thead>
<thbody>
// Inscertem els productes
<tr>
<td>HolaMon</td>
<td>Gratis</td>
</tr>
<tr>
<td>Ganchitos</td>
<td>1€</td>
</tr>
<tr>
<td>Gachito feliz muy feliz</td>
<td>99.99$</td>
</tr>
</thbody>
<tfoot>
<td></td>
<td>total: 59$</td>
</tfoot>
</table>
<style>
border: 1px solid black;
}
</style>
DIVISORS
// Hi ha diverses maneres de agrupar en box o grup als elements// de la nostra pagina web.
<div>
// es una divisio amb contingut, comunment s'han anat// anidant divs dins de divs pero a la practica es engorros
// google premia els divs sense anidar
<p> Este es un parraf </p>
</div>
<secction>
// es una seccio amb contingut// Esta etiqueta actua igual que div pero diversifica el lexic
// Permetent un ordre visual mes correcte
<p> Este es un parraf </p>
</seccion>
<p> Este es un parraf </p>
</seccion>
<article>
// es un objecte per a crear articles.// <p><img><a>...
<p> Este es un parraf </p>
</seccion>
<p> Este es un parraf </p>
<p> Este es un parraf </p>
<p> Este es un parraf </p>
</seccion>
Altres atributs
//id="" La id es unica i no es pot repetir
//class="" La class pot ser compartida per diferents elements
//
// Estos 2 atributs serviexen per despres ser cridades per
// JS o CSS.
FUNCIONALITATS EXTRES
CREAR REFERENCIES DEXPLORACIO DINS LA WEB
<a href="#titulo">Ens mourem dins la pagina fins a titul</a>// ES IMPORTANT DECLARAR EL ATRIBUT ID AMB EL VALOR TITUL