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
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.
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
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
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
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
EL HTML
Tipos de marcado o etiquetado Presentacional o de formato Estructural Hipertextual
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.
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)
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
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>
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
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.
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.
EL HTML
Tabla de Acentos:
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>
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>
EL HTML
Etiquetas HTML: <ul><li>: etiquetas para listas. <blockquote>: etiqueta para citas. Aumenta el margen izquierdo
y derecho en 40 píxeles aproximadamente.
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
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
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)
EL HTML
Etiquetas HTML: <a>: hipervínculo o enlace. Atributos: title: información extra target:
_blank_parent_self_topframename
EL HTML
Etiquetas HTML: <a>: hipervínculo o enlace. Estado de los enlaces:
No visitado unvisited Activo active Visitado visited
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
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.
EL HTML
Etiquetas HTML: <br/>: salto de linea <hr /> linea horizontal
EL HTML
Etiquetas HTML: <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila).
EL HTML
Etiquetas HTML: <table> Atributos de tamaño y disposición:
align width height vspace hspace cellpadding cellspacing
EL HTML
Etiquetas HTML: <table> Atributos de color y apariencia:
border background bgcolor bordercolordark bordercolorlight
EL HTML
Etiquetas HTML: <tr> Atributos:
align background bgcolor bordercolor bordercolorlight bordercolordark height valign width
EL HTML
Etiquetas HTML: <td> Atributos:
align background bgcolor bordercolor bordercolorlight bordercolordark height valign width
nowrap colspan rowspan
EL HTML
Etiquetas HTML: Los comentarios. Las “chuletas” del código
<!-- TEXTO DEL COMENTARIO -->
Ejemplo:<!-- Aquí empiezan los RSS del Blog -->