Scribd
Cargar
194 vistas6 páginas

Aprende A Crear Tu Propio Sitio Web Con HTML5 y CSS3

Este documento presenta un curso en 4 partes para aprender a crear sitios web con HTML5 y CSS3. La Parte 1 cubre los fundamentos de HTML, incluida la estructura básica de páginas y elementos como enlaces e imágenes. La Parte 2 se enfoca en dar formato al contenido usando CSS. La Parte 3 trata sobre el diseño de páginas web mediante la organización de contenido y posicionamiento. Finalmente, la Parte 4 cubre características avanzadas como tablas, formularios y diseño adaptable. C

Cargado por

ROMULO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
194 vistas6 páginas

Aprende A Crear Tu Propio Sitio Web Con HTML5 y CSS3

Este documento presenta un curso en 4 partes para aprender a crear sitios web con HTML5 y CSS3. La Parte 1 cubre los fundamentos de HTML, incluida la estructura básica de páginas y elementos como enlaces e imágenes. La Parte 2 se enfoca en dar formato al contenido usando CSS. La Parte 3 trata sobre el diseño de páginas web mediante la organización de contenido y posicionamiento. Finalmente, la Parte 4 cubre características avanzadas como tablas, formularios y diseño adaptable. C

Cargado por

ROMULO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Aprende a crear tu propio sitio Web con HTML5 y CSS3

Parte 1 - Fundamentos del HTML5

1. 1. ¿Cómo se construyen los sitios web?


2. 2. Vuestra primera página web en HTML
3. 3. Organizar el texto
4. 4. Crear enlaces
5. 5. Imágenes

 Test: Quiz 1
 Actividad: Crea tu propio CV en HTML

HTML y CSS: dos lenguajes para crear un sitio web

Para crear un sitio web, tenéis que darle instrucciones al ordenador. No basta con teclear el
texto que queráis poner en el sitio web (como lo haríais en un procesador de texto como
Word, por ejemplo). También tenéis que mostrarle donde poner el texto, insertar las
imágenes, crear los enlaces entre las páginas, etc.

La función de HTML y de CSS.

Para explicarle al ordenador lo que queréis hacer, tenéis que usar un lenguaje que él
entienda. ¡Y es aquí donde la cosa se pone difícil porque tenéis que aprender dos
lenguajes!

¿Por qué se crearon dos lenguajes? ¿No habría bastado con uno?

Probablemente estéis pensando que manejar dos lenguajes va a ser doblemente complicado
y va a llevar el doble de tiempo aprenderlos..., ¡pero no es así! Os puedo asegurar que si
hay dos lenguajes se diseñó así para hacer las cosas más fáciles. Estaremos lidiando con dos
lenguajes que se complementan entre ellos debido a tienen funciones distintas:

 HTML ( HyperText Markup Language (lenguaje de marcas de hipertexto)):


apareció por primera vez en 1991 cuando se lanzó la Red. Su función es gestionar y
organizar el contenido. Por lo tanto, usaréis el HTML para escribir lo que queréis
que muestre la página: texto, enlaces, imágenes, etc. Podéis decir por ejemplo:
«Este es el título, este es el menú, aquí está el texto principal de la página, aquí está
una imagen a mostrar, etc.».
 CSS( Cascading Style Sheets (hojas de estilo en cascada)): la función del CSS es
gestionar la apariencia del sitio web (trazado, posicionamiento, diseño, color,
tamaño del texto, etc.). Este lenguaje se introdujo para complementar al lenguaje
HTML en 1996.

El editor de texto

¿Qué software voy a necesitar para construir un sitio web?


¿Voy a tener que romper la hucha para comprarme un software muy complejo que voy a
tardar meses en entender?

Hay de hecho un gran número de programas informáticos para el diseño de sitios web. Pero
os puedo asegurar que no vais a necesitar pagar ni un duro por ellos. ¿Por qué pagar por un
software informático complicado cuando ya tenéis en casa todo lo que necesitáis?

Sí, coged aire porque todo los que necesitáis es... ¡El el Editor de Texto para usuarios MAC
o el bloc de notas para los de WINDOWS! (ver la figuras siguientes)

Captura de Notepad en Windows


Extraño pero cierto: podéis diseñar bastante bien una página web usando simplemente el
Bloc de notas, el programa de edición de texto que viene incluido de serie en Windows.
Tengo que admitir que esta es la forma en la que empecé hace unos años.

Sin embargo, hay software más potente disponible actualmente y realmente nadie usa ya el
Bloc de notas. Estos programas para el diseño webse pueden clasificar en dos categorías:

 WYSIWYG ( What You See Is What You Get (lo que ves es lo que hay)): estos
programas son muy fáciles de usar y permiten crear sitios web sin aprender ningún
lenguaje en particular. Entre los más conocidos están: Nvu, Microsoft Expression
Web, Dreamweaver... ¡e incluso Word! Su desventaja principal es la calidad del
código HTML y CSS que generan automáticamente estas herramientas, el cual tiene
a menudo una calidad bastante mala. Un buen diseñador de páginas web va a tener
que saber tarde o temprano HTML y CSS, y esta es la razón por la que no
recomiendo el uso de estas herramientas.
 Editores de texto: estos son programas para escribir código. Generalmente se usan
para otros lenguajes y no únicamente para HTML y CSS. ¡Han demostrado que son
aliados poderosos para los diseñadores de páginas web!

Como os habréis dado cuenta, os voy a pedir que uséis un editor de texto en este curso. En
todos los sistemas operativos podéis usar los siguientes editores de texto:

 Sublime Text
 Atom

Navegadores

Por qué un navegador es importante

Un navegador es un programa que permite ver los sitios web. Si podéis leer esto significa
que vuestro navegador está abierto y lo estáis viendo. Como expliqué anteriormente, el
trabajo de un navegador es interpretar el código HTML y el CSS para mostrar un resultado
visual en la pantalla. Si vuestro código CSS dice que «los títulos están en rojo» el
navegador mostrará los títulos en rojo. ¡La función del navegador es por tanto primordial!

Aunque no lo creáis un navegador es un programa extremadamente complejo. Entender el


código HTML y el CSS no es de hecho una tarea fácil. El problema principal como os
daréis cuenta rápidamente es que ¡los navegadores no muestran todos los sitios web
exactamente de la misma manera! Os tendréis que acostumbrar a esto y habituaos a
comprobar con frecuencia que vuestro sitio web funciona correctamente en la mayoría de
los navegadores.
Los navegadores en los ordenadores

Descarga de navegadores

Hay muchos navegadores diferentes. Los principales que deberíais conocer se muestran en
la figura siguiente.

Quiz 1
Parte 2 - Los placeres de dar formato con CSS

1. 1. Configurar CSS
2. 2. Dar formato al texto
3. 3. Color y fondo
4. 4. Bordes y sombreado
5. 5. Crear apariencias dinámicas

 Test: Quiz 2
 Actividad: Añade estilos a tu CV

Quiz 2

Parte 3 - Diseño de la página web

1. 1. Estructurar tu página
2. 2. El modelo de cajas
3. 3. Posicionamiento en CSS
4. 4. Ejercicio práctico: creación de una página web paso por paso

 Test: Quiz 3
 Actividad: CV horizontal

Parte 4 - Características avanzadas

1. 1. Tablas
2. 2. Formularios
3. 3. Vídeo y audio
4. 4. Diseño de página adaptable con consultas multimedia
5. 5. Hay que seguir
 Test: Quiz 4
 Actividad: CV para dispositivos móviles

 Parte 5 - Anexos

1. 1. Envío de tu sitio web en internet


2. 2. Recuerdo de las etiquetas HTML
3. 3. Recuerdo de las propiedades CSS
4. 4. Manejar la compatibilidad entre navegadores

Certificado de finalización (ver ejemplo)

También podría gustarte