Post on 25-Jan-2017
< DESARROLLO WEB /> _HTML5 &
CSS3
Jorge Pirela.
INTRODUCCIÓN
Todos los sitios web del mundo usan HTML y CSS, luego de aprender estos dos lenguajes, estaremos listos para construir nuestro propio sitio web. Estos a pesar de no ser lenguajes de programación si no de interpretación o también conocidos como lenguajes de estructura son los fundamentos para cualquier sitio y sin ellos nunca se podrá cumplir la realización de un espacio on-line.
UN POCO SOBRE LOS LENGUAJES.HTML 5
Hyper Text Markup Lenguaje 5Es la quinta edición del lenguaje de etiquetado mundial básico de la WWW (World Wide Web). Hecho para darle a la web una estructura con texto, links, imágenes y otros elementos fundamentales
CSS 3
Cascading Style Sheets
Es la tercera entrega del lenguaje de estilización web. Hecho para crear la estructuración de un documento HTML o XML, Arreglar la apariencia de los mismos.
HERRAMIENTAS A UTILIZAR
Sublime Text 3 Google Chrome
2 PRINCIPIOS BÁSICOSKEEPITSIMPLESTUPID
DON’T REPEATYOURSELF
COMENZAMOS
Anatomía de un archivoHTML
1. <!DOCTYPE html>2. <html>3. <head>4. <title> Mi propia pagina</title>5. <meta charset=“utf-8”/>6. <link rel=“stylesheet” type=“text/css” href=“main.css” />7. </head>8. <body>9. <header>10. </header>11. <strong> Estoy Construyendo un sitio web </strong>12. <footer>13. </footer>14. </body>15. </html>
Anatomía de un archivoHTML
¿Qué se observo?Tomemos de ejemplo la líneaDe código numero “ 11 “. 11. <strong> Estoy Construyendo un sitio web
</strong>
1. Todos los elementos HTML tienen una etiqueta de apertura : <h1>
2. Siempre se utiliza la barra
divisor “ / “ para cerrar: </h1>
3. ¿ Los Usuarios solo ven el
contenido entre etiquetas?
Terminología básica1. El texto dentro de <> se llama tag
(etiqueta).
2. Ej de etiqueta abierta: <strong>.
3. Ej de etiqueta Cerrada: </strong>.
4. Las etiquetas casi siempre vienen en pares.
SintaxisLas etiquetas se deben estudiar de
manera similar a como se estudia un paréntesis, si se abre una debe cerrarse. Estas pueden anidarse así que deben cerrarse en el orden correcto. La ultima abierta cerrara primero
<etiqueta1> <etiqueta2> Contenido dentro de la etiqueta </etiqueta2> </etiqueta1>
Head<head>
<title> Contenido </title> < !- - AQUI VA EL TITULO - - >
<meta charset=“utf-8”/> <! - - Grupo de Caracteres con acento y “Ñ” - - >
<link rel=“stylesheet” type=“text/css” href=“link” />
</head>
Body<body>
<header>
<! - - Todo lo perteneciente al header de la pagina - ->
</header>
<! - - Contenido de la pagina - ->
<footer>
<! - - Todo lo perteneciente al footer de la pagina - ->
</footer>
</body>
Etiquetas de encabezados
Encabezado
Son aquellas que distinguen el encabezado al párrafo a través
de tamaños
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in aliquet elit, vel aliquet ligula. Vivamus ut interdum augue. Donec facilisis nisi dolor, ac ornare ex congue interdum. Nulla facilisi. Integer ultricies nunc auctor ultricies convallis. Ut blandit nunc ut magna auctor, ac porttitor neque iaculis. Ut commodo dui enim, sit amet fringilla erat sagittis quis. Fusce id orci vel ex maximus pharetra a quis odio. Duis convallis lobortis eleifend. Morbi fermentum mollis dui, a pretium mi maximus id. Nam sit amet nunc sed urna tempor lobortis. Vestibulum mattis iaculis augue ut pellentesque. Duis a nisi elit. Suspendisse potenti.
Etiquetas de encabezados<h1>Soy el mas grande</h1><h2>Soy un encabezado</h2>
<h3>Soy un encabezado</h3>
<h4>Soy un encabezado</h4>
<h6>Soy el mas pequeño</h6>
<h5>Soy un encabezado</h5>
Etiquetas de párrafoLos párrafos son contenidos
mas pequeños y delgados que los encabezados
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in aliquet elit, vel aliquet ligula. Vivamus ut interdum augue. Donec facilisis nisi dolor, ac ornare ex congue interdum. Nulla facilisi. Integer ultricies nunc auctor ultricies convallis. Ut blandit nunc ut magna auctor, ac porttitor neque iaculis. Ut commodo dui enim, sit amet fringilla erat sagittis quis. Fusce id orci vel ex maximus pharetra a quis odio. Duis convallis lobortis eleifend. Morbi fermentum mollis dui, a pretium mi maximus id. Nam sit amet nunc sed urna tempor lobortis. Vestibulum mattis iaculis augue ut pellentesque. Duis a nisi elit. Suspendisse potenti. </p>
Agregar un link
Se utiliza la etiqueta <a>…</a> y se coloca un
atributo href=“URL”
<a href=“URL”> Contenido que sera clickeado para ir al link </a>
Control multimedia:Imágenes.
Se utiliza la etiqueta <img /> y se coloca un atributo src=“URL”
<img src=“URL” />
Imágenes con link.Se utiliza la mismas 2 sintaxis anteriores pero la <img/> dentro del <a>…</a><a href=“URL”><img src=“URL”/></a>
Control multimedia:Videos.
Se utiliza la etiqueta <video>…</video> donde se le colocaran atributos dimensionales (width y height) junto con el atributo ‘controls’ para agregar los controles de el video, dentro de ella usamos la etiqueta <source /> con los atributos src=“URL” y type=“video/mp4”.
<video width=“ANCHO” height=“LARGO” controls><source src=“URL” type=“video/mp4”/></video>
En ANCHO y LARGO se tomara medida en px de manera automática solo requiere valor numérico
Listas en HTMLOrdenadas No ordenadasSiguen el patrón:1. Elemento2. Elemento3. ElementoSe crean utilizando la etiqueta <ol>…</ol> y dentro de ella la etiqueta <li>…</li> para cada elemento.
No siguen ningún patrón.• Elemento• Elemento• Elemento se crean utilizando la etiqueta <ul>…</ul> y dentro de ella la etiqueta <li>…</li> para cada elemento.
<ol><li> CONTENIDO </li><li> CONTENIDO </li><li> CONTENIDO </li></ol>
<ul><li> CONTENIDO </li><li> CONTENIDO </li><li> CONTENIDO </li></ul>
Elementos Padre-HijoLa relación padre-hijo de los elementos HTML será entendida como:
• Elemento Hijo: Aquel elemento del HTML que se encuentra entendido dentro de otro elemento HTML a nivel de Código.
• Elemento Padre: Sera entendido como aquel elemento HTML que dentro de si contiene otros elementos HTML.EJ:
<ul><li> . . . </li></ul>
PadreHijo
DivisoresSon elementos usados para envolver otros dentro de el (contenedores) , comúnmente se les dan atributos de clase o identificador debido a que por defecto un divisor es invisible, y se les dan estos para poder jugarse con el CSS y así permitirnos controlar y estilizar una sección completa. Se crean a través de las etiquetas:<div> … </div>Sintaxi
s: <div class=“Nombre” ID=“Nombre”> CONTENIDO </div>
Etiqueta SpanYa vimos que los divisores nos permiten controlar y estilizar contenedores completos de la pagina con span podemos controlar y estilizar partes del código mas pequeñas y exactas como palabras dentro de un párrafo y hasta palabras simples. También es útil la aplicación de atributos de clase e identificadoresSe utilizan las etiquetas:<span>…</span>
Sintaxis:
<span class=“nombre” ID=“Nombre”> CONTENIDO </span>
ComentariosLos comentarios son partes del código que el usuario no podrá observar a simple vista y a demás no serán ejecutados. La idea de los comentarios tanto en lenguajes de programación como los lenguajes de estructuras es sencilla… NO SIEMPRE SERAS TU QUIEN TOQUE EL CODIGO ASI QUE HASLE EL FAVOR A TU SUCESOR Y COMENTALO! En algún punto alguien que NO eres tu tendrá que editar tu código y cuando tengas una cantidad asquerosa de líneas sin su explicación pues. Se vuelve ILEGIBLE, así que:<! - - Esta es la manera de crear un comentario en HTML - ->
<h1>Titulo Principal</h1> <! - - TITULO PRINCIPAL DE LA PAGINA - ->
¿Tablas & Formularios?1. <form>2. <label
for="exampleInputEmail1">First Name</label>
3. <input type="email" class="form-control" id="firstName" placeholder="First Name">
4. <label for="exampleInputEmail1">First Name</label>
5. <input type="email" class="form-control" id="firstName" placeholder="First Name"></form>
1. <table>2. <thead>3. <tr>4. <th></th>5. </tr>6. <th></th>7. </tr>8. </thead>9. <tbody>10. <tr>11. <th></th>12. </tr>13. <th></th>14. </tr>15. </tbody>16. </table>
</ >
COMENZAMOS
Enlazar la hoja de estilo con el HTML
Bueno ya sabemos HTML y sabemos que las cuestiones de metadata se hacen el head así
que comencemos.
<link rel=“stylesheet” type=“text/css” href=“main.css” />
Anatomía de un archivo CSS1. * {
2. propiedad : valor;3. }4. html, body {5. margin : 0;6. padding : 0;7. }8. Selector {9. propiedad : valor;10.}
1. * { Propiedades}
2. Html,body {padding:0;margin:0;}
3. .Clase {Propiedades }
4. #id { Propiedades}
5. Selector {Propiedades }
Anatomía de un archivo CSS
¡Atención! A partir de este puntoTrabajaremos dos archivos a la vez.
Propiedad: font-size: valor; Establece el tamaño de letra.
Valores permitidos:Medida
Px: unidad por defecto de medida.Em: valor relativo según padre.Rem: tamaño default según explorador.
Porcentaje:
%
Propiedad: color: valor;Establece el color de letra.
Valores permitidos:Color
cadena: son colores que se expresan a través de palabrasHexadecimal: valores alfa numericos escritos después de un # / #C20203;RGB: Por valores de medida en Red Green and blue / rgb(56,56,56);
Propiedad: font-family: valor;Establece la tipografía.
Valores permitidos:Fuentes tipográficas
Propiedad: background-color: valor;Establece el color de fondo.
Valores permitidos:Color
Propiedad: background: valor;Establece una imagen de fondo.
Valores permitidos:url(“url de la imagen”)Datos a usar:
no-repeat: para que no se repita el fondo.center center: que este centrado.fixed: si queremos que este fijo.
background-image:url(“url”) no-repeat center center fixed;
Propiedad: background-size: valor;Establece el tamaño del fondo.
Valores permitidos:Medida Porcentual Cadena
1.Contain2.Cover
Propiedad: text-align: valor;Establece el alineamiento del texto
Valores permitidos:RightLeft
Center
Limites y Espacios
Modelo de la caja
Propiedad: border: valor valor valor;Establece el borde del elemento
Valores permitidos:Valor1GrosorMedida
Valor2Tipo
Cadena:
Valor 3ColorColor1.Solid
2.Dotted3.Dashed
NOTA IMPORTANTE:La propiedad border también aplica
Para cada lado de este modo:border-top: valor valor valor;
border-bottom: valor valor valor;border-left: valor valor valor;
border-right: valor valor valor;
Propiedad: padding:valor;Establece el espacio del elemento
Valores permitidos:MedidaAl igual que border:
padding-top:valor;padding-bottom:valor;padding-left:valor;padding-right:valor;
Propiedad: list-style:valor;
Establece el estilo de la lista html se le Coloca al <ul> para que aplique
Valores permitidos:none.
Propiedad: font-weight:valor;Establece el grosor de la letra
Valores permitidos:Normal boldbolderLighter 100200300 400
500600 700800 900
Propiedad: margin:valor;Establece la distancia entre el
Elemento y lo que lo rodeaValores permitidos:Medida
Al igual que padding:margin-top:valor;margin-bottom:valor;margin-left:valor;margin-right:valor;
Propiedad: display:valor;Establece la manera en que se mostraraUna serie de elementos. Para listas se
Aplica al <li>Valores permitidos:
Block Inline
Propiedad: float:valor;Establece el lugar en el cual se ubicara
Un elemento
Valores permitidos:left right
Pseudo-ClasesUn selector de pseudo clases serán aquellosQue nos permita seleccionar aquello que noEs parte de el árbol o de la anatomía de unArchivo html.
Sintaxis:Selector:pseudoclase{
Propiedad:valor;}
Pseudo-Clases::first-child / selecciona el primer hijo de un elemento
:link / selecciona un elemento link que no ha sido abierto
:visited / selecciona un elemento link que ya fue abierto
:hover / selecciona el elemento cuando el mouse esta sobre el
:focus / selecciona un elemento que esta «seleccionado» :active / selecciona un elemento que esta siento clickeado
Propiedad: transition:valor;Establece el tiempo en que un css tardaraEn cambiar si es que esta en proceso de cambio
Valores permitidos: Xs;Ejemplo:0.3s 5s 10s
ComentariosLos comentarios son partes del código que el usuario no podrá observar a simple vista y a demás no serán ejecutados. La idea de los comentarios tanto en lenguajes de programación como los lenguajes de estructuras es sencilla… NO SIEMPRE SERAS TU QUIEN TOQUE EL CODIGO ASI QUE HASLE EL FAVOR A TU SUCESOR Y COMENTALO! En algún punto alguien que NO eres tu tendrá que editar tu código y cuando tengas una cantidad asquerosa de líneas sin su explicación pues. Se vuelve ILEGIBLE, así que:/* Esta es la manera de crear un comentario en CSS */
¡ GRACIAS POR SU ATENCIÓN !