Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Introduccion Al Html5 y Css3

    Enviado por

    Victor Jofre
    80 visualizações53 páginas
    Clases de Html5 y CSS3

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Clases de Html5 y CSS3

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    80 visualizações53 páginas

    Introduccion Al Html5 y Css3

    Enviado por

    Victor Jofre
    Clases de Html5 y CSS3

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 53

    INS018 Desarrollo Web

    Ingeniera en Computacin e Informtica


    Semestre 2017-1

    Desarrollo Web
    Introduccin al HTML5 y CSS3

    Profesor Miguel Cantillana


    HTML5
    Qu es HTML5
    Estructura HTML5
    Sintaxis y etiquetas bsicas orientadas al texto
    Tablas, filas, celdas, nombres de columnas
    Links, imgenes y tipos de enlaces
    Divs y spans
    Herramientas para la revisin del markup
    Hojas de estilo en cascada (CSS)
    Qu es CSS?
    Estructura, sintaxis de reglas CSS, Herencia y Cascada
    Selectores de Clase, de ID y Generales
    Propiedades CSS
    Fondo, Textos, Fuentes, Bordes, Mrgenes, Padding,
    Listas
    Propiedades CSS3
    Border Radius, Box Shadow, Text Shadow, RGBA,
    @Font Face, CSS Gradient
    Selectores de CSS avanzado
    Pseudo Clases
    Pseudo Elementos
    Selectores CSS3
    Qu es HTML?
    Es un lenguaje semntico, lo que quiere decir
    que no definimos el aspecto de las cosas, sino
    lo que significan.
    Caractersticas HTML
    Lenguaje de Marcado
    Funciona a travs de etiquetas
    <etiqueta> .. </etiqueta>
    Documento Jerarquizado (DOM)
    Lenguaje Semntico
    NO es un lenguaje de diseo web
    NO es un lenguaje de programacin
    Estructura HTML
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Ttulo de la pgima</title>
    </head>
    <body>
    ....
    </body>
    </html>
    <!DOCTYPE html>
    <meta charset="UTF-8" />
    <meta name="description" \
    content="descripcin de la pgina" />
    OJO!
    <meta name="keywords"
    content="HTML,CSS,XML,Java
    Script">
    Anatoma de una etiqueta
    Sintaxis y etiquetas
    bsicas orientadas al
    texto
    Etiquetas
    Ttulos
    Prrafos
    nfasis (strong, em)
    Listas en orden
    Listas sin orden
    Links, y tipos de
    enlaces
    <a href="#">Link</a>
    <a href="#" tittle="Ir a"
    target="_blank">Link</a>
    Opciones de target
    _blank
    _self
    _parent
    _top
    Imgenes en una web
    <img src="/path/" />
    <img
    src="/path/" alt="Descripcin"
    width="100" height="100"
    title="Titulo"
    />
    <figure>
    <img src="/macaque.jpg" alt="Macaque in the
    trees">
    <figcaption>A cheeky macaque, Lower
    Kintaganban River, Borneo. Original by
    <ahref="http://www.flickr.com/photos/rclark/">R
    ichard Clark</a></figcaption>
    </figure>

    http://html5doctor.com/the-figure-figcaption-elements/
    Tablas, filas, celdas,
    nombres de columnas
    Tabla Simple
    <table>
    <tr>
    <td><strong>Curso</strong></td>
    <td><strong>Horas</strong></td>
    <td><strong>Horario</strong></td>
    </tr>

    <tr>
    <td>CSS</td>
    <td>20</td>
    <td>16:00 - 20:00</td>
    </tr>

    <tr>
    <td>HTML</td>
    <td>20</td>
    <td>16:00 - 20:00</td>
    </tr>

    <tr>
    <td>Dreamweaver</td>
    <td>60</td>
    <td>16:00 - 20:00</td>
    </tr>
    </table>
    Tabla Avanzada
    <table border="1">
    <thead>
    <tr>
    <th>Titulo 1</th>
    <th>Titulo 2</th>
    <th>Titulo 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>CSS</td>
    <td>20</td>
    <td>16:00 - 20:00</td>
    </tr>
    <tr>
    <td>CSS</td>
    <td>20</td>
    <td>16:00 - 20:00</td>
    </tr>
    <tr>
    <td>CSS</td>
    <td>20</td>
    <td>16:00 - 20:00</td>
    </tr>
    http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
    </tbody>

    <tfoot>
    <tr>
    Divs y spans
    <div>...</div>
    <span>...</span>
    Iframes
    Actividad en clases
    Actividad en clases
    Actividad en clases
    Debe poseer las siguientes caractersticas
    Debe ser un documento HTML5
    Un ttulo de primer nivel
    5 ttulos de de segundo nivel
    2 ttulos de tercer nivel
    Una imagen (puede utilizar lorempixel.com)
    2 listas sin orden con links
    Los enlaces deben abrirse en una segunda pestaa
    Debe incorporar una etiqueta inline
    Debe utilizar la etiqueta de nfasis
    Hojas de estilo en
    cascada (CSS)
    Qu es CSS?
    Estructura y sintaxis CSS
    Herencia y Cascada
    Herencia
    Cuando se establece el valor de una propiedad CSS en un
    elemento, sus elementos descendientes heredan de forma
    automtica el valor de esa propiedad.
    Cascada
    Selectores de Clase, de
    ID y Generales
    Selector de clase
    .clase_texto {
    color:#FF0000;
    font-size:14px;
    }
    Selector de ID
    #texto {
    color:#FF0000;
    font-size:14px;
    }
    Selectores generales
    p {
    color:#FF0000;
    font-size:14px;
    }

    h2 { background:olive}
    Propiedades CSS
    Propiedades de CSS
    Fondo Mrgenes
    Textos Padding
    Fuentes Listas
    Bordes
    Propiedades CSS3
    CSS3
    Border Radius
    Box Shadow
    Text Shadow
    RGBA
    @Font Face
    CSS Gradient
    Selectores de CSS
    avanzado
    Pseudo Clases
    a:focus
    a:hover
    a:active
    input:focus
    p:first-lin
    p:first-letter
    Pseudo Elementos
    .selector::after {}
    .selector::before {}
    .selector::first-letter {}
    .selector::first-line {}
    .selector::selection {}
    Selectores CSS3
    Elemento[atributo^="valor"]: selecciona todos los
    elementos que disponen de ese atributo y cuyo valor
    comienza exactamente por la cadena de texto indicada
    Elemento[atributo$="valor"]: selecciona todos los
    elementos que disponen de ese atributo y cuyo valor
    termina exactamente por la cadena de texto indicada
    Elemento[atributo*="valor"]: selecciona todos los
    elementos que disponen de ese atributo y cuyo valor
    contiene la cadena de texto indicada
    Actividad en clases
    Dado el siguiente HTML, aplicar las siguientes reglas de CSS:
    Dejar el primer elemento y ltimo elemento de la lista sin orden con
    tamao de fuente 22px
    Dejar los prrafos con 16px
    Configurar la clase .titulo_principal con margen superior a 10px,
    margen inferior a 5px, adems definir un borde inferior de color gris,
    con ancho 1px y tipo de lnea punteada
    Dejar la primera letra de los prrafos con tamao 42px
    Agregar un doble guion antes y despus en la clase crdito
    Agregar mrgenes interiores de 2px en el contorno a imgenes
    Agregar mrgenes exterior de 5px en el contorno a imgenes
    Agregar borde de color #CCC a las imgenes del documento
    Configurar los estados visited, hover y link de la siguiente forma
    Estado visitado en color morado o similar y sin linea baja
    Estado hover con linea baja y color azul
    Estado link con color negro y sin lnea baja
    Crditos
    http://www.w3schools.com/
    https://jmacias.files.wordpress.com/2011/02/n33-css-un-
    juego-de-ninos-pc-cuadernos.pdf
    http://code.tutsplus.com/es/tutorials/the-30-css-
    selectors-you-must-memorize--net-16048
    http://www.virtualnauta.com/css-ejemplos
    http://librosweb.es/libro/css_avanzado

    Você também pode gostar