Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Repaso HTML y CSS

    Cargado por

    Pablo Mor Cast
    15 vistas26 páginas
    Este documento proporciona una introducción a HTML y CSS para el diseño de interfaces web. Explica las etiquetas y elementos básicos de HTML como <html>, <head>, <body>, <p>, <h1-6>, <img>, <a>, <ul>, <ol>, <table> y <form>. También cubre conceptos clave de CSS como el modelo de cajas, márgenes, posicionamiento y cajas flotantes. El documento ofrece una guía concisa pero completa sobre los fundamentos del diseño web.

    Descripción original:

    Resumen codigo html y css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento proporciona una introducción a HTML y CSS para el diseño de interfaces web. Explica las etiquetas y elementos básicos de HTML como <html>, <head>, <body>, <p>, <h1-6>, <img>, <a>, <ul>, <ol>, <table> y <form>. También cubre conceptos clave de CSS como el modelo de cajas, márgenes, posicionamiento y cajas flotantes. El documento ofrece una guía concisa pero completa sobre los fundamentos del diseño web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    15 vistas26 páginas

    Repaso HTML y CSS

    Cargado por

    Pablo Mor Cast
    Este documento proporciona una introducción a HTML y CSS para el diseño de interfaces web. Explica las etiquetas y elementos básicos de HTML como <html>, <head>, <body>, <p>, <h1-6>, <img>, <a>, <ul>, <ol>, <table> y <form>. También cubre conceptos clave de CSS como el modelo de cajas, márgenes, posicionamiento y cajas flotantes. El documento ofrece una guía concisa pero completa sobre los fundamentos del diseño web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 26

    TEMA 1.

    Repaso HTML y CSS: el diseño clásico


    (PARTE I)

    Diseño de interfaces web


    Índice de contenidos

    1. HTML (4.01)
    2. CSS
    3. Modelo de cajas
    4. Los márgenes de los elementos
    5. Visualización de los elementos
    6. Visualización en flujo normal
    7. Posicionamiento: absoluto, fijo o relativo
    8. Cajas flotantes
    1. HTML
     Estructura de un documento HTML
    <!DOCTYPE>
    1. HTML
     DOCTYPE
     Define el tipo de documento
     indica al navegador la versión y tipo de HTML empleado en el documento.
     Para HTML 4.01 existen 3 tipos de doctype:
     strict: este doctype es el que contiene la definición de html recomendada por el W3C.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">

     transitional: este doctype es igual al strict, más algunos elementos y atributos antiguos que
    han quedado desfasados, pero que se conservan por aquello de la compatibilidad.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

     frameset: este doctype es igual al transitional más los elementos específicos para la creación
    de marcos.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    De no poner el doctype, el navegador interpretará el código html escrito tal y como le parezca mejor. Se
    obtendrán resultados muy variopintos y distintos de esta forma, incluso entre dos versiones de un mismo
    navegador. Por lo tanto, lo mejor es poner siempre el doctype correcto
    1. HTML
     Ejemplo:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv = "content-type" content = "text/html; charset=utf-8"/>
    <title>Mi primera página</title>
    </head>
    <body>
    <p>Hola mundo</p>
    </body>
    </html>
    1. HTML
     HTML:
     Raíz de un documento HTML
     Contenedor del resto de etiquetas HTML
     HEAD:
     El código insertado entre las etiquetas HTML tiene que ser dividido en dos secciones principales:
    head y body
     Dentro de la etiqueta head se incluye el título y otras etiquetas como: scripts, estilos, meta
    información y más.
     Puede ser omitido en HTML5
     BODY:
     Define el cuerpo del documento
     Contiene todo el documento HTML
    1. HTML
     Etiquetas básicas
     Párrafos
     <p></p>
     Estructuran el contenido
     Saltos de línea
     <br />
     Títulos
     <hx></hx> (x : 1..6)
     Sirven para jerarquizar la información
    1. HTML
     Etiquetas de formato
     Énfasis
     <strong></strong> (mostrado por defecto como negrita)
     <em></em> (mostrado por defecto en cursiva)
     <b> </b> (empleado como último recurso)
     <i></i>
     Citas
     <blockquote></blockquote>: para citas largas, de varios párrafos
     <q></q>: para citas breves, de una línea
     <cite></cite>: citas completas que incluyen autor, libro…
    1. HTML
     Enlaces
     Enlace a una página externa
    <a href =" http ://www.algo.com" title =" Descripción "> Texto del enlace </a>

     Enlace a una página local


     Si el origen (página donde está el link) está en el mismo directorio que el destino (página a la que apunta el
    link), entonces sólo tenemos que escribir su nombre:
    <a href =" profile.html " title =" Información sobre mí">Ficha personal </a>
     Si el destino estuviera en un subdirectorio, utilizaríamos una barra / para indicar el camino:
    <a href =" galeria/color.html " title =" Galería color ">Ver dibujos a color </a>
     Si el destino estuviera un directorio por encima, pondríamos dos puntitos y una barra ../ de esta manera:

    <a href ="../index.html " title =" Página principal "> Volver al inicio </a>
    1. HTML
     Enlaces
     Enlace a una dirección de email
     <a href =" mailto : davic@ibaiondo.net" title ="duda de Diseño interfaces web">David</a>
     Anclas
     Las anclas nos permiten enlazar a una posición concreta de la página.
     Primero creamos el ancla en el sitio al que queremos enlazar después. Para esto, usamos el
    atributo id (podemos ponerlo prácticamente en cualquier etiqueta).
    Por ejemplo, así: <h3 id=" comentarios ">Lista de comentarios </h3 >
     Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la ID de antes precedida
    de una almohadilla #:
    <a href ="# comentarios " title =" Lista de comentarios "> Leer comentarios </a>
     También podemos enlazar a un ancla que esté en otra página:
    <a href =" post005.html#comentarios " title =" Lista de comentarios "> Comentarios del post no 5 </a>
    1. HTML
     Listas
     Listas ordenadas
    Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta
    <ol>:

    <ol >
    <li >Elemento 1 de la lista </li >
    <li >Elemento 2 de la lista </li >
    <li >Elemento 2 de la lista</li >
    </ol >

    Hay que tener en cuenta que con CSS podemos cambiar el número por el que
    queremos empezar a contar, así como el tipo de numeración (números arábigos,
    romanos, letras del abecedario, mayúsculas...).
    1. HTML
     Listas
     Listas sin ordenar
    Las listas sin ordenar marcan cada elemento con una viñeta, de modo que
    no se sigue una numeración. Se crean con la etiqueta <ul>.

    <ul >
    <li >Elemento 1 de la lista </li >
    <li >Elemento 2 de la lista </li >
    <li >Elemento 2 de la lista</li >
    </ul >

    Al igual que con las listas ordenadas, podemos modificar su apariencia con
    CSS y elegir el tipo de viñetas que queremos.
    1. HTML
     Listas
     Listas de definición
    Las listas de definición se diferencian de las anteriores en que cada ítem está compuesto por un par de
    elementos: un término y su definición.
    Se usan estas etiquetas: <dl> para crear la lista, <dt> para cada término y <dd> para las definiciones.

    <p>Significado de algunos smileys :</p>


    <dl >
    <dt >:) </dt >
    <dd >Sonrisa </dd >

    <dt >xD </dt >


    <dd >Carcajada </dd >

    <dt >:P</dt >


    <dd >Sacar la lengua </dd >
    </dl >
    1. HTML
     Listas
     Listas anidadas
    No, las listas anidadas no son un nuevo tipo de lista, sólo una combinación de
    las anteriores.

    Anidar significa meter una lista dentro de otra.

    No es difícil, sólo debemos tener cuidado cerrando la etiqueta que toque.

    ¿Cómo lo sabemos? Fácil: primero se cierran las interiores, y después las de


    fuera.

    Es por esto, que cuando insertamos una lista dentro de un ítem de otra lista
    (esto es, primero<li> y después <ol>, después debemos cerrar primero la lista,
    y luego el ítem de la lista exterior.
    1. HTML
     Imágenes
     Insertar una imagen
    Para poner una imagen, hacemos uso de la etiqueta <img> con unos cuantos
    atributos:
    <img src=" image .gif " width =" ancho " height =" alto " alt =" descripción " />
     Imágenes como links
    También podemos hacer que una imagen sea a su vez un enlace a una página. Los
    navegadores suelen mostrarla con un reborde para indicarnos que se trata de un
    link, pero lo podemos cambiar con CSS.
    Para poner una imagen como un link, la introducimos dentro de la etiqueta<a>:
    <a href =" http ://www.ladybenko.net" title ="Mi portafolio ">
    <img src=" images/banner.gif" width ="200 " height ="40" alt ="BenKo 's Art"/>
    </a>
    1. HTML
     Tablas
    Las principales etiquetas que disponemos para crear una
    tabla son estas:
    <table>: crea la tabla
    <caption>: pone título a la tabla
    <tr>: crea una fila
    <td>: crea una celda
    <th>: crea una celda de encabezamiento
    1. HTML
     Formularios
     Etiqueta FORM
     Campos de texto
     Campos de contraseña
     Etiquetar campos
     Áreas de texto
     Casillas de verificación
     Botones de selección
     Listas de selección
     Botones de enviar y restablecer
    1. HTML
     Formularios
     Etiqueta FORM
     Todos los formularios están encerrados por <form> y </form>.

     Dentro de esta etiqueta, van los campos del formulario, y podemos usar párrafos y saltos de
    línea para organizarlos.

     Campos de texto
     La mayoría de los campos de un formulario se crea con una sola etiqueta, <input>,
    y mediante su parámetro type especificamos el tipo de campo que queremos.

     Campos de contraseña
     Los campos de contraseña son exactamente iguales que los de texto, sólo que el
    visitante en lugar de ver los caracteres que ha introducido, ve asteriscos.
     La diferencia entre un campo de texto y uno de contraseña es meramente estética.

     Los atributos son los mismos que los de los campos de texto, lo único que cambia es que
    debemos introducir type="password".
    1. HTML
     Formularios
     Etiqueta de campos <label></label>
     Esta etiqueta se encarga de asociar texto con su campo correspondiente.
     Sólo tiene un atributo, for, y en él tenemos que indicar la id del campo al
    que queremos hacer referencia. Es decir, indica el id del campo para el
    que este elemento es título

     input
     Insertar un control en un formulario: text, password, radio, submit,
    reset, image, file, button, checkbox
     Atributos checked, disabled, readonly, alt, etc.
    1. HTML
     Formularios
     Etiqueta de campos <fieldset></fieldset>
     Agrupar de forma lógica varios campos de un formulario.

     Legend
     Definir el título o leyenda de un conjunto de campos de un
    formulario agrupados con fieldset
    1. HTML
     Formularios
     Área de texto
     La etiqueta <textarea> dispone de los atributos id, name y title,
    que funcionan como en el resto de campos de formulario.
     Además, disponemos de otros dos para indicar las dimensiones del área
    de texto: cols se encarga de establecer el ancho (medido en caracteres)
    y rows el alto, medido en líneas.
     Esta etiqueta tiene cierre (</textarea>)
    1. HTML
     Formularios
     Casillas de verificación
     Se crean con la etiqueta <input> y type=”checkbox”.
     Los atributos id, name y title funcionan con normalidad,
    pero value funciona de manera algo distinta.
     Lo que escribamos en value es lo que nos saldrá en el e-
    mail que recibamos como el valor de la variable
    (indicada en name) si la casilla está activada.
    1. HTML
     Formularios

     Botones de selección

     Aunque se crean con la etiqueta <input> indicando el parámetro type="radio", los


    radio buttons son algo especiales, así que los veremos con ejemplos.

     Listas de selección

     La etiqueta que las crea es <select> y tiene etiqueta de cierre. Entre ellas,
    insertamos las opciones que tenemos con la etiqueta <option>.

     Con selected="selected" indicamos cuál es la opción por defecto

     Botones de enviar y reestablecer

     <input type =" submit " value =" Enviar " />

     <input type =" reset " value =" Borrar " />
    Herramientas para desarrolladores en Firefox
     Inspector: permite examinar y modificar HTML y CSS de una determinada página
    Consola: muestra información relacionada con la página (errores,
    peticiones, JS, advertencias, etc)
     Depurador: permite navegar a través de código JS para detectar
    errores.
    Red: muestra la información de todas las peticiones realizadas por la
    página
     Almacenamiento: permite inspeccionar diferentes tipos de
    almacenamiento empleados por la página web
     DOM viewer: permite visualizar propiedades del DOM
    Firebug
     Extensión de Firefox para desarrolladores que permite analizar,
    editar, monitorizar y depurar el código fuente, CSS, HTML y JS de
    una página
    Colorzilla
     Extensión de Firefox para desarrolladores que ayuda en tareas
    relacionadas con colores.

    También podría gustarte