Lenguaje de marcado de hipertexto HTML5: estructura y conceptos básicos del trabajo. HTML: lenguaje de marcado de hipertexto

El lenguaje de marcado de hipertexto (HTML), un lenguaje de marcado de hipertexto, está diseñado para escribir documentos de hipertexto publicados en la World Wide Web.

Documento de hipertexto es un archivo de texto que tiene marcas especiales llamadas etiquetas, que posteriormente el navegador reconoce y utiliza para mostrar el contenido del archivo en la pantalla de la computadora. Con estas marcas, puede resaltar los títulos de los documentos, cambiar el color, el tamaño y el estilo de las letras e insertar gráficos y tablas. Pero la principal ventaja del hipertexto sobre el texto normal es la capacidad de agregar hipervínculos al contenido de un documento: construcciones especiales del lenguaje HTML que le permiten hacer clic con el mouse para ver otro documento.

Hay dos formas de crear documentos de hipertexto. Puede utilizar uno de los editores HTML WYSIWYG (por ejemplo, Microsoft FrontPage, etc.), que no requieren conocimientos especiales sobre la estructura interna del documento que se está creando. Este método le permite crear documentos para WWW sin conocimientos de HTML. Los editores HTML automatizan la creación de documentos de hipertexto y eliminan el trabajo rutinario. Sin embargo, sus capacidades son limitadas, aumentan considerablemente el tamaño del archivo resultante y el resultado obtenido con su ayuda no siempre cumple con las expectativas del desarrollador. Pero, por supuesto, este método es indispensable para los principiantes en la preparación de documentos de hipertexto.

Una alternativa es crear y marcar un documento utilizando un editor de texto normal (Bloc de notas). Con este método, los comandos HTML se insertan manualmente en el texto. Al crear documentos de esta manera, sabrá exactamente lo que está haciendo.

Como ya se señaló, un documento HTML contiene información de caracteres. Una parte del mismo es el texto mismo, es decir, los datos que componen el contenido del documento. El otro son las etiquetas (etiquetas de marcado), también llamadas banderas de marcado, construcciones especiales del lenguaje HTML que se utilizan para marcar un documento y controlar su visualización. Son las etiquetas del lenguaje HTML las que determinan en qué forma se presentará el texto, cuáles de sus componentes actuarán como enlaces de hipertexto y qué objetos gráficos o multimedia deben incluirse en el documento. La información gráfica y de audio incluida en un documento HTML se almacena en archivos separados. Los visores de documentos HTML (navegadores) interpretan las marcas de marcado y organizan el texto y los gráficos en la pantalla en consecuencia. Para archivos que contienen documentos HTML, se aceptan las extensiones .htm o .html.

No hay diferencia entre letras mayúsculas y minúsculas al escribir etiquetas. En la mayoría de los casos, las etiquetas se utilizan en pares. El par consta de una etiqueta de apertura (etiqueta inicial) y una etiqueta de cierre (etiqueta final). Sintaxis de la etiqueta de apertura:

Los paréntesis directos utilizados en una descripción de sintaxis indican que es posible que falte el elemento. El nombre de la etiqueta de cierre se diferencia del nombre de la etiqueta de apertura sólo en que está precedido por una barra diagonal:

Los atributos de etiqueta están escritos en el siguiente formato:

nombre[="valor"]

Las comillas al especificar el valor del argumento son opcionales y se pueden omitir. Para algunos atributos, es posible que no se especifique un valor. La etiqueta de cierre no tiene atributos.

La acción de cualquier etiqueta emparejada comienza donde se encuentra la etiqueta de apertura y termina cuando se encuentra la etiqueta de cierre correspondiente. A menudo, el par de etiquetas de apertura y cierre se denomina contenedor, y la porción de texto bordeada por las etiquetas de apertura y cierre se denomina elemento.

La secuencia de caracteres que compone el texto puede constar de espacios, tabulaciones, nuevas líneas, retornos de carro, letras, puntuación, números y caracteres especiales (por ejemplo, +, #, $, @). excepto los siguientes cuatro caracteres, que tienen un significado especial en HTML:< (меньше), >(mayor que), & (ampersend) y " (comilla doble). Si necesita incluir alguno de estos caracteres en su texto, debe codificarlo con una secuencia de caracteres especial.

Estructura del documento HTML

La más importante de las etiquetas HTML es la etiqueta del mismo nombre: . Siempre debería abrir su documento, al igual que la etiqueta siempre debería aparecer en la última línea del mismo. Estas etiquetas indican que las líneas entre ellas representan un único documento de hipertexto. Sin estas etiquetas, un navegador u otro espectador no puede identificar el formato del documento e interpretarlo correctamente.

La etiqueta de cierre es tan importante como la etiqueta de apertura. Si, por ejemplo, se incluye un documento en un correo electrónico, la etiqueta indica al espectador que deje de interpretar el texto como código HTML.

Un documento HTML consta de dos partes: un encabezado y un cuerpo, ordenados en el siguiente orden:

Puedes incluir en un documento HTML. comentarios, permitiéndole ocultar parte del texto del navegador. Todo lo contenido entre secuencias de caracteres permanece invisible al visualizar la página. Los comentarios no se pueden anidar unos dentro de otros.

Incluir un encabezado en el documento es opcional. El trabajo del encabezado es presentar la información necesaria al navegador y al servidor HTTP. La información colocada dentro del encabezado del documento generalmente no se muestra en la pantalla (excepto el título del documento).

El encabezado del documento se abre con la etiqueta, que generalmente sigue inmediatamente a la etiqueta. La etiqueta de cierre indica el final de esta sección, con el resto de las etiquetas de título del documento en el medio.

Muy a menudo, el título del documento incluye una etiqueta emparejada..., que define el nombre del documento. Muchos programas de visualización lo utilizan como título de la ventana en la que se muestra el documento. Los programas que indexan documentos en Internet utilizan el título para identificar la página. Un buen título debe ser lo suficientemente largo para identificar correctamente la página correspondiente, pero al mismo tiempo debe caber en el título de la ventana. El título del documento cabe entre las etiquetas de apertura y cierre. Cuerpo del documento

A diferencia del encabezado, el cuerpo del documento es un elemento obligatorio, ya que contiene todo el material de su documento (solo hay una excepción, que conoceremos más adelante: cuando el documento contiene un grupo de marcos en lugar de un cuerpo). ). El cuerpo del documento se coloca entre las etiquetas y. Todo lo que se coloca entre estas etiquetas es interpretado por el navegador de acuerdo con las reglas del lenguaje HTML, lo que permite mostrar correctamente la página en la pantalla del monitor.

La etiqueta no sólo marca el comienzo del contenido del documento, sino que también establece sus propiedades principales: color de fondo, texto y mucho más. Estas propiedades se definen utilizando los atributos que se muestran en la tabla.

Mi página Cuerpo del documento

Determinar el color de los componentes de un documento es uno de los primeros pasos para crearlo. Si no se hace esto, se utilizarán los colores predeterminados determinados por la configuración del navegador. No existen reglas para crear una paleta de colores de documentos bien equilibrada. Sólo debes asegurarte de que puedes leer el texto sin experimentar ningún inconveniente. Al elegir una paleta de colores, trate de mantener un alto contraste entre el texto y el fondo y evite áreas con colores similares adyacentes entre sí.

El color se puede especificar mediante un nombre (por ejemplo, verde) o un número hexadecimal que define el color en el modelo RGB. Este modelo de color se basa en la definición del color como una composición de tres tonos primarios de color: rojo (Red), verde (Green) y azul (Blue). Cada componente se especifica mediante un número hexadecimal de dos dígitos (es decir, varía de 00 a FF). Luego, estos valores se combinan en un solo número, precedido por un símbolo # (la mayoría de los navegadores modernos pueden reconocer el color sin especificar el símbolo #).

A continuación se muestra una tabla de los 16 colores estándar junto con sus códigos hexadecimales.

negro (negro)

plata (plata)

granate (burdeos oscuro)

rojo (rojo)

verde

lima (lima)

oliva (oliva)

amarillo

azul marino (azul oscuro)

azul (azul)

púrpura

fucsia (fucsia)

verde azulado (azul verdoso)

gris

blanco (blanco)

HTML supone que el autor del documento no sabe nada sobre la computadora del lector. El lector tiene derecho a establecer cualquier tamaño de ventana y utilizar cualquiera de las fuentes disponibles. Esto significa que el lugar donde aparece el guión de línea está determinado únicamente por la configuración del espectador y del usuario final. Los caracteres de avance de línea en el documento original se ignoran, lo que puede provocar que el texto que se ve muy bien en la ventana del editor se muestre simplemente como texto ilegible en la ventana del visor.

Puedes evitar este problema dividiendo en párrafos usando la etiqueta. Colócala al principio de cada párrafo y el espectador separará los párrafos entre sí con una línea en blanco. Usando una etiqueta de cierre

opcional. Varias etiquetas seguidas no proporcionan espacio adicional entre párrafos.

A veces es necesario “romper” el texto, moviendo el resto a una nueva línea, sin seleccionar un nuevo párrafo. Esto se hace usando la etiqueta de salto de línea.
.Obliga al espectador a mostrar los caracteres que le siguen en una nueva línea. A diferencia de la etiqueta de párrafo, la
no agrega una línea vacía. Esta etiqueta no tiene una etiqueta de cierre emparejada.

Ejemplo

José Brodsky

¿De dónde vino el invierno?

No lo sabes, nadie lo sabe.

Todo quedó en silencio. ella misma

no afloja sus fríos labios.

Algunos navegadores interpretan múltiples etiquetas adyacentes
como una etiqueta única, por lo que no deberías usarla para insertar líneas vacías.

    Otro método para dividir un documento en partes es dibujar líneas horizontales. Destacan visualmente la integridad de un área particular de la página. La etiqueta le permite dibujar una línea horizontal elevada en la ventana de la mayoría de los programas de visualización. Esta etiqueta no requiere una etiqueta de cierre. Se inserta automáticamente una línea en blanco antes y después de la línea.

Aunque HTML incluye etiquetas para lograr diversos efectos de fuente (negrita, cursiva, subrayado), no todos los navegadores las admiten. Sin embargo, todos los navegadores admiten de una forma u otra la selección de texto. Por lo tanto, el uso de formato de texto lógico hará que el espectador resalte diferentes partes del texto y revele la estructura del documento.

El título del documento especificado mediante la etiqueta no se muestra como parte del documento. Para mostrar el título, se utiliza una de las etiquetas de título. Los títulos de un documento típico se dividen en niveles. El lenguaje HTML le permite establecer seis niveles de encabezados: H1 (encabezado de primer nivel), H2, H3, H4, H5 y H6. El título de primer nivel suele ser más grande y rico que el título de segundo nivel.

Ejemplo

Encabezamientos

encabezado de nivel 1

encabezado de nivel 2

encabezado de nivel 3

encabezado de nivel 4

encabezado de nivel 5

Encabezado de nivel 6

Recuerde que si olvida incluir una etiqueta de título de cierre, la página se verá distorsionada: cualquier etiqueta de título inserta automáticamente una línea en blanco antes y después de sí misma.

Una de las diferencias entre un documento HTML y un documento preparado en una máquina de escribir es la capacidad de formatear el texto. El lenguaje HTML permite al autor de un documento elegir la fuente que le gusta, el tamaño adecuado de las letras, su color y estilo. Las etiquetas de formato físico son responsables de todas estas opciones de visualización de texto. Afectan a todos los caracteres entre las etiquetas de apertura y cierre.

Etiquetas

Solicitud

Resultado

Atrevido

Atrevido

Cursiva

Cursiva

Estresado

Estresado

Máquina de escribir

Máquina de escribir

tachado

tachado

Grande

Pequeño

Pequeño

Superior-xindex

Superior - índice x

Inferior-xindex

Inferior - índice x

Los elementos de formato físico se pueden anidar, aunque el resultado final varía según el navegador. En este caso, debe asegurarse cuidadosamente de que un contenedor esté ubicado completamente en otro contenedor, por ejemplo,

texto en negrita y subrayado

Además de las etiquetas anteriores, un documento puede utilizar la etiqueta, que le permite establecer directamente el tamaño y el color de la fuente. El elemento FONT es un contenedor, lo que significa que requiere etiquetas de apertura y cierre, y puede usarse dentro de cualquier otro contenedor de texto.

Después de la etiqueta de inicio, es necesario indicar los atributos, sin los cuales el elemento no tiene ningún efecto sobre el texto colocado en el contenedor.

El atributo FACE le permite especificar el tipo de fuente que el espectador utilizará para mostrar su texto (si el usuario tiene uno). Si la fuente requerida no está disponible, el programa ignorará la solicitud y utilizará la fuente predeterminada.

Este atributo le permite especificar una o más fuentes (separadas por comas). Se escaneará toda la lista de izquierda a derecha y se utilizará la primera disponible en la máquina del usuario para mostrar el documento.

El atributo TAMAÑO sirve para indicar el tamaño de fuente en unidades arbitrarias de 1 a 7. Se cree que el tamaño de una fuente "normal" corresponde al número 3. El tamaño puede ser un valor absoluto (TAMAÑO=5) o un valor relativo (TAMAÑO=+2). En el segundo ejemplo, el tamaño de fuente actual aumenta en 2.

El atributo COLOR establece el color de fuente, que se puede especificar en formato RGB o especificando un nombre.

Ejemplo

Texto rojo y

gran tamaño

A pesar de que un documento HTML incluye una variedad de componentes, se puede decir que los enlaces de hipertexto son la base de la WWW. Si las páginas web no estuvieran vinculadas entre sí, el contenido web se convertiría en sólo una colección de archivos no relacionados.

Se utiliza un par de etiquetas para crear un enlace de hipertexto. .... Un fragmento de texto, una imagen o cualquier otro objeto ubicado entre estas etiquetas se muestra en la ventana del navegador como un enlace de hipertexto. La activación de dicho objeto hace que se cargue un nuevo documento en la ventana del navegador o que se muestre otra parte de la página web actual. Un enlace de hipertexto se forma utilizando la expresión

fragmento de documento

HREF es un atributo obligatorio aquí, cuyo valor es la URL del recurso solicitado. Las comillas al especificar el valor del atributo HREF son opcionales.

índices de texto, es decir, los fragmentos de texto que son enlaces no difieren en apariencia. Normalmente, este indicador es una palabra o palabras subrayadas por una línea recta. El color del puntero se puede ajustar mediante la configuración del autor y del programa de visualización.

punteros gráficos, es decir, las imágenes de los enlaces se resaltan con un marco del mismo color que los indicadores de texto.

Ejemplo

Los estándares HTML actualmente admiten etiquetas para tres tipos diferentes de listas: listas numeradas (ordenadas), con viñetas (desordenadas) y de definición. Las listas y los elementos de lista son elementos de bloque. Esto significa que las líneas en blanco se agregan automáticamente antes y después de ellas.

El lenguaje HTML permite anidar cualquier tipo de listas. Para hacer esto, coloque un par de etiquetas (inicio y fin) dentro del otro. Recuerda que todas las listas existentes deben terminar con una etiqueta de cierre.

Las listas numeradas (ordenadas) se utilizan cuando el orden en el que se muestran los elementos de la lista es importante. El navegador inserta automáticamente los números de los elementos en orden; los números no se imprimen en el texto HTML original. Si el número de elementos de la lista cambia (como resultado de eliminar o agregar nuevos elementos), la numeración se actualizará automáticamente.

La lista numerada completa está encerrada entre un par de etiquetas, y cada elemento de la lista está encerrada entre las etiquetas.

  • Y
  • (etiqueta de cierre puede faltar).

  • Programación
  • Algoritmización
  • Diseño
  • Una lista con viñetas (desordenada) se utiliza para representar una colección de elementos cuyo orden no es importante. Al mostrar listas con viñetas, el navegador inserta automáticamente iconos especiales (marcadores) para marcar cada elemento de la lista.

    Una lista con viñetas comienza con una etiqueta de inicio

      y termina con la etiqueta
    . Cada elemento de la lista comienza con una etiqueta.
  • y termina con una etiqueta (opcional)
  • .

    Ejemplo

  • Programación
  • Algoritmización
  • Diseño
  • Cualquier lista puede ser parte de otra lista, anidada dentro de otra lista. Se considera útil utilizar turnos al preparar el texto del documento HTML fuente para representar claramente los niveles de anidamiento de listas.

  • Dirección
  • Ivánov I.I.
  • Petrov K.V.
  • Departamento de Marketing
  • Varshavskaya E.L.
  • Samsonov D.M.
  • Al mostrar listas con viñetas anidadas, el navegador coloca automáticamente viñetas delante de los elementos que se encuentran en diferentes niveles de anidación.

    Una tabla es una forma eficaz de mostrar datos estadísticos o información que es más conveniente presentar de esta forma. Los datos de la tabla se almacenan en celdas, que son los campos individuales que forman las filas y columnas de la tabla. Las inscripciones que se colocan encima de las columnas y describen su contenido se denominan encabezado de tabla.

    Al formar una tabla, se utilizan varias etiquetas emparejadas.

    Y
    . Indique el principio y el final de la tabla. Todas las demás etiquetas y el texto de la tabla deben aparecer entre estas dos etiquetas.

    Y. Marca el principio y el final de una línea. Todos los encabezados y celdas de cualquier fila deben estar entre estas dos etiquetas.

    Y . Define el principio y el final de la celda del encabezado de la tabla.

    Y. Marque el principio y el final de la celda de datos.

    Además, usar una etiqueta colocada dentro de una etiqueta

    puedes crear un encabezado de tabla.

    Nombre del miembro del club

    ¿Has visitado un club de lectura?

    fecha de visita

    Sin datos

    nicolás

    Presencia del atributo BORDER en la etiqueta

    elenaNo
    indica que las celdas de la tabla están delimitadas por líneas.

    El resultado será una tabla:

    Para agregar una imagen, debe ingresar la etiqueta en el lugar de la página web donde debería aparecer . El atributo SRC se utiliza para especificar el nombre del archivo que contiene la imagen. Ejemplo:

    Dependiendo de dónde esté almacenado este archivo, la ruta se indica en la etiqueta: absoluta o relativa.

    Continuamos la serie de artículos sobre los conceptos básicos de los lenguajes web y las novedades en este ámbito. Anteriormente, aprendimos sobre los conceptos básicos del lenguaje de hipertexto HTML, sus características y métodos de marcado de texto (etiquetas).

    También aprendimos que el lenguaje HTML interactúa naturalmente con desarrollos de software como estilos CSS y Javascript, y por qué es necesaria esa colaboración entre lenguajes. Hoy consideraremos en detalle la estructura de creación de documentos en HTML5. La construcción en bloque de un documento y su estructura es el tema del artículo de hoy. Pero primero debes entender qué es HTML5.

    El lenguaje de programación HTML5 (del inglés HyperText Markup Language) es la quinta versión del lenguaje. Como todas las versiones anteriores, está diseñada para construir la estructura de documentos y presentarlos en la red. Actualmente, la versión HTML5 está en desarrollo. El objetivo que persigue la creación de la quinta versión de HTML es mejorar el lenguaje en el ámbito de su trabajo con documentos multimedia (aplicaciones de audio y vídeo).

    Agregar algunas innovaciones sintácticas, como y, ayudará a minimizar los errores lógicos y de sintaxis al trabajar con archivos multimedia HTML5. Además, para enriquecer el contenido semántico del documento (semántica: el estudio del significado de las unidades lingüísticas), se introducen nuevos significados, como , , y . Algunos de los atributos se eliminarán o cambiarán. Se están introduciendo nuevas capacidades para manejar documentos no válidos para que todos los navegadores puedan manejar este tipo de documentos.

    ¿Qué es DOCTYPE?

    Cualquier documento en HTML siempre comienza con esta palabra. Todas las versiones anteriores de HTML publicaron esta declaración aproximadamente de la siguiente manera:

    donde PUBLIC indica la legibilidad del documento y DTD indica el tipo de documentos publicados (Definición de tipo de documento). La definición de DOCTYPE en HTML5 está muy simplificada:< !DOCTYPE HTML>. Eso es todo: el marcado está listo.

    Entonces, ¿qué hace la declaración DOCTYPE? Esta etiqueta está destinada a indicar a los navegadores qué estándar de idioma utilizar; la visualización de la página en su conjunto y su representación dependerán de la determinación de la versión HTML. Los estándares de desarrollo HTML están estrictamente regulados y siguen ciertas reglas, por lo que trabajar con códigos de otras personas, leerlos y mostrarlos en el navegador mediante el uso de estándares se simplifica notablemente.

    Originalmente, la declaración DOCTYPE cambiaba el navegador al modo estándar, lo que permitía el uso de estándares más nuevos. Para aquellos documentos que fueron escritos usando el estándar antiguo, es posible usar el modo de compatibilidad, que permite que el navegador funcione normalmente. La nueva declaración DOCTYPE ahora es compatible con casi todos los navegadores existentes, al mismo tiempo que los cambia al modo estándar. Es decir, cada documento recién creado debe contener el atributo DOCTYPE y cumplir con los estándares desarrollados. En este caso, se verifica que todo el código del documento cumpla con los estándares.

    Convencionalmente, puedes dividir la página completa escrita en HTML en varias subsecciones. La raíz del código principal de toda la página es la etiqueta. Es decir, puedes colocar casi cualquier cosa entre las etiquetas. Esquemáticamente, la página en HTML se representa de la siguiente manera:

    Por ejemplo:

    < !DOCTYPE HTML>< !-Любой текст, изображения, таблицы и т.д. -->

    En nuestro caso, la etiqueta contiene un atributo que determina el idioma del documento: el ruso. Para facilitar el trabajo con un documento, debe especificar el idioma del documento. Todo el contenido de la página se encuentra entre las etiquetas.... , excepto la declaración DOCTYPE.

    La etiqueta es el llamado encabezado del documento. Todos los datos necesarios sobre la página (tanto para el funcionamiento del navegador como datos informativos para el desarrollador) se encuentran entre y . El título de la página, su código (por ejemplo, UTF-8), metadatos como palabras clave, descripción de la página, nombre del autor, etc. – todos estos datos se encuentran entre las etiquetas y . Aquí puede conectar archivos externos, scripts y bibliotecas.

    ¿Qué son las metaetiquetas?

    Como se mencionó anteriormente, contienen toda la información sobre la página. Las principales metaetiquetas se describen a continuación:

    1. Tipo de codificación de página: juego de caracteres. En la mayoría de los casos, se utiliza UTF8, pero se pueden utilizar otras codificaciones, por ejemplo, windows-1251, KOI-8, ISO, etc. Un atributo como Charset determina qué codificación utilizar para leer la página. En HTML5 este atributo tiene este aspecto:

    Como puede ver, la nueva versión del lenguaje simplifica enormemente la gestión de la página, haciendo que su lectura sea más fácil y rápida.

    Metaetiqueta de descripción, es decir, un resumen de la página. Por ejemplo:

    El uso de esta etiqueta es opcional, pero deseable para proteger el contenido de la página contra copia.

    Una metaetiqueta que indica el título de una página o publicación en una página: título. La etiqueta se ve así:

    Definición de HTML y estructura del lenguaje. | tusitio.com

    El título se muestra en el título de la ventana de apertura o en la parte superior de la página.

    Las metaetiquetas de enlace y secuencia de comandos se utilizan para conectar hojas de estilo, archivos externos y bibliotecas para la ejecución. Por ejemplo, hojas de estilo CSS y JavaScript, así como la biblioteca jQuery. Las líneas de conexión para estos archivos se ven así:

    1

    Es decir, para comprender la esencia de estas líneas, uno puede imaginar la siguiente situación: los archivos CSS y JavaScript están en el servidor, pero sin estas líneas en el documento simplemente no funcionarán. Una pequeña advertencia al usar estas etiquetas es que los archivos pueden estar en un servidor local o remoto. En el último caso, debe especificar la ruta completa a los archivos en las metaetiquetas. En nuestro ejemplo, la metaetiqueta de enlace se utiliza para vincular un archivo CSS y utiliza una relación de enlace. Esta firma le permite al navegador saber que el archivo es una hoja de estilo. La etiqueta rel también tiene muchos otros significados.

    Una alternativa a la primera opción para conectar el archivo de estilos podría ser la siguiente línea:

    1 2 3 4 a (decoración de texto: subrayado;) p (color: #000000;)

    a (decoración de texto: subrayado;) p (color: #000000;)

    Este método conecta directamente el estilo a la página, sin incluir un archivo de estilo.

    La etiqueta más importante en un documento HTML es . También tiene un final de cierre. Todos los datos contenidos dentro de esta etiqueta determinan el contenido de la página: su contenido, las imágenes de la página, toda la masa de referencia contenida en el texto, etc. Por lo tanto, toda la información que viene antes de la etiqueta puede encerrarse en una especie de plantilla inmutable. El contenido del cuerpo se puede editar, reemplazar y mejorar.

    Después de considerar todos los componentes de un documento HTML de la quinta versión, puede intentar ensamblar todas las partes individuales en un todo, que será un documento HTML completo, es decir, una página de un sitio determinado. Así es como se verá la página terminada:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < !DOCTYPE HTML>Cabaña de diseño

    < !DOCTYPE HTML>Cabaña de diseño

    Lenguajes de marcado de hipertexto SGML. XML. HTML.

    SGML (inglés: lenguaje de marcado generalizado estándar; pronunciado [SJM]) es un metalenguaje en el que se puede definir un lenguaje de marcado para documentos. SGML es el sucesor del GML (Lenguaje de marcado generalizado) desarrollado en 1969 en IBM, que no debe confundirse con el Lenguaje de marcado geográfico desarrollado por Open GIS Consortium.

    SGML se desarrolló originalmente para compartir documentos legibles por máquina en grandes proyectos gubernamentales y aeroespaciales. Se utilizó ampliamente en las industrias de impresión y publicación, pero su complejidad dificultó su adopción generalizada para el uso diario.

    Partes principales del documento SGML:

    Declaración SGML: define qué caracteres y delimitadores pueden aparecer en la aplicación;

    Definición de tipo de documento: define la sintaxis de las construcciones de marcado. La DTD puede incluir definiciones adicionales, como referencias simbólicas;

    La especificación semántica, que se refiere al marcado, también proporciona restricciones de sintaxis que no se pueden expresar dentro de una DTD;

    Contenido del documento SGML: al menos debe haber un elemento raíz.

    SGML proporciona una variedad de opciones de marcado sintáctico para usar en una variedad de aplicaciones. Al cambiar la declaración SGML, incluso puede abandonar el uso de corchetes angulares, aunque esta sintaxis se considera estándar, la llamada sintaxis de referencia concreta.

    Ejemplo de sintaxis SGML:

    normalmente algo como esto

    SGML está estandarizado por ISO: “ISO 8879:1986 Procesamiento de información-Sistemas de texto y ofimática-Lenguaje de marcado generalizado estándar (SGML)”

    HTML y XML se derivan de SGML. HTML es una aplicación de SGML y XML es un subconjunto de SGML diseñado para simplificar el proceso de análisis automático de un documento. Otras aplicaciones SGML son SGML Docbook (documentación) y "Z Format" (tipografía y documentación).

    XML: lenguaje de marcado extensible, es decir, lenguaje de marcado extensible, surgió como resultado del desarrollo del lenguaje HTML (lenguaje de marcado de hipertexto, lenguaje de marcado de hipertexto). Sin embargo, sería un grave error percibirlo sólo como una versión mejorada del lenguaje HTML. En esencia, XML es una nueva generación de lenguajes de marcado. Aquí debes tener en cuenta 3 puntos que distinguen fundamentalmente XML de HTML y sus predecesores (GML - Generalized Markup Language, SGML - Standard General Markup Language):

    XML, a diferencia de HTML, NO TIENE ETIQUETAS PREDEFINIDAS; más precisamente, cada desarrollador puede crear SUS PROPIAS etiquetas XML, tantas como sea necesario. El número de estas etiquetas es prácticamente ilimitado. Así, XML es un metalenguaje que permite la creación de otros lenguajes de marcado, como HTML.

    A medida que el lenguaje HTML evolucionó, la cantidad de etiquetas aumentó rápidamente. Al final, su número alcanzó un "valor crítico": a los desarrolladores de documentos web les resultó difícil recordar cada vez más etiquetas nuevas, pero los desarrolladores de navegadores se encontraron en una posición aún peor: tuvieron que crear nuevas versiones de navegadores que "entendieran" nuevas etiquetas. Los navegadores más inteligentes también son cada vez más grandes y exigen cada vez más a los ordenadores en los que se utilizan. La cuestión se ve agravada por el hecho de que últimamente se han vuelto cada vez más populares los dispositivos portátiles (en particular, se utilizan cada vez más en el comercio electrónico), con memoria limitada y pantallas "débiles", por lo que los navegadores que se utilizan en ellos tienen posibilidades muy limitadas. . XML, que no tiene un sistema de etiquetas predefinido, soluciona este problema. El “pago” por la versatilidad es un mayor rigor en el diseño de documentos web. Las reglas para formatear documentos XML son simples:

    No se permiten contenedores de etiquetas sin cerrar (pero puedes combinar etiquetas de apertura y cierre en una, por ejemplo:
    )

    Los contenedores "anidados" no pueden "superponerse"

    Las letras minúsculas y mayúsculas se tratan como caracteres diferentes.

    Las palabras clave no se pueden utilizar como nombres de etiquetas.

    No puede utilizar espacios, signos de puntuación, llaves redondas, cuadradas o llaves en los nombres de las etiquetas.

    El guión bajo (_) y los números pueden aparecer en los nombres de etiquetas, pero un número no puede ser el primer carácter de un nombre de etiqueta.

    (Si necesita utilizar varias palabras como nombre de etiqueta, deben escribirse juntas, comenzando cada palabra con una letra mayúscula).

    Los documentos que cumplen estas reglas se denominan documentos bien formados.

    XML sirve para DESCRIBIR ESTRUCTURAS DE DATOS, principalmente ESTRUCTURAS JERARQUICAS.

    Una de las principales tendencias en el desarrollo de tecnologías web es la SEPARACIÓN DE DATOS, ESTRUCTURA DEL DOCUMENTO Y SU DISEÑO DE ESTILO. Como sabe, una de las formas de separar los datos de la estructura del documento es vincular dinámicamente el DBMS con documentos web a través de la interfaz ODBC (Open DataBase Connectivity). La separación de estilos se logra mediante el uso de hojas de estilos en cascada. XML le permite describir bases de datos no relacionales. Dado que el desarrollador puede crear etiquetas, sus nombres suelen describir el significado de los datos.

    XML, como medio para describir la estructura de datos, proporciona INTERCAMBIO DE DATOS entre diferentes aplicaciones, actuando así como una especie de "pegamento".

    No se puede subestimar la importancia de esta función de "pegamento" XML. Gracias a la capacidad de intercambiar datos entre varias aplicaciones, las tecnologías web "alcanzan" un nivel completamente nuevo.

    El lenguaje de marcado de hipertexto (HTML) es un sistema simple para crear documentos de hipertexto que son portátiles de una plataforma a otra. En esencia, los documentos HTML son documentos SGML con una semántica común que son adecuados para representar información en una amplia gama de aplicaciones. HTML se puede utilizar para representar:

    · Hipertexto de noticias, correo, documentación e hipermedia.

    Menú de opciones

    · Resultados de consultas a la base de datos

    · Documentos simples con gráficos integrados

    · Y también para visualización de hipertexto de matrices de información existentes.

    El proyecto World Wide Web (WWW) reúne información dispersa por todo el mundo. Para hacer esto, WWW utiliza el Protocolo de transferencia de hipertexto de Internet (HTTP), que le permite celebrar acuerdos sobre los métodos de presentación de datos al interactuar entre un cliente y un servidor.



    Los datos se transmiten en el cuerpo del mensaje de acuerdo con el estándar MIME. HTML es una de las representaciones de información en la WWW. Se supone que HTML corresponde a uno de los tipos MIME, concretamente texto/html. Además, HTML se desarrolla de acuerdo con la Norma Internacional ISO 8879 - Lenguaje de marcado generalizado estándar (SGML), que es un sistema para definir tipos de documentos estructurados.

    documento HTML

    Un documento HTML es similar a un archivo de texto, excepto que algunos caracteres (líneas) son caracteres de control. Estos símbolos se denominan etiquetas y definen la estructura del documento.

    Los documentos HTML deben comenzar con la etiqueta al principio del archivo y terminar con la etiqueta. Entre estas etiquetas, el documento HTML se organiza como un documento HEAD y BODY, similar a un mensaje de correo electrónico. Dentro de la parte HEAD se indica el TÍTULO y otra información sobre el documento en su conjunto. Dentro de la parte BODY, mediante etiquetas HTML, el texto se estructura en párrafos, listas, etc. con la capacidad de resaltar palabras individuales y oraciones completas con un estilo y crear enlaces a partes de este y documentos externos. Técnicamente, no es necesario utilizar etiquetas de apertura y cierre para elementos HTML, HEAD y BODY. Sin embargo, esto no se recomienda porque la estructura HEAD/BODY permite que las aplicaciones determinen las características del documento (como el encabezado) sin escanear todo el documento.

    Estructura de elementos HTML

    En un documento HTML, las etiquetas definen el principio y el final de los títulos, párrafos, listas, resaltado de caracteres y enlaces. La mayoría de los elementos HTML de un documento se definen como una etiqueta de apertura, que especifica el nombre y los atributos del elemento, luego el cuerpo del elemento, seguido de una etiqueta de cierre. Los caracteres delimitadores de la etiqueta de apertura son ""; para el de cierre - "". Por ejemplo:

    este es el titulo

    Este es un párrafo.

    Algunos elementos aparecen sólo como etiqueta de apertura. Por ejemplo, para crear una línea separadora, use la etiqueta
    . Además, se pueden omitir las etiquetas de cierre de algunos elementos (P, LI, DT, DD). El cuerpo de un elemento es una secuencia de caracteres y elementos anidados. Algunos elementos, como los elementos que definen vínculos, no se pueden anidar. En este caso, los elementos que definen enlaces y selecciones de caracteres se pueden colocar dentro de otras estructuras.

    Mostrar un documento

    La visualización específica de un documento puede variar de un cliente a otro. Las etiquetas HTML determinan sólo el estilo de visualización general del documento. Lo que significa, por ejemplo, que HTML trata el encabezado de primer nivel como solo un encabezado de primer nivel, pero no especifica que el encabezado de primer nivel debe aparecer en fuente Times de tamaño 24, centrado en la parte superior de la página. La ventaja de este enfoque es que si el usuario decide cambiar el encabezado del primer nivel a una fuente Helvetica de tamaño 20 alineada a la izquierda, todo lo que tiene que hacer es cambiar la definición del encabezado del primer nivel en su visor WWW. Por tanto, la presentación específica del documento en la pantalla del monitor la determina el usuario de un cliente en particular.

    La principal fortaleza de HTML es su capacidad para vincular áreas de texto (y también imágenes) a otros documentos. Los espectadores resaltan estas áreas (generalmente con color y/o subrayado) para indicar que son enlaces de hipertexto. Un ancla es un fragmento de texto que marca el comienzo y/o el final de un enlace de hipertexto. El texto entre las etiquetas de apertura y cierre es el punto de partida o destino de un enlace de hipertexto. Los atributos de esta etiqueta son los siguientes: HREF

    Opcional. Si el atributo HREF está presente, Anchor es texto confidencial: el punto de partida del enlace. Si el lector selecciona este texto, se le presentará otro documento cuya dirección de red se especificó en el valor del atributo HREF. El formato de la dirección de red es similar a una URL. Esto permite que la estructura HREF="#identifier" haga referencia a otro ancla en el documento actual o en un documento remoto especificando su dirección antes del signo "#".

    Opcional. Si está presente, permite utilizar el ancla como destino del enlace. El valor del atributo es el identificador de anclaje. Se puede utilizar una cadena de texto normal como valor del identificador, excepto que dentro de un documento todos esos identificadores deben ser únicos.

    Opcional. Le permite especificar la relación entre el documento desde el que se realizó el vínculo y el documento al que se realizó el vínculo.

    Las modernas tecnologías de la información web están cambiando rápidamente nuestro mundo e influyen directamente en el desarrollo de las tecnologías web. Esta revolución tecnológica ha impactado enormemente no sólo en los negocios sino también en la vida personal y profesional. Las últimas tecnologías web penetran en todas las esferas de la sociedad, cambian los métodos de comunicación y los principios de realización de proyectos web de las empresas modernas, determinando el destino de estas últimas. La complejidad interna y la extrema simplicidad de uso de las modernas tecnologías de la información web las hacen accesibles a todos los que diariamente se enfrentan a su uso en sus actividades profesionales.

    Tanto en la vida cotidiana como en los negocios, en la correspondencia y el comercio, las personas y organizaciones utilizan la Web, crean sus propios sitios web donde ofrecen información, bienes y servicios. Las herramientas para crear recursos web se están desarrollando rápidamente y sin parar, lo que le permite crear documentos web complejos sin necesidad de conocimientos especiales sobre su estructura y apariencia, liberando tiempo para una actividad creativa productiva. La principal ventaja de las tecnologías web en las condiciones modernas es su simplicidad y, como resultado, el aumento de la eficiencia de su uso.

    Lenguaje de marcado de hipertexto HTML

    La popularidad de Internet se debe en gran medida al surgimiento de la World Wide Web (WWW), ya que fue la primera tecnología de red que proporcionó al usuario una interfaz simple y moderna para acceder a una variedad de recursos de la red. La simplicidad y la facilidad de uso han provocado un aumento del número de usuarios de la WWW y han atraído la atención de las estructuras comerciales. Luego, el proceso de crecimiento del número de usuarios se convirtió en una avalancha, que continúa hasta el día de hoy. Partiendo de la necesidad de combinar toda la multitud de recursos de información, comenzó a desarrollarse la tecnología con la que se define un sistema de navegación de hipertexto. Esta tecnología se convirtió en el lenguaje HTML. La tecnología HTML en la etapa inicial era extremadamente simple y casi todos los usuarios de la red tuvieron simultáneamente la oportunidad de probarse a sí mismos como creadores y lectores de materiales informativos publicados en la World Wide Web. El hecho es que al desarrollar varios componentes de la tecnología, se asumió que las calificaciones de los autores de los recursos de información y su equipamiento con tecnología informática serían mínimas.

    HTML (lenguaje de marcado de hipertexto) es uno de los llamados lenguajes de marcado. El término "marcado" se refiere a información de servicio general que no se muestra junto con el documento, pero define; cómo deberían verse ciertos fragmentos del documento. Por ejemplo, es posible que desee que una palabra aparezca en negrita o cursiva, que un párrafo aparezca en una fuente específica o que los títulos aparezcan en una fuente más grande.

    Hay muchos lenguajes de marcado diferentes disponibles hoy en día. Por ejemplo, en los programas de comunicaciones, una forma especial de marcado determina el significado de cada paquete de unos y ceros enviado a Internet. Sin embargo, cualquier lenguaje de marcado debe resolver dos problemas importantes:

    1) el lenguaje define la sintaxis del marcado;

    2) el lenguaje determina el significado del marcado.

    El lenguaje de marcado más común para páginas web es HTML. Este lenguaje de marcado fue creado y promovido como un subconjunto de SGML. Propuesto por primera vez en 1974 por Charles Goldfarb y posteriormente adoptado como estándar ISO oficial después de un refinamiento significativo, SGML (Lenguaje de marcado generalizado estándar) es un metalenguaje, un sistema para describir otros lenguajes.

    La aparición del estándar SGML fue impulsada por la necesidad de compartir datos entre diferentes aplicaciones y sistemas operativos. Ya en los años 60 los usuarios de ordenadores tenían muchos problemas de compatibilidad. Después de analizar las deficiencias de muchos lenguajes de marcado no estándar, tres científicos de IBM, Charles Goldfarb, Ed Mosher y Ray Lorie, formularon tres principios generales que garantizan la capacidad de colaborar en documentos en diferentes sistemas operativos.

    1) Uso de principios de formato uniformes en todos los programas que procesan documentos. Un requisito completamente lógico: todos sabemos lo difícil que resulta para las personas que hablan diferentes idiomas ponerse de acuerdo entre sí. La presencia de un único conjunto de estructuras sintácticas y semántica común simplifica significativamente la interacción entre programas.

    2) Especialización en lenguajes de formateo. Gracias a la capacidad de construir un lenguaje especializado basado en un conjunto de reglas estándar, el programador deja de depender de implementaciones externas y de sus ideas sobre las necesidades del usuario final.

    3) Definición clara del formato del documento. Las reglas que definen el formato del documento especifican el número y la marca de las construcciones lingüísticas utilizadas en el documento. El uso de un formato estándar garantiza que el usuario conozca exactamente la estructura del contenido del documento. Tenga en cuenta: no se trata del formato de visualización del documento, sino de su formato estructural. El conjunto de reglas que describen este formato se denomina definición de tipo de documento (DTD).

    Estas tres reglas fueron la base del predecesor de SGML, GML (lenguaje de marcado generalizado). La investigación y el desarrollo de GML continuaron durante unos diez años hasta que surgió el estándar SGML como resultado de un acuerdo alcanzado por un grupo internacional de desarrolladores.

    HTML (lenguaje de marcado de hipertexto) es el lenguaje informático que subyace a la World Wide Web. HTML se basa en el estándar SGML, un lenguaje de marcado de hipertexto para la presentación de documentos en la Web. Los estándares del lenguaje HTML, uno de los estándares web clave, son desarrollados y mantenidos por el consorcio W3C. El fundador de este consorcio internacional es Tim Berners-Lee. Además de crear estándares de formato, el consorcio es el centro para el desarrollo de la Web Semántica (red semántica). El lenguaje HTML proporciona marcas de formato para documentos y define hipervínculos entre documentos y/o sus fragmentos.

    Se eligió un archivo de texto normal como base para escribir el código HTML. Por tanto, una base de datos de hipertexto en el concepto WWW es un conjunto de archivos de texto marcados en HTML, lo que determina la forma de presentación de la información (marcado) y la estructura de las conexiones entre estos archivos y otros recursos de información (enlaces de hipertexto).

    Los desarrolladores de HTML pudieron resolver dos problemas:

    · proporcionar a los diseñadores de bases de datos de hipertexto un medio sencillo para crear documentos;

    · hacer que esta herramienta sea lo suficientemente potente como para reflejar las ideas entonces existentes sobre la interfaz de usuario de las bases de datos de hipertexto.

    El primer problema se resolvió eligiendo un modelo de etiquetado para la descripción del documento. El lenguaje HTML le permite marcar un documento electrónico que se muestra en la pantalla con un nivel de diseño de impresión; el documento resultante puede contener una amplia variedad de etiquetas, ilustraciones, fragmentos de audio y vídeo, etc. El lenguaje incluye herramientas desarrolladas para crear diferentes niveles de títulos, selecciones de fuentes, varias listas, tablas y mucho más.

    El segundo punto importante que influyó en el destino de HTML fue que se eligió como base un archivo de texto normal. El entorno de edición HTML es una tierra de nadie entre un simple archivo de texto y una aplicación WYSIWYG (lo que ves es lo que obtienes). Elegir un entorno de edición le brinda todos los beneficios de la edición de texto.

    Los enlaces de hipertexto, que establecen conexiones entre documentos de texto, comenzaron gradualmente a unir una amplia variedad de recursos de información, incluidos sonido y video. El sistema de hipervínculos HTML le permite crear un sistema de documentos interconectados según varios criterios. El lenguaje HTML contiene comandos (etiquetas) que le permiten controlar la forma y el tamaño de las fuentes, el tamaño y la ubicación de las ilustraciones y le permiten pasar de un fragmento de texto o ilustración a otros documentos HTML: el llamado enlace de hipertexto. . Un documento en formato html es un archivo de texto que contiene toda la información necesaria sobre la información que se muestra en la pantalla. Puede utilizar lenguajes de secuencias de comandos como JavaScript, Java y VBScript para administrar las secuencias de comandos de navegación de sitios web (una base de datos de hipertexto alojada en la World Wide Web). Los formularios para la entrada del usuario que luego se procesan y otra información se pueden procesar utilizando programas de servidor especiales (por ejemplo, en PHP o Perl). HTML le permite incluir enlaces de hipertexto y botones en los que se puede hacer clic en sus páginas que conectan sus páginas web con otras páginas del mismo sitio web, así como con otros sitios web de todo el mundo.

    HTML es un lenguaje de marcado de texto, no un lenguaje de programación, que es solo una de las herramientas (más precisamente, un lenguaje de descripción de páginas) que se utilizan para crear páginas web. HTML tiene capacidades de formato de texto limitadas en comparación con las capacidades de los programas de publicación, especialmente cuando se publica texto rico en elementos complejos.

    Todavía no existen editores HTML tan convenientes que pueda prescindir de un editor de texto y de la colocación manual de etiquetas. Esto complica el trabajo con el lenguaje y les obliga a dominar funciones que les resultan completamente inusuales.

    Analizando las características del lenguaje HTML y evaluando el nivel de su desarrollo, podemos llegar a la conclusión de que en los próximos años deberíamos esperar la aparición de modificaciones más avanzadas del mismo, nuevos lenguajes y paquetes de aplicaciones para trabajar con páginas web. .

    Documentos HTML dinámicos y estáticos

    Hay dos tipos de documentos HTML: estáticos y dinámicos. Los documentos estáticos se almacenan en archivos del sistema de archivos que utiliza el servidor web o el navegador al visualizar archivos locales. Al colocar información en un servidor web, puede utilizar documentos dinámicos, aquellos que no existen permanentemente en forma de archivos, sino que se generan en el momento de una solicitud del cliente. Además, para el usuario final, no importa si los documentos se presentan de forma dinámica o estática.

    Para generar un documento HTML dinámico, se requiere un programa especialmente escrito de acuerdo con las reglas definidas por el servidor web. A la hora de planificar la ubicación de información en un servidor web, para determinar correctamente el uso de cualquier tipo de documento, es necesario tener en cuenta el grado de actualización de los datos, su volumen y frecuencia de acceso.

    El método dinámico determina el almacenamiento de datos en forma formalizada, por ejemplo en una base de datos.

    Si los datos se almacenan de forma formalizada, los documentos estáticos se generan utilizando plantillas de documentos en las que se han realizado cambios. Para generar documentos estáticos, puede utilizar cualquier herramienta de informes disponible en el sistema de gestión de bases de datos (DBMS) con el que se procesan y formalizan los datos.

    Perspectivas HTML

    No habrá nuevas versiones del lenguaje HTML, pero hay un mayor desarrollo de HTML llamado XHTML (inglés: Extensible Hypertext Markup Language). Si bien XHTML es comparable en capacidades a HTML, tiene requisitos de sintaxis más estrictos. Al igual que HTML, XHTML es un subconjunto del lenguaje SGML, pero XHTML, a diferencia de su predecesor, se ajusta a la especificación XML. XHTML 1.0 fue aprobado como Recomendación por el World Wide Web Consortium (W3C) el 26 de enero de 2000. Sin embargo, es necesario tener en cuenta un detalle importante: se ha creado una gran cantidad de recursos de información en este formato y los navegadores web los “entenderán” durante mucho tiempo y los utilizarán en su forma original. Además, se desarrollarán todos los formatos nuevos (y ya se están desarrollando, por ejemplo XML) con soporte para tecnologías HTML.

    La forma en que trabajamos está cambiando, al igual que los medios para acceder al contenido. El lenguaje HTML se creó originalmente como un lenguaje independiente de la plataforma. Las nuevas tecnologías se utilizan en casi todas partes y muy pronto el espacio de la World Wide Web ya no será propiedad exclusiva de los usuarios de ordenadores personales de sobremesa; algunos usuarios utilizan activamente navegadores de voz para ciegos o navegadores que utilizan a menudo el alfabeto Broglie; el contenido no se muestra en un monitor de computadora, sino en un televisor, cuando se utilizan decodificadores con acceso a la red o teletipo, o en pantallas monocromáticas de varios organizadores de buscapersonas y otros.

    El lenguaje de marcado de hipertexto (HTML) se utiliza con mayor frecuencia para crear programas de capacitación electrónicos.

    Esta elección se debe a que, además de la facilidad de creación de este tipo de documentos, el lenguaje de marcado de hipertexto tiene enormes capacidades, como generar texto formateado, utilizar objetos gráficos de casi todos los formatos conocidos, utilizar una imagen de fondo, insertar objetos. como sonido de fondo, vídeo, etc.

    Además, HTML facilita la organización de enlaces a otros objetos o fragmentos de texto en el propio documento.

    La gran ventaja de HTML es que la mayoría de herramientas modernas (como editores de texto y gráficos, lenguajes de programación visual, Internet Explorer...) permiten trabajar y guardar documentos en formato HTML.

    Por lo tanto, HTML se utiliza a menudo para crear dichos productos de software. Sin embargo, en mi opinión, la creación de varios tipos de demostraciones, procedimientos de prueba y encuestas aún es más fácil utilizando lenguajes de programación visuales.

    Por lo tanto, esta tesis examina la integración de varias herramientas para la creación de programas de capacitación, pruebas y libros de texto electrónicos.

    Sin embargo, el uso de documentos HTML facilita enormemente la redacción de la parte teórica del programa y la hace más animada. Veamos algunas cuestiones relacionadas con la creación de documentos HTML. Puede trabajar en la Web sin conocer el lenguaje HTML, ya que los textos HTML pueden crearse mediante varios editores y conversores especiales.

    Sin embargo, es mejor escribir directamente en HTML, o al menos monitorear y modificar el código HTML ocasionalmente. Escribir directamente en HTML no es difícil. Incluso puede ser más fácil que aprender a usar un editor o conversor de HTML, que a menudo tienen capacidades limitadas, tienen errores o producen HTML incorrecto que no funciona en varias plataformas.

    La primera versión de HTML fue desarrollada a principios de los años 90 por Tim Beners-Lee para el anteriormente popular navegador Mosaic. Pero en aquellos días ni el navegador ni el lenguaje en sí habían encontrado aún un uso digno. HTML+ apareció en 1993 y esta versión también pasó prácticamente desapercibida. El uso generalizado del hipertexto comenzó con la versión 2.0, que apareció en junio de 1994.

    Este fue el momento en que WWW comenzó a ganar popularidad en todo el mundo. Los elementos incluidos en la versión 2, en su mayor parte, todavía se utilizan en la actualidad.

    La versión 3.0 de HTML, que apareció un año después, introdujo la capacidad de dibujar símbolos matemáticos (signos integrales, signos de infinito, fracciones, paréntesis, etc.) utilizando elementos del lenguaje. También se desarrollaron navegadores (Arena) para esta versión. Pero este proyecto resultó ser un callejón sin salida y no recibió más distribución.

    En 1996 apareció la versión HTML 3.2. Esta fue una solución innovadora; basta mencionar que se introdujeron marcos en la especificación del lenguaje, que ahora se han vuelto muy populares entre los desarrolladores de páginas web.

    Incluso ahora se pueden implementar muy buenas soluciones de diseño basadas en esta especificación. Casi todos los navegadores modernos son totalmente compatibles con la versión 3.2, por lo que los autores no tienen dudas sobre la funcionalidad de los elementos declarados.

    Junto con las especificaciones del idioma oficial, que fueron desarrolladas por la organización W3C (W3 Consortium), las empresas fabricantes de navegadores crearon sus propios elementos (extensiones).

    Posteriormente, algunos de estos elementos, tras ganar aceptación general, fueron incluidos en la especificación de la siguiente versión del lenguaje. Es interesante, por ejemplo, que una solución innovadora, los marcos, que a muchos desarrolladores les encantó, no estuviera incluida en la especificación 3.2.

    Pero los navegadores admitían marcos y muchos libros sobre HTML incluían descripciones de marcos sin mencionar que eran elementos no estándar. Y tenía razón, porque los marcos se convirtieron en el estándar de facto. Ya estaban incluidos en la versión 4 del idioma por una buena razón.

    Por el contrario, los elementos APPLET y SCRIPT necesarios para extender HTML con otro código no desempeñaron el papel que debían desempeñar en la versión 3.2.

    Esto se explica por el hecho de que los navegadores de diferentes versiones interpretaban los programas en Java, JavaScript y Visual Basic VBScript de forma diferente. Como resultado, no fue posible obtener un código que funcionara de manera suficientemente confiable, y los entusiastas de HTML utilizaron estos lenguajes principalmente para experimentos.

    La especificación oficial HTML 4 (HTML dinámico) apareció en 1997. En ese momento ya era evidente que el desarrollo posterior del hipertexto se llevaría a cabo mediante la programación de guiones. Esto resultó ser mucho más eficaz que introducir nuevos elementos en el lenguaje.

    Los navegadores que aparecieron en ese momento (Netscape Navigator 4, Microsoft Internet Explorer 4, etc.) ya interpretaban el código del programa de manera bastante confiable (se logró un cierto nivel de estandarización). Sin embargo, los desarrolladores todavía tienen problemas. Como ejemplo, cabe señalar que muchos scripts comienzan determinando la versión del navegador para luego utilizar tal o cual fragmento de código.

    Obviamente, el programador es responsable de probar las páginas en todos los navegadores más populares actualmente. Además, el problema del uso de programas antiguos o poco populares sigue siendo relevante. Microsoft y Netscape son considerados, con razón, líderes en el desarrollo de navegadores, pero también hay otras empresas.

    Como resultado, el uso de todas las capacidades del HTML dinámico se ha convertido en responsabilidad de los programadores en organizaciones bastante grandes, donde existen condiciones para desarrollar programas complejos y realizar pruebas exhaustivas. Los creadores de páginas web personales a veces tienen que hacer concesiones entre fiabilidad e innovación para obtener un código HTML suficientemente competente.

    Anatomía de una página web

    A continuación se muestra un ejemplo de un documento web típico. En este ejemplo, veremos la estructura de las páginas HTML.

    Ejemplo (plantilla) de una página web

    estructura de la página web

    H2 (familia tipográfica: Arbat;)

    CÓDIGO (familia de fuentes: Arial;)

    Si observa los textos fuente de varias páginas web, podrá ver fácilmente la similitud de sus estructuras. Esto se debe al hecho de que los documentos se crean de acuerdo con ciertas reglas.

    La sintaxis del lenguaje HTML se basa en el estándar ISO 8879:1986 "Procesamiento de información. Sistemas de texto y ofimáticos. Lenguaje de marcado generalizado estándar (SGML)". Es cierto que existe una gran diferencia entre el estándar oficial y el estándar real. HTML está en constante evolución, se complementa con nuevos elementos y no debe estudiarse a partir de fuentes primarias oficiales, sino en la práctica, recurriendo a los últimos desarrollos de empresas y especialistas líderes.

    Para comprender la estructura de una página web, es necesario considerar el peso de los elementos incluidos en el listado anterior. Al considerar los elementos del lenguaje, usaremos ambas etiquetas: inicio y fin.

    Por ejemplo: . Se puede enfatizar que en la mayoría de los casos el desarrollador debe usar dos etiquetas para cada elemento. El número de casos en los que solo se permite una etiqueta inicial (algunos elementos no tienen ninguna etiqueta final) es pequeño y se especifican específicamente. Para los nombres de etiquetas, puede utilizar letras mayúsculas y minúsculas del alfabeto latino.

    Algunos usuarios escriben etiquetas iniciales en mayúsculas y etiquetas finales en minúsculas. Esto le ayuda a comprender el texto fuente de una página web.

    Sintaxis HTML.

    Notación de documentos HTML. Se mencionó anteriormente que uno de los principios del lenguaje es el anidamiento de elementos en varios niveles. Este elemento es el más externo, ya que toda la página web debe ubicarse entre sus etiquetas de inicio y fin.

    En principio, este elemento puede considerarse una formalidad. Tiene los atributos version, lang y dir, que rara vez se utilizan en este caso, y permite anidar HEAD, BODY, FRAMESET y otros elementos que determinan la estructura general de la página web. Naturalmente, todos estos documentos terminan con una etiqueta final.

    El área de título de una página web. Es decir, su primera parte. Al igual que el elemento anterior, HEAD sirve únicamente para formar la estructura general del documento. Este elemento puede tener atributos lang y d i r, debe incluir un elemento TITLE y permite anidar elementos BASE, META, LINK, OBJECT, SCRIPT, STYLE.

    Un elemento para colocar el título de una página web. La línea de texto ubicada dentro de este elemento no se muestra en el documento, sino en la barra de título de la ventana del navegador. Esta cadena se utiliza a menudo al organizar búsquedas en WWW. Por lo tanto, los autores que crean páginas web para publicarlas en Internet deben asegurarse de que esta línea, sin ser demasiado larga, refleje con precisión el propósito del documento.

    Descripción del estilo de algunos elementos de la página Web. El archivo Strukt.htm asigna fuentes a los elementos H2 y CODE.

    Naturalmente, para cada elemento existe un estilo predeterminado, por lo que el uso del elemento STYLE no es necesario, pero sí deseable.

    Es interesante cómo la sintaxis HTML refleja la historia de la informática. Por ejemplo, el antiguo elemento BLINK, ahora desaparecido, nos recuerda los tiempos en que la gente usaba pantallas que solo tenían modo de texto. Dada esta situación, el texto parpadeante era probablemente el único efecto visual posible.

    Por el contrario, el elemento STYLE, introducido hace relativamente poco tiempo, evoca asociaciones con los programas de Windows, ya que por primera vez introdujeron el estilo de texto, que ahora es increíblemente popular, y sin él ya no es posible trabajar en aplicaciones como Word o Excel.

    Este elemento contiene información de servicio que no se refleja al visualizar una página web. No hay texto dentro en el sentido habitual, por lo que no hay etiqueta de cierre. Cada elemento META contiene dos atributos principales, el primero de los cuales define el tipo de datos y el segundo el contenido.

    Además, el elemento META puede contener una URL. La plantilla para el atributo correspondiente es:

    URL="http://dirección"

    Este elemento contiene el hipertexto que define la propia página web. Esta es una parte arbitraria del documento que desarrolla la página automática y que muestra el navegador. En consecuencia, la etiqueta final de este elemento debe encontrarse al final del archivo HTML. Dentro del elemento BODY, puedes utilizar todos los elementos destinados al diseño de páginas web. Dentro de la etiqueta de inicio del elemento BODY, puede colocar una serie de atributos que proporcionan configuraciones para toda la página. Veámoslos en orden.

    Uno de los más útiles para el diseño es el atributo que define el fondo de la página. Su aparición puede compararse con una pequeña revolución en la WWW, cuando las mismas páginas web grises de repente florecieron con patrones de colores brillantes:

    background="Ruta al archivo de fondo"

    Un diseño de fondo más simple se reduce a configurar su color:

    bgcolor="#ff/?GGSS"

    El color de fondo se especifica mediante tres números hexadecimales de dos dígitos que determinan la intensidad de los colores rojo, verde y azul, respectivamente. La configuración de colores se describirá con más detalle a continuación. Ambos atributos anteriores no son alternativos y a menudo se usan juntos: si por alguna razón no se puede encontrar un patrón de fondo, se usa el color.

    Debido a que el fondo de la página puede cambiar, es necesario poder hacer coincidir el color del texto. Para ello existe el siguiente atributo

    texto="#/?/?GGB5"

    Para establecer el color del texto de los hipervínculos, utilice el siguiente atributo:

    De la misma manera, puedes configurar el color de los hipervínculos vistos:

    vlink="#/?/?GGflS"

    También puede especificar un cambio de color para el último hipervínculo seleccionado por el usuario:

    El hipertexto ubicado dentro del elemento BODY puede tener cualquier estructura. Está determinado, en primer lugar, por la finalidad de la página web y la imaginación del desarrollador.

    Elemento de encabezado. Hay seis niveles de títulos, que se denominan H1...H6. El título de nivel 1 es el más grande y el nivel 6 proporciona el título más pequeño. Para los encabezados, puede utilizar un atributo que especifique la alineación hacia la izquierda, el centro o la derecha:

    La regla horizontal es un elemento muy utilizado. En primer lugar, porque resulta muy cómodo dividir una página en partes. En segundo lugar, porque el autor de la página tiene una selección muy pequeña de dichos elementos de diseño. De hecho, prácticamente no existen construcciones similares en HTML, solo que por alguna razón se hizo una excepción para la línea horizontal. Es cierto que, a pesar de cierta tacañería en el lenguaje en esta área, se pueden crear muchas imágenes gráficas estándar que diversificarían el aspecto de las páginas.

    El elemento no tiene etiqueta final, pero permite alinear una serie de atributos a la izquierda, centrado, derecha y justificados:

    Puede configurar el grosor de la línea:

    51ge = espesor en píxeles

    Puedes controlar la longitud de la línea:

    fiitifn - longitud en píxeles

    ancho=/^twa en porcentaje/hora

    Puedes elegir color:

    co1og="color"

    Un documento HTML puede ser muy grande, en cuyo caso el usuario debería poder navegar rápidamente a la sección deseada del documento. Para hacer esto, puede utilizar el mecanismo de hipervínculo. También es necesario colocar las marcas apropiadas en los lugares correctos del texto. Aquí solo veremos la plantilla para crear etiquetas:

    texto libre

    En este caso, a una línea determinada del documento se le da un nombre y, por lo tanto, se puede crear un hipervínculo en otra parte del documento, o incluso en otro documento, que conduzca a ese punto. Por ejemplo, para navegar dentro de un documento, puede utilizar la siguiente construcción:

    Ir a la etiqueta

    Varias líneas similares pueden formar una especie de índice de una página web, que puede colocarse al principio y al final del documento.

    Elemento para especificar la dirección base (URL) de los enlaces. Esto le permite omitir la parte inicial de la dirección en los enlaces de documentos. Para utilizar este elemento debes utilizar la siguiente construcción:

    La ruta // fragmento de dirección es opcional.

    Cuando se genera una dirección completa, se descartará.

    Entonces, si hay un enlace relativo en el texto del documento



    
    Arriba