HTML (Hyper Text Markup Language) fue creado para dar estructura y contenido.
HTML: Estructura y sintaxis
Estructura básica:
doctype
html
head
body
DOCTYPE: Es usado para darle al navegador que versión de HTML va a usar el
documento.
Siempre va al inicio del documento.
No es un tag de html.
En HTML5 es siempre el mismo <!DOCTYPE html>
HTML: Va seguido del doctype.
Indica el comienzo y fin del documento.
Es el elemento raíz (root).
<!DOCTYPE html>
<html>
…
…
</html>
HEAD: Es utilizado para colocar la metadata de la página.
El título del documento.
Parte no visible de la página.
Es usado para indicar el encoding que usa la página <meta charset=”UTF-8” />
Etiquetas dentro del head
<meta name=”description” “content=””> Descripción del contenido del sitio.
<meta name=”keywords” “content=””> Palabras claves del sitio.
<title></title> Título del documento.
BODY: Es utilizado para poner todo el contenido visible de la página web.
Puede haber solo uno por archivo html.
Etiquetas dentro de body
Buenas prácticas
Todos los tags se escriben en minúscula <body>, <p>, <head>
Escribir solo un elemento por línea.
Comentarios
No se muestran en el navegador
<!-- comentario -- >
Contenedores de texto - Párrafo
Los párrafos se definen con el tag <p></p>.
Son usados para escribir texto.
No usar <br> para separar párrafos.
Encabezados - Títulos
Se definen con los tags <h1> hasta <h6>
Hay que usarlo solo para títulos.
Hay que evitar saltar niveles siempre empezar con h1, seguir con h2, etc.
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
Elementos HTML - Imágenes
Se definen con el tag <img />
Sirve para insertar una imagen.
Atributos
src: En este atributo va el link de la imagen.
alt: Este atributo se usa para poner un texto, por si la imagen no se puede mostrar.
Listas en HTML
Listas ordenadas
<ol>
<li>Elemento 1</li>
</ol>
Listas desordenadas
<ul>
<li>Elemento 1</li>
</ul>
Elementos HTML - DIV y SPAN
Son simples contenedores de HTML
Los DIV y SPAN como todos los elementos, tienen las propiedades class o id.
DIV
Es un elemento que define un bloque, generalmente para secciones largas del sitio.
Puede incluir varios elementos.
Nos ayuda a construir el layout y el diseño.
SPAN
Es un elemento “inline”.
Usado para agrupar texto, palabra o frases.
Su ancho depende del contenido que tengan.
Box model
Cada elemento en una página se representa mediante una caja rectangular.
CSS: Permite controlar el aspecto y ubicación de las cajas.
HTML: Todos los elementos HTML están presentes como cajas.
Elementos HTML - Hyperlink
Links: Los links sirven para transportarse a otro sitio.
Se define con el tag <a>
Atributos
El atributo más importante del tag <a> es el href, este atributo indica el destino del link
<a href=”www,[Link]”>Ir a google</a>
Otro atributo es target: especifica donde se va a abrir el link.
_blank: Abre en una nueva ventana.
_parent: Abre la ventana en el frame padre.
_self: Es el default (como no ponerlo) abre en la misma página.
Elementos HTML - Tablas
Las tablas se definen con el tag <table>
Las tablas se dividen en:
Filas con el tag <tr>
Celdas con el tag <td>
Dentro del tag <td> se puede colocar texto, imágenes, etc.
Podemos indicar que una fila es el encabezado de la tabla <thead>
<table>
<thead>
<tr>
<th> Mes </th>
<th> Ahorro </th>
</tr>
</thead>
</table>
Elementos HTML - Forms
Son usados para pasar información al servidor
Se utiliza el tag <form> para definirlo.
Dentro de ese tag se pueden tener diferentes tags <input>
Texto, password, checkbox, radio, botones.
Todos los input utilizan el mismo tag <input>
El atributo type es el que hace que se diferencien.
Cada tipo de input puede tener algún atributo especial:
Por ejemplo: checkbox o radio button, el atributo checked.
HTML5 - Figure & Figcaption
El elemento HTML <figure> representa contenido independiente, a menudo con un
tí[Link] bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo
general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un
esquema al que se hace referencia en el texto principal.
<figure>
<figcaption>
</figcaption> Descripción/pie de imagen.
</figure> Insertar imágenes en una noticia
HTML5 - Video
Etiquetas <video> </video>
Atributos
src
autoplay
controls
loop
poster
