Introducción al Desarrollo Web

< 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>


<h6>Soy el mas pequeño</h6>


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 !

Introducción al Desarrollo Web

Technology

Transcript of Introducción al Desarrollo Web