• Save
Curso HTML CSS 3/4
Upcoming SlideShare
Loading in...5
×
 

Curso HTML CSS 3/4

on

  • 1,599 views

 

Statistics

Views

Total Views
1,599
Views on SlideShare
1,593
Embed Views
6

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 6

http://www.slideshare.net 4
https://www.linkedin.com 1
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Presentación de Alumnos - Nombre, cargo, sector, actividad
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.

Curso HTML CSS 3/4 Curso HTML CSS 3/4 Presentation Transcript

  • Curso HTML / CSS Tercera Sesión
  • Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias
  • Qué vimos hasta ahora?
    • Sesión 1
      • Definición de HTML, diferencias markup procedural y descriptivo.
      • Elementos y atributos.
      • HTTP, URLs,
      • Métodos y Headers HTTP.
  • Qué vimos hasta ahora?
    • Sesión 2
      • Sintáxis HTML.
        • Caracteres de Control.
        • Comentarios.
        • Entidades
      • Estructura. head y body.
      • Head; Title, Meta, Links
  • Qué vimos hasta ahora?
    • Sesión 2
      • Body:
        • DIV y SPAN
        • Hs, P, A, UL, OL (Block e inline).
      • Otros: EM, ACRONYM, ABBR, Q, CITE
      • TABLE, TBODY, TR, TH, TD
      • FORM
        • INPUT
    • Validación W3C
  • Tercera Sesión
    • Introducción
      • HTML. Historia. Versiones. CSS.
      • HTTP y tipos de sitios web.
    • HTML
      • Estructura y sintaxis.
      • Secciones y elementos.
    • Elementos.
      • Clasificación. Ejemplos
      • Formularios
    • CSS
      • Referencia. Sintaxis.
      • Elementos y selectores.
      • Layout tipicos
    • SEO
  • HTML | FORM y OTROS
  • HTML
    • < IMG/>
    • Define un link a una imagen en el documento.
    • Tiene DOS atributos obligatorios:
      • src : URL de la imagen (Abs o rel)
      • alt : Texto alternativo para la imagen.
    • Puede tener además: title, align, width, height.
    • <img src=”/images/launch.jpg” alt=”Launch”>
    • <img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>
  • HTML
    • < IMG/>
    • Define un link a una imagen en el documento.
    • Tiene DOS atributos obligatorios:
      • src : URL de la imagen (Abs o rel)
      • alt : Texto alternativo para la imagen.
    • Puede tener además: title, align, width, height.
    • Ejemplos: <img src=”/images/launch.jpg” alt=”Launch”>
    • <img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>
  • HTML
    • <BR/>
      • Line Break
    • <HR/>
      • Horizontal Line
    • Sólo usar en
    • caso de emergencias...
  • HTML | Forms
    • <FORM>
        • Recibe dos atributos:
          • action : URL que recibe el form
          • method : GET o POST
          • enctype: multipart/form-data ó application/x-form-urlencoded
      • <LABEL>
        • for
      • <INPUT/>
        • type
        • name
        • checked
        • value
  • HTML | Forms
    • Tipos de INPUT
      • text
        • size
        • maxlength
        • disabled
        • readonly
        • id
        • name
        • >> Ver ejemplos
  • HTML | Forms
    • Tipos de INPUT
      • radio
        • value
        • checked
        • readonly
        • disabled
        • id
        • name
        • >> Ver ejemplos
  • HTML | Forms
    • Tipos de INPUT
      • Checkbox
        • value
        • checked
        • readonly
        • disabled
        • id
        • name
        • size
        • >> Ver ejemplos
  • HTML | Forms
    • Tipos de INPUT
      • <SELECT>
        • <OPTION>
          • value
          • selected
        • >> Ver ejemplos
  • HTML | Forms
    • Tipos de INPUT
      • <TEXTAREA>
        • rows
        • cols
        • name
        • id
        • disabled
        • readonly
        • >> Ver ejemplos
  • CSS
  • CSS
    • CSS
    • Cascade Style Sheet
    • Lenguaje que define el estilo de una página
    • Es interpretado por el browser.
    • Mejora la separación contenido <-> presentación y con ellos la accesibilidad
      • Tiene una sintáxis simple
    • Puede estar definido en el documento HTML, o referido como un recurso externo.
  • CSS | Básicos
    • Ejemplo:
    • >> Ver ejemplo
    • Probar
    • color
    • background
    • margin
    • border
    • font-size
  • CSS | Básicos
    • Sintáxis Básica
    • <selector> {
    • propiedad1 : valor2;
      • propiedad2 : valor2;
      • ...
    • }
    • Los selectores pueden ser Ids, Clases or Elementos. Las propiedads son nombres en inglés. Los valores pueden identificarse en diferentes unidades.
    • Ejemplo de propiedades
      • color
      • background
      • margin
      • border
      • font-size
    CSS | Básicos
    • Unidades básicas
    CSS | Básicos
    • ¿Cuál es la diferencia
    • entre un mm y un píxel?
    • ¿Cómo se especifica un color?
    CSS | Básicos
    • Unidades
      • Tamaños
        • em : relativo al tamaño de texto actual: 1em
        • % : relativo al tamaño de texto o al tamaño de la ventata.
        • px : pixeles (unidad de resolución)
        • mm/cm ; pc/pt/in: (unidades de medidas físicas)
      • URL
        • url(http:/xxx/yyy)
        • url(/xxx/yyy)
                  • >>Ver ejemplo URL
    CSS | Básicos
    • Unidades
      • Colores
        • nombre! (red, yellow...)
        • rgb(255,255,255)
        • rgb(100%,100%,100%)
        • #RRGGBB
        • #RGB
    CSS | Básicos Números hexadecimales entre 0 y F B R G
  • Algunos ejemplos p { color: red; background: green url(“/wall.png”); width: 70%; border: 2mm solid red; font-size: 1.2em; } CSS | Básicos Agrupamiento p, form, li { color: red; }
  • CSS | Cómo utilizarlos?
    • Agregar CSS a HTML
      • Inline
        • Sólo útil para estilos únicos
      • Embedded
        • No es aconsejable, pero es rápido.
      • Linked : El CSS se encuentra en un archivo externo.
        • Mejor para mantener
        • Optimiza la velocidad de carga de la página.
    • Agregar CSS a HTML
      • Inline
        • <p style=”color:red”>hola</p>
      • Embedded
        • <head> <style type=”text/css”> rojo { color:red } </style> </head>
        • <p class=”rojo”>
      • Linked : El CSS se encuentra en un archivo externo.
        • <link ref=”stylesheet” type=”text/css” href=”xx.css”>
        • <p class=”rojo”>
    CSS | Cómo utilizarlos?