Descripción del lenguaje HTML. Breve descripción del lenguaje HTML Lenguaje HTML y su uso.
Estructuras básicas del lenguaje HTML.
HTML (lenguaje de marcado de hipertexto): instrucciones especiales para el navegador con el que se crean las páginas web.
Es decir, las páginas web son documentos en formato HTML que contienen texto y etiquetas HTML especiales (descriptores). En general, las etiquetas HTML son necesarias para formatear el texto (es decir, darle la apariencia deseada) que el navegador "entiende". Los documentos HTML se almacenan como archivos con la extensión . htm o. HTML.
Las etiquetas HTML brindan al navegador información sobre la estructura y el formato de una página web. Cada etiqueta contiene una instrucción específica y está entre corchetes angulares. La mayoría de las etiquetas constan de una parte de apertura y de cierre y afectan al texto que contienen.
Para familiarizarse más rápidamente con el código HTML, puede ver la página que desee en el modo "Como HTML". Para hacer esto, en el navegador debe seleccionar el elemento del menú "Ver" - "Como HTML".
Después de esto, se abrirá una nueva ventana con el texto fuente del código HTML. Al ver el código HTML terminado, aprenderá cómo los programadores más experimentados utilizan las etiquetas de idioma. También es una de las formas de superar diversos problemas que surgen de vez en cuando.
Cómo se crean las páginas web
El lenguaje HTML define un conjunto de comandos especiales llamados etiquetas que se utilizan para especificar el formato o el propósito de ciertos elementos de una página web. Se utilizan etiquetas especiales para colocar imágenes gráficas, clips de audio y vídeo y otros llamados objetos incrustados en páginas web.
A pesar de su aparente complejidad, las páginas web no son complicadas. Estos son archivos de texto normales creados en el Bloc de notas estándar o en un editor de texto simple similar. Y contienen texto, el mismo texto que quieres poner en las páginas, sólo que marcado de una manera especial...
El lenguaje de marcado de hipertexto HTML es muy fácil de aprender. Su estudio se puede comparar con el estudio de cualquier lengua lingüística. Si, por ejemplo, en la unidad básica está la palabra, entonces en HTML esta unidad mínima es la etiqueta. Básicamente, estos son comandos en el lenguaje de marcado de páginas web html. Cualquier página web, cualquier sitio consta de texto, gráficos, etc. Y todos estos placeres están controlados por etiquetas pequeñas y discretas. Las etiquetas son las que hacen que el texto y las imágenes, en lugar de un desorden sin sentido, se conviertan en una estructura rígidamente estructurada. Es gracias a las etiquetas que el texto del sitio agrada al visitante con una variedad de tamaños y colores, son las etiquetas las que permiten que imágenes maravillosas se coloquen en el lugar destinado a ellas en cualquier resolución de pantalla y tamaño de ventana del navegador. Las posibilidades de las etiquetas son infinitas, su número es enorme.
Definición estricta: una etiqueta es un elemento HTML que consta de texto encerrado entre corchetes angulares. Una etiqueta es un elemento activo que cambia la presentación de la información que le sigue. Una etiqueta puede tener varios atributos. Normalmente se utilizan dos etiquetas: apertura y cierre.
Cualquier documento HTML que se envíe al navegador debe constar de algunas partes obligatorias:
- cada documento debe comenzar con una línea que indique a qué versión del estándar HTML se ajusta el documento (en nuestro caso estamos usando HTML 4.01); luego la etiqueta raíz debe estar presente y al final del documento debe estar cerrada; A continuación debe haber una etiqueta. Sirve como una especie de contenedor para etiquetas de servicio, scripts, etc., en general es necesario para almacenar información de servicio; Y la última es la etiqueta, dentro de la cual se almacena toda la información que se mostrará directamente en la página.
Entonces, la estructura de un documento HTML simple se parece a esto:
Estructura del documento HTML
- Inicio del documento
TITULO DEL DOCUMENTO
CUERPO DEL DOCUMENTO
- Fin del documento
elementos HTMLLa mayoría de las etiquetas HTML, aunque no todas, están emparejadas de modo que una etiqueta de apertura va seguida de una etiqueta de cierre correspondiente, con texto u otras etiquetas en el medio, por ejemplo:
Prefacio
En tales casos, las dos etiquetas y la parte del documento separada por ellas forman un bloque llamado elemento HTML. Algunas etiquetas, como , son elementos HTML en sí mismas y, para ellas, la etiqueta final correspondiente es incorrecta. En lo que sigue, nos referiremos a las etiquetas por sus nombres, omitiendo los corchetes angulares requeridos.
AtributosPara cada etiqueta, se definen muchos atributos posibles. La mayoría de las etiquetas permiten uno o más atributos, pero es posible que no haya ningún atributo. Una especificación de atributo consta de lo siguiente, en el siguiente orden:
- el nombre del atributo, como WIDTH, el signo igual (=) del valor del atributo, que se especifica mediante una cadena de caracteres, como "80".
Siempre es una buena idea encerrar el valor del atributo entre comillas, ya sea usando comillas simples ("80") o dobles ("80"). Una cadena entrecomillada no debe contener comillas dentro de sí misma. Por lo tanto, si una fecha está entre comillas dobles, utilice comillas simples para encerrarla entre comillas después, y viceversa. Se prefieren las comillas dobles porque el ojo humano puede tener dificultades para distinguir las comillas simples de caracteres como los acentos.
También puede omitir las comillas para los valores de atributos que constan únicamente de los siguientes caracteres (consulte el concepto técnico del nombre):
- Caracteres ingleses (A - Z, a - z) números (0 - 9) intervalos de tiempo guiones (-)
Entonces WIDTH=80 y ALIGN=CENTER son abreviaturas legales de WIDTH="80" y ALIGN="CENTER". Enlace a URL, por ejemplo HREF=foo. htm es aceptable, sin embargo, cuando la URL se utiliza con atributos debe ir entre comillas, por ejemplo HREF="http://www. hut. fi/". Hay algunos navegadores que permiten que falten comillas o elementos con comillas de apertura y sin comillas de cierre. Sin embargo, es mejor no utilizar esta práctica.
Crear párrafo, espacios, encabezado.Los navegadores web generalmente no tienen en cuenta los caracteres de nueva línea que el usuario ingresa en el texto en la etapa de su formación. Para comenzar un nuevo párrafo, use una etiqueta (etiqueta)
Después de abrir una página en la ventana de un navegador web, todos los párrafos de su texto están marcados con una etiqueta (etiqueta)
Separados por líneas en blanco, lo que mejora su diseño y apariencia.
De forma predeterminada, el navegador suele formatear los párrafos con alineación a la izquierda. Para forzar la alineación, utilice el atributo de alineación. Con su ayuda, los párrafos se pueden alinear a la izquierda, a la derecha, al centro y justificados.
Ejemplo:|
el párrafo está alineado a la izquierda... el párrafo está alineado a la derecha... el párrafo está alineado al centro... El párrafo está justificado... | Visualización del navegador: párrafo alineado a la izquierda párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo párrafo alineado a la izquierda párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado a la derecha párrafo alineado al centro párrafo alineado al centro párrafo párrafo alineado al centro párrafo párrafo alineado al centro párrafo párrafo alineado al centro párrafo párrafo alineado al centro párrafo párrafo alineado al centro párrafo párrafo alineado al centro párrafo alineado al centro párrafo justificado párrafo justificado párrafo justificado párrafo párrafo justificado párrafo justificado párrafo justificado párrafo justificado párrafo justificado párrafo justificado párrafo justificado párrafo justificado párrafo justificado |
Los navegadores web ajustan automáticamente el texto dentro de los párrafos a una nueva línea. Si la tarea es colocar cualquier combinación de palabras en una línea, entonces se utiliza una etiqueta (etiqueta) para este propósito.
Para ir a una nueva línea, use una etiqueta (etiqueta)
. Le indica al navegador que deje de colocar texto y otros elementos de la página dentro de la línea actual y que pase a una nueva línea. Esta etiqueta (etiqueta) no tiene su contraparte de barra diagonal, la llamada etiqueta de cierre (etiqueta).
El uso principal de esta(s) etiqueta(s) es forzar que los elementos en línea se coloquen en una ubicación específica de la página. También es conveniente en los casos en que es necesario aumentar las áreas vacías entre los elementos individuales de la página.
Los navegadores web normalmente ignoran los espacios adicionales ingresados en el texto de la página. Para hacer esto, use el comando . Este comando crea espacios en blanco indivisos entre los elementos de la página, ya sean gráficos o texto. Debe tener en cuenta el hecho de que utilizar en lugar de un espacio entre dos palabras adyacentes garantiza que ambas palabras no se colocarán en líneas diferentes en la ventana del navegador; siempre estarán ubicadas una al lado de la otra.
HTML es un lenguaje de marcado de sitios web. Mucha gente lo considera programación, pero no lo es. HTML no contiene ninguna de las variables, cálculos, matrices y otros elementos que se encuentran en cualquier lenguaje de programación.
Al utilizar HTML, un desarrollador sólo puede crear la apariencia del sitio. Es importante comprender que no existe ningún sitio web sin etiquetas. HTML es la base para la creación de páginas web. El resto de funciones se añaden mediante varios lenguajes de programación.
Crear un documento HTMLPuede crear una página de sitio web sencilla en cualquier editor. Incluso el Bloc de notas servirá. Para un desarrollador novato, se recomienda utilizar otros editores que tengan funciones de sustitución automática y otros consejos. Gracias a esto, puede crear tablas, enlaces, imágenes y otros elementos ya preparados. Pero en el Bloc de notas, debes escribir cada letra manualmente.
Como regla general, el Bloc de notas se usa solo en los casos en que no hay otras herramientas disponibles. Primero, se crea un documento de texto y luego se guarda en formato html. Todas las páginas del sitio deben tener la extensión html.
El lenguaje HTML es jerárquico. Es decir, existe una estructura especial del documento HTML. ¿Lo que es? Veámoslo a continuación para mayor claridad.
Estructura del documento HTML. EjemploLa estructura es siempre la misma. Si desea cambiar algo, el navegador no podrá procesarlo. Como resultado, no obtendrá lo que pretendía.
La figura anterior muestra la estructura de cualquier archivo html. El primer elemento indica el tipo de archivo. Esta etiqueta se especifica una vez. Si utiliza editores especiales, toda la estructura se creará automáticamente. Deberá ajustar los valores predeterminados.
Estructura del documento HTML - etiquetas principales:
El marco de todo el sitio consta de estas tres etiquetas. Presta atención a la imagen. Todas estas etiquetas tienen una etiqueta de cierre con un signo "/". Si escribe a mano, acostúmbrese a colocar ambas etiquetas a la vez: apertura y cierre.
Ya se ha dicho anteriormente que las páginas de un sitio web tienen la extensión .html. Es decir, si crea un documento de texto, pero escribe el código correcto, el navegador seguirá mostrándole solo texto. No habrá conversión de código.
Sección principalLa figura debajo del punto 3 muestra la sección de la cabeza. Esta sección contiene información de servicio. Por ejemplo, puede especificar la codificación (elemento 4) y el título de la página (elemento 5).
Siempre debe haber un título. Sin él, ningún motor de búsqueda podrá determinar el nombre del contenido (texto) de una página web. Y esto es malo para la promoción del sitio web. Además, el navegador no mostrará el título de la página en la parte superior. Esto es un inconveniente para el usuario.
La estructura del documento html es tal que se indica únicamente en la sección del encabezado. Si la etiqueta se especifica en la sección del cuerpo o después, el controlador no le prestará atención.
Además, la sección de encabezado contiene información para conectar scripts, archivos de estilo, instrucciones para motores de búsqueda o cualquier otro dato que el usuario no debería ver, pero que es importante para el navegador o los programadores.
Conectando estilosLa estructura de un documento HTML le permite conectar estilos de varias maneras. Además, se pueden escribir individualmente en cada elemento. Pero este método no se recomienda porque el código se vuelve demasiado grande e inconveniente.
El archivo está conectado de la siguiente manera.
El atributo href especifica la ruta al archivo. Si hay un error en la ruta, los estilos no se cargarán. El atributo de tipo también es obligatorio, lo que indica que se trata de un archivo css.
Otra opción es definir estilos directamente en la sección principal.
Pero esta opción tampoco es muy recomendable. Estos métodos son muy diferentes en que el archivo CSS puede ser uno para todo el sitio y todos los cambios se aplicarán instantáneamente a todas las páginas. Y si utiliza el método que se muestra en la figura anterior, deberá realizar cambios en todas las páginas existentes del sitio.
Si la clase que está creando sólo se utilizará en una página, entonces esta opción es adecuada para usted.
Conectando guionesLos guiones están conectados de la siguiente manera.
Aquí se requieren dos atributos: tipo y src. En el primero indicamos que se trata de un archivo Javascript y en el segundo, dónde se encuentra el archivo. Si comete un error tipográfico, nada funcionará.
sección del cuerpoLa estructura del documento html es tal que es necesario colocar contenido que será visible para el usuario solo en la sección del cuerpo. El nombre de la etiqueta habla por sí solo.
Aquí se indica todo el código principal de la página, que puede incluir un número ilimitado de elementos. Pero cuanto más largo sea el código, más tardará en procesarse.
Veamos las etiquetas más básicas que se pueden utilizar en la zona del cuerpo. No hay muchos principales. Todo lo demás lo aprenderás a medida que crezcan tus conocimientos y tu práctica.
Etiquetas principalesLa estructura de un documento HTML requiere un orden obligatorio de escritura de los elementos. Las etiquetas siempre deben estar entre paréntesis en los bordes. Sin esto, el navegador no entenderá que se trata de una etiqueta. El corchete de apertura siempre va seguido del nombre del elemento (etiqueta). Si permites un espacio entre< и именем, то браузер посчитает это текстом.
Veamos el ejemplo de una etiqueta de imagen. Tenga en cuenta que esta etiqueta no es una etiqueta de cierre, a diferencia de los enlaces, párrafos y muchos otros.
El orden de los atributos no importa. Pero su escritura (diseño) es muy importante. El nombre del atributo siempre va primero, luego el signo igual y luego el valor del atributo se escribe entre comillas. El valor puede ser diferente: digital o de texto.
El atributo src en todas las etiquetas indica la ruta del archivo que debe cargarse. El atributo alt en todos los elementos especifica una breve descripción. En este caso, la foto bird.jpg se carga con una descripción: una foto de un pájaro.
Además, puede especificar dimensiones, solo ancho o alto, título, alineación, clase de estilo o borde.
Veamos otras etiquetas principales que se especifican en la sección del cuerpo.
Objetivo |
|
Imágenes |
|
Ajustar texto a una nueva línea |
|
… | Miniatura |
Texto tachado |
|
Texto subrayado |
|
Los desarrolladores novatos no siempre pueden imaginar todo esto de manera especulativa. Mire algunos ejemplos de estructura de páginas web y definitivamente lo entenderá.
El término HTML (lenguaje de marcado de hipertexto) significa "lenguaje de marcado de hipertexto". La primera versión de HTML fue desarrollada por Tim Berners-Lee, miembro del Laboratorio Europeo de Física de Partículas.
HTML ha sufrido algunos cambios desde que se creó la primera versión. Como muchas cosas en el mundo de la informática, las versiones o especificaciones de HTML resultaron estar numeradas. Se conocen las especificaciones 2.0, 3.0 y 3.2. La especificación HTML actual siempre se puede encontrar en el servidor W3C.
HyperText Markup Language (HTML) es un lenguaje estándar diseñado para crear documentos de hipertexto en el entorno WEB. Los documentos HTML se pueden ver mediante diferentes tipos de navegadores WEB. Cuando se crea un documento utilizando HTML, un navegador WEB puede interpretar el HTML para resaltar los distintos elementos del documento y procesarlos primero. El uso de HTML permite formatear los documentos para que puedan presentarse utilizando fuentes, líneas y otros elementos gráficos en cualquier sistema que los visualice.
La mayoría de los documentos tienen elementos estándar como encabezados, párrafos o listas. Utilizando etiquetas HTML puede designar estos elementos, proporcionando a los navegadores WEB la información mínima para mostrar estos elementos, manteniendo en general la estructura general y la integridad informativa de los documentos. Todo lo que se necesita para leer un documento HTML es un navegador WEB que interprete las etiquetas HTML y muestre el documento en la pantalla en la forma que le da el autor.
En la mayoría de los casos, el autor del documento determina estrictamente la apariencia del documento. En el caso de HTML, el lector (según las capacidades del navegador WEB puede, hasta cierto punto, controlar la apariencia del documento (pero no su contenido). HTML le permite marcar dónde debe estar un encabezado o párrafo el documento utilizando una etiqueta HTML y luego proporciona WEB al navegador para interpretar estas etiquetas.
Por ejemplo, un navegador WEB puede reconocer el comienzo de una etiqueta de párrafo y presentar el documento en la forma deseada, mientras que otro no tiene esta capacidad y presenta el documento en una línea. Los usuarios de algunos navegadores WEB también tienen la posibilidad de personalizar el tamaño y tipo de fuente, el color y otros parámetros que afectan la visualización del documento.
Los documentos HTML se pueden crear utilizando cualquier editor de texto o editores y convertidores HTML especializados. La elección del editor que se utilizará para crear documentos HTML depende únicamente de la conveniencia y preferencias personales de cada autor. Por ejemplo, los editores HTML como Netscape Navigator Gold de Netscape le permiten crear documentos gráficamente utilizando la tecnología WYSIWYG (Lo que ves es lo que obtienes). Por otro lado, la mayoría de las herramientas de creación de documentos tradicionales cuentan con conversores que permiten convertir documentos al formato HTML.
Todas las etiquetas HTML comienzan con "" (corchete angular derecho). Normalmente, hay una etiqueta de inicio y una etiqueta de final. Como ejemplo, aquí hay etiquetas de título que definen el texto dentro de las etiquetas de inicio y fin que describen el título del documento: Título del documento
HTML no distingue entre mayúsculas y minúsculas, por lo que el ejemplo anterior podría verse así:
Titulo del documento
La etiqueta final tiene el mismo aspecto que la etiqueta inicial y se diferencia de ella por una barra diagonal antes del texto entre corchetes angulares. En este ejemplo, la etiqueta le dice al navegador WEB que use el formato de título y la etiqueta le dice al texto del encabezado que finalice.
Algunas etiquetas como
(etiqueta que define un párrafo) no requieren una etiqueta final, pero su uso proporciona al texto fuente del documento una mejor legibilidad y estructura.
Cuando un navegador WEB recibe un documento, determina cómo se debe interpretar el documento. La primera etiqueta que aparece en el documento debe ser . Esta etiqueta le dice al navegador WEB que su documento está escrito usando HTML. Un documento HTML mínimo se vería así:
...el cuerpo del documento...
encabezado del documento
La etiqueta del encabezado del documento debe usarse inmediatamente después de la etiqueta y en ningún otro lugar del cuerpo del documento. Esta etiqueta es una descripción general del documento. Evite colocar texto dentro del . La etiqueta de inicio se coloca inmediatamente antes de la etiqueta y otras etiquetas que describen el documento, y la etiqueta de fin se coloca inmediatamente después del final de la descripción del documento. Por ejemplo:
Lista de empleados Título del documento
La mayoría de los navegadores WEB muestran el contenido de la etiqueta en la barra de título de la ventana que contiene el documento y en el archivo de marcadores, si el navegador WEB lo admite. El título, delimitado por las etiquetas y, se coloca dentro de las etiquetas -, como se muestra en el ejemplo anterior. El título del documento no aparece cuando el documento en sí se muestra en la ventana.
Comentarios
Como cualquier idioma, HTML le permite insertar comentarios en el cuerpo de un documento, que se guardan cuando el documento se transfiere a través de la red, pero que el navegador no muestra. Sintaxis del comentario:
Los comentarios pueden aparecer en cualquier parte de un documento y en cualquier cantidad.
Las etiquetas del cuerpo del documento identifican los componentes del documento HTML que se muestra en la ventana. El cuerpo del documento puede contener enlaces a otros documentos, texto y otra información formateada.
Cuerpo del documento
El cuerpo del documento debe estar entre las etiquetas y. Esta es la parte del documento que se muestra como texto e información gráfica (semántica) de su documento.
Etiqueta de párrafo
A diferencia de la mayoría de los procesadores de texto, los retornos de carro generalmente se ignoran en un documento HTML. Se puede ubicar un salto de párrafo físico en cualquier parte del texto fuente del documento (para que sea más fácil de leer). Sin embargo, el navegador sólo separa párrafos si hay una etiqueta
Si no separas los párrafos con la etiqueta
Su documento aparecerá como un párrafo grande.
Los enlaces de hipertexto son un componente clave que hace que la WEB sea atractiva para los usuarios. Al agregar enlaces de hipertexto (en adelante, enlaces), se crea un conjunto de documentos conectados y estructurados, lo que permite al usuario obtener la información que necesita de la forma más rápida y cómoda posible.
Los enlaces tienen un formato estándar, lo que permite al navegador interpretarlos y realizar las funciones necesarias (métodos de llamada) según el tipo de enlace. Los enlaces pueden apuntar a otro documento, una ubicación específica dentro de ese documento o realizar otras funciones, como solicitar un archivo a través de FTP para que lo muestre el navegador. Una URL puede apuntar a una ubicación específica en una ruta absoluta, o puede apuntar a un documento en la ruta actual, que se utiliza a menudo al organizar sitios WEB estructurados de gran tamaño. Regrese al enlace anterior si el movimiento ocurrió dentro del documento. Si utiliza enlaces dentro de un documento y luego presiona la tecla Atrás, no irá al enlace anterior, sino que regresará a la parte del documento que estaba viendo antes.
Una de las características más atractivas de la Web es la capacidad de incluir enlaces a gráficos y otros tipos de datos en un documento HTML. Esto se hace usando una etiqueta. . El uso de esta etiqueta puede mejorar significativamente la apariencia y funcionalidad de los documentos.
Hay dos formas de utilizar gráficos en documentos HTML. El primero es la incorporación de imágenes gráficas en el documento, lo que permite al usuario ver las imágenes directamente en el contexto de otros elementos del documento.
Esta es la técnica más utilizada en el diseño de documentos, a veces denominada "imagen en línea".
Algunos navegadores WWW permiten al usuario, al completar un formulario especial que devuelve el valor resultante, realizar ciertas acciones en su servidor WWW. Cuando un navegador WEB interpreta el formulario, se crean elementos de pantalla GUI especiales, como campos de entrada, casillas de verificación, botones de opción, menús desplegables, listas desplazables, botones, etc. Cuando un usuario completa un formulario y hace clic en el botón "Enviar" (ENVIAR es un tipo especial de botón que se especifica al describir un documento), la información ingresada por el usuario en el formulario se envía al servidor HTTP para su procesamiento y transmisión. a otros programas que se ejecutan en el servidor, de acuerdo con la interfaz CGI (Common Gateway Interface).
Cuando describe un formulario, cada elemento de entrada de datos tiene una etiqueta. Cuando un usuario coloca datos en un elemento de formulario, la información se coloca en la sección VALOR de ese elemento. Una de las características más atractivas de la Web es la capacidad de incluir enlaces a gráficos y otros tipos de datos en un documento HTML.
Aunque las páginas web aparecen formateadas en la pantalla de su computadora, HTML no está diseñado para formatear documentos porque el diseño rígido y la ubicación precisa de los elementos de texto en una página generan limitaciones que son inaceptables en Internet.
Entonces, por ejemplo, cuando formateamos un texto usando el procesador de textos Word, determinamos de manera única cómo debe verse este texto cuando se imprime en una impresora muy específica y en papel de un tamaño determinado. Cuando un documento se publica en Internet, es imposible predecir qué computadora se utilizará para verlo, o si esa computadora tendrá siquiera un monitor.
La peculiaridad de describir un documento utilizando el lenguaje HTML está asociada con la imposibilidad fundamental de lograr una precisión absoluta en la reproducción del documento fuente. Se pretende que el documento esté ampliamente disponible en Internet y por tanto no se sabe cómo se organizará su reproducción. El documento puede presentarse en una pantalla gráfica, generarse en forma de texto puro o simplemente “leerse” mediante un programa de síntesis de voz. Se debe tener en cuenta el marcado HTML en todos estos casos. Es por eso ! HTML no está destinado a formatear un documento, sino a su marcado funcional.. El marcado se refiere al uso de códigos especiales que se separan fácilmente del contenido semántico del documento y se utilizan para implementar hipertexto. El uso de estos códigos está sujeto a reglas estrictas definidas por la especificación del lenguaje HTML: por ejemplo, los documentos suelen comenzar con títulos. La propiedad de una parte de un documento de “ser un encabezado” no es una característica del formato del documento, sino una característica de su contenido. Un procesador de documentos particular (navegador) elige su propia forma de presentar la parte del documento descrita como encabezado.
etiquetas HTML
! Los códigos de lenguaje HTML utilizados para marcar el texto fuente se denominan etiquetas y se insertan directamente en el texto del documento.
Una etiqueta es un conjunto de caracteres. Todas las etiquetas comienzan con un símbolo menor que (). Un par de estos caracteres a veces se denominan corchetes angulares. Después del corchete angular de apertura viene una palabra clave que define la etiqueta.
Cada etiqueta en HTML tiene un propósito especial. El caso de las letras en los nombres de las etiquetas no importa; se pueden usar letras minúsculas o mayúsculas, aunque es común usar letras mayúsculas para distinguir las etiquetas del texto normal del documento.
Las etiquetas se pueden dividir en dos grandes grupos.
Las etiquetas del mismo grupo, llamadas contenedores, afectan la parte del documento encerrada entre ellas. Tienen dos componentes: apertura (inicial) y cierre (final). La etiqueta de cierre tiene el mismo nombre que la etiqueta de apertura, pero está precedida por una barra (/ (barra)). Se pueden colocar texto u otras etiquetas entre las etiquetas de apertura y cierre.
Las etiquetas independientes (únicas) no tienen un componente final. Provocan una acción única o, cuando se interpretan, se inserta un objeto en el documento mostrado. Por ejemplo, etiqueta provoca la inserción de una imagen del archivo pict.gif.
Normalmente, una única etiqueta HTML afecta sólo a una parte del documento, como un párrafo. En tales casos, se utilizan etiquetas emparejadas: apertura y cierre. La etiqueta de apertura crea el efecto y la etiqueta de cierre finaliza el efecto. Las etiquetas de cierre comienzan con una barra diagonal (/).
Algunas etiquetas proporcionan un efecto único cuando aparecen. En este caso, no es necesaria una etiqueta de cierre y no se utiliza.
Si por error una etiqueta contiene una palabra clave que no se encuentra en HTML, la etiqueta se ignora por completo.
Cuando se muestra un documento en un navegador, las etiquetas en sí no se muestran, pero afectan la forma en que se muestra el documento.
Las etiquetas están asociadas con un fragmento específico de un documento e indican cómo un cliente web representa e interpreta externamente el contenido de estos fragmentos.
Desde un punto de vista funcional, las etiquetas HTML se pueden dividir en las siguientes categorías:
Etiquetas que describen la estructura del documento e información sobre el mismo, por ejemplo, anotaciones, lista de palabras clave, etc.;
Etiquetas utilizadas para estructurar lógicamente el texto de un documento, por ejemplo, para resaltar títulos, dividir en párrafos, resaltar citas, crear listas, tablas, etc.;
Etiquetas de formato de texto que describen los parámetros de fuentes, colores, etc.;
Etiquetas para organizar hipervínculos;
Etiquetas que establecen conexiones entre un archivo HTML y objetos externos, por ejemplo, archivos gráficos, de sonido, etc.;
Etiquetas de creación de formularios que permiten al usuario ingresar información y enviarla al servidor web;
La versión básica de HTML tiene varias desventajas:
Falta de herramientas que le permitan controlar dinámicamente la apariencia de un documento;
Falta de herramientas que permitan cambiar fácilmente el diseño externo de los documentos web sin alterar el documento en sí, por ejemplo, hojas de estilo;
Falta de herramientas que permitan de alguna manera estructurar el contenido según su significado, por ejemplo, clasificar conceptos que se encuentran en el texto.
Actualmente, existen varias extensiones HTML, así como una variedad de tecnologías diferentes, que pueden superar las deficiencias de la versión básica del lenguaje.
Atributos de etiqueta
El efecto de una etiqueta se puede modificar agregando atributos. En las etiquetas emparejadas, los atributos se agregan sólo a la etiqueta de apertura.
! Los atributos son palabras clave adicionales, separadas de la palabra clave que define la etiqueta y otros atributos por espacios, y colocadas antes del carácter ">" que finaliza la etiqueta. La forma en que se aplican algunos atributos requiere especificar un valor para el atributo. El valor del atributo está separado de la palabra clave del atributo por un carácter "=" (signo igual) y está entre comillas.
Los atributos de un elemento definen sus propiedades.
Ejemplos de etiquetas con atributos:
– establece un fondo azul claro para el documento,
texto: una etiqueta emparejada que indica al navegador que muestre el texto encerrado en el “contenedor” con caracteres aumentados en relación con el tamaño base (SIZE="+2") y el color rojo (COLOR="RED").
El valor del atributo debe estar entre comillas, pero en muchos casos las comillas se pueden omitir sin ningún daño.
La definición de HTML como lenguaje de marcado se basa en el hecho de que cuando se eliminan todas las etiquetas de un documento, se obtiene un documento de texto que es completamente equivalente en contenido al documento de hipertexto original. Por lo tanto, cuando se representa un documento HTML, las etiquetas en sí no se representan, pero sí afectan la forma en que se representa el resto del documento.
Conceptos básicos de HTML contiene las reglas básicas del lenguaje HTML, una descripción de la estructura de una página HTML y las relaciones en la estructura de un documento HTML entre elementos HTML.
Un documento HTML es un documento de texto normal que se puede crear en un editor de texto normal (Bloc de notas) o en uno especializado con código resaltado (Notepad++, Visual Studio Code, etc.). Un documento HTML tiene una extensión .html.
Un documento HTML consta de un árbol de elementos HTML y texto. Cada elemento se identifica en el documento fuente mediante una etiqueta de inicio (apertura) y de finalización (cierre) (con raras excepciones).
La etiqueta de inicio muestra dónde comienza el elemento, la etiqueta de final muestra dónde termina. La etiqueta de cierre se forma añadiendo una barra diagonal / antes del nombre de la etiqueta: .... Entre las etiquetas de inicio y cierre está el contenido de la etiqueta: el contenido.
Las etiquetas individuales no pueden almacenar contenido directamente; se escribe como un valor de atributo; por ejemplo, una etiqueta creará un botón con el texto Botón dentro.
Las etiquetas se pueden anidar unas dentro de otras, por ejemplo,
Texto
. Al invertir, debes seguir el orden en que se cierran (el principio de la “matrioska”), por ejemplo, la siguiente entrada será incorrecta:Texto
.Los elementos HTML pueden tener atributos (globales, aplicados a todos los elementos HTML y propios). Los atributos se escriben en la etiqueta de apertura del elemento y contienen un nombre y un valor, especificados en el formato atributo nombre="valor" . Los atributos le permiten cambiar las propiedades y el comportamiento del elemento para el que están configurados.
A cada elemento se le pueden asignar múltiples valores de clase y solo un valor de identificación. Se escriben varios valores de clase separados por un espacio. Los valores de clase e id deben consistir únicamente en letras, números, guiones y guiones bajos, y deben comenzar únicamente con letras o números.
El navegador ve (interpreta) el documento HTML, construye su estructura (DOM) y lo muestra de acuerdo con las instrucciones incluidas en este archivo (hojas de estilo, scripts). Si el marcado es correcto, la ventana del navegador mostrará una página HTML que contiene elementos HTML: encabezados, tablas, imágenes, etc.
El proceso de interpretación (análisis) comienza antes de que la página web esté completamente cargada en el navegador. Los navegadores procesan documentos HTML de forma secuencial, desde el principio, mientras procesan CSS y relacionan hojas de estilo con los elementos de la página.
Un documento HTML consta de dos secciones: el encabezado, entre las etiquetas... y la parte de contenido, entre las etiquetas....
estructura de la página web 1. Estructura del documento HTMLHTML sigue las reglas contenidas en el archivo de declaración de tipo de documento. (Definición de tipo de documento o DTD). Una DTD es un documento XML que define qué etiquetas, atributos y sus valores son válidos para un tipo HTML particular. Cada versión de HTML tiene su propia DTD.
DOCTYPE es responsable de la correcta visualización de una página web por parte del navegador. DOCTYPE especifica no sólo la versión HTML (p. ej. html), sino también el archivo DTD correspondiente en Internet.
...
Los elementos dentro de la etiqueta forman un árbol de documentos, el llamado modelo de objetos de documento, DOM (modelo de objetos de documento). En este caso, el elemento es el elemento raíz.
Arroz. 1. La estructura más simple de una página web. Para comprender la interacción de los elementos de una página web, es necesario considerar las llamadas “relaciones familiares” entre elementos. Las relaciones entre múltiples elementos anidados se clasifican como padre, hijo y hermano.
Un antepasado es un elemento que contiene otros elementos. En la Figura 1, el antepasado de todos los elementos es. Al mismo tiempo, el elemento es el antepasado de todas las etiquetas que contiene: ,
, , etc.
Un descendiente es un elemento ubicado dentro de uno o más tipos de elementos. Por ejemplo, es descendiente de y el elemento
Es descendiente de ambos y .
Un elemento padre es un elemento que está relacionado con otros elementos en un nivel inferior y se encuentra encima de ellos en el árbol. En la Figura 1 y . Etiqueta
Es padre sólo de .
Un elemento hijo es un elemento que está directamente subordinado a otro elemento de nivel superior. En la Figura 1 solo hay elementos , ,
Y son hijos de .
Un elemento hermano es un elemento que tiene un elemento padre común con el en cuestión, los llamados elementos del mismo nivel. En la Figura 1 y se encuentran elementos del mismo nivel, así como elementos , y
Son hermanas entre sí.
1.1. Elemento 1.2. ElementoLa sección... contiene información técnica sobre la página: título, descripción, palabras clave para buscadores, codificación, etc. La información que ingresa allí no se muestra en la ventana del navegador, pero contiene información que le indica al navegador cómo procesar la página.
1.2.1. ElementoLa etiqueta de sección requerida es . El texto colocado dentro de esta etiqueta aparece en la barra de título del navegador web. El título no debe tener más de 60 caracteres para que quepa completamente en el título. El texto del título debe contener la descripción más completa del contenido de la página web.
1.2.2. ElementoUna etiqueta de sección opcional es una etiqueta única. Con su ayuda, puede establecer una descripción del contenido de la página y palabras clave para los motores de búsqueda, el autor del documento HTML y otras propiedades de metadatos. Un elemento puede contener varios elementos porque contienen información diferente según los atributos utilizados.
La descripción del contenido de la página y las palabras clave se pueden especificar simultáneamente en varios idiomas, por ejemplo, en ruso e inglés:
Usando una etiqueta, puedes bloquear o permitir la indexación de una página web por parte de los motores de búsqueda:
Para recargar automáticamente la página después de un período de tiempo específico, debe usar el valor de actualización:
La página se recargará después de 30 segundos. Para redirigir al visitante a otra página, debe especificar la URL en el parámetro URL: