Curso HTML y JavaScript
En este curso les enseñare a usar el estándar HTMl y el lenguaje de programación JavaScript para poder diseñar y crear sus propias paginas y sitios web.
Primero lo primero...
Antes de comenzar este curso es necesario conocer algunos conceptos acerca de la temática, ya que es muy importante tener bien claro cual es el ámbito en el cual se desarrollan las paginas web y como HTML nos sirve de apoyo en sus respectivas elaboraciones.
Los conceptos a abordar son los siguientes:
- Internet
- Pagina web
- Sitio Web
- Navegador Web
Internet
¿Que es una pagina web?
Una pagina web es un documento que se encuentra disponible en internet, en el cual podemos encontrar texto combinado con imágenes para hacer que la pagina sea dinámica y permita que se puedan ejecutar diferentes acciones.
Una pagina web es la unidad básica del World Wide Web, Internet o la "Web"
¿Que es un sitio web?
Navegador Web
Un navegador o navegador web, o browser, es un software que permite el acceso a Internet, interpretando la información de archivos y sitios web para que éstos puedan ser leídos.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, podemos enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Introducción a HTML
HTML servira para darle forma a nuestras paginas. y poder organizar sus diferentes secciones de forma ordenada y eficiente.
Versiones de HTML
HTML ha pasado por muchas versiones, mejorando siempre muchos aspectos conforme pasa el tiempo, la versión mas reciente y la cual enseñaremos en este curso es "HTML5".
| Version | Año |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2012 |
Entremos en detalle... HTML5
HTML5 es la nueva versión del lenguaje de marcado que se usa para estructurar páginas web, gracias a él con características nuevas y modificaciones que se ha mejorado significativamente este estándar.
Estructura básica HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Cabecera de la pagina -->
<meta charset="utf-8"/>
<meta name="description" content="html5 science girl" />
<title>Mi primera web en html5</title>
</head>
<body>
<!-- Cuerpo de la pagina -->
<!--aqui se despliega todo el contenido-->
</body>
</html>
Analisis del codigo
- Observe que el código HTML5 consta de elementos de apertura <> y de cierre, a los cuales les antecede una diagonal </>
- Una página siempre abre con <!DOCTYPE html>, además debe llevar las etiquetas <html> y </html> .
Veamos las siguientes lineas:
<html lang="es">
...
</html>
Si te fijas veras que tiene un atributo que es "lang", ósea lenguaje aquí definimos en que lenguaje va a ir nuestro documento web, lo puedes en “en” si tu web va a hacer en el idioma Inglés o “es” si esta en Español, ya dependerá de tu proyecto, en este caso hace referencia a una web construida en español.
- La cabeza es la parte entre <head> y </head> (esta parte es de información, por lo que nunca se presenta en la pantalla del navegador). Los elementos del <head> deben incluir el título del documento, y pueden incluir scripts, estilos, entre otros.
-
La etiqueta <title> que es la que provee el título a la página, esta es muy importante incluirla a los documentos creados, ya que la asociamos a una identidad por medio de su título.
<title>Aqui va el título del documento actual</title>
Por lo último, el cuerpo se inserta entre <body> y </body> y es la parte que se ve en la pantalla del navegador.
title y body en una pagina web
Ejemplo 1
Etiquetas HTML
<etiqueta>contenido</etiqueta>- Etiquetas HTML son palabras clave (nombres de etiqueta) encerrada entre paréntesis angulares como <html>.
- Etiquetas HTML normalmente vienen en pares como <b> y </ b>.
- La primera etiqueta en una pareja es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre.
- La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de la etiqueta.
Elementos HTML
- Las "Etiquetas" y "ELementos" HTML se utilizan a menudo para describir la misma cosa
-
Pero en rigor, un elemento HTML es todo lo que se encuentra entre la etiqueta inicial y la etiqueta final, incluyendo las etiquetas.
Elemento HTML:
<p>Esto es un elemento parrafo</p>Etiquetas anidadas
Las etiquetas tambien pueden ir dentro de otras, a esto se le conoce como anidamiento, gracias a esta caracteristica es posible interactuar de forma mas estructurada con los efectos o propiedades que poseen los elementos HTML:
<b>Negrita</b>
<i>Cursiva</i>
<b><i>Negrita y cursiva</i></b>
<b><i>Negrita, cursiva <small> y pequeña </small></i></b>
Declaración <!DOCTYPE>
- EL <!DOCTYPE> ayuda a que el navegador muestre una página web correctamente.
-
Le indicamos al navegador con que version de HTML hemos escrito el documento.
| HTML5 |
|---|
|
|
HTML 4.01 |
|
|
|
XHTML 1.0 |
|
|
Editores de texto
¿Que son los editores de texto?
Los editores de textos son los programas que nos permitiran construir nuestras páginas web; es con estas herramientas con las cuales crearemos nuestros archivos .html los cuales seran procesados posteriormente por los diferentes navegadores
Algunos editores de texto
Dreamweaver
Bloc de notas (Windows)
Notepad++
Sublime Text
Notepad++
En este curso introductorio usaremos "Notepad++", debido a su facil uso y sus potentes herramientas de desarrollo.
Ejemplos Basicos HTML
Atributos HTML
- Los elementos HTM pueden tener atributos
- Los atributos proporcionan información adicional acerca de un elemento
- Los atributos siempre se especifican en la etiqueta inicial
- Los atributos vienen en pares como: nombre = "valor"
Ejemplo 2
(index.html)
(gallery.html)
(about.html)