introducción al desarrollo web
TRANSCRIPT
![Page 1: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/1.jpg)
< DESARROLLO WEB /> _HTML5 &
CSS3
Jorge Pirela.
![Page 2: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/2.jpg)
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.
![Page 3: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/3.jpg)
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.
![Page 4: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/4.jpg)
HERRAMIENTAS A UTILIZAR
Sublime Text 3 Google Chrome
![Page 5: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/5.jpg)
2 PRINCIPIOS BÁSICOSKEEPITSIMPLESTUPID
DON’T REPEATYOURSELF
![Page 6: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/6.jpg)
COMENZAMOS
![Page 7: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/7.jpg)
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>
![Page 8: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/8.jpg)
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?
![Page 9: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/9.jpg)
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.
![Page 10: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/10.jpg)
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>
![Page 11: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/11.jpg)
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>
![Page 12: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/12.jpg)
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>
![Page 13: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/13.jpg)
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.
![Page 14: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/14.jpg)
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>
![Page 15: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/15.jpg)
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>
![Page 16: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/16.jpg)
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>
![Page 17: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/17.jpg)
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>
![Page 18: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/18.jpg)
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
![Page 19: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/19.jpg)
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>
![Page 20: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/20.jpg)
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
![Page 21: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/21.jpg)
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>
![Page 22: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/22.jpg)
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>
![Page 23: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/23.jpg)
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 - ->
![Page 24: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/24.jpg)
¿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>
![Page 25: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/25.jpg)
</ >
![Page 26: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/26.jpg)
COMENZAMOS
![Page 27: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/27.jpg)
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” />
![Page 28: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/28.jpg)
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.}
![Page 29: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/29.jpg)
1. * { Propiedades}
2. Html,body {padding:0;margin:0;}
3. .Clase {Propiedades }
4. #id { Propiedades}
5. Selector {Propiedades }
Anatomía de un archivo CSS
![Page 30: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/30.jpg)
¡Atención! A partir de este puntoTrabajaremos dos archivos a la vez.
![Page 31: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/31.jpg)
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:
%
![Page 32: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/32.jpg)
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);
![Page 33: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/33.jpg)
Propiedad: font-family: valor;Establece la tipografía.
Valores permitidos:Fuentes tipográficas
![Page 34: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/34.jpg)
Propiedad: background-color: valor;Establece el color de fondo.
Valores permitidos:Color
![Page 35: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/35.jpg)
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;
![Page 36: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/36.jpg)
Propiedad: background-size: valor;Establece el tamaño del fondo.
Valores permitidos:Medida Porcentual Cadena
1.Contain2.Cover
![Page 37: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/37.jpg)
Propiedad: text-align: valor;Establece el alineamiento del texto
Valores permitidos:RightLeft
Center
![Page 38: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/38.jpg)
Limites y Espacios
Modelo de la caja
![Page 39: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/39.jpg)
Propiedad: border: valor valor valor;Establece el borde del elemento
Valores permitidos:Valor1GrosorMedida
Valor2Tipo
Cadena:
Valor 3ColorColor1.Solid
2.Dotted3.Dashed
![Page 40: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/40.jpg)
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;
![Page 41: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/41.jpg)
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;
![Page 42: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/42.jpg)
Propiedad: list-style:valor;
Establece el estilo de la lista html se le Coloca al <ul> para que aplique
Valores permitidos:none.
![Page 43: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/43.jpg)
Propiedad: font-weight:valor;Establece el grosor de la letra
Valores permitidos:Normal boldbolderLighter 100200300 400
500600 700800 900
![Page 44: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/44.jpg)
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;
![Page 45: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/45.jpg)
Propiedad: display:valor;Establece la manera en que se mostraraUna serie de elementos. Para listas se
Aplica al <li>Valores permitidos:
Block Inline
![Page 46: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/46.jpg)
Propiedad: float:valor;Establece el lugar en el cual se ubicara
Un elemento
Valores permitidos:left right
![Page 47: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/47.jpg)
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;}
![Page 48: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/48.jpg)
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
![Page 49: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/49.jpg)
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
![Page 50: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/50.jpg)
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 */
![Page 51: Introducción al Desarrollo Web](https://reader035.vdocuments.co/reader035/viewer/2022070513/5888add01a28ab80248b535f/html5/thumbnails/51.jpg)
¡ GRACIAS POR SU ATENCIÓN !