Este documento proporciona una introducción al lenguaje HTML. Explica que HTML se utiliza para crear páginas web y describe brevemente su historia. Luego detalla la estructura básica del código HTML, incluidas las etiquetas, elementos, atributos y contenido. Finalmente, explica muchas etiquetas HTML comunes y sus atributos asociados.
HTML: El lenguaje de marcado para crear páginas web
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.
6. El atributo de un elemento se especifica en la etiqueta de inicio.
7.
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.
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 centradoleftizquierdaright 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 -->