Introducción HTML5 y etiquetas basicas

Introducción HTML5

HTML (Hypertext Markup Language) es un lenguaje de marcado (que no es lo mismo que un lenguaje de programacion) que sirve para definir la estructura y la semantica de nuestra página web.

HTML fue creado y es mantenido por una organizacion sin animo de lucro llamada W3C. El W3C es un consorcio formado por mas de 400 empresas (entre ellas las que desarrollan los principales navegadores como Google, Microsoft, Mozilla, Apple...), etc.

A lo largo de los años HTML ha evolucionado: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. con el objetivo de adaptarse a los nuevos tiempos y asi dar soporte a nuevas necesidades (estandarizacion de los sitemas de audio, video, etc).

Aqui una breve introduccion al funcionamiento de la interfaz:





1. Permite navegar entre las diferentes lecciones
2. Permite navegar entre los diferentes Snippets
3. Ejemplo de codigo HTML (con la sintaxis resaltada)
4. Resultado del codigo (3) en embebido en la pagina
5. Nos permite abrir la previsualizacion a pantalla completa.
6. Nos permite usar el editor web codepen.io, un editor bastante popular para experimentar con el codigo.
7 Enlace a los issues de Github donde podremos publicar cualquier duda o problema sobre los ejemplos.

Etiquetas

En el ultimo estandar de HTML (HTML5) existen mas de 100 elementos que nos permitiran crear etiquetas.
Lo primero es saber que las etiquetas solo pueden ser de dos tipos:

1) Las que tienen una apertura y un cierre como en el siguiente caso:

<elemento atributo="valor">contenido</elemento>
por ejemplo
<a href="http://www.google.com">Google</a>

En este caso decimos que: "tenemos un elemento a donde el valor del atributo href es http://www.google.com, y que su contenido es Google". No hace falta que te preocupes aun por el significado, luego haremos incapie en esto.

Si nos fijamos las etiquetas siempre estan contenidas entre los simbolos < >, y el cierre solo incluye el nombre del elemento precedido de una barra lateral "/" (p.e. </elemento>).

2) Por otro lado estan los elementos auto-contenidos (los que no se cierran explicitamente):

<elemento atributo="valor">

por ejemplo:

<img src="html-css-js.png" alt="Logotipos de HTML5, CSS3 y JavaScript">

Es importante destacar que el atributo y el valor son opcionales.

Aqui algunos ejemplos de nombres de etiquetas>
-elemento: html, head, meta, title, body, img...
-atributo: charset, src, alt, ...
-valor UTF-8, "url" (la URL a un recurso), "texto", ...

Etiquetas basicas

Por ultima en esta ultima leccion vamos a aprender el significado de ocho de las etiquetas que son mas frecuencia tendremos que usar cuando creemos paginas web:

<p></p>: representa un parrafo.

<br>: representa un salto de linea.

<h1></h1>: esta etiqueta se utiliza para representar el encabezado de una pagina, como si fuera el indice de un libro. Puede variar desde 1 hasta 6 diferenciar subniveles.

<ul></ul>: representa una lista de elementos, donde el orden de los elementos no es importante - esto quiere decir que el cambio del orden no modifica su significado.

<ol></ol>: representa una lista de elementos, donde el orden de los elementos si es importante - esto quiere decir que el cambio del orden modifica el significado.

<li></li>> representa un elemento de la lista y su padre siempre tiene que ser una etiqueta ol o ul.

<strong></strong>: represneta algo muy importante, serio (para avisos o precauciones) o urgente (que debe ser leido antes).

<em></em> sirve para enfatizar en el contenido.

<!-- -->: se utiliza para añadir comentarios dentro del codigo que el usuario no podra ver. Por ejemplo para añadir notas de tareas pendientes, aclaraciones que nos ayuden a nosotros o a otras personas a entender el codigo, etc.

TRUCO: para que recuerdes mejor que significa cada elemento, las etiquetas piensa en los acronimos en ingles:

h1=heading1; h2=heading 2; ...
p=paragraph
br=break line
ul=unodered list
ol=ordered list
li=list item
em=empashis

el siguiente ejemplo muestra una pagina web que combina todas ellas:





Esto generaria lo siguiente:


Es importante destacar que aunque el navegador le añade un estilo (CSS) por defecto a las etiquetas,
por ejemplo:
h1 y h2 una fuente mayor y negrita
strong en negrita
ul y ol con un marguen a la izquierda y un punto o numero respectivamente
em en cursiva

Comentarios

Publicar un comentario

Entradas populares de este blog

2.1.1 Estructura de Memoria y Procesos de la Instancia Introducción

Imagen
2.1.1 Estructura de Memoria y Procesos de la Instancia Introducción Oracle utiliza la memoria para almacenar la siguiente información: 1. Código del programa 2. Información acerca de una sesión conectada, incluso si no se encuentra activa. 3. Información necesaria durante la ejecución del programa(por ejemplo, el estado de las consultas) 4. La información que comparten y con la cual se comunican los procesos Oracle (por ejemplo, la información de bloqueo) 5. La Caché de Datos 6. La memoria se puede estructurar en las siguientes partes: 7. Área Global del sistema (SGA), la cual se comparte entre todos los servidores y los procesos en segundo plano. 8. Áreas globales de programas (PGA), que es privada para cada servidor y proceso en segundo planos; a cada proceso se asigna un PGA. 9. Área de Ordenaciones (Sort Areas). 10. Memoria Virtual 11. Área de código de Software (SCA). Figura 2. Estructura de una instancia de Oracle La Instancia y la Base de Datos ...
Leer más

2.1.7 Procedimiento para configuración de un DBMS

Imagen
2.1.7 Procedimiento para configuración de un DBMS Para configurar nuestro DBMS podemos acceder a las siguientes pantallas, para Oracle o MySQL. El esquema de una base de datos (en inglés, DatabaseSchema) describe la estructura de una Base de datos, en un lenguaje formal soportado por un Sistema administrador de Base de datos (DBMS). En una Base de datos Relacional, el Esquema define sus tablas, sus campos en cada tabla y las relaciones entre cada campo y cada tabla. Oracle generalmente asocia un 'username' como esquemas en este caso SYSTEM y HR (Recursos humanos). Por otro lado MySQL presenta dos esquemas information_schema y MySQL ambos guardan información sobre privilegios y procedimientos del gestor y no deben ser elimandos. Optamos por Detailed Configuration, de modo que se optimice la configuración del servidorMySQL. Ha llegado un momento crucial. Dependiendo del uso que vayamos a darle a nuestro servidor deberemos elegir una opción u otra, cada una con...
Leer más

2.1.4 Instalación del software de Base Datos en modo transaccional

Imagen
2.1.4 Instalación del software de Base Datos en modo transaccional Debido al constante crecimiento de datos que generan las empresas hoy en día, se ha vuelto muy necesaria la búsqueda de nuevas plataformas para almacenar y analizar la información, ambientes que consuman menos recursos, que sean más escalables y que provean una alta disponibilidad. La solución consiste en el procesamiento paralelo de los datos de una base de datos. Una base de datos en modo transaccional significa que la BD será capaz de que las operaciones de inserción y actualización se hagan dentro de una transacción, es un componente que procesa información descomponiéndola de forma unitaria en operaciones indivisibles, llamadas transacciones, esto quiere decir que todas las operaciones se realizan o no, si sucede algún error en la operación se omite todo el proceso de modificación de la base de datos, si no sucede ningún error se hacen toda la operación con éxito. Una transacción es un conjunto de líneas de un...
Leer más