Etiquetas requeridas. Estructura del documento HTML. Conceptos básicos de HTML

Etiquetas

Los comandos del navegador que le indican cómo mostrar texto, insertar tablas, imágenes y otros objetos se denominan etiquetas ( De inglésetiqueta- etiqueta, signo). Las etiquetas (comandos) en sí no se muestran en la pantalla.

El nombre de la etiqueta está escrito entre corchetes triangulares, por ejemplo: una etiqueta que le indica al navegador que escriba todo el texto posterior en negrita. El nombre de la etiqueta se puede escribir en cualquier caso (mayúsculas o minúsculas), es decir, será interpretado por el navegador de la misma forma que .

Las etiquetas pueden estar emparejadas o desemparejadas. Por ejemplo, la etiqueta le dice al navegador que escriba todo el texto posterior hasta el comando en negrita. En este caso, la etiqueta que da la orden se llama apertura y la etiqueta que cancela la orden se llama cierre.

Las etiquetas pueden tener parámetros (o atributos). Por ejemplo, para establecer el color de una fuente, se utiliza la etiqueta de fuente con el parámetro color:; esta es una etiqueta de apertura que le indica al navegador que muestre la fuente en verde (en este ejemplo) hasta la etiqueta de cierre.

Algunos parámetros requieren una especificación obligatoria de sus valores. Para algunas configuraciones, el navegador utiliza valores predeterminados si no se especifican otros valores.

Si una etiqueta tiene varios parámetros, se escriben separados por un espacio en cualquier orden. Por ejemplo: - dos entradas similares de la etiqueta de fuente de apertura con parámetros de color y tamaño.

Estructura de páginas HTML

Cualquier página HTML debe contener las siguientes etiquetas obligatorias:

html: le dice al navegador que la página está escrita en HTML y que las líneas hasta la etiqueta de cierre constituyen un documento único;

encabezado: la información importante que describe este documento se coloca entre las etiquetas de apertura y cierre;

cuerpo: el contenido de la página se coloca entre las etiquetas de apertura y cierre.

Entonces el documento HTML tiene la siguiente estructura:

Descripción del documento (no se muestra en la propia página)

Contenido (que se muestra en la página teniendo en cuenta el marcado especificado)

La sección en sí es opcional y sirve para contener una descripción del documento. Si está presente, entonces la única etiqueta requerida es TÍTULO, cuyo contenido especifica el título del documento, que generalmente se muestra en el título de la ventana del navegador.

Por ejemplo, esta línea 1_HTML establecerá el nombre del documento "1_HTML", que en Mozilla Firefox se reflejará en el título de la ventana y en los marcadores (cuando haya varias páginas abiertas):

2. Formato de texto

Fuentes: tipo de letra, tamaño, color

Decoración de texto

Encabezamientos

Etiquetas de formato de párrafo y salto de línea

Alineación del texto

Ejercicio

Fuentes: tipo de letra, tamaño, color

Con el marcado HTML, puede escribir texto en diferentes estilos (tipos de letra), tamaños y colores. Para hacer esto, use la etiqueta, que tiene varios parámetros:

cara – para configurar los auriculares,

tamaño: para establecer el tamaño,

color: para establecer el color.

Para configurar la fuente, el tamaño o el color deseado, debe asignar el valor deseado al parámetro correspondiente:

parámetro="valor"

Auriculares

Por ejemplo, para escribir texto en fuente Times New Roman, debe insertar una etiqueta antes del texto deseado y asignarle al parámetro de cara el valor Times New Roman, y desde La etiqueta es un par, luego después del texto requerido debes insertar una etiqueta de cierre:

Texto con estilo Times New Roman

Texto con estilo Times New Roman

Al parámetro de cara se le pueden asignar varios valores separados por comas:

cara="Times New Roman, Times, serif"

En este caso, el navegador intentará primero mostrar el texto en fuente Times New Roman. Si dicha fuente no está disponible en la computadora del usuario, el navegador intentará mostrar el texto en la fuente Times, etc.

Tamaño

Para escribir texto de tamaño 4, debe insertar una etiqueta antes del texto deseado y establecer su parámetro de tamaño en 4:

Tamaño del texto 4

Como resultado, el navegador mostrará esta línea así:

Tamaño del texto 4

¿Qué significa este misterioso número 4? El parámetro de tamaño puede tomar valores del 1 al 7. Estas son unidades convencionales. El tamaño mediano predeterminado es size="3" .

Por lo tanto, el tamaño del texto 4 es el tamaño promedio aumentado en 1 unidad convencional, y el tamaño del texto 2 es el tamaño promedio reducido en 1 unidad convencional, etc. El tamaño del texto especificado de esta manera se llama absoluto.

Pero hay otra forma de reducir o aumentar el tamaño del texto en relación con el tamaño predeterminado. Para hacer esto, debe asignar al parámetro de tamaño el valor "-1" o "+1" respectivamente. Con este método de configurar el tamaño, el tamaño del texto se llama relativo.

Entonces, para obtener un tamaño de texto 5, puedes usar dos métodos:

Tamaño de texto 5 o Tamaño de texto 5

Además de las enumeradas, existen otras formas de configurar el tamaño del texto.

Puedes ampliar el texto usando la etiqueta:

Texto ampliado

Como resultado, el navegador mostrará esta línea así:

Texto ampliado

Puedes hacer el texto más pequeño usando la etiqueta:

Texto más pequeño

Como resultado, el navegador mostrará esta línea así:

Texto más pequeño

Etiquetas y se pueden repetir varias veces para mejorar el efecto. Por ejemplo, si el resultado es la línea:

Texto grande

el texto no es lo suficientemente grande:

Texto grande

puedes escribirlo así:

Texto grande

Y el resultado será un texto más grande:

Texto grande

Color

Ahora sobre configurar el color del texto. Para escribir texto en rojo, debe insertar una etiqueta antes del texto deseado y establecer su parámetro de color en rojo:

Texto rojo

Como resultado, el navegador mostrará esta línea así:

Texto rojo

Pero el color se puede especificar no solo por su nombre, sino también por su valor digital en formato hexadecimal, que se parece al signo # y 6 caracteres (números 0-9 y letras del alfabeto latino A-F) después. Por ejemplo, el color rojo corresponde al valor hexadecimal #FF0000. Aquellos. Hay dos formas de escribir texto en rojo:

Texto rojo o Texto rojo

Aquí puedes descargar una tabla de colores que muestra los colores principales, sus nombres y sus correspondientes valores hexadecimales.

Intentaré publicar el boletín según el principio "de lo simple a lo complejo". Lo llevaré a cabo exactamente en este formato para que una persona que quiera aprender los conceptos básicos de la creación de sitios web pueda inmediatamente, después del lanzamiento del boletín, poner en práctica el material presentado.

Pero me gustaría hacer una reserva de inmediato: en particular, el lenguaje HTML es un lenguaje muy extenso que está en constante evolución. Y por lo tanto, para dominar este idioma a un alto nivel, es necesario estudiar detenidamente los conceptos básicos (es decir, los números de mi boletín). Y al mismo tiempo practicar.

A medida que aprendamos los conceptos básicos de HTML, veremos los estilos CSS. Esto significa que también estudiaremos CSS. Pero eso es un poco más tarde. También recurriremos a JavaScript en busca de ayuda.

Para la lección introductoria de hoy, comenzaremos aprendiendo sobre la estructura de un documento HTML y las etiquetas HTML básicas.

Ir…

Todo documento HTML comienza con la línea:

HTML

En general, esta línea le dice al navegador que abre nuestra página en qué estándares debe confiar.

La etiqueta es muy diversa y su modificación determina cómo se mostrará el contenido en su página.

Sin embargo, si organiza hábilmente todos los elementos y bloques de la página y aplica el estilo, todo funcionará igualmente bien en todos los navegadores con el formato deseado.

Pero si bien no sabemos qué son los bloques, qué estilos son y cómo aplicar este “abrucadabra”, considero necesario volver a una consideración detallada cuando ya sabemos cómo hacer algo y realmente podemos evaluar su trabajo.

Mientras tanto, avancemos en la página.

Por cierto, ¿por qué comencé a mirar el documento HTML desde la parte superior de la página?

Porque el navegador carga la página y “lee el código” de arriba a abajo, de izquierda a derecha. (Sin embargo, al igual que leemos libros).

¿Quizás la palabra etiqueta no queda del todo clara?

En términos generales, una etiqueta es una instrucción que le dice al navegador qué hacer en un punto determinado del documento.

Usamos etiquetas para crear nuestras páginas. Todas las etiquetas están encerradas en las llamadas “esquinas” ( ). Y uno de cierre (con una barra). Por ejemplo, texto en negrita. Especifica que el texto entre las etiquetas fuertes de apertura y cierre estará en negrita.

Espero que quede claro qué es una etiqueta.

Te sugiero que escribas algo con tus propias manos.

Entonces empecemos.

Inicie el bloc de notas o el bloc de palabras en OC WINOWS. Escribamos las siguientes líneas:

HTML

Título de la ventana del navegador

Título de la ventana del navegador

Guardemos el archivo con algún nombre, por ejemplo start.html. Ahora averigüemos qué escribieron.

Entre las etiquetas hay información que no se muestra en la página.

Por ejemplo, la etiqueta, por cierto, no requiere una etiqueta de cierre, puede indicar la codificación (charset=windows-1251) o información sobre el autor (nombre="autor" contenido="Nombre completo"), o palabras para un motor de búsqueda, la etiqueta obligará al navegador a ir automáticamente al sitio mysite.ru después de 30 segundos (ejemplo).

La etiqueta define el texto en la barra de título de la ventana del navegador. (Etiqueta de cierre).

La etiqueta también puede contener scripts javascript o vbscript encerrados en... etiquetas. .

Y los estilos encerrados en etiquetas... .

Probablemente terminemos con esta etiqueta.

Este es, de hecho, el cuerpo del documento; todo lo que vemos en la página se encuentra aquí. La etiqueta tiene un conjunto de parámetros que veremos, pero no se recomienda utilizarlos.

bgcolor: establece el color de fondo del documento. ( )

fondo: apunta a la URL de la imagen, el fondo del documento.

texto: establece el color del texto del documento.

enlace: establece el color de los hipervínculos.

vlink=: establece el color de los hipervínculos que ya has visitado usando un valor.

alink=: establece el color de los hipervínculos cuando se hace clic en ellos.

bgproperties=fixed: la imagen de fondo no se desplaza. Aquellos. el texto se moverá cuando se presione PageDown, pero el fondo no.
Esta opción sólo es compatible con Internet Explorer.

Estos parámetros se pueden combinar, por ejemplo, en esta página se utiliza:

HTML

Escribamos esta línea en nuestro ejemplo anterior.

HTML