Scribd
Cargar
11 vistas47 páginas

HTML y XHTML (Parte I)

Cargado por

jacano85
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas47 páginas

HTML y XHTML (Parte I)

Cargado por

jacano85
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 47

2.

HTML Y XHTML
(PARTE I)
CARMEN MARTÍNEZ SÁNCHEZ
1. Evolución histórica

 Tim Berners Lee desarrolla HTML (HyperText Markup Language) a principios de


los años noventa para potenciar la colaboración en la investigación de la
energía nuclear.
 Objetivo principal: Enlazar documentos mediante links (hipervínculos).
 1991 se publica un documento formal con el nombre “HTML tags” pero
debido a sus limitaciones surge en 1993 el primer intento de especificación
oficial HTML 1.2 que no consiguió al final ser reconocida.
 En 1995 se tiene el primer estándar oficial HTML 2.0.
 En 1997 se publica la versión 3.2 por la organización W3C (World Wide
Web Consortium), que es desde ese momento el organismo oficial encargado
de publicar los estándares oficiales. Esta versión incluyo las tablas y los
applets de Java.
 En 1998 aparece HTML 4.0 con mejoras de soporte para lenguajes de script,
hojas de estilo CSS, accesibilidad para discapacitados, etc. En este mismo año
aparece la primera versión de XML.
 En el año 2000 aparece la versión 1.0 de XHTML que es una reformulación
de HTML 4.0 basado en XML. Este estándar es ampliamente aceptado y
utilizado por la comunidad de desarrolladores web.
 En el año 2004 las empresas Apple, Mozilla y Opera crearon un grupo de
trabajo llamado WHATWG con el objetivo de continuar el desarrollo de HTML.
 En el 2007 los grupos WHATWG y W3C deciden unirse para el desarrollo de
HTML 5, el cual tiene su primer borrador en 2008.

 Se decide dejar de trabajar en XHTML 2.0 y dedicarse al trabajo de HTML 5,


el cual se ha ido incorporando progresivamente debido a su gran potencia
junto a CSS.
 HTML 5
 Surge para resolver problemas prácticos, dando soluciones para facilitar el trabajo en
situaciones reales. El principal cambio es la inclusión del DOM (Document Object Model,
Modelo de Objetos del Documento) que define un conjunto de entidades presentes en un
documento HTML, y las funciones que pueden realizarse sobre ellas.
 En 2016 se aprobó́ la versión 5.1. que era una pequeña revisión del estándar.
 HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2.
Permite una mayor interacción entre nuestras páginas web y el contenido media (video,
audio, etc.) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
 Nuevas características
 Los nuevos elementos multimedia como <audio> y <video>.
 Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la
necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
 La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos <object>, y un
nuevo elemento <canvas> que nos permite dibujar en él.
 El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
 MathML para fórmulas matemáticas.
2. Estructura del docum ento

 Originalmente no había ningún tipo de estructura, distribuyendo el texto y las


etiquetas libremente por el documento. Al final, se acabó fijando un conjunto
mínimo de etiquetas que delimitan a un documento valido:

 Web muy recomendada para el aprendizaje de HTML5:


https://www.w3schools.com/html/default.asp
 Las etiquetas HTML no distinguen entre mayúsculas y minúsculas:
<BODY> significa lo mismo que <body>.

 El estándar HTML no requiere etiquetas en minúsculas, pero W3C recomienda


minúsculas en HTML y exige minúsculas para tipos de documentos más
estrictos como XHTML.
 Vamos a utilizar siempre etiquetas en minúsculas (aunque nos podemos
encontrar alguna cosa en mayúsculas por convención como la declaración
<!DOCTYPE>

 Lista de todas las etiquetas: https://www.w3schools.com/tags/default.asp


3. Elem entos de H TML

 Los elementos HTML le dicen al navegador cómo mostrar el contenido.

 Los elementos HTML etiquetan partes de contenido como "esto es un


encabezado", "esto es un párrafo", "esto es un enlace", etc.
 La declaración <!DOCTYPE html> define que este documento es un documento HTML5
 <html> indica que es el elemento raíz
 <head> contiene información (metainformación) sobre la página
 <title> especifíca un título para la página (se muestra en la barra de título del navegador
para dicha pestaña)
 <body> define el cuerpo del documento y dentro de dicho elemento se colocarán todos los
contenidos visibles de la página.
 El contenido dentro de la sección <body> se mostrará en un navegador. El contenido dentro
del elemento <title> se mostrará en la barra de título del navegador o en la pestaña de la
página.
 Un elemento de HTML tiene una etiqueta de inicio, un contenido y una
etiqueta de fin. Ejemplos:
 <p> Esto es un párrafo </p>
 <h1> Esto es un texto con la cabecera h1 </h1>

 Algunos elementos NO tienen contenido (elementos vacíos) como <br> que


sirve para indicar un salto de línea en el texto (retorno de carro).
 En versiones anteriores era usual indicar los elementos vacíos con la etiqueta de apertura y
de cierre <br></br> o con su forma abreviada que indica la apertura y el cierre <br/>.
 En HTML5 simplemente con la etiqueta vacía <br> es suficiente. No obstante, es posible que
pueda dar algún problema si el HTML se está mezclando con algún navegador muy antiguo.

 Algunos elementos HTML se mostrarán correctamente, incluso si olvida la


etiqueta final. Sin embargo, no se recomienda ya que pueden producirse
resultados inesperados y errores si olvida la etiqueta de cierre.
4. Atributos de HTML

 Todos los elementos de HTML pueden tener atributos.


 Al igual que los elementos se recomienda su escritura en minúsculas.
 Proporcionan información adicional sobre elementos.
 Siempre están especificados en la etiqueta de inicio.
 Los atributos siempre están formados por el par nombre/valor, especificados con
la estructura name=“value”. El valor aunque en ocasiones no es obligatorio se
recomienda que esté escrito entre comillas.
 Lista de todos los atributos: https://www.w3schools.com/tags/ref_attributes.asp
 Atributo href
 La etiqueta <a> define un hipervínculo. El atributo href va a permitir especifir la URL o la página del
enlace a la que ir.
<a href=“https://aulavirtual.murciaeduca.es/index.php”>Aula Virtual</a>
<a href=“https://blanca.es/nuevaweb/”>Ayuntamiento de Blanca </a>
 NOTA: Cuidado al copiar, que muchas veces las comillas son de tipo diferente y puede
hacer que no funcionen correctamente.
 Atributo src
 La etiqueta <img> se usa para incrustar una imagen en una página HTML. El atributo src se
utiliza para especificar la ruta de la imagen: <img src=“ruta_imagen”>
 Para especificar la ruta de la imagen se podrá indicar una dirección absoluta de URL o relativa.
 Ruta absoluta: se indica toda la ruta del archivo incluyendo el directorio raíz. Por
ejemplo, src=https://blanca.es/nuevaweb/wp-content/uploads/2021/09/2021_09_23_Nuevas-rutas-
autobusesweb.jpeg
 Ruta relativa: se indica la ruta a partir de donde este en ese momento situado. Si la página que se
está mostrando está situada en la misma carpeta que la imagen se indicará directamente como
src=“2021_09_23_Nuevas-rutas-autobusesweb.jpeg” y si la página está en una carpeta diferente como
puede ser uploads en nuestro ejemplo se indicará como src=“/2021/09/2021_09_23_Nuevas-rutas-
autobusesweb.jpeg”
 Solamente se deben indicar rutas absolutas si están alojadas en servidores Web y siempre es preferible
en el caso de que sea posible utilizar rutas relativas ya que si se cambia de dominio seguirá
funcionando.
 En ningún caso (Error muy frecuente) debemos indicar la ruta en términos de ruta física del
ordenador tipo C:\carpeta1\carpeta2\imagen.jpg”.
 Las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene permiso
para usarlo, puede estar violando las leyes de derechos de autor. Además, no puede controlar
las imágenes externas; se puede quitar o cambiar de repente.
 Atributo width y height
 La etiqueta <img> también debe contener los atributos de width y
height, que especifican el ancho y alto de la imagen en píxeles
<img src="https://blanca.es/nuevaweb/wp-
content/uploads/2021/09/2021_09_23_Nuevas-rutas-autobusesweb.jpeg"
width="360" height="240">

 Atributo alt
 Sirve para especificar un texto alternativo para la imagen por si
alguna razón esta no puede ser mostrada (mala conexión, URL rota o
si se está usando un lector de pantalla muy utilizado por personas
con problemas de visión).
<img src="https://blanca.es/nuevaweb/wp-
content/uploads/2021/09/2021_09_23_Nuevas-rutas-autobusesweb.jpeg"
width="360" height="240" alt="Miembros de la corporación del
Ayuntamiento muestran el mapa de movilidad">
 Este atributo a priori no tiene efectos que se puedan visualizar en el
navegador si todo funciona correctamente.
 Este sería su aspecto en el caso de error
 Atributo style
 El atributo style es usado para
añadir algún estilo a un elemento
como un color, fuente, tamaño, etc.
 Le dedicaremos un apartado
posteriormente por su especial
importancia.
 Ejemplo:

<p style="color:blue;">Aquí aprenderás


cosas sobre HTML y otros lenguajes
similares.</p>
 Atributo lang
 Es conveniente incluir el atributo lang para indicar el idioma o lenguaje de la página web
 Se incorpora dentro del elemento html
 Es posible consultar el código de todos los países en la dirección:
https://www.w3schools.com/tags/ref_language_codes.asp (España tiene el código es)
<html lang="es">
 Es posible también añadir el código del país en algunos casos pasando a tener el código en
lugar de 2 dígitos, un par de 2 dígitos separados por un guion. En el siguiente ejemplo
vemos que el lenguaje es el inglés y Estados Unidos el país.
<html lang="en-US">

 Atributo title
 No confundir con el elemento <title> del <head>
 Proporciona información adicional del elemento en el que se añade.
 Su contenido puede mostrarse como un ”tooltip” al colocar el ratón sobre el contenido
5. Encabezados y párrafos
 Los encabezados h1, h2,…, h6 son títulos o subtítulos que se desean mostrar en
una página web.
 h1 es más grande en tamaño (encabezado más importante) que h2 que a su vez es
más grande que h3 y así sucesivamente hasta h6 (menos importante).

 Los navegadores agregan automáticamente algunos espacios en blanco (un margen)


antes y después de un encabezado.
 Su uso es importante
 Los motores de búsqueda utilizan los títulos para indexar la estructura y el contenido de sus páginas
web.
 Usuarios a menudo hojean una página por sus títulos (importante los títulos para estructurar página)

 Cada encabezado HTML tiene un tamaño predeterminado. Sin embargo, puede especificar
el tamaño de cualquier encabezado con el atributo de estilo, utilizando la propiedad de
tamaño de fuente de CSS
 Los párrafos en HTML se definen con el elemento <p>
 Siempre comienzan en una nueva línea y el navegador siempre añade espacio en blanco
antes y después del párrafo.
 No puede estar seguro de cómo se mostrará HTML, las pantallas grandes o pequeñas y las
ventanas redimensionadas generarán resultados diferentes.

 La etiqueta <hr> define un salto temático en una página HTML y, por lo


general, se muestra como una regla horizontal.
 Es usado para separar contenido o definir un cambio en una página HTML
 Al igual que la etiqueta <br> NO tiene contenido.

 La etiqueta <br> define un salto de línea.


 El elemento <pre> define texto preformateado
 El contenido que se encuentra dentro de las etiquetas <pre> y </pre> se muestra sin formato
con una fuente de letra fija (generalmente Courier), preservando las líneas y espacios que ya
se hayan introducido.
6. Estilos

 Con los estilos es posible añadir variedades de estilos como color, fuente,
tamaño y otros más.
 La sintaxis es la siguiente: <nombre_etiqueta style=“property:value;”>
 Property es una propiedad CSS
 Value es un valor CSS.

 Property background-color
 Define el color de fondo para un elemento HTML
 Property Color.- Define el color del texto del elemento HTML

 Property font-family.- Define la fuente del texto usada para un elemento HTML
 Property font-size.- Define el tamaño del texto para un elemento HTML

 El listado de propiedades CSS son infinitas y cada una tiene variedad de


valores que puede tomar: https://www.w3schools.com/cssref/
7. Texto con especial significado
 HTML contiene varios elementos para definir texto con especial significado.
 <b>  Texto en negrita pero sin indicar que tiene especial importancia.
 <strong>  Elemento que contiene una especial importancia, mostrado generalmente en
negrita
 <i>  Texto en cursiva. Se utiliza a menudo para indicar un término técnico, una frase de
otro idioma, un pensamiento, el nombre de un barco, etc.
 <em>  Define un texto enfatizado. El contenido del interior se muestra normalmente en
cursiva. Un lector de pantallas lo pronunciará con énfasis, acentuando dichas palabras.
 <small>  Define texto más pequeño
 <mark>  Define texto que debería ser marcado o resaltado.
 <del>  Define texto que se ha eliminado de un documento. Los navegadores suelen marcar
una línea a través del texto eliminado
 <ins>  Define un texto que ha sido insertado en el documentado. Los navegadores suelen
subrayar el texto insertado.
 <sub>  Define subíndices. El texto en subíndice aparece medio carácter debajo de la línea
normal y, a veces, se representa en una fuente más pequeña. Ejemplo uso: fórmulas químicas.
 <sup>  Define superíndices. Aparece medio carácter por encima de la línea normal y, a
veces, se representa en una fuente más pequeña. Ejemplo uso: Notas al pie.
8. Elementos de cita
 El elemento <blockquote> define una sección que es citada de otra fuente.
 Se puede acompañar del atribute cite para indicar la fuente de la cita (desafortunadamente
en el navegador no se apreciará nada en especial, por lo que en el caso de que se quiera
visualizar se tendrá que hacer manualmente).
 Algunos navegadores (no es cosa del estándar) pueden aplicar sangría.
 La etiqueta HTML <q> define una cita breve. Los navegadores normalmente
insertan comillas alrededor de la cita.

 La etiqueta HTML <abbr> define una abreviatura o un acrónimo, como "HTML",


"CSS", ”XML",
 Las abreviaturas de marcado pueden proporcionar información útil para navegadores,
sistemas de traducción y motores de búsqueda.
 Sugerencia: use el atributo de título global (<title>) para mostrar la descripción de la
abreviatura/acrónimo cuando pase el mouse sobre el elemento.
 Algunos lenguajes pueden puntear la abreviatura
 El elemento <address> define la información de contacto del autor/propietario
de un documento o un artículo.
 La información de contacto puede ser una dirección de correo electrónico, URL, dirección
física, número de teléfono, identificador de redes sociales, etc. Estos elementos pueden ir
separados por el elemento <br> y así sean mostrados cada uno de ellos en una línea
diferente.
 El texto del elemento <address> generalmente se muestra en cursiva y los navegadores
siempre agregarán un salto de línea antes y después del contenido incluido en el elemento
<address>.

 La etiqueta HTML <cite> define el título de un trabajo creativo (por ejemplo,


un libro, un poema, una canción, una película, una pintura, una escultura,
etc.).
 Nota: NO se utiliza para nombres de personas
 El texto del elemento <cite> suele aparecer en cursiva.
9. Colores
 Los nombres de colores se pueden especificar con nombres de colores
predefinidos o con valores RGB (Red, Green, Blue), HEX (Codificación
hexadecimal del color en pantalla), HSL (Hue, Saturation, Lightness – matiz,
saturación, intensidad), RBGA (Red, Green Blue, Alpha) o HSLA (Hue, Saturation,
Lightness, Alpha).
 En HTML, un color puede ser especificado usando un nombre de color
 Algunos de los nombres de colores soportados por todos los navegadores los podemos
encontrar en el siguiente enlace: https://www.w3schools.com/colors/colors_names.asp

 Es posible establecer un color en muchas situaciones


 Cambiar el color de fondo a un elemento h1
 Cambiar el color al texto de un párrafo
 Establecer un color de borde para un elemento como un encabezado h1
 Es posible establecer los colores
 Valor RGB  rgb(x, y, z)
 Valor HEX  #valorHex
 Valor HSL  hsl(x,y%,z%)
 También en RGBA y HSLA añadiendo el valor alpha
10. CSS en H TML

 CSS son las siglas de “Cascading Style Sheets” y nos permite ahorrar mucho
trabajo al controlar el diseño de varias páginas web a la vez.
 Su principal función es formatear el diseño de una página web: color, fuente,
tamaño del texto, espacio entre los elementos, cómo se colocan y distribuyen
los elementos, qué imágenes de fondo o colores de fondo se utilizarán,
diferentes formatos para diferentes dispositivos y tamaños de pantalla, etc.

 CSS se puede agregar a documentos HTML de 3 formas:


 Inline  Mediante el uso del atributo de estilo dentro de los elementos HTML
 Internal  Mediante el uso de un elemento <style> en la sección <head> (
 External  Mediante el uso de un elemento <link> para vincular a un archivo CSS externo. Es
La forma más común de agregar CSS es mantener los estilos en archivos CSS externos
(aunque los ejemplos que veremos en este tema serán de los otros tipos)
 INLINE CSS
 Se utiliza un CSS en línea para aplicar un estilo único a un solo elemento HTML.
 Usa el atributo <style> de un elemento HTML.
 Ejemplo color del texto del elemento <h1> en azul y el color del texto del elemento <p> en
rojo:

 ¿De qué color se visualizarán los siguientes ejemplos?


 Internal CSS
 Se utiliza un CSS interno para definir un estilo para una sola página HTML.
 Se define en la sección <head> de una página HTML, dentro de un elemento <style>.
 El siguiente ejemplo establece el color del texto de TODOS los elementos <h1> (en esa
página) en azul, y el color del texto de TODOS los elementos <p> en rojo. Además, la página
se mostrará con un color de fondo "azul claro":
 Todos los h1 de la página serán de color azul, salvo que alguno tenga algún
estilo Inline que esté predominará sobre el anterior (debemos ser muy
ordenados si no queremos tener soluciones no deseadas)
 External CSS
 Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
 Para usar una hoja de estilo externa, se indica el enlace en la sección <head> en cada
página HTML que quiera utilizar dicho estilo.
 Ventaja: Puedes cambiar el aspecto de un sitio web completo cambiando un archivo.
 En el siguiente ejemplo se utiliza una hoja de estilo que se llama estilo1.css y que se
encuentra en el mismo directorio que la página html
 La hoja de estilos tiene que tener la extensión css y su contenido podría ser
el siguiente para tener el mismo que los estilos indicados anteriormente en la
versión Internal
 Aunque por su importancia le vamos a
dedicar un tema a CSS vamos a
indicar algunas de sus propiedades
más comúnmente usadas.
 La propiedad color de CSS define el color
del texto que se utilizará.
 La propiedad font-family de CSS define la
fuente que se utilizará.
 La propiedad font-size de CSS define el
tamaño del texto que se utilizará.

 Vamos a completar el ejemplo de CSS


Internal anterior indicando para el h1
como fuente a verdana y tamaño un
300% y para los parráfos como fuente
courier y de tamaño un 160%
 La propiedad border permite definir un borde alrededor de un elemento HTML
(es posible definir un borde para casi todos los elementos de un elemento
HTML)
 Se deben indicar tres valores: border-width, border-style y border-color
 La propiedad padding define el espacio (relleno) entre el texto y el borde

 La propiedad margin define un margen (espacio) fuera del borde.


11. Enlaces
 Se utiliza la etiqueta <a> ya mencionada anteriormente con el atributo href
sirve para indicar el enlace de destino.
 Por defecto los enlaces aparecen de la siguiente manera en todos los
navegadores
 Un enlace no visitado está subrayado y en azul
 Un enlace visitado está subrayado y de color violeta.
 Un enlace activo está subrayado y en rojo (los enlaces están activos en el preciso momento
en que se pincha sobre ellos)
 NOTA: Por supuesto, los enlaces se pueden diseñar con CSS y cambiar su aspecto.

 De forma predeterminada, la página vinculada se mostrará en la ventana del


navegador actual. Se puede utilizar el atributo target para cambiar esto que
puede tomar uno de los siguientes valores
 _self: predeterminado. Abre el documento en la misma ventana/pestaña en la que se hizo
clic
 _blank: abre el documento en una nueva ventana o pestaña
 _parent: abre el documento en el marco principal
 _top: abre el documento en todo el cuerpo de la ventana
 Para usar una imagen como enlace, simplemente es necesaria colocar la
etiqueta <img> dentro de la etiqueta <a>

 Para crear un enlace que abra el programa de correo electrónico del usuario
se debe utilizar mailto: dentro del atributo href

 Para usar un botón HTML como enlace, debe agregar un código JavaScript
que va a permitir especificar qué sucede en ciertos eventos, como hacer clic
en un botón
 Para cambiar los colores que
por defecto se muestran
podemos hacer uso de las
propiedades correspondientes
CSS.
 En el siguiente ejemplo un
enlace no visitado será verde
sin subrayado. Un enlace
visitado será de color rosa sin
subrayado. Un enlace activo
será amarillo y subrayado.
Además, al pasar el mouse
sobre un enlace (a: hover) se
volverá rojo y subrayado:
 Los enlaces HTML se pueden utilizar para crear marcadores, de modo que los
lectores puedan saltar a partes específicas de una página web.
 Esto es útil cuando una página web es demasiada larga

 Primero se debe crear el marcador utilizando el atributo id y posteriormente


se añade el enlace a este utilizando el #

 Cuando se hace clic en el enlace, la página se desplazará hacia abajo o


hacia arriba hasta la ubicación del marcador.
 Enlace:

 Llamada:

También podría gustarte