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 <html> representa el contenedor de nuestra página web. El resto de etiquetas deberá de estar entre la etique de apertura y cierre.
<!DOCTYPE html>
<html lang="es">
</html>
Tendremos que colocar el atributo lang de idioma en la etiqueta html para declarar el idioma predeterminado del texto de la página. !!!!Ojo¡¡¡¡ Cuando la página contenga contenido en varios idiomas, tendríamos que aplicar el atributo de idioma a un elemento que rodee a ese texto.
Todos los navegadores no soportan el estandar HTML5 y deberás tenerlo en cuenta en tu diseño.
<HEAD> la cabecera, contiene información y recursos sobre el propio documento y que NO son visibles en la web. Entre las etiquetas más comunes están:
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, que representa el código de caracteres UNICODE. Es compatible con ASCII. Permite visualizar los caracteres de todos los idioma. Para que nos entendamos, permitirá nuestra "ñ" y colocar acentos en las palabras...
La etiqueta <TITLE>, que identifica el título de la página. El contenido de la etiqueta <title> se verá en la parte superior de los navegadores.
La etiqueta <link> que permitirá enlazar un archivo externo a nuestra web. ¿Qué archivos externos nos pueden interesar a nosotros? seguramente insertaremos una hoja de estilos, pero podrían ser más. Para saber la lista de archivos permitidos puedes visitra esta página.
Bueno, ya vamos teniendo esto a punto de caramelo. Ahora ya tendríamos una página como muestra el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
</html>
<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…
Aquí comienzan los cambios semánticos de HTML5, la web la estructuraremos con las etiquetas <header><nav><section><article><aside><footer>
La etiqueta header es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web.
Continuamos con la etiqueta section esta pensada para contenidos dependientes pero diferenciados de otros contenidos. No es un mero contenedor de contenido general ya que para esa función esta la etiqueta <div>. En las seccion usamos H2 de titulo.
Un ARTICLE es una información independiente, como una noticia o un post.
Y la publicidad dónde la colocamos... Para un contenido de ese tipo en HTML5 se usa la etiqueta <aside>, sería un espacio reservado en un lateral de la web.
Por último, tendríamos la zona de pie o footer que será el espacio reservado al final de la web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<header>
<h1></h1>
</header>
<section>
<h2></h2>
<article>
<h3></h3>
</article>
<article>
<h3></h3>
</article>
</section>
<aside>
<h4></h4>
</aside>
<footer>
</footer>
</body>
</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 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.
Lo primero será preparar nuestro SITE (cualquier directorio nos sirve) para mantenerlo un poquito organizado. Aunque no es necesario, es muy recomendable, tener serparado los archivos de imagenes o de cualquier tipo de recursos del espacio para las páginas web. Al menos debe tener un directorio "css" y otro "img". Más adelante los usaremos.
Abre el program Sublime Text 2, y selecciona el tipo de lenguaje HTML.
Copia el siguiente código dentro del archivo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Practica guia. Primera parte</title>
</head>
<body>
<h1>LibreCad. Diseño asistido por ordenador</h1>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="enlaces.html">Enlaces de referencia</a></li>
</ul>
<h2><a href="#">Nunca antes dibujar ha sido tan sencillo.</a></h2>
<p><a href="#">Anímate tú puedes conseguirlo.</a></p>
<p>Hasta hoy, hemos dibujado con lápiz y usando como soporte el papel en diferentes grosores y tamaños. Muchos han sido los quebraderos de cabeza y el tiempo invertido en hacer bien un dibujo. Si además, nos han pedido varias copias o se han realizado modificaciones en el mismo lo normal, es que termine ensuciado o poco agraciado en su presentación. </p>
<p>Las grandes ventajas de usar un medio digital en la realziación es:</p>
<p>Su precisión.</p>
<p>La rapidez en la copia.</p>
<p>La limpieza.</p>
<p>El cambio de tamaño (Escala).</p>
<h3>Historia del Cad</h3>
<p>En 1955, un laboratorio de un instituto tecnologico desarrolla el primer sistema de gráfico, a petición de las Fuerzas Aéreas Norteamericanas. Este sistema procesaba datos de los radares y otras informaciones de objetos mostrándolos en una pantalla CRT...</p>
<p>¬ <a href="historia.html" title="Historia" target="_blank">Seguir leyendo</a></p>
<h3>Trabajo en Coordenadas</h3>
<p>Como hemos mencionado la precisión que se alcanza con un sistema CAD es inigualable con la mano o al menos, inigualable para la mayoría de los mortales. Pero ¿Cómo puedo ser tan preciso?, para contestar a eso, deberás de seguir leyendo...</p>
<p>¬ <a href="coordenadas.html" title="Coordenadas" target="_blank">Seguir leyendo</a></p>
<h3>Ejercicios básicos</h3>
<p>Por mucho empeño que ponga tu profesor, SOLO TÚ puedes alcanzar el grado de profesionalidad que te piden en clase y algún día quién sabe, en el puesto de trabajo. Para poder alcanzarlo necesitarás realziar unos cuantos dibujos, practica con los siguientes...Love is power.</p>
<p>¬ <a href="enlaces.html" title="Ejercicios" target="_blank">Seguir leyendo</a></p>
<p>Departamento de Ciencias: Área, Tecnología</p>
</body>
</html>
Guarda el archivo con el nombre de pg1.html
En los siguientes capítulos iremos mejorando esta Web hasta completar un SITE completo. Es coveniente que revises las etiquetas utilizadas e investigues sobre las que no entiendas bien. Suerte.
Abre el program Sublime Text y crea un página Web basada en tu currículum. Recuerda que los datos personales aportados deberán de ser falsos.
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.
Puedes usar la siguiente web como ejemplo. Estudia el código, modifícalo y personalízalo para la práctica.
Listado de etiquetas HTML ir al sitio.
Tutorial de Sublime Text en castellano descargar documento