Categorias: Todos - navegador - ejemplos - extensión - proyecto

por Santiago Solano Sanchez 5 anos atrás

187

Curso de HTML

Un curso gratuito de HTML5 está diseñado para enseñar a crear sitios web sin necesidad de conocimientos previos. Comienza con una introducción básica de HTML, donde los estudiantes aprenden sobre sus componentes y su uso en el desarrollo web.

Curso de HTML

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

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).

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).

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).

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

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web


Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

,

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

,

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

,

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

,

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

,

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

y

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

. En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Etiquetas básicas para la construcción de nuestra página web

. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles. Por ejemplo, Hola mundo

Este no va (no supe cómo borrarlo sin que se me borrara lo de abajo)

Subtema

Etiquetas básicas para la construcción de nuestra página web

La etiqueta es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

Etiqueta

Etiqueta

,

son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. Ejemplo:

Encabezado de primer nivel h1

,

Etiqueta

,

son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. Ejemplo:

Encabezado de primer nivel h1

, etc...

Etiqueta

La etiqueta

define un párrafo Ejemplo:

El famoso cuadro Gernika fue pintado por P. Picasso en 1937.

Picasso nació en Málaga.

,

La etiqueta

define un párrafo Ejemplo:

El famoso cuadro Gernika fue pintado por P. Picasso en 1937.

Picasso nació en Málaga.

son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. Ejemplo:

La etiqueta

define un párrafo Ejemplo:

El famoso cuadro Gernika fue pintado por P. Picasso en 1937.

Picasso nació en Málaga.

Encabezado de primer nivel h1

La etiqueta

define un párrafo Ejemplo:

El famoso cuadro Gernika fue pintado por P. Picasso en 1937.

Picasso nació en Málaga.

La etiqueta

define un párrafo Ejemplo:

El famoso cuadro Gernika fue pintado por P. Picasso en 1937.

Picasso nació en Málaga.

Las etiqueta indica que empieza la cabecera de la página. En ella se suele poner el título () de la web, una descripción y otras informaciones relacionadas con el contenido de la página.</p>

Con la etiqueta pueden realizarse enlaces hacia documentos externos de cualquier tipo, generalmente es usada para definir enlaces hacia otras páginas web. Ejemplo: Texto del enlace

Etiqueta </p>

Esta etiqueta es obligatoria y se muestra en la pestaña del navegador, no forma parte del cuerpo de la página. Sólo se puede escribir texto y es importante para que los buscadores conozcan el tema de la página.

Etiqueta

La etiqueta indica el comienzo del documento HTML.

La etiqueta

sería el elemento que contendría todos los elementos de la tabla

Etiquetas de cierre

La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".

Etiquetas de apertura

La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".