curso fpe diseño web. módulo 2. el html
DESCRIPTION
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 4TRANSCRIPT
![Page 1: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/1.jpg)
FPE Diseñador Web y MultimediaCarmina Barreiro. Curso de Adams.
Módulo 1. Teoría. Planificar y entender. Módulo 2.
HTML. El esqueleto de la web.
![Page 2: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/2.jpg)
EL HTML
Definición:
HTML: HyperText Markup Language (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
![Page 3: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/3.jpg)
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
![Page 4: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/4.jpg)
EL HTML
Estructura básica del código: Etiquetas <--> Elementos. Formado por Etiquetas, atributo y contenido.
<p align=“center”> Esto es un párrafo </p>
atributo variable
Elemento
Etiqueta Inicio EtiquetaCierreContenido
![Page 5: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/5.jpg)
EL HTML
Estructura básica del código:
<p align=“center”> Esto es un párrafo </p>
atributo variable
• Cada elemento está contenido entre la etiqueta de inicio y cierre.
• El atributo de un elemento se especifica en la etiqueta de inicio.
• La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=»
Elemento
Etiqueta Inicio EtiquetaCierreContenido
![Page 6: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/6.jpg)
EL HTML
Tipos de marcado o etiquetado Presentacional o de formato Estructural Hipertextual
![Page 7: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/7.jpg)
EL HTML
Tipos de marcado Presentacional o de formato:
El marcado presentacional describe 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.
![Page 8: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/8.jpg)
EL HTML
Tipos de marcado Estructural:
El marcado estructural describe 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)
![Page 9: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/9.jpg)
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
![Page 10: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/10.jpg)
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>
-Body define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador<body></body>
![Page 11: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/11.jpg)
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
![Page 12: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/12.jpg)
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.
![Page 13: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/13.jpg)
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.
![Page 14: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/14.jpg)
EL HTML
Tabla de Acentos:
![Page 15: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/15.jpg)
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>
![Page 16: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/16.jpg)
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>
![Page 17: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/17.jpg)
EL HTML
Etiquetas HTML: <ul><li>: etiquetas para listas. <blockquote>: etiqueta para citas. Aumenta el margen izquierdo
y derecho en 40 píxeles aproximadamente.
![Page 18: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/18.jpg)
EL HTML
Etiquetas HTML: <img>: imagen. Requiere del atributo src, que indica la ruta en
la que se encuentra la imagen. Por ejemplo: <img src=“mifoto.jpg" height=“100” width=“80” alt=“Foto Alumno”>
Atributos: align alt border hspace vspace
![Page 19: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/19.jpg)
EL HTML
Etiquetas HTML: <font>: determina el tipo de letra en que se mostrará en
contenido. <font face=“Times, Arial, san-serif” size=“3”>Es es el texto</font>
Atributos: face (nombre o familia como: serif, san-serife) size point-size color
![Page 20: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/20.jpg)
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)
![Page 21: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/21.jpg)
EL HTML
Etiquetas HTML: <a>: hipervínculo o enlace. Atributos: title: información extra target:
_blank_parent_self_topframename
![Page 22: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/22.jpg)
EL HTML
Etiquetas HTML: <a>: hipervínculo o enlace. Estado de los enlaces:
No visitado unvisited Activo active Visitado visited
![Page 23: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/23.jpg)
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
![Page 24: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/24.jpg)
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.
![Page 25: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/25.jpg)
EL HTML
Etiquetas HTML: <br/>: salto de linea <hr /> linea horizontal
![Page 26: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/26.jpg)
EL HTML
Etiquetas HTML: <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila).
![Page 27: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/27.jpg)
EL HTML
Etiquetas HTML: <table> Atributos de tamaño y disposición:
align width height vspace hspace cellpadding cellspacing
![Page 28: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/28.jpg)
EL HTML
Etiquetas HTML: <table> Atributos de color y apariencia:
border background bgcolor bordercolordark bordercolorlight
![Page 29: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/29.jpg)
EL HTML
Etiquetas HTML: <tr> Atributos:
align background bgcolor bordercolor bordercolorlight bordercolordark height valign width
![Page 30: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/30.jpg)
EL HTML
Etiquetas HTML: <td> Atributos:
align background bgcolor bordercolor bordercolorlight bordercolordark height valign width
nowrap colspan rowspan
![Page 31: Curso FPE Diseño Web. Módulo 2. El HTML](https://reader034.vdocuments.pub/reader034/viewer/2022052311/557b4fc1d8b42a0d388b540b/html5/thumbnails/31.jpg)
EL HTML
Etiquetas HTML: Los comentarios. Las “chuletas” del código
<!-- TEXTO DEL COMENTARIO -->
Ejemplo:<!-- Aquí empiezan los RSS del Blog -->