Fundamentos de Desarrollo Web/HTML PDF

FUNDAMENTOS DE DESARROLLO WEB Curso académico 2024 – 2025  Fundamentos de Desarrollo Web/HTML 2 HTML: Índice 1. Introducción 2. Estructura del documento 3. Elementos y etiquetas 4. Elementos de bloque 5. Elementos de línea 6. Integración...

FUNDAMENTOS DE DESARROLLO WEB Curso académico 2024 – 2025  Fundamentos de Desarrollo Web/HTML 2 HTML: Índice 1. Introducción 2. Estructura del documento 3. Elementos y etiquetas 4. Elementos de bloque 5. Elementos de línea 6. Integración Multimedia  Fundamentos de Desarrollo Web/HTML 3 HTML: Introducción  HyperText Markup Language.  Lenguaje con el que se escribe una página web o documento electrónico adaptado para la World Wide Web que forma parte de un sitio web.  Una web está compuesta por:  Información (texto o multimedia).  Hiperenlaces (para ir a otros documentos).  Datos de estilo (que indican cómo se visualiza).  Aplicaciones empotradas o embebidas (interactividad).  El contenido de una página puede ser:  Predeterminado (estático). Las páginas no se actualizan en mucho tiempo.  Generado en el momento de su visualización al solicitarla a un servidor Web (página web dinámica). Para ello, se utilizan lenguajes como PHP, Java, ASP, Node.js, etc.  Fundamentos de Desarrollo Web/HTML 4 INTRODUCCIÓN A HTML Estructura del Documento  Fundamentos de Desarrollo Web/HTML 5 HTML: Estructura del Documento  Directivas  Declaración DOCTYPE para identificar el tipo de documento, en nuestro caso HTML5.  Cabecera  Contiene información de identificación y control que no se muestra en la ventana del navegador.  Cuerpo  Es donde se representa el contenido del propio documento, es decir, lo que se ve en la página web.  Fundamentos de Desarrollo Web/HTML 6 HTML: Estructura del Documento  Ejemplo  Fundamentos de Desarrollo Web/HTML 7 Estructura del Documento: Directivas  Directiva DOCTYPE  Hace referencia a la DTD a la que se ajusta el documento.  DTD - Definición de tipo de documento.  Utilizado por el estándar para definir la gramática.  Establece las reglas de formación del lenguaje formal, qué combinaciones de símbolos elementales son sintácticamente correctas.  Se identifica la estructura del documento.  Aquellos elementos que son necesarios en la elaboración de un grupo de elementos estructurados de manera similar.  La directiva de HTML5:  https://www.w3schools.com/tags/tag_doctype.asp (directiva)  https://www.w3schools.com/tags/ref_html_dtd.asp (tabla de elementos y DOCTYPEs válidos)  Fundamentos de Desarrollo Web/HTML 8 Estructura del Documento: Directivas  Ejemplo  Fundamentos de Desarrollo Web/HTML 9 Estructura del Documento: Cabecera   Contiene datos que no se consideran parte del contenido del documento, pero aportan información sobre el mismo.  Título  Pruebas HTML  Se visualiza en la barra de títulos de la ventana.  Se utiliza como referencia para marcadores.  No puede contener otros elementos ni tener formato, aunque sí caracteres especiales.  No confundir con el atributo title (ya no se usa en HTML5).  Fundamentos de Desarrollo Web/HTML 10 Estructura del Documento: Cabecera  Ejemplo  Fundamentos de Desarrollo Web/HTML 11 Estructura del Documento: Cabecera  Otros elementos  META - Para añadir metadatos.  LINK - Para poder incluir recursos externos (css).  STYLE - Para añadir estilos a la página.  SCRIPT - Para incluir código JavaScript.  Pueden colocarse en cualquier orden.  Más información en la página de w3schools.  https://www.w3schools.com/html/html_head.asp  Fundamentos de Desarrollo Web/HTML 12 Estructura del Documento: Cabecera  Atributo charset = “utf-8”  Unicode Transformation Format 8-bit.  Formato de codificación de caracteres para interpretar el documento.  Permite visualizar los caracteres de todos los idiomas.  Fundamentos de Desarrollo Web/HTML 13 Estructura del Documento: Cuerpo   Constituye el contenido del documento.  Se visualizará en la pantalla del navegador.  Si se trata de un navegador no visual será presentado con sonido, braille, etc.  Gran variedad de elementos (y atributos).  Elementos de bloque.  Elementos de línea.  Fundamentos de Desarrollo Web/HTML 14 Estructura del Documento: Cuerpo  Ejemplo  Fundamentos de Desarrollo Web/HTML 15 HTML: Estructura del Documento  Resumen  Todos los documentos tendrán esta estructura.  Directiva  Tipo de documento.  Cabecera  Información extra que no se ve en la página web.  Cuerpo  Todo lo que aparece, “lo que se ve”, en la página web.  Fundamentos de Desarrollo Web/HTML 16 Estruc. del Documento: Directiva-Cabecera-Cuerpo  Fundamentos de Desarrollo Web/HTML 17 INTRODUCCIÓN A HTML Elementos y Etiquetas  Fundamentos de Desarrollo Web/HTML 18 HTML: Etiquetas de Texto  Encabezados  hasta (1: mayor nivel)  Párrafos   Fuente  Negrita ( )  Cursiva ( )  Subrayado  Salto de línea   Fundamentos de Desarrollo Web/HTML 19 HTML: Listas  unordered list  ordered list  Fundamentos de Desarrollo Web/HTML 20 HTML: Listas de Definición  Se suelen utilizar en:  catálogos  diccionarios  Fundamentos de Desarrollo Web/HTML 21 HTML: Comentarios  Ignorados por el navegador. No se visualizan.  Útiles para explicar porciones de código o hacer todo tipo de anotaciones.  Especialmente si se trabaja en equipo.  Ejemplo  Fundamentos de Desarrollo Web/HTML 22 HTML: Caracteres Especiales  Simbólico o numérico.  Comienzan con el signo ‘&’ y terminan con ‘;’  Útiles y a veces imprescindibles para representar caracteres que no pueden introducirse directamente en el editor de texto.  Ej: á á  Ej:   espaciado  Para incluir en el texto caracteres que son propios del lenguaje HTML es necesario usar su anotación codificada.  https://dev.w3.org/html5/html-author/charref  Más ejemplos  https://ascii.cl/es/codigos-html.htm  Fundamentos de Desarrollo Web/HTML 23 HTML: Hiperenlaces  Un enlace consta de dos partes:  Punto de origen: atributo href.  Siempre es una URI (Uniform Resource Identifier), expresada de manera absoluta o relativa.  Ruta absoluta  Ir a google  Ruta Relativa 