HTML en clase

Aqui vamos ha realizar un repaso sobre los puntos vistos en clase sobre este lenguaje de marcado.

Para empezar ¿Qué es HTML?

Html es un lenguaje de marcado que sirve para etiqueta la información que nos va a mostrar el navegador y le indica al navegador como mostrar en función de la etiqueta que lleve el contenido.

Dentro del contenido visto en clase veremos lo más relevante y que siempre debería estar presente en una página web.

Se iran poniendo las explicaciones con unas imagenes y con cada etiqueta.

Todas las etiquetas HTML se abren y se cierran del siguiente modo <p></p> exceptuando aquellas que no tengan contenido en su interior (una imagen no contiene nada más que la imagen con lo cual se puede cerrar de la siguiente manera <img src="" />).

Etiqueta HTML

Etiqueta HEAD

Etiqueta BODY

 

Etiqueta META

Esta etiqueta le da información a los navegador y motores de busqueda referente a la página web (en la imagen superior le estamos diciendo que la página esta codificada en un juego de caracteres unicode).

Tenemos más tipos de meta como pueden ser (<meta name='keywords'>) para decirle a los motores de busqueda con que palabra clave deben referenciar a la página en cuestión.

(<meta name='author'>) hace referencia al autor de la página en las busquedas por ejemplo en google.

Hay muchas otras pero que ahora mismo no soy capaz de recordar, para más información podeis consultar en la w3schools.

Etiquetas de estilo

 

En la etiqueta link el parametro rel[especifica que es una hoja de estilo] el type[que es un archivo de texto tipo css] y href[la ruta donde esta el stilo.css para darle formato a la página web].

Etiquetas básicas dentro del BODY

Paso a detallarlas un poco aquí ya que en si tienen mucho.

header[

Es la cabecera de la página que el usuario puede visualizar (no confundir con head).

]

nav[

Introducida en HTML5 para indicar al navegador (sobre todo para aparatos para personas discapacitadas con problemas visuales) cual es el menú de navegación de la página.

]

footer[

Es el pie de página

]

p[

Es la etiqueta que se necesita para delimitar un parrafo

]

h1 a h6[

Son encabezados o titulos que hacen referencia al contenido del apartado, se clasifican por orden de importancia donde h1 es el más importante y h6 el menos importante

]

ul[
es el comienzo de una lista desordenada dentro del ul se introduce li que seria los apartados que tiene esa lista.

Ejemplo de lista desordenada

• Esto
• Es
• Una
• Lista
• Desordenada

Cada punto representa un <li></li> dentro del ul.
]

ol[
Es otro tipo de lista pero esta es ordenada (númerada) de forma que cada número de la lista representa un <li></li> dentro del ol

Ejemplo de lista ordenada

1. Esto
2. Es 
3. Una
4. Lista
5. Ordenada

]

form[
Es la etiqueta para añadir un formulario en el cual tenemos más etiquetas, nombrare las más usadas.

input type="text" -> Se emplea para escribir texto por ejemplo el nombre de usuario en un inicio de sesión.

input type="email" -> introducido hace poco en HTML5 comprueba que el email introducido es valido (con una funcion determina si los caracteres antes y después del @ son validos).

input type="password" -> es lo mismo que type text con la peculiaridad que el texto esta oculto se utiliza como bien pone para contraseñas.

label[
Esta se utiliza para etiqueta el elemento con el que viaja por ejemplo el campo de nombre de usuario tendria la etiqueta <label>Nombre de usuario</label> asociada.
]

select[
el select es un selector de varias opciones cada opción dentro del select se define con un option.
]

input type="checkbox" es un campo de verificación (tipico al aceptar los terminos y condiciones de las páginas).

input type="radio" es similar al check-box con la diferencia que este solo se puede seleccionar uno entre todas las opciones que se tengan mientras que el check box puedes seleccionar tantas como opciones tengas.

textarea[
Es un area de texto en el cual podemos escribir, es similar al input text pero la forma de escritura es más comoda ya que se visualiza el texto completo escrito
]

input type="submit" es el botón para enviar el formulario una vez que se han completado los campos a insertar.
]

table[
son las tablas de HTML con ellas podemos estructurar datos (antes se utilizaban para maquetar las webs pero desde que se intentar hacer accesibles el uso de las tablas a quedado relegado a presentar datos en pantalla.

Dentro de las tablas tenemos las filas y columnas que cada cosa tiene su etiqueta.
tr[
La etiqueta TR se utiliza para definir las filas de la tabla
]
td[
Son las columnas de la tabla
]
th[
son las columnas en forma de titulo o encabezado de la tabla
]

]

div[
El div es una etiqueta que separa la web en capas sirve para separar el contenido uno de otro, no tiene un sentido como el p para parrafo o el h1 para el titulo simplemente sirve para ordenar los elementos.

Actualmente se usa para maquetar las páginas web.
]

Quedan muchas cosas más por ver pero las más usadas ya han sido mencionadas para más información dejo unos enlaces de interes sobre el tema haciendo referencia a la w3school y a otras páginas con muy buena información.

Desarrollo web
ComoCrearTuWeb
Foros del web
Maestros del web
W3schools
W3
(validador de codigo html)