Formateo de código html y css. Qué hacen los desarrolladores de JavaScript. Etiquetas de cierre opcionales
Cualquier texto tiene una estructura que consta de elementos individuales. Estos incluyen títulos, párrafos, listas y similares. Cada elemento debe estar en su lugar.
HTML-El documento no es una excepción. Aquí también debes colocar cada elemento correctamente. El texto, en primer lugar, debe dividirse en párrafos. No debería parecer un lienzo sólido.
Para hacer esto, necesita aprender a usar etiquetas. Etiqueta– un elemento de documento que le dice al navegador cómo mostrar la página. Todo lo que hay dentro de una etiqueta se denomina contenido de esa etiqueta. Punto y aparte V HTML El documento debe hacerse usando la etiqueta.
También necesitas una etiqueta de cierre al final del párrafo.
.A formato de texto fue más interesante, se puede dar propiedades adicionales usando CSS. Además, las propiedades se pueden establecer tanto para todo el documento como un todo y etiquetas individuales. Si, tegu
Además, puede especificar la fuente, el tamaño, la sangría en todos los lados y otras propiedades.
La propiedad font-family le indicará al navegador qué fuente se utilizará y text-indent indicará la cantidad de sangría. Además, el valor se puede indicar tanto en píxeles como en porcentaje o en otras unidades de medida.
Hay otras propiedades interesantes. Por ejemplo, text-align especifica la alineación del texto, que de forma predeterminada está alineado a la izquierda, pero el diseñador de diseño puede cambiar este estado.
Puede utilizar uno de cuatro valores:
Izquierda: el texto está alineado a la izquierda. A la derecha, el texto parece desigual.
Derecha: el texto está alineado a la derecha y el izquierdo está irregular.
Centro: el texto está alineado al centro. Ambos bordes siguen siendo desiguales. Normalmente, la propiedad se utiliza para títulos.
Justificar: el texto está justificado. Ambos bordes permanecen lisos debido al espacio cambiante entre palabras.
¡Pero eso no es todo! Aquí, también puede cambiar la distancia entre palabras usando la propiedad de espacio entre palabras y el espacio entre líneas usando el espacio entre letras.
A formato de texto llevado a cabo adecuadamente, en HTML proporcionó todo el grupo etiquetas:
Y. Etiqueta de superíndice.
Y. Etiqueta de subíndice.
Y. El texto aparece en la pantalla exactamente como está escrito. (Esta etiqueta debe usarse para mostrar código de programa, en otros casos se considera “de mala forma”).
Y. Texto en cursiva.
Y. Texto en negrita.
Y. El contenido del contenedor se mostrará en texto codificado.
Y. Texto monoespaciado.
Abreviatura.
Y. Etiqueta para forzar que el texto se mueva a una nueva línea. Si no se especifica ninguna etiqueta, el navegador determina automáticamente si se necesita una nueva línea según el tamaño de la pantalla y el tamaño de fuente utilizado.
. El contenido de este contenedor no se muestra en la pantalla de la computadora del usuario y es necesario para dejar un comentario para usted o para otro diseñador de diseño que se hará cargo del proyecto.
Hay otras etiquetas que se utilizan para dar formato al texto en documentos HTML. Por ejemplo, etiqueta
y etiqueta de cierre
apunte el navegador al título. Además, dado que puede haber varios títulos en el cuerpo del documento, también hay etiquetas adicionales. , . Al mismo tiempo, la etiqueta Sólo puede haber uno en un documento. Este es el titular más importante.
Intente escribir el texto usted mismo y formatee el texto en un archivo de bloc de notas con la extensión *.txt, vuelva a escribirlo en *.html y guárdelo. Si todo sale bien, pase a tareas más complejas. Si surgen dificultades, es mejor volver a intentarlo hasta poder hacer todo correctamente.
Para completarlos, también tendrás que familiarizarte con nuevas etiquetas.
La principal tarea del formateo es hacer que el texto sea legible y comprensible en su estructura. Incluso hay guías completas sobre cómo formatear códigos, donde se describen detalles como el número de espacios o la sangría de las llaves. De hecho, todo es mucho más sencillo: basta con que el código sea legible visualmente y los espacios o tabuladores son un asunto menor.
Sin embargo, lo que quiero señalar es que si vas a publicar código para otras personas, tendrás que cumplir con algún tipo de "estándar básico".
Relleno de bloque
Cada bloque anidado debe tener más margen izquierdo que su padre.
Es decir, estamos construyendo una jerarquía visual de etiquetas por la que es fácil navegar. Comparar con "estilo plano":
Los editores de texto modernos, por ejemplo Notepad++, aplican sangría automáticamente usando Enter, lo que elimina por completo el problema de organizarlos manualmente. Normalmente, los codificadores primero crean una etiqueta de apertura y cierre, y luego las dividen en líneas usando Enter. Esto asegura que la etiqueta de apertura siempre tenga una etiqueta de cierre.
Bloques de "cierre"
Puede haber una situación en su código en la que los bloques siempre se suceden inmediatamente uno al otro. En este caso, no es necesario separarlos ni hacer ninguna sangría adicional.
En este ejemplo, div.layout-center-wrap siempre contiene un hijo inmediato de div.layout-wrap sin interrupción. Estos bloques pueden verse visualmente como uno solo. Aquí hay otro ejemplo donde los bloques se pueden colocar en el mismo nivel.
Título
Lo principal aquí es no exagerar: no debes colocar más de 2 o 3 bloques en una línea/nivel. Si se coloca texto o código entre bloques, definitivamente deben colocarse en líneas diferentes.
Texto
Este formato no es adecuado. La forma correcta sería:
Texto
Espacio o pestaña
No importa. Usa lo que más te guste. Hasta donde yo sé, casi todos los codificadores usan el tabulador, simplemente porque solo requiere presionar la tecla Tab una vez.
Si lo hace con espacios, entonces para cada sangría debe presionar 4 espacios. Un problema común es que por error no puede presionar 4, sino 3, 5 o algún otro número, y en este caso necesita contar las pulsaciones de teclas o controlar visualmente el resultado.
En este sentido, el tabulador es mucho más "fiable". Desde un punto de vista técnico, no importa si se trata de un tabulador o de espacios (el código HTML seguirá comprimido).
Usar múltiples espacios es una imitación de un tabulador. Entonces esta pregunta radica en el área de la usabilidad. Pero, si decide utilizar espacios, debe haber 4 caracteres por cada sangría; de lo contrario, el texto perderá legibilidad. Hay guías donde se recomienda poner 2 espacios, pero para mí ese código es visualmente "descuidadamente escaso".
Mayúsculas y minúsculas
Si hablamos de HTML, todas las etiquetas deben estar en minúsculas. Técnicamente, nuevamente, no importa, pero las letras mayúsculas son difíciles de leer. Por lo tanto, todas las etiquetas y sus atributos se escriben estrictamente en minúsculas.
Si hablamos de lenguajes de programación, entonces, por regla general, distinguen entre mayúsculas y minúsculas, por lo que las mayúsculas se utilizan solo cuando es necesario.
comillas simples y dobles
Casi siempre se utilizan comillas dobles. Al incrustar código JS en una página HTML, puede surgir una situación en la que se requieran dos tipos de comillas:
En este ejemplo, el atributo html está entre comillas dobles y dentro del código js ya se utilizan comillas simples. Es imposible utilizar un solo tipo.
Por lo tanto, la regla para las comillas en HTML y CSS es simple: las comillas principales son dobles y, si faltan, usamos comillas simples.
Etiquetas de cierre opcionales
Aquí es simple: siempre lo configuramos. Esto se aplica a las etiquetas P, LI y otras.
Barra diagonal al final de etiquetas individuales
Nunca lo hacemos. Esta es una reliquia del antiguo estándar XHTML. Muy mal:
Tan verdadero:
Orden de atributos en etiquetas
La clase siempre aparece en primer lugar. En realidad, al analizar el diseño siempre se mira la etiqueta y sus clases, y luego el resto de atributos.
Aquellos atributos que pueden ser únicos (como los requeridos) se especifican mejor al final:
Las clases/atributos vacíos deben eliminarse.
Formatear código CSS
La clase se coloca en una línea separada y abre un bloque de propiedades (()). Hay un espacio después de los dos puntos de propiedad. Cada propiedad se coloca en una línea y siempre va seguida de un punto y coma (;).
Etiqueta T (color: blanco; fondo: azul; tamaño de fuente: .75rem; relleno: 1px 10px; radio de borde: 3px;)
Si se especifican varias clases a la vez, se colocan en líneas separadas:
Artículo, aparte, pie de página, encabezado, navegación, sección (mostrar: bloquear;)
Si la clase es corta y consta de una propiedad, entonces se puede colocar en una línea:
W100-max (ancho máximo: 100%;) .w-hide (pantalla: ninguna;) .w-auto (ancho: automático;)
Las unidades de medida no se escriben con ceros (donde esto no importa), en lugar de 0px simplemente debes indicar 0 .
Para números fraccionarios con cero, es mejor especificar 0,8 em en lugar de 0,8 em. Sin embargo, esta condición no es obligatoria y puedes utilizar cualquier opción, lo principal es que haya uniformidad al menos a nivel de un archivo CSS.
Si la propiedad admite notación taquigráfica, se puede utilizar, por ejemplo, en lugar de margen: 0 20px 0 20px; puedes especificar margen: 0 20px;
Si el valor del color se puede acortar, entonces esto se puede hacer, por ejemplo, en lugar de #FFAA88, especifique #FA8. Lo importante aquí es que a menudo este color no se establece manualmente, sino que se copia desde programas con cuentagotas. Generalmente utilizan la notación completa de 6 dígitos. Además, algunos programas dan letras minúsculas y otros mayúsculas: #FFAA88 o #ffaa88. Por tanto, cualquier opción es adecuada para configurar el color. Cambiar manualmente el caso de las letras cada vez es una estupidez.
Los nombres de los colores de las letras deben usarse con precaución y es mejor usarlos solo durante la fase de creación de prototipos. En el código resultante, es mejor reemplazarlos con valores hexadecimales, por ejemplo, en lugar de color: rojo; necesitas especificar el color: #F00; . Este enfoque le permitirá cambiar el color directamente en un editor de código como Notepad++ (reacciona al símbolo #).
El orden de las propiedades CSS puede ser cualquiera. Puedes ordenarlos por orden de adición, puedes agruparlos por funcionalidad. Técnicamente, el orden puede ser cualquiera, por lo que aquí no hay reglas.
Debe entenderse que formatear el código CSS es puramente una convención. En realidad, dicho código será comprimido y minimizado por el compilador Sass. Si necesita formatearlo para verlo, nadie en su sano juicio lo hará manualmente: existen docenas de servicios en línea para formatear código de manera hermosa con cualquier configuración. Por lo tanto, el formato CSS sólo es necesario en la etapa de desarrollo.
Solía pensar que tener un estilo de codificación personal era bueno para un programador. Esto demuestra que es un desarrollador experimentado que sabe cómo debería ser un buen código.
En la universidad, mis profesores me dijeron que entendían cuando mis compañeros usaban mi código en sus trabajos debido a mi estilo particular de codificación. Ahora creo que entendieron esto porque mi código estaba al menos algo formateado, mientras que otros eran un completo desastre.
Desde entonces, he pasado mucho tiempo pensando en el estilo de codificación y eligiendo herramientas para implementarlo. Es hora de cambiar algo.
Algunos ejemplos
Después de leer “La Piedra del Programador”, durante mucho tiempo puse paréntesis de esta manera: If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
Pero luego me di cuenta de que probablemente soy el único entre los usuarios que hace esto. Todos los demás siguen este estilo:
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
O esto
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
Entonces cambié mi estilo al anterior.
Me gusta mucho usar este estilo para crear cadenas:
Comida constante = [ "pizza", "hamburguesa", "pasta", ]
Pero probablemente estoy más solo al utilizar este estilo que en el caso de los paréntesis.
Nadie me enviará código usando este estilo para su revisión, ninguna herramienta de control de calidad del código los obligará a hacerlo. Entonces tuve que dejar de usarlo para estar más cerca del mundo real.
Hay algo más que nadie hace excepto yo. Siempre uso un doble espacio antes de un comentario al final de una línea.
Volumen constante = 200; //ml
Pensé que esto mejoraría la legibilidad del código. Pero, de hecho, esto hace que el código base sea inconsistente, porque el resto de los desarrolladores solo ponen un espacio.
Qué hacen los desarrolladores de JavaScript
Desafortunadamente, JavaScript no tiene un estilo de codificación oficial. Existen varios estilos de codificación populares, como Airbnb o Standard. Puede usarlos para que su código resulte familiar para otros desarrolladores. Parece que JavaScript finalmente tiene una solución a este problema. Una nueva herramienta llamada Prettier reformatea tu código según sus propias reglas. Ignora por completo la forma original del código.
Probemos Prettier usando mis ejemplos:
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else ( alert("No pizza;-("); ) función foo(items) ( return items.filter(item => item.checked).map(item => item.value); ) volumen constante = 200; //ml
Puedes desafiar este estilo. Por ejemplo, no me gusta la ubicación de else y también tengo dudas sobre escribir la cadena funcional en una línea. Sin embargo, veo enormes beneficios al implementar Prettier:
- no hay nada que discutir: Prettier tiene varias opciones;
- no discutir sobre reglas específicas si trabajas en equipo;
- tus compañeros de equipo no necesitan aprender el estilo de codificación de tu proyecto;
- no es necesario corregir los errores de estilo informados por ESLint;
- Es posible configurar el guardado de formato automático.
Conclusión
Prettier ya lo utilizan algunos proyectos populares como React o Babel. Y empiezo a reelaborar mis proyectos, alejándome de mi estilo de codificación habitual en favor de Prettier. Recomendaría usar esto en lugar del estilo de codificación de Airbnb. Al comienzo de mi trabajo con Prettier, hubo muchos momentos en los que pensé “uf, esto es terrible”. Pero cuando pienso que necesitaría, por ejemplo, formatear manualmente el código JSX de una sola línea a varias líneas, si agrego otro accesorio y no cabe en una línea, entonces me doy cuenta de que vale la pena.
Prettier formatea su código cuando guarda el archivo.
Lea cómo implementar Prettier en su proyecto.
PD Consulte mi nueva herramienta que facilita agregar ESLint, Prettier y otras herramientas a su proyecto, así como almacenar y sincronizar sus configuraciones.
La traducción se realizó con el apoyo de EDISON Software, que desarrolla profesionalmente sitios web en Amiro.CMS y WordPress para grandes clientes.
Usando etiquetas de formato puedes resaltar semánticamente texto importante en páginas, crear textos escritos a mano, insertar en documentos HTML caracteres con superíndice y subíndice, así como aumentar y disminuir el tamaño de fuente.
¿Qué es la semántica?
La semántica en HTML es la práctica de proporcionar significado y estructura al contenido de un documento mediante una etiqueta adecuada. código semántico Describe el significado del contenido de un documento, independientemente de su estilo o apariencia. Hay varios beneficios de utilizar elementos semánticos:
- El código semántico afecta directamente la cantidad de código HTML. Cuanto menos código, más “ligero” será el documento, lo que significa que las páginas web se cargan más rápido y requieren menos RAM en el lado del usuario. El sitio se vuelve más rápido y menos costoso..
- computadoras, lectores de pantalla para quienes las etiquetas y sus atributos son importantes, lea y comprenda adecuadamente el contenido de una página web.
- código semántico En igualdad de condiciones, aparecerá más arriba en los resultados del motor de búsqueda que una página con código no semántico.
Texto en negrita
Para poner el texto en negrita y llamar la atención usaremos elemento en línea . Hay dos etiquetas que se pueden usar para resaltar texto. en negrita: etiquetas Y . Es importante comprender la diferencia semántica entre ellos.
Etiqueta Se utiliza semánticamente para dar más significado a un texto y, por tanto, es la opción más popular para texto en negrita. Etiqueta , por otro lado, semánticamente significa el resaltado estilístico del texto, lo que no siempre es mejor elección para texto digno de atención. Debe evaluar el significado del texto para el que desea poner negrita y seleccionar la etiqueta adecuada. Aunque los navegadores los muestran exactamente igual, motores de búsqueda puedo darles significado diferente al analizar la página.
código HTML con etiquetas Y
:
Atención: descenso pronunciado.
estas son las recetas olivier Y vinagreta.
Ejemplo: texto importante y en negrita
- Pruébelo usted mismo »
Atención: descenso pronunciado. estas son las recetas olivier Y vinagreta.
Atención: descenso pronunciado.
estas son las recetas olivier Y vinagreta.
Texto en cursiva
Para el texto en cursiva, que de este modo pone énfasis, usaremos un elemento en línea . Al igual que con las etiquetas de texto en negrita, hay dos etiqueta diferente, que instalan texto en cursiva, cada uno con su propio significado semántico.
Etiqueta se utiliza para enfatizar un fragmento de texto; esta es la opción más popular para la cursiva. Otra opción es utilizar la etiqueta. , que se utiliza simplemente para crear texto en cursiva.
código HTML con etiquetas Y
:
I Amo¡Patria!
Nombre Victoria significa victoria.
Etiquetas Y
Etiqueta disminuye el tamaño de fuente en uno en comparación con en texto plano. EN Tamaño HTML La fuente se mide en unidades arbitrarias del 1 al 7, el tamaño de texto promedio utilizado de forma predeterminada es 3. Por lo tanto, agregar una etiqueta Reduce el texto en una unidad convencional. Etiqueta por el contrario, aumenta el tamaño de fuente en uno respecto al texto normal.
código HTML con etiquetas Y
:
Este es un texto normal.
Este es texto con letras más pequeñas.
Este es un texto con letras mayúsculas.
Ejemplo: fuente reducida y ampliada
- Pruébelo usted mismo »
Este es un texto normal.
Este es texto con letras más pequeñas.
Este es un texto con letras mayúsculas.
etiqueta HTML
Etiqueta Se utiliza para resaltar o destacar texto por su relevancia en el contexto. un buen ejemplo es resaltar la palabra que el usuario estaba buscando en el documento. Generalmente en navegadores color de fondo texto dentro del contenedor resaltado en amarillo como un marcador de tinta.
etiqueta HTML
Etiqueta se utiliza para resaltar texto que se ha eliminado en una nueva versión del documento. Este formato le permite realizar un seguimiento de los cambios que se han realizado en el texto revisado del documento. Los navegadores suelen marcar el texto dentro de un contenedor. como tachado
.
etiqueta HTML
Etiqueta diseñado para resaltar el texto que se ha agregado a nueva versión documento. Este formato le permite rastrear qué contenido se agregó durante última actualización documento. Los navegadores suelen marcar el texto dentro de un contenedor.
.
etiqueta HTML
Etiqueta muestra texto en subíndice. El texto se encuentra debajo de la línea base de los caracteres restantes de la línea y es de tamaño reducido. En la práctica, dicho texto se puede utilizar, por ejemplo, para escribir varias fórmulas. en subíndice
.
etiqueta HTML
Etiqueta muestra texto en superíndice. El texto aparece más pequeño y más alto que la línea base del resto de los caracteres de la línea. Este texto se puede utilizar en la práctica, por ejemplo, para escribir varias fórmulas o notas a pie de página. en superíndice
.
Saltos de línea y líneas horizontales.
Etiqueta
(traducción de línea)
Como has visto antes, la etiqueta
Le permite separar lógica y físicamente un párrafo de texto de otro, pero ¿qué hacer si necesita mover texto dentro de un párrafo para nueva linea? Diseñado específicamente para estos fines. etiqueta única
. Una de las diferencias visibles a primera vista. de esta etiqueta de
¿Es la ausencia de sangría antes y después de la etiqueta?
. Esto permite que las líneas de texto adyacentes se coloquen más juntas. La capacidad de determinar de forma independiente el lugar de transferencia puede resultar útil al grabar poemas o para separarlos. varios elementos en el documento. Agregar un elemento
en cualquier línea donde desee interrumpir el flujo de texto e insertar un salto de línea.
Etiqueta
(línea horizontal)
Las líneas horizontales le permiten dividir texto largo y formalmente abierto en subsecciones separadas. Las líneas horizontales en un documento web juegan el mismo papel que las franjas ornamentales en publicaciones impresas. Se utiliza una sola etiqueta para insertar una línea horizontal.
. Esta etiqueta única de bloque le permite insertar una barra horizontal cuyo ancho es el ancho total del contenedor en el que está anidada la etiqueta o el ancho de la ventana del navegador.
Ejemplo: saltos de línea y líneas horizontales
- Pruébelo usted mismo »
Estas líneas están separadas entre sí mediante un párrafo (p):
Este es el primer párrafo.
Este es el segundo párrafo.
Esta es la línea:
Estas líneas están separadas entre sí mediante la etiqueta br:
Nuestra Tanya está llorando fuerte.
Se le cayó una pelota al río
código HTML con etiquetas
,
,
,
,
:
El texto contiene la palabra: suerte.
Palabra problema ha sido eliminado del texto.
Palabra victoria ha sido añadido al texto.
Fórmula del agua: N 2 o.
Velocidad del viento: 20m 3/segundo.
Ejemplo: formato de texto
- Pruébelo usted mismo »
Hay una palabra en el texto: suerte. La palabra problema ha sido eliminada del texto. La palabra ha sido añadida al texto. Fórmula del agua: H 2 O. Velocidad del viento: 20 m 3 /seg.
El texto contiene la palabra: suerte.
Palabra problema ha sido eliminado del texto.
Palabra victoria ha sido añadido al texto.
Fórmula del agua: N 2 o.
Velocidad del viento: 20m 3/segundo.
Tareas
tarea final
En esta lección, se familiarizó con los elementos diseñados para marcar frases pequeñas y palabras individuales. Atención especial se dedicó al diseño lógico del texto utilizando etiquetas para indicar la importancia de una palabra o frase, y no solo al formato visual.
Es hora de repasar lo que has aprendido y completar cinco tareas sencillas:
Palabra semánticamente fuerte
- Decide por ti mismo"
Resalte la palabra “profesional” en negrita, indicando así la especial importancia semántica de esta palabra.
Palabra semánticamente fuerte
Debes convertirte en un profesional en tu campo.
Palabra semánticamente fuerte
debes convertirte profesional tu negocio
Énfasis en la palabra
- Decide por ti mismo"
Enfatice la palabra "lleno". En este caso, visualmente esta palabra debe mostrarse en cursiva.
A veces nuestro código no siempre es perfecto. Y realmente quiero que no sólo sea funcional, sino también bellamente diseñado y formateado. El tiempo es nuestro principal enemigo; rara vez nos permite seguir las reglas del diseño de código. Intentamos terminar rápidamente el diseño o describir una docena de estilos CSS, y lo hacemos a expensas de la legibilidad. En este artículo, proporcionaré una lista de servicios que lo ayudarán a formatear su código para que sea agradable de ver.
¿Deberías confiar en el programa o hacer todo manualmente?
Seguramente tienes una pregunta: ¿cómo hacer que el código sea legible? ¿Puede un programa organizar correctamente todas las sangrías y saltos de línea de modo que el ojo humano sólo reciba placer estético al ver el código? ¡Por supuesto que puede! No se equivoque al pensar que, dado que un robot esencialmente hace el trabajo por usted, lo hará "sucio". Los servicios que se presentarán en el artículo siguiente me han salvado más de una vez. Por ejemplo, en situaciones en las que era necesario copiar el mismo código html de otro sitio, y cuando se insertaron, las etiquetas resultaron estar simplemente dispuestas en un orden caótico a lo largo de las líneas: muchas pestañas, saltos de línea no lógicos, ¡no se ve absolutamente ningún anidamiento! Probablemente esto les resulte familiar a muchos. Y realmente quiero que su sitio web se vea diferente: limpio y fácil de leer. Después de todo, en primer lugar, lo hacemos por nosotros mismos, por conveniencia. mayor apoyo un código u otro.
Vamos a formatear tu código
Menos palabras, más acción. Como ha demostrado la práctica, formatear el código en línea es bastante sencillo. Todo lo que necesitas hacer es copiar tu código sucio y pegarlo en el especial campos de texto en uno de los sitios especificados. Luego presiona el botón, espera un poco y ¡listo! Obtienes un código hermoso, formateado y fácil de leer.
Aquí hay una lista de todos los "purificadores" de códigos que conozco para varios idiomas.
Sólo puede haber uno en un documento. Este es el titular más importante.
Intente escribir el texto usted mismo y formatee el texto en un archivo de bloc de notas con la extensión *.txt, vuelva a escribirlo en *.html y guárdelo. Si todo sale bien, pase a tareas más complejas. Si surgen dificultades, es mejor volver a intentarlo hasta poder hacer todo correctamente.
Para completarlos, también tendrás que familiarizarte con nuevas etiquetas.
La principal tarea del formateo es hacer que el texto sea legible y comprensible en su estructura. Incluso hay guías completas sobre cómo formatear códigos, donde se describen detalles como el número de espacios o la sangría de las llaves. De hecho, todo es mucho más sencillo: basta con que el código sea legible visualmente y los espacios o tabuladores son un asunto menor.
Sin embargo, lo que quiero señalar es que si vas a publicar código para otras personas, tendrás que cumplir con algún tipo de "estándar básico".
Relleno de bloque
Cada bloque anidado debe tener más margen izquierdo que su padre.
Es decir, estamos construyendo una jerarquía visual de etiquetas por la que es fácil navegar. Comparar con "estilo plano":
Los editores de texto modernos, por ejemplo Notepad++, aplican sangría automáticamente usando Enter, lo que elimina por completo el problema de organizarlos manualmente. Normalmente, los codificadores primero crean una etiqueta de apertura y cierre, y luego las dividen en líneas usando Enter. Esto asegura que la etiqueta de apertura siempre tenga una etiqueta de cierre.
Bloques de "cierre"
Puede haber una situación en su código en la que los bloques siempre se suceden inmediatamente uno al otro. En este caso, no es necesario separarlos ni hacer ninguna sangría adicional.
En este ejemplo, div.layout-center-wrap siempre contiene un hijo inmediato de div.layout-wrap sin interrupción. Estos bloques pueden verse visualmente como uno solo. Aquí hay otro ejemplo donde los bloques se pueden colocar en el mismo nivel.
Lo principal aquí es no exagerar: no debes colocar más de 2 o 3 bloques en una línea/nivel. Si se coloca texto o código entre bloques, definitivamente deben colocarse en líneas diferentes.
Este formato no es adecuado. La forma correcta sería:
Espacio o pestaña
No importa. Usa lo que más te guste. Hasta donde yo sé, casi todos los codificadores usan el tabulador, simplemente porque solo requiere presionar la tecla Tab una vez.
Si lo hace con espacios, entonces para cada sangría debe presionar 4 espacios. Un problema común es que por error no puede presionar 4, sino 3, 5 o algún otro número, y en este caso necesita contar las pulsaciones de teclas o controlar visualmente el resultado.
En este sentido, el tabulador es mucho más "fiable". Desde un punto de vista técnico, no importa si se trata de un tabulador o de espacios (el código HTML seguirá comprimido).
Usar múltiples espacios es una imitación de un tabulador. Entonces esta pregunta radica en el área de la usabilidad. Pero, si decide utilizar espacios, debe haber 4 caracteres por cada sangría; de lo contrario, el texto perderá legibilidad. Hay guías donde se recomienda poner 2 espacios, pero para mí ese código es visualmente "descuidadamente escaso".
Mayúsculas y minúsculas
Si hablamos de HTML, todas las etiquetas deben estar en minúsculas. Técnicamente, nuevamente, no importa, pero las letras mayúsculas son difíciles de leer. Por lo tanto, todas las etiquetas y sus atributos se escriben estrictamente en minúsculas.
Si hablamos de lenguajes de programación, entonces, por regla general, distinguen entre mayúsculas y minúsculas, por lo que las mayúsculas se utilizan solo cuando es necesario.
comillas simples y dobles
Casi siempre se utilizan comillas dobles. Al incrustar código JS en una página HTML, puede surgir una situación en la que se requieran dos tipos de comillas:
En este ejemplo, el atributo html está entre comillas dobles y dentro del código js ya se utilizan comillas simples. Es imposible utilizar un solo tipo.
Por lo tanto, la regla para las comillas en HTML y CSS es simple: las comillas principales son dobles y, si faltan, usamos comillas simples.
Etiquetas de cierre opcionales
Aquí es simple: siempre lo configuramos. Esto se aplica a las etiquetas P, LI y otras.
Barra diagonal al final de etiquetas individuales
Nunca lo hacemos. Esta es una reliquia del antiguo estándar XHTML. Muy mal:
Tan verdadero:
Orden de atributos en etiquetas
La clase siempre aparece en primer lugar. En realidad, al analizar el diseño siempre se mira la etiqueta y sus clases, y luego el resto de atributos.
Aquellos atributos que pueden ser únicos (como los requeridos) se especifican mejor al final:
Las clases/atributos vacíos deben eliminarse.
Formatear código CSS
La clase se coloca en una línea separada y abre un bloque de propiedades (()). Hay un espacio después de los dos puntos de propiedad. Cada propiedad se coloca en una línea y siempre va seguida de un punto y coma (;).
Etiqueta T (color: blanco; fondo: azul; tamaño de fuente: .75rem; relleno: 1px 10px; radio de borde: 3px;)
Si se especifican varias clases a la vez, se colocan en líneas separadas:
Artículo, aparte, pie de página, encabezado, navegación, sección (mostrar: bloquear;)
Si la clase es corta y consta de una propiedad, entonces se puede colocar en una línea:
W100-max (ancho máximo: 100%;) .w-hide (pantalla: ninguna;) .w-auto (ancho: automático;)
Las unidades de medida no se escriben con ceros (donde esto no importa), en lugar de 0px simplemente debes indicar 0 .
Para números fraccionarios con cero, es mejor especificar 0,8 em en lugar de 0,8 em. Sin embargo, esta condición no es obligatoria y puedes utilizar cualquier opción, lo principal es que haya uniformidad al menos a nivel de un archivo CSS.
Si la propiedad admite notación taquigráfica, se puede utilizar, por ejemplo, en lugar de margen: 0 20px 0 20px; puedes especificar margen: 0 20px;
Si el valor del color se puede acortar, entonces esto se puede hacer, por ejemplo, en lugar de #FFAA88, especifique #FA8. Lo importante aquí es que a menudo este color no se establece manualmente, sino que se copia desde programas con cuentagotas. Generalmente utilizan la notación completa de 6 dígitos. Además, algunos programas dan letras minúsculas y otros mayúsculas: #FFAA88 o #ffaa88. Por tanto, cualquier opción es adecuada para configurar el color. Cambiar manualmente el caso de las letras cada vez es una estupidez.
Los nombres de los colores de las letras deben usarse con precaución y es mejor usarlos solo durante la fase de creación de prototipos. En el código resultante, es mejor reemplazarlos con valores hexadecimales, por ejemplo, en lugar de color: rojo; necesitas especificar el color: #F00; . Este enfoque le permitirá cambiar el color directamente en un editor de código como Notepad++ (reacciona al símbolo #).
El orden de las propiedades CSS puede ser cualquiera. Puedes ordenarlos por orden de adición, puedes agruparlos por funcionalidad. Técnicamente, el orden puede ser cualquiera, por lo que aquí no hay reglas.
Debe entenderse que formatear el código CSS es puramente una convención. En realidad, dicho código será comprimido y minimizado por el compilador Sass. Si necesita formatearlo para verlo, nadie en su sano juicio lo hará manualmente: existen docenas de servicios en línea para formatear código de manera hermosa con cualquier configuración. Por lo tanto, el formato CSS sólo es necesario en la etapa de desarrollo.
Solía pensar que tener un estilo de codificación personal era bueno para un programador. Esto demuestra que es un desarrollador experimentado que sabe cómo debería ser un buen código.
En la universidad, mis profesores me dijeron que entendían cuando mis compañeros usaban mi código en sus trabajos debido a mi estilo particular de codificación. Ahora creo que entendieron esto porque mi código estaba al menos algo formateado, mientras que otros eran un completo desastre.
Desde entonces, he pasado mucho tiempo pensando en el estilo de codificación y eligiendo herramientas para implementarlo. Es hora de cambiar algo.
Algunos ejemplos
Después de leer “La Piedra del Programador”, durante mucho tiempo puse paréntesis de esta manera:If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
Pero luego me di cuenta de que probablemente soy el único entre los usuarios que hace esto. Todos los demás siguen este estilo:
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
O esto
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else (alerta("No es pizza;-("); )
Entonces cambié mi estilo al anterior.
Me gusta mucho usar este estilo para crear cadenas:
Comida constante = [ "pizza", "hamburguesa", "pasta", ]
Pero probablemente estoy más solo al utilizar este estilo que en el caso de los paréntesis.
Nadie me enviará código usando este estilo para su revisión, ninguna herramienta de control de calidad del código los obligará a hacerlo. Entonces tuve que dejar de usarlo para estar más cerca del mundo real.
Hay algo más que nadie hace excepto yo. Siempre uso un doble espacio antes de un comentario al final de una línea.
Volumen constante = 200; //ml
Pensé que esto mejoraría la legibilidad del código. Pero, de hecho, esto hace que el código base sea inconsistente, porque el resto de los desarrolladores solo ponen un espacio.
Qué hacen los desarrolladores de JavaScript
Desafortunadamente, JavaScript no tiene un estilo de codificación oficial. Existen varios estilos de codificación populares, como Airbnb o Standard. Puede usarlos para que su código resulte familiar para otros desarrolladores.Parece que JavaScript finalmente tiene una solución a este problema. Una nueva herramienta llamada Prettier reformatea tu código según sus propias reglas. Ignora por completo la forma original del código.
Probemos Prettier usando mis ejemplos:
If (comida === "pizza") ( alerta("Pizza ;-)"); ) else ( alert("No pizza;-("); ) función foo(items) ( return items.filter(item => item.checked).map(item => item.value); ) volumen constante = 200; //ml
Puedes desafiar este estilo. Por ejemplo, no me gusta la ubicación de else y también tengo dudas sobre escribir la cadena funcional en una línea. Sin embargo, veo enormes beneficios al implementar Prettier:
- no hay nada que discutir: Prettier tiene varias opciones;
- no discutir sobre reglas específicas si trabajas en equipo;
- tus compañeros de equipo no necesitan aprender el estilo de codificación de tu proyecto;
- no es necesario corregir los errores de estilo informados por ESLint;
- Es posible configurar el guardado de formato automático.
Conclusión
Prettier ya lo utilizan algunos proyectos populares como React o Babel. Y empiezo a reelaborar mis proyectos, alejándome de mi estilo de codificación habitual en favor de Prettier. Recomendaría usar esto en lugar del estilo de codificación de Airbnb.Al comienzo de mi trabajo con Prettier, hubo muchos momentos en los que pensé “uf, esto es terrible”. Pero cuando pienso que necesitaría, por ejemplo, formatear manualmente el código JSX de una sola línea a varias líneas, si agrego otro accesorio y no cabe en una línea, entonces me doy cuenta de que vale la pena.
Prettier formatea su código cuando guarda el archivo.
Lea cómo implementar Prettier en su proyecto.
PD Consulte mi nueva herramienta que facilita agregar ESLint, Prettier y otras herramientas a su proyecto, así como almacenar y sincronizar sus configuraciones.
La traducción se realizó con el apoyo de EDISON Software, que desarrolla profesionalmente sitios web en Amiro.CMS y WordPress para grandes clientes.
Usando etiquetas de formato puedes resaltar semánticamente texto importante en páginas, crear textos escritos a mano, insertar en documentos HTML caracteres con superíndice y subíndice, así como aumentar y disminuir el tamaño de fuente.
¿Qué es la semántica?
La semántica en HTML es la práctica de proporcionar significado y estructura al contenido de un documento mediante una etiqueta adecuada. código semántico Describe el significado del contenido de un documento, independientemente de su estilo o apariencia. Hay varios beneficios de utilizar elementos semánticos:
- El código semántico afecta directamente la cantidad de código HTML. Cuanto menos código, más “ligero” será el documento, lo que significa que las páginas web se cargan más rápido y requieren menos RAM en el lado del usuario. El sitio se vuelve más rápido y menos costoso..
- computadoras, lectores de pantalla para quienes las etiquetas y sus atributos son importantes, lea y comprenda adecuadamente el contenido de una página web.
- código semántico En igualdad de condiciones, aparecerá más arriba en los resultados del motor de búsqueda que una página con código no semántico.
Texto en negrita
Para poner el texto en negrita y llamar la atención usaremos elemento en línea . Hay dos etiquetas que se pueden usar para resaltar texto. en negrita: etiquetas Y . Es importante comprender la diferencia semántica entre ellos.
Etiqueta Se utiliza semánticamente para dar más significado a un texto y, por tanto, es la opción más popular para texto en negrita. Etiqueta , por otro lado, semánticamente significa el resaltado estilístico del texto, lo que no siempre es mejor elección para texto digno de atención. Debe evaluar el significado del texto para el que desea poner negrita y seleccionar la etiqueta adecuada. Aunque los navegadores los muestran exactamente igual, motores de búsqueda puedo darles significado diferente al analizar la página.
código HTML con etiquetas Y :
Atención: descenso pronunciado.
estas son las recetas olivier Y vinagreta.
Ejemplo: texto importante y en negrita
- Pruébelo usted mismo »
Atención: descenso pronunciado. estas son las recetas olivier Y vinagreta.
Atención: descenso pronunciado.
estas son las recetas olivier Y vinagreta.
Texto en cursiva
Para el texto en cursiva, que de este modo pone énfasis, usaremos un elemento en línea . Al igual que con las etiquetas de texto en negrita, hay dos etiqueta diferente, que instalan texto en cursiva, cada uno con su propio significado semántico.
Etiqueta se utiliza para enfatizar un fragmento de texto; esta es la opción más popular para la cursiva. Otra opción es utilizar la etiqueta. , que se utiliza simplemente para crear texto en cursiva.
código HTML con etiquetas Y :
I Amo¡Patria!
Nombre Victoria significa victoria.
Etiquetas Y
Etiqueta disminuye el tamaño de fuente en uno en comparación con en texto plano. EN Tamaño HTML La fuente se mide en unidades arbitrarias del 1 al 7, el tamaño de texto promedio utilizado de forma predeterminada es 3. Por lo tanto, agregar una etiqueta Reduce el texto en una unidad convencional. Etiqueta por el contrario, aumenta el tamaño de fuente en uno respecto al texto normal.
código HTML con etiquetas Y :
Este es un texto normal.
Este es texto con letras más pequeñas.
Este es un texto con letras mayúsculas.
Ejemplo: fuente reducida y ampliada
- Pruébelo usted mismo »
Este es un texto normal.
Este es texto con letras más pequeñas.
Este es un texto con letras mayúsculas.
etiqueta HTML
Etiqueta Se utiliza para resaltar o destacar texto por su relevancia en el contexto. un buen ejemplo es resaltar la palabra que el usuario estaba buscando en el documento. Generalmente en navegadores color de fondo texto dentro del contenedor resaltado en amarillo como un marcador de tinta.
etiqueta HTML
Etiqueta se utiliza para resaltar texto que se ha eliminado en una nueva versión del documento. Este formato le permite realizar un seguimiento de los cambios que se han realizado en el texto revisado del documento. Los navegadores suelen marcar el texto dentro de un contenedor. como tachado
.
etiqueta HTML
Etiqueta diseñado para resaltar el texto que se ha agregado a nueva versión documento. Este formato le permite rastrear qué contenido se agregó durante última actualización documento. Los navegadores suelen marcar el texto dentro de un contenedor. .
etiqueta HTML
Etiqueta muestra texto en subíndice. El texto se encuentra debajo de la línea base de los caracteres restantes de la línea y es de tamaño reducido. En la práctica, dicho texto se puede utilizar, por ejemplo, para escribir varias fórmulas. en subíndice .
etiqueta HTML
Etiqueta muestra texto en superíndice. El texto aparece más pequeño y más alto que la línea base del resto de los caracteres de la línea. Este texto se puede utilizar en la práctica, por ejemplo, para escribir varias fórmulas o notas a pie de página. en superíndice .
Saltos de línea y líneas horizontales.
Etiqueta
(traducción de línea)
Como has visto antes, la etiqueta
Le permite separar lógica y físicamente un párrafo de texto de otro, pero ¿qué hacer si necesita mover texto dentro de un párrafo para nueva linea? Diseñado específicamente para estos fines. etiqueta única
. Una de las diferencias visibles a primera vista. de esta etiqueta de
¿Es la ausencia de sangría antes y después de la etiqueta?
. Esto permite que las líneas de texto adyacentes se coloquen más juntas. La capacidad de determinar de forma independiente el lugar de transferencia puede resultar útil al grabar poemas o para separarlos. varios elementos en el documento. Agregar un elemento
en cualquier línea donde desee interrumpir el flujo de texto e insertar un salto de línea.
Etiqueta
(línea horizontal)
Las líneas horizontales le permiten dividir texto largo y formalmente abierto en subsecciones separadas. Las líneas horizontales en un documento web juegan el mismo papel que las franjas ornamentales en publicaciones impresas. Se utiliza una sola etiqueta para insertar una línea horizontal.
. Esta etiqueta única de bloque le permite insertar una barra horizontal cuyo ancho es el ancho total del contenedor en el que está anidada la etiqueta o el ancho de la ventana del navegador.
Ejemplo: saltos de línea y líneas horizontales
- Pruébelo usted mismo »
Estas líneas están separadas entre sí mediante un párrafo (p):
Este es el primer párrafo.
Este es el segundo párrafo.
Esta es la línea:
Estas líneas están separadas entre sí mediante la etiqueta br:
Nuestra Tanya está llorando fuerte.
Se le cayó una pelota al río
código HTML con etiquetas
,
,
,
,
:
El texto contiene la palabra: suerte.
Palabra problema ha sido eliminado del texto.
Palabra victoria ha sido añadido al texto.
Fórmula del agua: N 2 o.
Velocidad del viento: 20m 3/segundo.
Ejemplo: formato de texto
- Pruébelo usted mismo »
Hay una palabra en el texto: suerte. La palabra problema ha sido eliminada del texto. La palabra ha sido añadida al texto. Fórmula del agua: H 2 O. Velocidad del viento: 20 m 3 /seg.
El texto contiene la palabra: suerte.
Palabra problema ha sido eliminado del texto.
Palabra victoria ha sido añadido al texto.
Fórmula del agua: N 2 o.
Velocidad del viento: 20m 3/segundo.
Tareas
tarea final
En esta lección, se familiarizó con los elementos diseñados para marcar frases pequeñas y palabras individuales. Atención especial se dedicó al diseño lógico del texto utilizando etiquetas para indicar la importancia de una palabra o frase, y no solo al formato visual.
Es hora de repasar lo que has aprendido y completar cinco tareas sencillas:
Palabra semánticamente fuerte
- Decide por ti mismo"
Resalte la palabra “profesional” en negrita, indicando así la especial importancia semántica de esta palabra.
Debes convertirte en un profesional en tu campo.
debes convertirte profesional tu negocio
Énfasis en la palabra
- Decide por ti mismo"
Enfatice la palabra "lleno". En este caso, visualmente esta palabra debe mostrarse en cursiva.
A veces nuestro código no siempre es perfecto. Y realmente quiero que no sólo sea funcional, sino también bellamente diseñado y formateado. El tiempo es nuestro principal enemigo; rara vez nos permite seguir las reglas del diseño de código. Intentamos terminar rápidamente el diseño o describir una docena de estilos CSS, y lo hacemos a expensas de la legibilidad. En este artículo, proporcionaré una lista de servicios que lo ayudarán a formatear su código para que sea agradable de ver.
¿Deberías confiar en el programa o hacer todo manualmente?
Seguramente tienes una pregunta: ¿cómo hacer que el código sea legible? ¿Puede un programa organizar correctamente todas las sangrías y saltos de línea de modo que el ojo humano sólo reciba placer estético al ver el código? ¡Por supuesto que puede! No se equivoque al pensar que, dado que un robot esencialmente hace el trabajo por usted, lo hará "sucio". Los servicios que se presentarán en el artículo siguiente me han salvado más de una vez. Por ejemplo, en situaciones en las que era necesario copiar el mismo código html de otro sitio, y cuando se insertaron, las etiquetas resultaron estar simplemente dispuestas en un orden caótico a lo largo de las líneas: muchas pestañas, saltos de línea no lógicos, ¡no se ve absolutamente ningún anidamiento! Probablemente esto les resulte familiar a muchos. Y realmente quiero que su sitio web se vea diferente: limpio y fácil de leer. Después de todo, en primer lugar, lo hacemos por nosotros mismos, por conveniencia. mayor apoyo un código u otro.
Vamos a formatear tu código
Menos palabras, más acción. Como ha demostrado la práctica, formatear el código en línea es bastante sencillo. Todo lo que necesitas hacer es copiar tu código sucio y pegarlo en el especial campos de texto en uno de los sitios especificados. Luego presiona el botón, espera un poco y ¡listo! Obtienes un código hermoso, formateado y fácil de leer.
Aquí hay una lista de todos los "purificadores" de códigos que conozco para varios idiomas.
