1. CURSO HTML DESDE CERO 1 Capítulo
Docente
Yan David Burbano Amariles
www.davidamariles.com
www.facebook.com/davidamarilespage
2.
3. ¿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.
4. ¿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.
5. ¿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!
7. ¿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
8. 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
9. 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.
10. 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.
11. 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.
12. 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 >
13. 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>
14. 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.
15. 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.
16. 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
17. Dentro de head colocaremos la etiqueta title que coloca el título de nuestra web.
18. 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.
19. 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.
20. 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.
21. 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.
22. 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.
23. 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.
24. 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
25. 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
26. 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
27. 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.
28.
29. 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:
30.
31. Si colocamos el valor de border en cero queda así:
Esta fue una tabla de 2 filas por 4 columnas.
32. 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
