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 5
Es 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ÁSICOS
KEEP
IT
SIMPL
E
STUPI
DON’T
REPEAT
YOURSE
LF

Anatomía de un archivo
HTML
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 archivo
HTML
¿Qué se observo?
Tomemos de ejemplo la línea
De 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ásica
1. 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.

Sintaxis
Las 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árrafo
Los 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 HTML
Ordenadas No ordenadas
Siguen el patrón:
1. Elemento
2. Elemento
3. Elemento
Se 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>
</ol>
<ul>
</ul>

Elementos Padre-Hijo
La 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>
Padre
Hijo

Divisores
Son 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>
Sintaxis:
<div class=“Nombre” ID=“Nombre”> CONTENIDO </div>

Etiqueta Span
Ya 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
identificadores
Se utilizan las etiquetas:
<span>…</span>
Sintaxis:
<span class=“nombre” ID=“Nombre”> CONTENIDO </span>

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

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 CSS
1. * {
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 punto
Trabajaremos 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 palabras
Hexadecimal: 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. Contain
2. Cover

Propiedad:text-align: valor;
Establece el alineamiento del texto
Valores permitidos:
Right
Left
Center

Limites y Espacios
Modelo de la caja

Propiedad:border: valor valor valor;
Establece el borde del elemento
Valores permitidos:
Valor1
Grosor
Medida
Valor2
Tipo
Cadena:
Valor 3
Color
Color1. Solid
2. Dotted
3. 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:Medida
Al 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 bold bolder
Lighter 100 200
300 400 500
600 700 800 900

Propiedad: margin:valor;
Establece la distancia entre el
Elemento y lo que lo rodea
Valores 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 mostrara
Una 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-Clases
Un selector de pseudo clases serán aquell
Que nos permita seleccionar aquello que n
Es parte de el árbol o de la anatomía de un
Archivo 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 clickead

Propiedad:transition:valor;
Establece el tiempo en que un css tard
En cambiar si es que esta en proceso
cambio
Valores permitidos: Xs;
Ejemplo:
0.3s 5s 10s

Comentarios
Los 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 */

Introducción al Desarrollo Web

Más contenido relacionado

La actualidad más candente

Similar a Introducción al Desarrollo Web

Último

Introducción al Desarrollo Web