Estructura HTML5

Estructura básica HTML y también para el HTML5

<!doctype html> declara un documento HTML5 para que se visualice correctamente. Doctype comienza a utilizarse en HTML4.01 y XHTML, esta etiqueta será la primera en cualquier documento.

La etiqueta meta define varios tipos de metadatos. El atributo charset especifica la codificación usada en nuestra página.

<meta charset="UTF-8">

Charset utf-8 es la Unicode Transformation Format 8-bit representa el código de caracteres UNICODE. Es compatible con ASCII. Permite visualizar los caracteres de todos los idioma.

<HEAD> la cabecera, contiene información y recursos sobre el propio documento y que NO aparece en el documento. Posiblemente la úncia etiqueta que nos interesa a nosotros y que se colocará entre las etiquetas <HEAD> será <TITLE>. El contenido de la etiqueta <title> se verá en tanto en los navegadores como en los buscadores.

<BODY> El cuerpo contiene los elementos visibles en la página. Las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos…

 

Ejemplo de página básica
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Editores HTML

Editores HTML

Antes de comenzar a trabajar con un editor específico, es recomendable conocer las etiquetas básicas de código.
Podemos usar programas que trabajen con texto plano, como por ejemplo en Linux Gedit sin añadir sus propias marcas de edición, en Windows el Bloc de Notas y en Macintosh el TextEdit.
TextEdit está por defecto en Rich Text es necesario configurarlo para que guarde tu trabajo como archivos de texto plano.
Los documentos HTML deben tener la extensión html o htm.
Usar un editor wysiwyg como el Adobe Dreamweaver o el BlueGriffon

Aunque obviamente editores de páginas como los citados anteriormente nos facilitan la creación y estructuración de nuestros diseños, existen otros programas como el Sublime text que facilitan la redacción del código fuente. En estas primeras actividades, usaremos Sublime Text 2 que está instalado en los PC del aula.


 

sublime

Sublime Text 2 es un editor de texto pensado para escribir código en la mayoría de lenguajes de programación y formatos documentales de texto, utilizados en la actualidad : Java, Python, Perl, HTML, JavaScript, CSS, HTML, XML, PHP, C, C++, etc.
Es un editor de código que permite un uso ilimitado en el tiempo de manera gratuita (si no se va a hacer un uso comercial del software). De vez en cuando una ventanita aparece en el programa para animarnos a registrar y pagar el programa (indudablemente vale ese precio, pero podemos probarlo todo el tiempo que queramos hasta decidir comprarlo, o no).


Permite escribir todo tipo de documentos de código en formato de texto y es capaz de colorear el código, ayudarnos a la escritura, corregir mientras escribimos, usar abreviaturas (snippets), ampliar sus posibilidades, personalizar hasta el último detalles,… casi cualquier cosa que le podamos pedir a un editor.

 

Actividad 2.

Abre el program Sublime Text 2, y crea un página Web, en basada en tu currículum.

Al menos tendrá que tener las siguientes etiquetas

Pueden estar repetidas:

  • <b> Negrita
  • <H1><H2> Encabezados.
  • <title> de la hoja.
  • <img> Inserta una imagen en forma de tu foto
  • <ul><li> Etiquetas de lista, puedes ordenar tus cursos o titulaciones
  • <addres> Para indicar tu dirección.

Listado de etiquetas HTML ir al sitio.

Tutorial de Sublime Text 2 en castellano descargar documento