Curso FPE Diseño Web. Módulo 2. El HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Curso FPE Diseño Web. Módulo 2. El HTML

  • 2,296 views
Uploaded on

Módulo 2 del Curso FPE de Diseño Web impartido en Adams, Sevilla. Segundo Módulo, sobre la estructura y principales etiquetas del HTML 4

Módulo 2 del Curso FPE de Diseño Web impartido en Adams, Sevilla. Segundo Módulo, sobre la estructura y principales etiquetas del HTML 4

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,296
On Slideshare
2,162
From Embeds
134
Number of Embeds
4

Actions

Shares
Downloads
92
Comments
0
Likes
0

Embeds 134

http://wpclases.wordpress.com 127
http://wpclases.com 5
http://www.slideshare.net 1
http://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. FPE Diseñador Web y Multimedia
    Carmina Barreiro. Curso de Adams.
    Módulo 1.
    Teoría. Planificar y entender.
    Módulo 2.
    HTML. El esqueleto de la web.
  • 2. EL HTML
    Definición:
    HTML: HyperTextMarkupLanguage (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web.
    Usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes
  • 3. EL HTML
    Un poco de historia
    En 1991 Tim Berners-Lee hace la primera descripción de HTML, en un documento llamado HTML Tags (Etiquetas HTML).
    Describía 22 elementos que comprendían el diseño inicial y relativamente simple de HTML.
    Trece de estos elementos todavía existen en HTML 4
  • 4. EL HTML
    Estructura básica del código:
    Etiquetas <-->
    Elementos. Formado por Etiquetas, atributo y contenido.
    Elemento
    Etiqueta Inicio
    EtiquetaCierre
    Contenido
    <p align=“center”> Esto es un párrafo </p>
    atributo
    variable
  • 5. EL HTML
    Estructura básica del código:
    <p align=“center”> Esto es un párrafo </p>
    Elemento
    Etiqueta Inicio
    EtiquetaCierre
    Contenido
    atributo
    variable
    • Cada elemento está contenido entre la etiqueta de inicio y cierre.
    • 6. El atributo de un elemento se especifica en la etiqueta de inicio.
    • 7. La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=»
  • EL HTML
    Tipos de marcado o etiquetado
    Presentacional o de formato
    Estructural
    Hipertextual
  • 8. EL HTML
    Tipos de marcado
    Presentacional o de formato:
    El marcado presentacionaldescribe la apariencia del texto, sin importar su función.
    Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita.
    La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada.
  • 9. EL HTML
    Tipos de marcado
    Estructural:
    El marcado estructuraldescribe el propósito del texto.
    El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos.
    (Ver ejemplo)
  • 10. EL HTML
    Tipos de marcado
    Hipertextual:
    El marcado hipertextual se utiliza para enlazar partes del documento con:
    Otros sitios
    Otras páginas
    Partes de la misma página
  • 11. EL HTML
    Partes esenciales del documento HTML
    -HTML define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. <html></html>
    - Head define la cabecera del documento HTML; contiene información sobre el documento que no se muestra directamente al usuario. <head></head>
    -Bodydefine el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador<body></body>
  • 12. EL HTML
    Así se ve el código
    <html><head><title>Un Ejemplo</title></head><body><p>Esta es una página web con <strong>negritas</strong>, con <em>cursivas</em>, combinando <em><strong>negritas y cursivas</strong></em>.</p><blockquote> <p>Con un párrafo más abajo y con la sangría aumentada.<br /> Así cómo un salto de línea </p></blockquote></body></html>
    Así se ve la web
  • 13. EL HTML
    Etiquetas del <Head>
    <title>: define el título de la página. Aparece en la ventana del navegador y en la barra de título encima de la ventana.
    <link>: para vincular el sitio a hojas de estilo o iconos.
    <style>: para colocar el estilo interno de la página usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.
    <meta>: para metadatos como la autoría, la descripción de la página y las palabras claves para buscadores.
  • 14. EL HTML
    Etiquetas de Formato:
    <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).
    <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).
    <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).
    <u>: texto subrayado.
  • 15. EL HTML
    Tabla de Acentos:
  • 16. EL HTML
    Etiquetas HTML:
    <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
    Atributo etiquetas <h1> a <h6> align
    Valores: center centradoleft izquierdaright derecha
    <h1 align="center">Nombre de la web</h1>
  • 17. EL HTML
    Etiquetas HTML:
    <p>: etiqueta para párrafo.
    Atributo etiquetas <p> align
    Valores: center centradoleftizquierdaright derecha
    <p align="center">Texto de la web</p>
  • 18. EL HTML
    Etiquetas HTML:
    <ul><li>: etiquetas para listas.
    <blockquote>: etiqueta para citas. Aumenta el margen izquierdo y derecho en 40 píxeles aproximadamente.
  • 19. EL HTML
    Etiquetas HTML:
    <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:
    <imgsrc=“mifoto.jpg" height=“100” width=“80” alt=“Foto Alumno”>
    Atributos:
    align
    alt
    border
    hspace
    vspace
  • 20. EL HTML
    Etiquetas HTML:
    <font>: determina el tipo de letra en que se mostrará en contenido.
    <fontface=“Times, Arial, san-serif” size=“3”>Es es el texto</font>
    Atributos:
    face (nombre o familia como: serif, san-serife)
    size
    point-size
    color
  • 21. EL HTML
    Etiquetas HTML:
    <a>: hipervínculo o enlace.
    Atributo href Tipo de enlaces:
    Internos:
    Absolutos
    Relativos
    Externos
    Anclas:
    <a href=“#nombre-seccion”> (enlace apunta al ancla)
    <a name=“nombre-seccion”> (ancla a la que apunta)
  • 22. EL HTML
    Etiquetas HTML:
    <a>: hipervínculo o enlace.
    Atributos:
    title: información extra
    target:
    _blank_parent_self_topframename
  • 23. EL HTML
    Etiquetas HTML:
    <a>: hipervínculo o enlace.
    Estado de los enlaces:
    No visitado  unvisited
    Activo  active
    Visitado  visited
  • 24. EL HTML
    Etiquetas HTML:
    <body>: especifica características de la página como el fondo, ancho, apariencia de los enlaces.
    Atributos del fondo:
    bgcolor: color de fondo
    background: imagen de fondo
    bgproperties: lo mantiene fijo al hacer scroll. Valor: fixed
    Atributos de márgenes:
    topmargin
    rightmargin
    bottommargin
    leftmargin
    marginwidth
    marginheight
  • 25. EL HTML
    Etiquetas HTML:
    <body>: especifica características de la página como el fondo, ancho, apariencia de los enlaces.
    Atributos de color de los enlaces:
    link: enlaces no visitados.
    alink: enlaces activos.
    vlink: enlaces visitados.
    Otros atributos:
    text: color del texto.
  • 26. EL HTML
    Etiquetas HTML:
    <br/>: salto de linea
    <hr /> linea horizontal
  • 27. EL HTML
    Etiquetas HTML:
    <table>: define una tabla.
    <tr>: fila de una tabla.
    <td>: celda de una tabla (debe estar dentro de una fila).
  • 28. EL HTML
    Etiquetas HTML:
    <table>
    Atributos de tamaño y disposición:
    align
    width
    height
    vspace
    hspace
    cellpadding
    cellspacing
  • 29. EL HTML
    Etiquetas HTML:
    <table>
    Atributos de color y apariencia:
    border
    background
    bgcolor
    bordercolordark
    bordercolorlight
  • 30. EL HTML
    Etiquetas HTML:
    <tr>
    Atributos:
    align
    background
    bgcolor
    bordercolor
    bordercolorlight
    bordercolordark
    height
    valign
    width
  • 31. EL HTML
    Etiquetas HTML:
    <td>
    Atributos:
    align
    background
    bgcolor
    bordercolor
    bordercolorlight
    bordercolordark
    height
    valign
    width
    nowrap
    colspan
    rowspan
  • 32. EL HTML
    Etiquetas HTML:
    Los comentarios. Las “chuletas” del código
    <!-- TEXTO DEL COMENTARIO -->
    Ejemplo:
    <!-- Aquí empiezan los RSS del Blog -->