Formatos Web

door Marco Forero

ETAPAS DE UN PROYECTO DE CONSTRUCCIÓN

door Oscar Frias

INDICADORES DE EVALUACIÓN FINANCIERA

door paulina monsalve

Mapa Conceptual Conjuntos Manuela

door lucia vargas

Curso de HTML

En este curso aprenderemos gratis a maquetar sitios Web con HTML5. No necesitas conocimientos previos, pues empezaremos desde cero con una serie de ejemplos prácticos y al término del curso, desarrollaremos un proyecto real en el cual aplicaremos todo lo aprendido

Unidades

Estructura de una página web en HTML

Estructura:

Al hablar de la estructura de una página web podemos distinguir dos partes principales, la cabecera y el cuerpo . La cabecera contiene información importante para la propia página pero que el usuario no ve directamente (salvo el título), y en el cuerpo está el contenido visible de la página. Vamos a ver las zonas más importantes que hay dentro de ambas partes, para ello utilizaremos el siguiente esquema: https://www.sitesbay.com/html/images/structure-of-html.png

En la cabecera tenemos etiquetas para definir los metadatos como el juego de caracteres (charset) y el viewport, a continuación el título y enlaces a archivos de hojas de estilo <link> y Javascript <script>. Algunas de estas etiquetas son obligatorias y otras opcionales, pero con reglas en cuanto a donde deben colocarse. Englobando la cabecera y el cuerpo tenemos la etiqueta <html>. Para definir el tipo de documento se utiliza la declaración !DOCTYPE.</p>

Dentro del cuerpo tenemos todo el contenido del página web, por lo tanto podemos incluir en él prácticamente todas las etiquetas de HTML, sin ninguna regla en cuanto al orden de las etiquetas, sin embargo, es conveniente dar una estructura lógica a la página mediante el uso adecuado de las etiquetas semántica. (Las etiquetas semánticas no conllevan ninguna característica de formato ni de ubicación, pero sí tienen un significado semántico que puede ser interpretado por los buscadores y por otro tipo de programas (lectura por voz, accesibilidad, ...)

Unidad 2: Mi primera página web

Vamos a comenzar por escribir una página web muy sencilla. Para ello podemos utilizar cualquier editor de texto sin formato, por ejemplo, el Bloc de Notas (Notepad) incluído en Windows o con el software Sublimetext y/o Dreamweaver de Adobe. En ordenadores Apple puedes usar el TextEdit

Escribiremos el siguiente código: Mi primera página web

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar lo que es la extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las tres letras que van después del punto al final del nombre de un archivo (por ejemplo, imagen.gif o documento.doc).

Hola mundo

Pulsamos en el menú Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo primera. Si ahora pulsásemos Guardar, se guardaría con la extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como una página web, debemos de emplear la extensión .html (o .htm). Por lo que completamos el nombre para que quede primerapáginaweb.html y pulsamos Guardar.

Como el archivo tiene extensión .html, se abrirá la página con el navegador que tengamos como predeterminado.

Unidad 1: Introducción a HTML y sus componentes

1.1 Introducción

¿Qué es HTML?

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto. EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc). Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten interconectar diversos conceptos y formatos. Este lenguaje funciona por medio de etiquetas las cuales permiten construir la estructura de nuestra página web.

1.2 Etiquetas

Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML. El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.

Etiquetas vacías

Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacias, como la etiqueta
. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo:
. La etiqueta
produce un salto de línea. Las etiquetas vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son