Curso HTML desde Cero - Capítulo 1
-
Upload
yanburbano -
Category
Technology
-
view
279 -
download
4
description
Transcript of Curso HTML desde Cero - Capítulo 1
CURSO HTML DESDE CERO
1 Capítulo
Docente
Yan David Burbano Amariles
www.davidamariles.com
www.facebook.com/davidamarilespage
¿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