Error de validación: el tipo de este documento no es html. Cómo cambiar un tema de WordPress. Inspector web. ¿Cuál es la situación al verificar el código CSS?
Conceptos básicos de HTML contener reglas básicas lenguaje HTML, descripción de la estructura de una página HTML, relaciones en la estructura de un documento HTML entre elementos HTML.
Un documento HTML es normal. documento de texto, se puede crear como de costumbre editor de texto(Bloc de notas), y en uno especializado, con código resaltado (Bloc de notas++, estudio visual Código, 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 define no sólo versión HTML(p. ej. html), pero también el archivo DTD correspondiente en Internet.
...
Los elementos dentro de la etiqueta forman un árbol de documentos, el llamado modelo de objeto documento, DOM (modelo de objetos de documento). En este caso, el elemento es el elemento raíz.
Arroz. 1. La estructura más simple paginas web Para comprender la interacción de los elementos de una página web, es necesario considerar el llamado “ 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 .
Elemento principal: un elemento que está relacionado con otros elementos por más de una nivel bajo, y ubicado en el árbol encima de ellos. En la Figura 1 y . Etiqueta
Es padre sólo de .
elemento hijo- un elemento directamente subordinado a otro elemento de nivel superior. En la Figura 1 solo hay elementos , ,
Y son hijos de .
Elemento hermano- un elemento que tiene un común elemento padre con el considerado, 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 informacion tecnica sobre la página: título, descripción, palabras clave para motores de búsqueda, codificación, etc. La información que ingresa allí no se muestra en la ventana del navegador, pero contiene datos que le indican 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 tanto como sea posible. descripción completa contenido de la página web.
1.2.2. ElementoLa etiqueta de sección opcional es 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 parámetro de URL:
| juego de caracteres | Especifica la codificación de caracteres para el documento HTML actual: |
| contenido | Contiene texto libre, que especifica el valor asociado con el atributo http-equiv o nombre, dependiendo de su valor. |
| equivalente a http | Controla las acciones del navegador en una página web determinada (equivalente a los encabezados HTTP). Al representar la página, el navegador seguirá las instrucciones especificadas en el atributo: estilo predeterminado especifica el estilo preferido para usar en la página. El atributo de contenido debe contener el ID del elemento que hace referencia a la tabla. estilos CSS, o el identificador del elemento que contiene la hoja de estilo. actualizar indica el tiempo en segundos antes de que se vuelva a cargar la página o el tiempo antes de redirigir a otra página si el atributo de contenido contiene la línea "url=page_address" después del tiempo. Reinicio automático páginas después de un período de tiempo específico, en en este ejemplo, después de 30 segundos: Si necesita transferir inmediatamente al visitante a otra página, puede especificar la URL en el parámetro URL: |
| nombre | Asociado al valor contenido en el atributo de contenido. No debe usarse si el elemento ya tiene establecidos los atributos http-equiv , charset o itemprop. nombre-aplicación especifica el nombre de la aplicación web utilizada en la página. autor especifica el nombre del autor del documento en formato libre. la descripción define breve descripción al contenido de la página, por ejemplo: El generador especifica uno de los paquetes. software, utilizado para crear un documento, por ejemplo: . palabras clave contiene una lista palabras clave, separados por comas, correspondientes al contenido de la página, por ejemplo: . También atributo de nombre Puede tomar los siguientes valores de la especificación extendida, como creador, googlebot, editor, robots, slurp, viewport, aunque ninguno de estos se ha adoptado oficialmente todavía. |
Dentro de este elemento se establecen los estilos que se utilizan en la página. Para establecer estilos en un documento HTML, utilice lenguaje CSS. Puede haber varios elementos de este tipo en una página.
Dentro de este elemento puede escribir código de formato tanto para los elementos de la página web como para toda la página web.
.paper (ancho: 200 px; alto: 300 px; color de fondo: #ef4444; color: #666666;)
Para conectarse a un elemento estilo dado, necesario a través de atributo de clase(o id) asigne el nombre apropiado al elemento:
...
El código CSS se puede incrustar directamente en un elemento de marcado como el valor del atributo de estilo, por ejemplo:
1.2.4. Elemento
También puede configurar estilos para un documento utilizando otro método: escríbalos en archivo separado con una extensión .css, por ejemplo style.css.
Hay dos formas de conectar un archivo con estilos a una página web:
a través de la directiva @import url
@importar URL(estilo.css);
utilizando el elemento. El elemento no requiere una etiqueta de cierre. Este elemento define la relación entre pagina actual y otros documentos. Puede haber varios elementos de este tipo en una página. La entrada tendrá siguiente vista:
| origen cruzado | Indica si se debe utilizar CORS (una tecnología de navegador que permite que una página web acceda a recursos de otro dominio) al recuperar una imagen de un sitio. anónimo: el navegador agrega automáticamente un encabezado Origin a una solicitud entre dominios, que contiene el nombre del dominio desde el que se realizó la solicitud. Si el servidor no responde con el encabezado CORS Access-Control-Allow-Origin: * (o el nombre de dominio en lugar de un asterisco), se bloqueará la carga de la imagen. use-credentials: si el servidor no proporciona credenciales mediante Access-Control-Allow-Credentials: true, se bloqueará la carga de imágenes. |
| href | El atributo principal de la etiqueta, el valor, es la ruta al archivo con estilos. |
| hreflang | Determina el idioma del texto en el documento de referencia. |
| medios de comunicación | Especifica el tipo de dispositivo al que se debe aplicar el recurso de enlace. |
| mientras tanto | Una variable de cadena generada aleatoriamente en el servidor que establece reglas para usar estilos en línea para proteger el contenido. El valor del atributo es una cadena de texto. |
| rel | El atributo define la relación entre el documento actual y el documento al que se hace referencia. alternativo: un enlace al mismo documento, pero en un formato diferente (por ejemplo, páginas para imprimir, traducción, espejo, feed en formato RSS o Atom), . archivos: indica que el documento vinculado es de interés histórico. El enlace puede apuntar a una colección de registros, documentos u otros materiales. enlace del autor a una página sobre el autor del documento o a una página con la información de contacto del autor. marque una referencia al ancestro más cercano del artículo que es el enlace, o a la sección del artículo más estrechamente relacionada con el elemento si no hay un ancestro. externo se utiliza para indicar que la página a la que se vincula no forma parte de este sitio. primero especifica un enlace que apunta al primer documento de una secuencia de documentos. enlace de ayuda a un documento de ayuda. icono especifica la ruta al icono que se utilizará para el documento actual. último indica un enlace que conduce a último documento en la secuencia de los documentos. licencia Un enlace a la información de derechos de autor de un documento. next indica que este documento es parte de una serie y que el enlace va al siguiente documento de esa serie. nofollow indica que el enlace no cuenta con el respaldo del autor de la página o que el enlace es de naturaleza comercial. noreferrer indica que el encabezado de solicitud del cliente que contiene la URL del origen de la solicitud no debe pasarse al seguir el enlace. pingback especifica la dirección del servidor pingback, que permite al blog notificar automáticamente a los sitios que enlazan con él. prefetch especifica que el archivo al que se hace referencia debe almacenarse en caché de antemano. prev indica que este documento es parte de una serie y que el enlace es a un documento anterior de esa serie. buscar indica que el documento al que se hace referencia contiene una interfaz para búsqueda y recursos relacionados. La barra lateral indica que el documento vinculado se mostrará en un contexto adicional del navegador, si es posible, y algunos navegadores, cuando hace clic en un hipervínculo, abren una ventana para agregar el enlace a su barra de marcadores. enlace de hoja de estilo a archivo externo, que se utilizará como hoja de estilo para de este documento. La etiqueta indica que la etiqueta con hipervínculo se aplica a este documento. arriba indica que la página es parte de una estructura jerárquica y que el hipervínculo va a más alto nivel recurso en la estructura. |
| tamaños | Especifica el tamaño de los iconos para la visualización. El atributo de tamaños se usa solo junto con rel="icon" y puede tomar los siguientes valores: ancho-alto: define una lista de tamaños separados por espacios, cada tamaño debe estar en el formato ancho-alto (las dimensiones de los iconos se especifican en píxeles), por ejemplo: ; cualquiera: el icono se puede escalar a cualquier tamaño. |
| título | Define el título de un enlace o el nombre de un conjunto de hojas de estilo alternativas. El valor del atributo es texto. |
| tipo | Especifica el tipo MIME del documento al que se hace referencia. EN en este caso toma el valor "texto/css". |
| asíncrono | El atributo indica que el script se ejecutará de forma asincrónica con el resto de la página (el script comenzará a ejecutarse al mismo tiempo que se carga la página). |
| juego de caracteres | Define la codificación de caracteres. |
| origen cruzado | Determina si se utilizará CORS al cargar guiones externos(usando el atributo src). anónimo: antes de cargar el script en una solicitud entre dominios, el navegador agrega automáticamente el encabezado Origin, sin pasar parámetros de acceso (cookie, certificado X.509, nombre de usuario/contraseña para autenticación básica vía HTTP). Si la respuesta del servidor no contiene el encabezado del nombre de dominio Access-Control-Allow-Origin:, el script no se cargará. use-credentials: antes de cargar el script en una solicitud entre dominios, el navegador agrega automáticamente un encabezado Origin que indica los parámetros de acceso (cookie, certificado SSL o pares de inicio de sesión/contraseña). Si la respuesta del servidor no contiene el encabezado Access-Control-Allow-Credentials: true, el script no se cargará. |
| aplazar | La interpretación de los guiones se retrasa hasta que el documento se presenta en el dispositivo del usuario. |
| mientras tanto | Proporciona seguridad protegiendo contra ataques de secuencias de comandos entre sitios (XSS). Establece reglas para el uso de scripts integrados utilizando valores nonce y hashes. Durante la representación de la página, el navegador calcula hashes para cada script en línea y los compara con los que figuran en el CSP. Descarga de recursos distintos de " lista blanca", está bloqueado. |
| src | Indica la ubicación del archivo de script, el valor del atributo es la URL del archivo que contiene el programa JavaScript. |
| tipo | Se utiliza para declarar el lenguaje de escritura utilizado para componer el contenido de la etiqueta. |
Esta sección contiene todo el contenido del documento. Disponible para el elemento.
| en la huella posterior | Un evento que se activa después de enviar una página para imprimir o después de cerrar la ventana de impresión. |
| en antes de imprimir | Un evento que se activa antes de enviar una página para imprimir. |
| antes de descargar | El evento se activa cuando el visitante inicia una transición a otra página o hace clic en "cerrar ventana". Le permite mostrar un mensaje en el cuadro de diálogo de confirmación para informarle al usuario si desea permanecer o abandonar la página actual. |
| cambio de hash | El evento se activa cuando cambia la parte hash de la URL, por ejemplo, cuando el usuario pasa de example.domain/test.aspx#page1 a example.domain/test.aspx#page2. |
| en mensaje | Un evento ocurre cuando se recibe un mensaje a través de una fuente de evento. |
| en línea | El evento lo activa el navegador cuando éste determina que se ha perdido la conexión a Internet. |
| en línea | El evento lo activa el navegador cuando se restablece la conexión a Internet. |
| ocultar en la página | El evento ocurre cuando el usuario abandona la página mediante la navegación, como al hacer clic en un enlace, actualizar la página, completar un formulario, etc. |
| mostrar en la página | El evento ocurre cuando el usuario navega a la página web, después del evento de carga. |
| descargar | El evento se activa si la página no se carga por algún motivo o cuando se cierra la ventana del navegador. |
En mis lecciones a menudo hacía declaraciones como "una etiqueta debe estar ubicada dentro de otra", "la etiqueta img debe tener atributo src", "primero viene la etiqueta de la cabeza y luego el cuerpo", y así sucesivamente. Pero no se me ocurrió todo esto sobre la marcha, sino que me guié por algunas regulaciones, cuyo autor es la organización que realmente elabora y aprueba todos los estándares: se llama W3C (Consorcio World Wide Web). No mencioné esto antes, pero los estándares escribiendo HTML hay varios. Y cada uno de ellos tiene sus propias características y reglas de escritura. Esto se debe al hecho de que HTML no se detiene, sino que evoluciona constantemente.
Y si en versiones anteriores estándar cuando no había tecnologías CSS, con la ayuda del lenguaje de marcado fue posible crear tanto una estructura como un diseño, pero ahora está surgiendo una tendencia completamente diferente: HTML se ha asociado más con la estructura (base y bloques de construcción) sobre la que se basa el diseño. CSS es aquí algo así como un elemento decorativo que define el aspecto del diseño, análogo a los azulejos y el papel pintado, si consideramos la creación de un sitio web como la construcción de una casa. En este sentido, en los nuevos estándares HTML, algunas etiquetas y atributos responsables del diseño se declaran indeseables (obsoletos). Es decir, la especificación estándar actual los admite, pero el soporte dejará de ser compatible con la siguiente.
Existe un estándar aún más estricto llamado XHTML: no tolera ninguna libertad con el código y no perdona. errores graves. Lo más nuevo en en este momento– esto es HTML 5, es el futuro, así que en el futuro lo seguiremos.
Parece que todo debería quedar claro con esto: existen varios estándares y eso es genial. Pero al mismo tiempo, existen navegadores cuya tarea es Procesamiento HTML código, y el navegador no siempre puede entender de acuerdo con qué estándar estamos escribiendo y qué quiso decir exactamente el usuario y, en consecuencia, cómo se debe mostrar este código. O usamos HTML Transicional, y el navegador nos perdona muchos errores, usando el “modo suave”, o usamos el modo de compatibilidad estricta XHTML y los errores hay que manejarlos con el máximo rigor. En otras palabras, el navegador se enfrenta a una tarea difícil.
¿Qué hace el navegador en este caso? Muestra el código en modo compatibilidad con versiones anteriores, - suaviza todos los errores explícitos e implícitos en el código e intenta predecir en la medida de lo posible lo que quiso decir el usuario. Pero hay algunas desventajas obvias: en primer lugar, el navegador no puede saber lo que la persona quiso decir originalmente. En segundo lugar, este modo de compatibilidad puede funcionar de forma diferente para cada navegador. ¿Con qué terminamos? Hay un código y no hay regulaciones; en la práctica, esto significa que el mismo marcado, en modo de compatibilidad, se mostrará de manera diferente en el navegador. Por lo tanto, necesitamos alguna forma de que el navegador sepa qué estándar vamos a utilizar.
Y realmente existe un método así: se llama agregar una definición de tipo de documento.
En el código, la declaración de tipo se establece así:
Con esta línea le hacemos saber al navegador que nuestra página utilizará modo HTML 5. Esta línea se inserta al principio del documento. Pruebe esto en su archivo HTML de prueba.
En muchos sitios todavía puedes encontrar esta línea:
Esta línea significa que se utiliza el estándar HTML 4.01. Pero no lo usaremos porque está desactualizado. Sin embargo, también ocurre con bastante frecuencia y vale la pena conocerlo.
Ahora explicaré por qué es necesario todo esto. Con esta línea establecemos un cierto estándar según el cual el navegador debería mostrar nuestro documento en la ventana del navegador. En la práctica, esto significa que nuestro código HTML se mostrará más o menos igual en todos los navegadores. Todo esto sería imposible de lograr si estuviéramos trabajando en modo de compatibilidad con versiones anteriores (modo peculiar), que se habilita si se omite la declaración del tipo de documento. En mi práctica relacionada con el diseño de páginas, esto era realmente importante. Porque la declaración DOCTYPE finalmente resolvió el problema de que la página se mostrara igual en todos los navegadores.
Validación de documentos.Por supuesto, si queremos comprobarnos a nosotros mismos para ver si hemos cometido algún error al cumplir ciertos estándares, no tenemos que hacerlo examinando nuestro código con nuestros ojos. Todo esto hace tiempo que está automatizado, porque existe una herramienta de verificación gracias a la cual podemos saber si hemos cometido algún error evidente en nuestro marcado.
En esta página podemos encontrar varias formas de comprobarlo:
En nuestro caso, lo más probable es que la segunda o tercera opción sea la adecuada.
Yo personalmente utilicé el tercer método. Mi documento fue validado exitosamente, lo cual el programa reportó con la línea ¡Este documento fue verificado exitosamente como HTML5!
sobre un fondo verde.
En caso de un resultado diferente, la inscripción se mostrará sobre un fondo rojo. Esto significará que cometimos un error en alguna parte. En realidad, el propio programa nos indicará dónde y en qué línea nos hemos equivocado y en qué exactamente, aunque en inglés.
Pero en mi caso el programa además de anunciar que la validación fue exitosa también me dio tres advertencias:
1. Uso de la función experimental: Comprobador de conformidad HTML5 El hecho es que el estándar HTML 5 aún no ha sido aprobado formalmente por el consorcio, que continúa introduciendo otros nuevos.. Pero en la práctica - cada vez más más los desarrolladores están empezando a utilizarlo ahora para estar preparados para el mañana.
2. No se declara codificación de caracteres a nivel de documento
El documento no dice una palabra sobre qué codificación se utiliza. De hecho, no lo especificamos explícitamente, lo que significa que no es un hecho que en lugar de mostrar letras rusas, el navegador mostrará algunas caracteres chinos. Esto sucede porque el navegador, al mostrar un documento, se guía por algunos tabla de códigos(es decir, una codificación), donde a cada letra se le asigna su correspondiente carácter de código. Pero el hecho de que en una codificación un número signifique una letra, en otra puede significar algún tipo de jeroglífico japonés. Por lo tanto, es necesario indicarle al navegador qué codificación utilizar. Si no hace esto, el navegador intentará adivinarlo por sí mismo. Pero no hay absolutamente ninguna garantía de que lo haga correctamente.
3. Uso del modo de entrada directa: se asume codificación de caracteres UTF-8
El programa advierte que utiliza utf-8 por defecto.
Bueno, entonces no queda más que declarar la codificación que estamos utilizando. Esto se hace de esta manera:
La línea en sí debe estar anidada dentro del elemento principal.
La metaetiqueta pertenece a la categoría de etiquetas de servicio; parece indicar que hay alguna información sobre la página que queremos comunicar al navegador. Como cualquier otra etiqueta, tiene atributos:
http-equiv es un atributo en cuyo valor indicamos el nombre del encabezado.
El contenido es un atributo cuyo valor especificamos es el valor del encabezado, en este caso el valor del encabezado del tipo de contenido.
Veamos ahora los valores de los atributos que acabamos de especificar:
Tipo de contenido: le decimos al navegador que informaremos de qué tipo es nuestro documento. Y también qué codificación se utiliza en él.
texto/html; charset= utf-8: documento de texto/html que utiliza codificación utf-8.
Intente validar la página nuevamente. No debería haber mensajes de advertencia ahora. Pero es posible que aún permanezcan, aunque por una razón diferente. Por ejemplo:
1. Usas imágenes en tu documento y no tienes una etiqueta img atributo alternativo.
2. Anidado dentro del elemento del cuerpo. elemento en línea. Según la especificación, el elemento del cuerpo solo debe contener elementos de bloque. Y ya en ellos puede haber letras minúsculas.
Puede haber muchos ejemplos de errores, pero es problemático mencionarlos todos en un artículo. Sin embargo, si durante la validación encuentra algún otro error, escríbalo en los comentarios y lo resolveremos juntos.
- < Назад
- Adelante >
Para comentar es necesario registrarse.
Hola queridos webmasters principiantes. En esta lección trabajaremos la apariencia de nuestro sitio web.
Como escribí antes, apariencia crea un sitio web o una plantilla.
Y en esta lección, aprenderemos cómo cambiar. plantilla de WordPress, es decir, cambiar colores, tamaños, disposición de elementos, la imagen en el encabezado del sitio y en general todo lo que vemos al ingresar al sitio.
Pero antes de comenzar, es recomendable revisar y, o al menos tener a mano, literatura de referencia; de lo contrario, gran parte de lo que hablaré aquí simplemente no quedará claro.
Por supuesto, puedes usar el mío, pero es mejor aprender aún.
Además de lo anterior, debes leer la publicación y seguir las recomendaciones que en ella se dan. Son muy simples.
Empecemos con la edición. tema estándar Veinte Diez. Este tema se instala de forma predeterminada en la compilación de WordPress y es el que se puede ver inmediatamente después de instalar el motor.
Por cierto, este recurso también contiene este tema, solo ligeramente corregido. O mejor dicho, rehecho hasta el suelo.
Crea el tuyo diseño web, usaremos la herramienta Web Inspector.
Esta herramienta esencial para desarrolladores se incluye de forma predeterminada en todos navegadores modernos y es llamado por la tecla F12.
También puede llamarlo haciendo clic derecho en la página y seleccionando "Ver código de elemento" o "Examinar elemento".
El diseño de mi sitio ya ha cambiado varias veces y ves una versión antigua, pero esto no cambia la esencia.
Todavía no conozco todas las capacidades de esta herramienta (definitivamente necesitaré estudiarla y estudiarla), pero lo que sé es suficiente para hacer lo que quiera con el tema.
Como puede ver, en el campo grande de la izquierda hay líneas con código html. Cada línea es el código html de uno de los elementos que se encuentran actualmente en la página.
Si pasa el cursor sobre él, el elemento que le corresponde en la página se resaltará en un color diferente y aparecerá una nota al pie junto a él indicando el nombre del selector responsable de este elemento en la hoja de estilo y su tamaño en píxeles.
Si hace clic en esta línea, se coloreará. azul, por así decirlo, se arreglará, y en el campo de la derecha se reflejarán todas las propiedades y valores establecidos, en nuestro caso, en el bloque con el menú, en la hoja de estilo.
Como puede ver, el bloque de menú en la hoja de estilo está indicado por el selector #access y se le asignan los siguientes valores:
ancho - 940 píxeles
margen izquierdo - 0 px
vamos abajo
color de fondo: amarillo (originalmente negro)
visibilidad del elemento - visible
Flotando a la izquierda, probablemente para no alejar el título.
margen superior: 80 px y centrado
Margen inferior: 30 px
marco - espesor, sólido, amarillo (inicialmente negro)
Ahora sabemos casi todo sobre este elemento, y podemos, si lo deseamos, moverlo hacia arriba o hacia abajo, cambiar su color o tamaño, presionarlo en cualquiera de los cuatro lados de la pantalla u ocultarlo fuera de la vista.
Para hacer todo esto, debe ir a Consola - Apariencia - Editor y buscar allí el archivo style.css.
Hacemos clic en él y, subiendo un poco más en la página, vemos el archivo de hoja de estilo abierto para editar. En primer lugar, copie el archivo completo y guárdelo en algún editor, tal vez en el Bloc de notas..
En este archivo necesitamos encontrar el selector #access. Aparecerá primero en la sección "=Estructura", pero allí está en un grupo con otros selectores para los cuales propiedades idénticas y significados.
No eliminemos #access de este grupo por ahora, ya que el ancho especificado en este grupo, por ejemplo, me convenía. Bajamos más hasta la sección “Menú”. Aquí nuestro bloque se presenta en todo su esplendor.
Aquí es donde puede moverlo hacia arriba y hacia abajo cambiando el valor en propiedad de margen, cambia de color, y si está en propiedad de visualización en lugar de bloquear, coloque none y luego hágalo invisible.
¡No olvides actualizar el archivo después de cada manipulación!
Elegí específicamente un bloque de menú para demostración porque tiene una estructura compleja. Después de todo, en el bloque principal también contiene bloques de enlaces, y el texto de estos enlaces, que a su vez también es un bloque separado.
Como ya habrás notado, en el inspector web, cada línea comienza con un triángulo. Si se dirige hacia la derecha, hay varias líneas más ocultas en él. Hacemos clic en el triángulo y se nos abre el código de los elementos encerrados en el bloque de menú.
Estos elementos, a su vez, contienen más elementos y necesitamos abrirlos todos, es decir, todo lo que está en el bloque de menú.
Ahora, moviendo el cursor a lo largo de las líneas en el campo izquierdo, en el campo derecho miramos cómo encontrar tal o cual elemento en el archivo de estilo. css y descubrir qué valores nos gustaría cambiar.
Luego vamos al editor, buscamos el selector deseado y cambiamos lo que tenemos en mente. Te mostraré lo que cambié para que el menú tenga el mismo aspecto y funcionalidad que en este sitio.
Si alguien quiere eliminar este menú de las páginas del sitio por completo, para ello debe ir a Apariencia > Editor y abrir el archivo header.php para editarlo.
En el código del archivo buscamos la etiqueta y la eliminamos, y todo lo que sigue, hasta la primera.
Simplemente puedes hacerlo invisible. Para hacer esto, en el archivo style.css, se agrega la propiedad display:none al selector #access.
Ahora veamos cómo reemplazar la imagen en el encabezado del sitio. Digamos que no estás satisfecho con todas las imágenes propuestas en el tema y decides instalar algo completamente tuyo. Puede ver dónde obtener la imagen para el encabezado de la página y, cuando la encuentre o la cree, colóquela en la carpeta de imágenes del tema.
Luego vamos al archivo style.css y vemos qué hay que hacer para no imagen requerida Desapareció, pero apareció el que necesitaba.
Encontramos la sección “=Encabezado”, que contiene todo lo relacionado con el encabezado del sitio, y allí encontramos el selector de imágenes. Luego cambiamos el valor display:block a display:none y la imagen desaparece de la pantalla.
Luego subimos al apartado “=Estructura”, y en el selector #wrapper hacemos próxima entrada. La propiedad background: está ahí de forma predeterminada, este es el fondo de la página, por lo que agregamos propiedades solo para la imagen.
En el valor de la propiedad background-image colocamos la dirección de una nueva imagen que encontramos o creamos, previamente cargada en la carpeta de imágenes del tema.
Si el sitio está alojado, esta carpeta se encuentra en: nombre_sitio > public_html > wp-content > > temas > imágenes.
Si el sitio todavía está activo alojamiento local, entonces la ruta a esta carpeta es: Z > inicio > nombre_sitio > www > wp-content > > temas > imágenes.
En el primer caso, la imagen se carga usando gestor de archivos, en el segundo, la imagen simplemente se guarda en esta carpeta.
Aquí, después de la instalación, solo tendrá que corregir la propiedad de posición de fondo para colocar con mayor precisión el encabezado en la página, y la propiedad de fondo es necesaria en caso de que la imagen en el encabezado no se abra para algunos visitantes.
En este caso, el encabezado tendrá al menos un fondo.
Esto se hace de la siguiente manera. Vaya a Consola - Entradas - Agregar entrada, cambie el editor al modo HTML y, a través del cargador de imágenes (Agregar archivo multimedia), cargue la imagen deseada.
El código de esta imagen aparece en el editor. Es necesario copiarlo y eliminar el "Registro".
Luego vaya a "Apariencia - Editor" y abra el archivo header.php para editarlo, en el que encontramos la línea
Inmediatamente después de esta línea pegamos el código de la imagen copiada. El código tiene una clase de alineación class="aligncenter" y, según la necesidad, aligncenter se puede reemplazar con alignleft o alignright.
Dependerá de en qué borde, o en el centro, se ubique la imagen.
Si, después de guardar y ver, es necesario mover la imagen un poco más, a algún lugar, volvemos al editor y al código de la imagen, a etiqueta img, insertar atributo de estilo con la propiedad de margen:
estilo="margen:0 0 0 0;"
Donde en lugar de ceros insertamos los tamaños de sangría requeridos y así movemos la imagen en la dirección deseada.
El color de los campos se puede cambiar bajando un poco a la sección "=Elementos Globales" en el selector de etiquetas "cuerpo". Mis campos se hicieron a partir de una imagen multiplicada. Luego lo quité y lo dejé simple, pero puedes ver cómo hacerlo (imagen al margen).
Si solo cambia el color, simplemente cambie el valor en la propiedad de fondo
El tamaño, tipo y color de la fuente del sitio cambia aquí
Y el tamaño, el color, la apariencia del título y las descripciones del sitio en el encabezado están aquí. Aquí puede ajustar la ubicación del título y la descripción al cambiar la imagen del encabezado.
Detengámonos ahí por ahora. Prueba, cambia, muévete, mejora. Muy pronto trasladaremos el sitio a alojamiento real. Por supuesto, también haremos algunos cambios allí, pero debemos hacerlo con más confianza y rapidez, y cometer el menor número de errores posible.
Plantillas HTML en ruso
Una declaración de tipo de documento se refiere a reglas del lenguaje de marcado para garantizar que el navegador muestre el contenido del documento correctamente.
Varios tipos de HTML DocumentaUna declaración de tipo de documento no es una etiqueta HTML; Esta es una instrucción para el navegador web sobre la versión del lenguaje de marcado en el que está escrita la página.
Una declaración de tipo de documento se refiere a una "Definición de tipo de documento" o "Definición de tipo de documento" (DTD). La DTD establece las reglas para el lenguaje de marcado para que los navegadores muestren el contenido correctamente.
La declaración del tipo de documento debe aparecer primero en el documento HTML, antes del archivo .
Consejo: agregue siempre un tipo de documento a sus páginas. ¡Esto ayuda a los navegadores a representar la página correctamente!
Tipo de documento "HTML 4.01 estricto"La Definición de tipo de documento (DTD) contiene todos los elementos y atributos HTML, pero NO incluye elementos representativos y heredados (como fuente y centro). No se permiten conjuntos de cuadros:
Tipo de documento "Conjunto de marcos HTML 4.01"Esta DTD es equivalente a "HTML 4.01 Transitional", pero permite el uso de conjuntos de marcos:
Los diseñadores pasan horas perfeccionando su oficio para lograr un ajuste preciso los detalles más pequeños en el diseño de sitios web que salen de su pluma. Sin embargo, la calidad del código suele ser muy baja. ¿Necesitas pruebas? Ver galerías plantillas gratis CSS. El 90% de las plantillas no pasarán la verificación. Además, la mayoría de los errores son muy primitivos y muy fáciles de corregir. EN esta lección Veamos los errores típicos en el código HTML que impiden que la verificación se complete con éxito.
¿Por qué verificar el código?Si el sitio se ve muy bien en el navegador, ¿por qué verificar el código? Una pregunta típica que se hace antes de revisar el código. Pero el sitio no se limita sólo a lo que es visible para el usuario. páginas HTML están destinados a representar datos, no efectos graficos. Los datos deben ser legibles para toda la vasta comunidad de personas que utilizan Internet. Y los lectores pueden utilizar tecnologías muy diferentes para recibir la información presentada en su sitio; por ejemplo, pueden utilizar un programa de voz y simplemente escuchar lo que está escrito en su página.
Una página HTML libre de errores generalmente se mostrará correctamente en la mayoría de los navegadores y también será compatible con tecnologías futuras. Vale la pena mencionar aquí motores de búsqueda, cuya acción es muy importante para fines de SEO. Nadie quiere ponerles obstáculos, pero una vida limpia y código correcto mucho más fácil de entender para los robots de búsqueda.
También es una cuestión de profesionalismo. El código HTML incorrecto es muy similar a errores gramaticales en las inscripciones del sitio. Y aunque es posible que el cliente no note errores en el código, esto no cambia la esencia del problema. A nadie le gustan los errores gramaticales en el diseño, pero de alguna manera dejar el código HTML con errores no se considera el mismo acto vergonzoso.
Errores comunesA continuación se muestran los errores que se detectaron en las plantillas de la primera página de la famosa galería. Plantillas CSS. Muchos sitios web se ven geniales, incluso geniales, pero a menudo la calidad del código no coincide con la calidad del diseño. Aunque la mayoría de estos errores se pueden solucionar de forma muy rápida y sencilla.
El peor error es no utilizar Tipo de documento! Sin etiqueta Tipo de documento significa que el navegador "adivinará" qué idioma se utilizó para crear el documento. Para corregir el error, debe especificar el tipo de documento de su página.
Elemento no cerrado
Si ha abierto una etiqueta en algún lugar de su documento HTML, debe cerrarse en el lugar correspondiente. El olvido en este asunto no sólo conduce a errores al verificar el código, sino que también puede causar problemas serios con una plantilla. La figura muestra una situación en la que el autor olvidó cerrar la etiqueta. El símbolo / se omite en los elementos de cierre automático.
Mayoría elementos HTML tiene etiquetas de cierre independientes, por ejemplo: . Pero hay elementos como input, img y meta que se cierran automáticamente, lo que significa que deben tener un / antes del paréntesis de cierre.
Caracteres especiales no convertidos
De conformidad con el párrafo anterior, personajes especiales, especialmente el signo comercial, debe estar codificado en Líneas URL. Enlaces a sitios creados con usando PHP, a menudo contienen variables que utilizan el carácter & y deben escribirse utilizando código HTML &.
Elementos de bloque dentro de elementos en línea
Uno de los principales reglas HTML es que los elementos de bloque NUNCA deben estar dentro de elementos en línea.
Un ejemplo popular de error es utilizar un enlace en el título: plátanos
- elemento de bloque, por lo que debería rodear el enlace (elemento en línea): bananas .
Falta el atributo alternativo de la imagen
Cada imagen en un documento HTML debe tener un atributo alt que describa el contenido de la imagen. Incluso si la imagen es para fines de diseño, debe tener un atributo alt, pero en este caso debe dejarse vacío, por ejemplo, alt="" . En otro caso, deberá proporcionar una descripción del contenido de la imagen.
Usar atributos como ancho y alto 
Probablemente esta situación sea reverso uso generalizado de editores WYSIWYG, que tienden a insertar código HTML innecesario. atributos de ancho y la altura se definen en los estándares de tipo de documento de transición, pero si se propone seguir estrictamente los estándares, probablemente sepa que todos los atributos responsables de la presentación de elementos en las páginas deben transferirse a la hoja de estilo CSS para separar contenido y diseño.
El nombre de la clase o ID comienza con un número
Un nombre de clase, ID o nombre de atributo no puede comenzar con un número. Pueden incluir números, pero no al principio de una palabra.
¿Cuál es la situación con Comprobación de CSS¿código?
A diferencia de HTML, CSS se utiliza para representación visual páginas. Entonces la pregunta es "Si la página se ve bien, ¿por qué verificar el código?" en este caso suena más convincente. El código CSS incorrecto no tiene el mismo impacto en las páginas web que el código HTML incorrecto. Sin embargo, vale la pena comprobarlo para detectar errores tipográficos y en el código. Si utiliza nuevas propiedades CSS3, harán que su documento no supere la validación porque aún no están incluidas en la especificación, pero si está seguro de que todo es correcto, dichos errores se pueden ignorar.
