Diario IFCD0110 Castro Urdiales: ESTRUCTURA DE UNA PAGINA WEB I MF0950_2/MF0950

MF0950_2: Construcción de páginas web.

● UF1302: Creación de páginas web con el lenguaje de marcas.

Conceptos básicos

Toda página escrita en formato HTML5 tiene una estructura dividida en dos partes que son head o la cabecera y body o cuerpo. Debido al lenguaje HTML y para que todo tenga sentido y aparezca como pretendemos, debe estar colocado en secciones. Esta sería la estructura básica que ahora procederemos a explicar.

Aquellas palabras o letras que están entre corchetes <> se denominan etiquetas e indican dónde empieza y acaba cada sección, siendo aquellos que poseen una barra diagonal / los que indican dónde termina cada sección.

Resumiendo:

<html> indica lo que viene a continuación

<head> indica dónde empieza la cabecera

<body> indica dónde empieza el cuerpo

</head> indica dónde termina la cabecera

</body> indica dónde termina el cuerpo

</html> indica dónde finaliza el html

Podemos observar además que están colocadas a diferentes alturas, esto indica que unas están dentro de otras, como en un esquema. Vamos a simplificarlo de forma más visual:

Por supuesto, para que tenga sentido este esquema, no podemos poner la finalización de la cabecera después del comienzo del cuerpo, sólo tendrá sentido si ponemos la finalización antes del cuerpo y del final del html.

Para ver algo más visible, vamos a añadir un poco de color, o más bien a cambiar el color de fondo ya que se quedará blanco por defecto si no especificamos ninguno, para ello, necesitaremos otra etiqueta como por ejemplo ésta:

</body>

Vamos a analizarlo:

Hemos colocado en la etiqueta del body este código bgcolor="código del color", ésto significa que le estamos dando cierto color concreto al fondo ya que esta sección donde está escrito código del color, realmente sería sustituida por un código puesto que todos los colores tienen el suyo para distinguir las distintas tonalidades. Vamos a poner un ejemplo de código de color: #A901DB0

Después de aclarado ésto y por entender que significa bgcolor, sería una abreviación del inglés background color, que significa color de fondo.

Ahora bien, un detalle importante para sabes es que podemos obtener el código html de la página que queramos

Tipo de documento

Ahora bien, hay que tener en cuenta que el navegador debe entender qué tipo de documento es éste a pesar de que ésto no vaya a ser visible en la página para los usuarios. Esta línea debe ser la primera del html, antes incluso de su etiqueta.

<!DOCTYPE html> ésta es la etiqueta que indica al navegador qué tipo de documento le estamos presentando, ésto funcionará correctamente siempre y cuando el archivo esté guardado en formato html.

Quedaría así:

<!DOCTYPE html>

Especificar el idioma

Para seguir comunicándonos adecuadamente con la web, debemos indicar en qué lenguaje vamos a escribir.

La etiqueta concreta para escribir en español sería ésta.

<html lang="es">

en este caso lang es una abreviación de la palabra inglesa languaje que significa idioma.

Es importante saber que no se pueden indicar varios idiomas de una misma página. Si necesitas una página en varios idiomas has de crear una página para cada idioma, si es posible en un dominio con la extensión correspondiente. Si no fuera posible, habrá que hacer un subdominio del dominio. No se debería hacer en una carpeta aparte ni en la misma carpeta en la que esté la versión del idioma principal. Un ejemplo de subdominio sería éste: it.conocetuweb.com el cuál nos indica que posee traducción italiana. Ésta es una buena opción si no quieres comprar un dominio para cada idioma.

El código entonces quedaría así:

<!DOCTYPE html>
<html lang="es">
 <head>
 </head>
 <body>
 </body>
</html>

Título o title

Hay unos cuantos elementos que no se ven directamente en el contenido de las páginas, como el title o título definido en la cabecera (<title> y </title>)
Ejemplo:

<!DOCTYPE html>
<html lang="es">
 <head>
 <title>Título de esta página</title>
 </head>
 <body>
 </body>
</html>

Lo que escribas entre las etiquetas de <title> será lo que va a aparecer en la barra que hay en la parte superior de los navegadores, pero no aparece dentro de la ventana del navegador, sólo en esta barra. Sirven para indicar al visitante lo que va a encontrar en esta página y también a los buscadores para saber de qué hablas en ella. Por lo tanto, es muy importante que el título de cada una de las páginas de la web creada sea distinto. Como varias páginas tengan el mismo título, los navegadores creerán que tienes varias páginas idénticas, de modo que sólo harán caso a una de ellas. Procura también que entre las palabras del título aparezcan las palabras clave de la página para ser encontrado por alguien que esté usando google y escriba dichas palabras. Se recomienda que el contenido del title no tenga más de 65 letras o caracteres ni más de 15 palabras.

Etiqueta meta description en html5

Hay otro tipo de etiqueta, aquella referente a la descripción, que también es importante. Sería:

Actualmente los buscadores sólo hacen caso de las meta etiquetas title y description, por lo que no se necesita otra. Es importante recordar que el contenido de estas dos etiquetas ha de ser diferente en cada una de las páginas. Si tienes dos title y dos description idénticos en dos o más páginas dentro de tu web, google las tomará como copias y sólo indexará una de ellas, perdiendo posibilidades de ser encontrado por los usuarios.

El contenido dentro de esta etiqueta no debe tener más de 150 caracteres ni más de 30 palabras.

Tipos de codificación

Para escribir en un idioma y evitar que aparezcan símbolos raros (que indican que no son interpretados correctamente) tenemos que añadir una línea que indique ese tipo de codificación. Como esto es algo que no se ve directamente en el navegador, sino que es un tipo de definición, esta parte deberá ir en la cabecera. La línea para que los caracteres en castellano aparezcan bien en los navegadores cuando se escribe código html5 sería ésta:

<meta charset="utf-8" />

Esta línea deberá ir en todas las páginas de nuestra web.
Ésta etiqueta empieza por la palabra meta y no tiene etiqueta de cierre (no se pone </meta> al final de la línea). En el caso de que una etiqueta no use su correspondiente de cierre, se coloca en su lugar una barra al final de la línea de apertura. Otra etiqueta que no tiene este cierre es la de imagen.
Cuando vayamos a guardar un archivo, tenemos que asegurarnos que hemos especificado este código, si no, se guardará con otro por defecto. Nuestro documento quedaría así:

<!DOCTYPE html>
<html lang="es">
 <head>
 <meta charset="utf-8" />
 <title>Título de esta página</title>
 </head>
 <body>
 </body>
</html>

Recuerda que la línea que especifica el charset="utf-8" tiene que ser la primera línea que haya justo después de <head>, en caso contrario podría no ser leída por los navegadores. Debe estar dentro de los primeros 512 caracteres del archivo.

Párrafos

Lo más básico que podemos insertar en nuestra nueva página aún en blanco, son palabras. Casi todos los elementos visibles irán dentro del body. Existen otras cosas que no son "visibles" y éstas irán en head principalmente. La línea que vimos para especificar el tipo de codificación no es algo visible, mientras un párrafo que intenta transmitir algo a los visitantes, obviamente sí que es visible.

Para escribir un párrafo, lo haremos en el body (o zona visible) encerrando lo que queremos escribir entre los símbolos y que son las etiquetas para escribir párrafos. Para que ésta línea fuese visible, deberíamos colocarla entre <body> y </body>. Como por ejemplo:

<!DOCTYPE html>
<html lang="es">
 <head>
 <meta charset="utf-8" />
 <title>Mi Nueva Web</title>
 </head>
 <body>
 Hola amigos, esta es mi nueva Web
 </body>
</html>

Para otro párrafo, sólo hay que colocar otra línea antes o después de la que hemos escrito según dónde queramos que quede escrita.

Resaltar textos

Con ésto ya sabemos colocar textos simples, pero si en algún momento preferimos escribir texto en negrita o subrayado o cursiva etc tendremos que tener en cuenta otras etiquetas o tags. Si encerramos un texto entre y éste aparecerá en negrita. El tag representa la propiedad "bold" que significa negrita. Podemos aplicar a la vez los tags , y cualquiera de los que explicaremos. Como por ejemplo:

Este párrafo es normal y esta palabra va en negrita, lo ves?

Si encerramos un texto entre y éste aparecerá en cursiva. El tag representa "italic" o cursiva. Como ejemplo tendríamos:

Este párrafo es normal y esta palabra va en cursiva, lo ves?

Si encerramos un texto entre y éste aparecerá subrayado ya que este tag significa "underline". Vamos a poner otro ejemplo de esto:

Este párrafo tiene un trozo subrayado. Te gusta?

Aunque podamos combinar todo esto, hay que tener en cuenta que no podemos cerrar una etiqueta fuera de aquella que la contiene. También que todas las etiquetas deben cerrarse siempre, a parte, pueden escribirse en mayúsculas o minúsculas sin ningún problema.

Diario IFCD0110 Castro Urdiales

menu desplegable

jueves, 5 de junio de 2014

ESTRUCTURA DE UNA PAGINA WEB I MF0950_2/MF0950_2