Formato HTML. Usar caracteres de espacio en blanco para formatear código HTML, espacios sin separación y otros caracteres especiales (mnemotécnicos)

Hola, queridos lectores del blog. Un poco antes ya pudimos hablar sobre eso y también aprendimos sobre el diseño que contiene. Hoy tenemos a su vez el concepto de espacio en blanco en HTML, así como el formato del código asociado a la hora de escribirlo (para la comodidad de su posterior lectura y percepción).

Bueno, debido a que tocaremos el tema del espacio sin separación y el guión suave, tendremos que centrar nuestra atención en los llamados caracteres especiales o mnemónicos utilizados en el lenguaje HTML, que le permitirán agregar muchos caracteres adicionales al código del documento web, como los ya mencionados anteriormente. Pero primero lo primero.

Espacios y caracteres de espacio en blanco en HTML

Antes de pasar al tema del formato del texto utilizando etiquetas especialmente diseñadas para esto (párrafo, títulos, etc.), quiero detenerme en cómo se interpretan los espacios, los saltos de línea (Enter) y la tabulación en el lenguaje HTML, y cómo se divide el texto. lleva a cabo el texto en la ventana del navegador cuando se cambia su tamaño.

Es cierto que para este tipo de formato visual (que no será visible en la página web), la mayoría de las veces no se utilizan los espacios en sí, sino los caracteres de tabulación y salto de línea. Existe una regla de este tipo: cuando comienzas a escribir una etiqueta HTML anidada, entonces sangría usando pestañas(tecla Tabulador en el teclado), y cuando cierre esta etiqueta, elimine la sangría (combinación de teclas Mayús+Tab en el teclado).

Esto debe hacerse para que las etiquetas de apertura y cierre estén en el mismo nivel vertical (en el mismo número de pestañas desde el borde derecho de la página en su editor HTML, por ejemplo, Notepad++, sobre el cual escribí). Además, te aconsejo que inmediatamente después de escribir el elemento de apertura hagas varios saltos de línea e inmediatamente escribas el de cierre en el mismo nivel (número de pestañas), para que no te olvides de hacerlo más tarde.

Aquellos. los elementos de apertura y cierre deben estar al mismo nivel verticalmente, y las etiquetas internas deben desplazarse un carácter de tabulación y colocar los de cierre y apertura nuevamente en el mismo nivel.

Para documentos web simples esto puede parecer excesivo, pero al crear documentos más o menos complejos, el código será mucho más claro y legible debido a la abundancia de espacios, y también será mucho más fácil detectar errores debido a la disposición simétrica de las etiquetas.

Caracteres especiales o mnemónicos en código HTML

Entonces, hablemos ahora de los llamados caracteres especiales, cuya facilidad de uso anuncié al principio de este artículo. Los caracteres especiales a veces también se denominan mnemotécnicos o sustituciones. Su objetivo es resolver un problema que ha surgido en el lenguaje de marcado de hipertexto desde hace bastante tiempo, relacionado con las codificaciones utilizadas.

Cuando escribe texto en el teclado, los caracteres de su idioma se codifican de acuerdo con un algoritmo predeterminado y luego se muestran en el sitio usando las fuentes que usa (dónde encontrarlas y cómo instalarlas para el sitio) debido a la decodificación.

Hay muchas codificaciones, pero para el lenguaje HTML se adoptó de forma predeterminada la versión extendida de codificaciones.

En esta codificación de texto fue posible escribir sólo 256 caracteres: 128 de ASCII y otros 128 de letras rusas. Como resultado, surgió un problema con el uso en sitios de caracteres que no están incluidos en ASCII y no son letras rusas que forman parte de la codificación de Windows 1251 (CP1251). Bueno, decidiste usar una tilde o un apóstrofo, pero esa posibilidad no estaba inicialmente incluida en la codificación utilizada por el lenguaje HTML.

Es para estos casos que se inventaron las sustituciones o, en otras palabras, las mnemónicas. Inicialmente los caracteres especiales tenían una forma digital, pero luego, para los más comunes, se agregaron sus contrapartes en letras para que sean más fáciles de recordar.

En términos generales, un mnemotécnico es un carácter que comienza con un signo "&" y termina con un punto y coma ";". Se basa en estas características que el navegador, al analizar el código HTML, extrae del mismo caracteres especiales. El signo comercial en el código comodín numérico debe ir seguido inmediatamente de un signo de almohadilla "#", a veces denominado hash. Y solo entonces sigue el código digital del carácter deseado en codificación Unicode.

Se pueden escribir más de 60.000 caracteres en Unicode; lo principal es que el símbolo mnemotécnico que necesita sea compatible con la fuente utilizada en su sitio. Hay fuentes que admiten casi todos los caracteres Unicode y hay opciones solo con un determinado conjunto de caracteres.

La lista completa de personajes especiales será simplemente enorme, pero mnemónicos más utilizados puedes pedir prestado, por ejemplo, de esta tabla:

Hay algo bastante interesante forma de obtener código mnemotécnico HTML para el cartel que necesitas. Para hacer esto, simplemente abra el editor de Microsoft Word, cree un nuevo documento y seleccione "Insertar" - "Símbolo" en el menú superior (yo uso la versión 2003, así que no sé cómo hacer una operación similar en versiones posteriores). ).

En la ventana que se abre, debe seleccionar una fuente, por ejemplo, Times New Roman (o cualquier otra que obviamente estará presente en la mayoría de las computadoras de los visitantes de su sitio: Courier o Arial, por ejemplo).

Agregue todos los caracteres especiales que necesita de la lista que se abre en su documento de Word y guarde este documento de Word como una página web (seleccionada de la lista desplegable ".html" al guardar). Bueno, entonces todo lo que tienes que hacer es abrir esta página web en cualquier editor HTML (el mismo Notepad++ servirá) y verás todos los códigos digitales de los mnemotécnicos que necesitas:

El método es un poco complicado, pero si desea utilizar algún carácter especial poco común en la página de su sitio web, será más fácil que buscar en Internet tablas como la que se muestra arriba. Deberá pegar el código de carácter especial resultante en el lugar correcto y, en su lugar, en la página web, el navegador mostrará el carácter que necesita (por ejemplo, un espacio sin separación).

Espacio sin separación y guión suave en ejemplos

Como ya mencioné anteriormente y como puede ver en la tabla de caracteres especiales que figura justo arriba, algunos mnemónicos en HTML recibieron, además de digitales, también una designación simbólica para facilitar su memorización. Aquellos. En lugar del signo almohadilla “#” (hash), se utilizan palabras en variantes simbólicas. Por ejemplo, el mismo espacio sin separación se puede escribir como (mnemónico digital) o como (carácter).

Al escribir artículos, si necesita insertar un signo comercial (&) o un corchete de ángulo abierto (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Es decir, si está escribiendo un artículo en el que deberá insertar, por ejemplo, una etiqueta de visualización en el texto< body>o simplemente necesita insertar un signo menor que (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Por lo tanto, necesitarás insertar la siguiente construcción para resolver un problema similar:

Lo mismo se aplica a la visualización del código de los propios mnemotécnicos, ya que comienzan con un signo comercial. Deberá insertar el código en el texto, reemplazando el signo comercial con su sustitución (carácter especial):

Esto deberá hacerse para ingresar a la página.<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Lo más probable es que también utilices un espacio sin separación, que se verá como un espacio normal en una página web, pero el navegador no lo tratará como un carácter de espacio en absoluto y no realizará transferencias sobre él(por ejemplo, esto será apropiado para frases como 1400 GB, etc., que no sería aconsejable dividir con guiones en diferentes líneas):

1400 GB.

A veces puede surgir la situación contraria, cuando el texto contiene palabras muy largas y se quiere asegurarse de que, si es necesario, el navegador Podría dividir estas palabras con guiones. Para tales fines, se proporciona un símbolo especial "transferencia suave":

Palabra muy, muy larga;

Cuando sea necesario pasar a otra línea, el navegador utilizará un guión en lugar del mnemotécnico de guión suave y enviará el resto de la palabra a la siguiente línea. Si hay suficiente espacio para colocar esta palabra completa en una línea, entonces el navegador no dibujará ninguna nueva línea. Es así de simple.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

Quizás te interese

MailTo: qué es y cómo crear un enlace en HTML para enviar un correo electrónico
Etiquetas y atributos de encabezados H1-H6, línea horizontal Hr, salto de línea Br y párrafo P según el estándar Html 4.01
Cómo insertar un enlace y una imagen (foto) en HTML: etiquetas IMG y A

La etiqueta especifica un carácter de tabulación en el texto. Es similar a usar la secuencia de escape /t.

1 2 3\t\t\t4
Desplegado:
1 2 3 4

La distancia que se desplazará la línea cuando se inserte un carácter de tabulación se puede establecer arbitrariamente. Para ello se utiliza el atributo TABSTOPS de la etiqueta.

La etiqueta no es una etiqueta HTML estándar. Se agregó a las etiquetas de marcado Flash para ayudar a formatear el texto de manera consistente.

Etiqueta...

La etiqueta es responsable de las características de formato del texto, como márgenes, sangrías y cambios de línea. En él se pueden especificar los siguientes atributos:

MARGEN IZQUIERDO. Tamaño del margen izquierdo en puntos. Un análogo es la propiedad leftmargin de la clase TextFormat.

MARGEN DERECHO. El valor del margen derecho en puntos. Analogue es la propiedad rightmargin de la clase TextFormat.

SANGRAR. Sangra la primera línea de un párrafo en puntos. Entre las propiedades de la clase TextFormat, es similar a la propiedad indent.

BLOQUEINDIENTE.

Sangría de un párrafo de texto a la izquierda en puntos. Análogo: propiedad blockIndent
clase Formato de texto.

PRINCIPAL. La distancia entre líneas en puntos. Una propiedad similar de la clase TextFormat es la principal.

TABLAS. El atributo especifica qué desplazamiento de línea en puntos provocará cada carácter de tabulación en la secuencia. Su valor es una lista de números que indican las distancias que la línea se moverá hasta la ventana si se escriben 1, 2, 3, ... n caracteres de tabulación seguidos. Un análogo del atributo TABSTOPS es la propiedad tabStops de la clase TextFormat.

pole.html=pole.border=pole.multiline=true;
polo.htmlText="

0din pestañaR>Dos pestañasR>
Tres Tabares>

La etiqueta no es una etiqueta HTML estándar. Se introdujo para que la capacidad de marcar texto usando etiquetas sea similar a usar las propiedades de la clase Formato de texto.

Etiqueta...

Etiqueta está destinado a aplicar un estilo de clase CSS a un fragmento de texto arbitrario.

El nombre de la clase se especifica en su atributo CLASS.

This.createTextField("polo", 0, 150, 150, 200, 90);
pole.autoSize = pole.border=pole.multiline=true;
// Crea tres estilos de clase que definen texto rojo, verde y azul
var estilo:TextField.Stylesheet = nuevo TextField.Stylesheet();
var green_text:String = ".GREEN (color:#00FF00)";
var red_text:String = ".RED (color:#FF0000)";
var blue_text:String = ".BLUE (color:#0000FF)";
style.parseCSS(texto_verde+texto_rojo+texto_azul);
pole.styleSheet=estilo;
// Mostrar texto con estilos creados
polo.texto = " 3texto verde

Texto rojo
Texto azul ";

¡Hola, queridos lectores del blog! Quienes lo conocen al menos superficialmente probablemente ya lo hayan notado, aunque sea en términos generales. Esto significa que tienen una idea de qué símbolos HTML se utilizan generalmente en el código del documento.

En el artículo de hoy intentaremos descubrir qué es un espacio en HTML y en qué casos se pueden utilizar caracteres de espacio en blanco al formatear el código para facilitar su lectura. Descubriremos cuándo es necesario utilizar un espacio sin separación y también nos familiarizaremos con otros caracteres especiales (o, como también se les llama, mnemónicos).

De hecho, le aconsejaría que no ignore el tema del uso de varios caracteres especiales, ya que este es un componente importante que le permitirá completar su estudio del lenguaje de marcado de hipertexto. En general, la información proporcionada en esta publicación definitivamente no será superflua. Bueno, ahora al grano.

Espacios y caracteres de espacio en blanco en HTML

Primero hay una nota importante que hacer. Hay teclas especiales en el teclado de una computadora que le permiten separar texto (más sobre esto a continuación). Sin embargo, sólo una barra espaciadora amplia proporciona separación entre palabras no sólo en el editor, sino también en la ventana del navegador. Hay matices al dividir líneas y sangrar los bordes.

Como sabes, la visualización de determinados elementos en un navegador web está determinada por etiquetas. Para formatear el texto se utiliza el conocido , que está basado en bloques. Es decir, su contenido se ubica en todo el ancho disponible.

A ajustar líneas dentro del párrafo P, debe utilizar una única etiqueta BR con la que pueda hacer esto. Digamos que necesitamos insertar en el texto algunas líneas de un poema que escribimos en un editor de texto:

A pesar de que las líneas del verso están ubicadas correctamente y los guiones están en los lugares correctos, todo se verá diferente en el navegador:

Para lograr la misma visualización en la ventana de un navegador web, debe escribir BR en cada salto de línea:

Ahora hemos logrado la tarea y las líneas poéticas se mostrarán de forma completamente correcta en el navegador:

De esta forma se completan los saltos de línea necesarios. Otra característica que debe tenerse en cuenta aquí es que el navegador web muestra como uno solo los espacios múltiples que aparecen uno tras otro. Puedes comprobarlo si en el mismo editor intentas poner no uno, sino varios espacios entre dos palabras y, pulsando en el botón “Guardar”, miras el resultado en el navegador.

Espacio, tabulación y salto de línea

Básicamente, con estos caracteres de espacio en blanco Nos conocemos tan pronto como empezamos a trabajar con el texto en el editor y le damos el formato requerido. Para implementar tal tarea, existen claves especiales, cada una de las cuales corresponde a su propio carácter de espacio:

• La barra espaciadora es la tecla más ancha del teclado de una computadora (sin etiqueta);
• Tabulador: una tecla a la izquierda con la inscripción "Tab" y dos flechas que apuntan en diferentes direcciones;
• Salto de línea: tecla "Intro".

Sin embargo, como dije anteriormente, obtenemos el resultado final deseado no solo en un editor de texto, sino también en un navegador, solo cuando usamos la primera tecla. Las tres teclas (incluidas la tabulación y el salto de línea son útiles al formatear el código HTML. Digamos que así es como se ve un fragmento de código en NotePad++ (hay mucha información sobre este editor) cuando se muestran todos los caracteres de espacio en blanco:

Obtenemos un código fácil de leer y comprender gracias a los espacios. Las flechas naranjas indican sangrías creadas con la tecla Tab y los símbolos CR y LF indican saltos de línea creados con la tecla Intro.

Se ven los contenedores anidados unos dentro de otros y las etiquetas de apertura y cierre son claramente visibles. De esta forma, este código se puede editar fácilmente. Ahora compárelo con el mismo código, que no tiene dicha división de texto:

De la misma manera, utilizando caracteres de espacio en blanco, puede escribir reglas CSS que visualmente se verán claras y digeribles:

Después de llevar todos los estilos a un denominador común y terminar de editar completamente el archivo de estilos, puede realizar la edición eliminando todos los espacios del código. Esto es necesario aumentar, lo cual es muy importante a la hora de promocionar un recurso.

Caracteres especiales (o mnemónicos) en código HTML

Ahora veamos los casos en los que es necesario utilizar los caracteres especiales que mencioné al principio del artículo. Los caracteres especiales HTML, a veces llamados mnemónicos, se introdujeron para resolver un problema de larga data con las codificaciones que surgieron en el lenguaje de marcado de hipertexto.

Cuando escribes texto en el teclado, se codifican los caracteres del idioma que estás utilizando. En el navegador web, el texto escrito se mostrará utilizando las fuentes que seleccionó como resultado de la operación de decodificación inversa.

El hecho es que existen muchas codificaciones de este tipo; ahora no tenemos el objetivo de analizarlas en detalle. Lo que pasa es que a cada uno de ellos le pueden faltar ciertos símbolos, que, sin embargo, deben mostrarse. Digamos que siente la necesidad de escribir comillas simples o un acento, pero estos íconos simplemente no están incluidos en el conjunto.

Para eliminar este problema, se introdujo un sistema de símbolos especiales, que incluye una gran cantidad de mnemónicos diferentes. Todos comienzan con un signo "&" y normalmente terminan con un punto y coma ";". Al principio, cada carácter especial tenía su propio código digital. Por ejemplo, para un espacio no separable, que consideraremos con más detalle a continuación, será válida la siguiente entrada:

Pero después de un tiempo, a los símbolos más comunes se les asignaron letras análogas (mnemotécnicas) para que fueran más fáciles de recordar. Digamos que para el mismo espacio sin separación se ve así:

Como resultado, el navegador muestra el símbolo correspondiente. La lista de mnemónicos es muy voluminosa, caracteres especiales más utilizados en HTML Puede descubrirlo a continuación en la siguiente tabla:

Casos de uso de algunos caracteres especiales, incluidos espacios sin separación y guiones suaves

Si ya ha estudiado un poco la tabla, ha recibido la confirmación de lo que dije anteriormente, que para mostrar todos los caracteres especiales se utiliza un código digital () o su análogo alfabético (mnemónicos simbólicos), donde en lugar de un conjunto de hash Se escriben marcas y números, letras ().

Ahora veamos cuándo usar estos códigos. Digamos que en un artículo necesita indicar alguna etiqueta HTML con fines informativos, por ejemplo,