CURSO HTML DESDE CERO

1 Capítulo

Docente

Yan David Burbano Amariles

www.davidamariles.com

www.facebook.com/davidamarilespage

Todo el mundo deberia saber programar.mp4

¿Qué es HTML? HTML es el lenguaje que se emplea para el desarrollo

de páginas de internet. Está compuesto por una serie

de etiquetas que el navegador interpreta y da forma

en la pantalla.

HTML dispone de etiquetas para imágenes,

hipervínculos que nos permiten dirigirnos a otras

páginas, saltos de línea, listas, tablas, etc.

Podríamos decir que HTML sirve para crear páginas

web, darles estructura y contenido.

¿Qué es HTML5? HTML5, en conjunto con CSS3, define los nuevos

estándares de desarrollo web, tanto para equipos de

escritorio, como para dispositivos móviles y teléfonos

celulares. Se abren las puertas para nuevas opciones

de diseño y dinámica de información.

HTML5 ofrecerá una serie de mejoras que permitirán el

desarrollo de sitios web más rápidos, más funcionales,

y con nuevos diseños.

¿Qué nos ofrece HTML5? • Simplificación: El nuevo código ofrece nuevas formas, más sencillas, de

especificar algunos parámetros y piezas de código.

• Contenido multimedia: Reproducción de audio y video sin necesidad de plug-ins

• Animaciones: Posibilidad de mostrar contenidos de manera similar a Adobe Flash, pero prescindiendo de este componente. HTML5 tendrá soporte nativo para una tecnología similar a Flash.

• Efectos y nueva versión de hojas de estilo CSS: La nueva versión de HTML acompañará a una nueva versión de las hojas de estilo CSS, el CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo la implementación de sombras, bordes redondeados, etc. Muchas de las cosas que, hasta ahora, solo podrían lograrse insertándolas como imágenes, podrán realizarse con código. Esto no solo se traduce en una mejora de la velocidad y performance de un sitio, sino también en nuevas e ilimitadas opciones de diseño.

• Geo-locación: Los sitios web podrán saber la ubicación física de la persona que lo visita.

• Tipografías no estándar: Hasta ahora, quizás la mayor limitación que enfrentábamos los diseñadores era la imposibilidad de utilizar tipografías no-estándar en nuestros sitios web. Prácticamente todos estaban limitados a aquellas que fueron impuestas por los navegadores principales, como Arial, Times New Roman, Verdana, Tahoma, etc. ¡La implementación de sistemas como Google Fonts hoy nos permite utilizar muchas más!

Ahora si comencemos!

¿Qué necesitamos para programar

nuestras páginas web? Lo primero que necesitamos es un programa para

desarrollar nuestro código HTML, podemos utilizar

desde el bloc de notas que viene por defecto

instalado en Windows o alguno de los siguientes

programas que podemos encontrar buscando en

Google:

• Notepad++

• Dreamweaver

• Netbeans

• Sublime Text

Debemos siempre ser muy ordenados para que

podamos entender cada cosa que hagamos para

nuestra pagina web. Tomando en cuenta esto vamos

a crear una carpeta con el nombre de nuestro

proyecto y que contiene todos los archivos que

formarán parte de mi página web.

En mi caso se llamará Clase2

Dentro de Clase2 crearemos los archivos de extensión HTML y todas las imágenes y librerías de JavaScript que utilizaremos.

Todo desarrollador web debe conocer preferiblemente las extensiones de los archivos de su equipo de trabajo. Para hacer esto debemos ir a Panel de control luego clic en apariencia y personalización. Luego damos clic en Opciones de Carpeta. Clic en la pestaña VER. Y quitamos el check (chulito) de la opción: Ocultar las extensiones de archivo para tipos de archivo conocidos.

Yo utilizaré el editor Sublime text.

Clic en File, luego clic en New File y luego damos clic en Save as.

Este archivo lo guardaremos con el nombre index.html dentro la

carpeta que habia creado.

Ya debemos tener creada nuestra página web en

nuestra carpeta y nos debe aparecer con el logo del

navegador que nosotros tengamos predeterminado

para utilizar.

Para comenzar con HTML debemos conocer como se crea

una página web con código. En HTML se utilizan las

etiquetas, y cada etiqueta debemos abrirla y cerrarla.

<etiqueta>Mi contenido de esta etiqueta </etiqueta>

Cada etiqueta puede tener atributos que son propiedad o

de uso exclusivo de cada etiqueta, con el tiempo

memorizaremos algunas de estas pero es válido mirar en

internet o en nuestros apuntes como se llaman para

escribirlas bien.

Como vemos, para cerrar una etiqueta debemos

anteponer el símbolo / y si notamos no deje espacio entre

el símbolo < el nombre de la etiqueta y el símbolo >

Cada etiqueta puede tener propiedades o atributos

como dije anteriormente. Estas se colocan de la

siguiente manera:

<etiqueta atributo=“valor del atributo”>

Damos un espacio colocamos el nombre del atributo

acompañado del símbolo = luego seguidamente sin

espacios las “” o las comillas simples ‘’. Y dentro de

estas comillas va el valor de dicho atributo. Ya

veremos que colocamos en cada atributo.

Podemos colocar cuantos atributos sean validos y

necesitemos pero separados de un espacio.

<etiqueta atributo1=“” atributo2=“” atributo3=“”>

Contenido de mi etiqueta HTML

</etiqueta>

Toda página web en HTML5 de comenzar así:

Esto le indica que mi página será desarrollada en

HTML5. seguidamente abrimos las etiquetas HTML

para comenzar nuestro página.

Nuestra página web en código solo ira hasta donde

termina la etiqueta HTML es decir </html> despúes

de esto no deberia existir nada.

Agregaremos nuestro primer atributo para la etiqueta

html y es el atributo lang que advierte el idioma en el

que será desarrollada nuestra website. En nuestro

caso sera es que quiere decir español. Si abrimos la

pagina en nuestro navegador no nos debe mostrar

nada aún.

Una vez creado lo anterior debemos crear la

cabecera o HEAD que contiene la configuración de

nuestro sitio web. Y de una vez vemos como se

colocan los comentarios en html

Dentro de head colocaremos la etiqueta title que

coloca el título de nuestra web.

Agregaremos la etiqueta meta con el atributo

charset y con el valor utf-8 que me permite que las ñ

y las tildes se vean sin ningún problema.

Ya nuestra página debe cambiar el título del

navegador sin mostrar todavía contenido dentro de

ella.

Crearemos una nueva carpeta dentro de la carpeta

que venimos trabajando para agrupar todas las

imágenes que necesitemos, igualmente lo haremos

con otra carpeta llamada estilos que agrupará en un

futuro todos los estilos del sitio y otra carpeta que

llamaremos js que tendrá todas las librerías o plugins

que necesitemos.

Dentro de imágenes buscaremos para este ejemplo

una imagen en formato png para que haga las veces

del logo de nuestra página web. Le cambiamos el

nombre.

Este logo nos servirá para colocarlo como contenido

como para colocarlo en el navegador de nuestro

sitio. Con la siguiente etiqueta lo colocaremos en el

navegador.

Ahora agregaremos el cuerpo o body de nuestra

página web. Solo existirá un solo body el cual se abre

y cierra. Dentro de él colocaremos el contenido:

texto, párrafos, títulos, fotos, videos, animaciones.

Como vemos nos apareció ya un texto de color negro y alineado a la

izquierda con un tamaño de letra y tipo de fuente (letra)

predeterminado.

Existen otros tamaños de letras, desde los <h1> hasta los <h6> siendo el

<h1> el tamaño más grande y el <h6> el tamaño más pequeño. Cada

una estas etiqueta H involucra por defecto un salto de línea, como

decir cuando damos enter en un texto de word.

Para agregar una imagen a nuestra página web colocaremos la

siguiente etiqueta. Previamente habíamos agregado una imagen a

nuestra carpeta con el nombre foto_contenido.jpg

Como la imagen esta muy grande a través de paint podemos cambiarle el tamaño. Para futuros trabajos utilizaremos Adobe Photoshop, pero para comenzar Paint nos sirve

Ya cuadramos el tamaño en paint y nos quedó así:

Si no sabes disminuir el tamaño de una imagen en paint por favor leer el

siguiente enlace

http://windows.microsoft.com/es-es/windows7/resize-a-picture-using-

paint

Ahora agregaremos una nueva etiqueta. Y esta nos servirá para

colocar párrafos en nuestra página web. La etiqueta P

Cuando necesitemos colocar un texto de prueba utilizaremos algo

llamado Lorem Ipsum, este es un texto escrito en latín y que nos sirve

para probar como quedaria nuestra página web con un determinado

texto. Luego cuando tengamos el texto que realmente va lo sustituimos.

Si quieres saber que es lorem ipsum lee por favor el siguiente enlace:

http://www.blindtextgenerator.com/es/sobre-los-textos-simulados

Tablas Al igual que Excel nuestra tablas están compuestas

de filas y columnas.

Las filas las denotaremos con la etiqueta TR y las

columnas con la etiqueta TD. La combinación de

ambas nos generará una celda que podrá contener

desde texto, fotos, videos o animaciones. Yo puedo

colocar el contenido que yo quiero. Las tablas me

permiten tener mi contenido mejor organizado.

Crearemos una galería de imágenes bien organizada

utilizando tablas HTML. Previamente coloque un los

logos que utilizaré. El resultado está en la siguiente

diapositiva:

Si colocamos el valor de border en cero queda así:

Esta fue una tabla de 2 filas por 4 columnas.

Hasta aquí esta primera parte de nuestro curso de HTML

desde cero.

Les dejo unos links para repasar y fortalecer nuestro

conocimiento. Recuerden que a programar se aprende

programando.

http://www.htmlya.com.ar/

http://www.aulaclic.es/dreamweaver-cs4/a_6_1_1.htm

http://www.infocom21.net/spip.php?article139

http://html-color-codes.info/codigos-de-colores-

hexadecimales/

http://es.jimdo.com/2012/11/13/5-reglas-sobre-el-color-el-

%C3%A9xito-de-un-dise%C3%B1o-web-profesional/

Recuerden seguirme en mi blog y en las redes sociales

Facebook:

www.facebook.com/davidamarilespage