html

@geninteractive




  1. HTML5
  2. HTML
  3. Sintaxis
  4. Html “serio”
  5. Etiquetas semanticas
  6. Css
  7. PROPIEDADES CSS


1. HTML5


HTML5


Que es?


     

More: HTMLRocks





HTML5 = HTML + CSS + JS





Nuestro enfoque 

HTML + CSS


2. HTML





HTML: Hyper Text Markup Language



  • 1991 HTML
  • 1994 HTML 2
  • 1996 CSS 1 + JavaScript
  • 1997 HTML 4
  • 1998 CSS 2
  • 2000 XHTML 1
  • 2002 Tableless Web Design
  • 2005 AJAX
  • 2009 HTML 5




Para que sirve?

  • Tu eres un Párrafo
  • Tu eres un encabezado
  • Tu eres un link


3. SINTAXIS



estructura





Etiquetas

<p>Soy un parrafo</p>
<header>Soy un encabezado</header>
<a>Soy un link</a>





TIPOS DE ETIQUETAS

Apertura y Cierre



TIPOS DE ETIQUETAS

Apertura:
<etiqueta>Contenido</etiqueta>
<p>Soy un parrafo</p>





TIPOS DE ETIQUETAS

Cierre:

<etiqueta>
<br>





TIPOS DE ETIQUETAS

(función)

Bloque y Línea



TIPOS DE ETIQUETAS

(función)

Bloque

<p>...</p>
<div>...</div>
<li>...</li>
<h1>...</h1>



TIPOS DE ETIQUETAS

(función)

Línea

<strong>...</strong>
<em>...</em>
<span>...</span>

La tabla periódica



Que se necesita?
+ Editor de texto plano
(textedit, block de notas, etc..)
+ Guardar como HTML
+ Browser



TENER EN CUENTA
+  No espacios
 +  No símbolos o caracteres latinos

SI    |   NO

mi_pagina.html      mi pagina.html




Ejercicio*

h1, h2, h3, li, ul, ol, li, a, strong, em, mark, blockquote, hr, img


4. HTML SERIO





DOCTYPE

html - html5



DOCTYPE

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




DOCTYPE

html5

<!DOCTYPE html>


HTML5 EStructura

  • <!DOCTYPE HTML>
  • <html lang="es"/>
  • <head>
  • <meta charset="UTF-8">
  • <title></title>
  • </head>
  • <body>
  • <h1>Titular ppal</h1>
        <p>Texto de Parrafo</p>
  • </body>
  • </html>


5. ETIQUETAS

SEMáTICAS




ANTES



Un despelote







Ahora


Rock Baby!





<header></header>


Hacer cosas como <div id="header">
es un poco estúpido cuando el 99%
de los proyectos web tienen una cabecera.
<header> está diseñada para reemplazar la
necesidad de crear divs sin significado semántico.
 



<nav></nav>
Igual que <header>, <nav> está diseñado
para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta
dentro, aunque lo recomendado es usar listas
<ul>.Sólo puedes tener un <nav> por página.




<section></section>


Define un área de contenido única dentro del sitio.
En un blog, sería la zona donde están todos
los posts. En un video de youtube,
habría un section para el video, uno para los datos del video, otro para la zona de comentarios




<article></article>


Define zonas únicas de contenido independiente.
En el home de un blog, cada post sería un article.
En un post del blog, el post y cada uno de sus comentarios sería un <article>. 


<aside></aside>


Contenido alternativo, widgets, login de usuario, etc...
Cualquier contenido que no esté relacionado
con el objetivo primario de la página va en un aside.
En un blog, obviamente el aside es la
barra lateral de información.
En el home de un periódico, puede ser el área de indicadores económicos.



<hgroup></hgroup>


Muchos headers necesitan múltiples títulos,
como un blog que tiene un titulo y un tagline
explicando el blog. <hgroup> permite colocar
un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. 
En el HTML actual, sólo puedes usar h1
una vez por sitio o el h1 pierde prioridad de SEO.




<footer></footer>


Este es obvio. Es el pie de página y todo lo que lo compone.

Y ahora vamos al <code>



6. CSS






Cascading Style Sheets
hojas de estilo en cascada


beneficios


· Control de la presentación de muchos
documentos desde una única hoja de estilo.
· Control más preciso de la presentación.
· Aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.)



SINTAXIS


  • Selector {
  •     propiedad: Valor;
  • }




Como se aplica




Estilos in-line

<h2 style="color:red;">Titulo</h2>



"- Ahora ponéselo a todos
los tags del HTML!"



Estilos en el head


  • <style> 
  • p {color: red;}
  • </style> 


"- Ok, ahora hay que ponerselos
al resto de html's del sitio"





Estilos linkeados


<link rel="stylesheet" href="estilos.css">


Un CSS para varios HTML





7. Propiedades

CSS


Colores y Fondos*

  • color 
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background


FUENTES*

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font



TEXTo*

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform



ENLACES*

  • a:link {color:#FF0000;}      /* unvisited link */
  • a:visited {color:#00FF00;}  /* visited link */
  • a:hover {color:#FF00FF;}  /* mouse over link */
  • a:active {color:#0000FF;}  /* selected link */
    •



Identificación y agrupación

de elementos (class e id)


<h1 id="titulo"></h1>

<p class="texto_normal"></p>




Agrupación de elementos (span y div)


<span class="negritaroja">Nombre</span>
<div class="noticias"></div>



El modelo de caja

margin
padding
border



Elementos flotantes (la propiedad float)

Clear
left, right, both, none, inherit

Float
left, right, none, inherit



POSICIONAMIENTO

Static
Absolute
Relative
Fixed




Z-Index

Position: Absolute;

html_css

By Nestor Tobar Araújo

Made with Slides.com

html_css

  • 2,193

More from Nestor Tobar Araújo