Hola, queridos lectores del blog. Hoy me gustaría hablar sobre por qué es posible que necesite conocimientos del lenguaje HTML cuando trabaje con un sitio web (lea sobre qué es), los conceptos básicos para trabajar con hojas de estilos en cascada CSS (encontrará un artículo introductorio sobre el tema), así como comprender al menos los conceptos básicos y principios de la construcción de programas en PHP y la lógica de trabajo con bases de datos MySQL.

te permite crear sitios web sin ser propietario toda la sabiduría mencionada anteriormente, pero al mismo tiempo, mientras trabajas, probablemente tendrás preguntas y problemas que no podrás resolver ni siquiera con los CMS más sofisticados (Joomla, WordPress, Drupal, etc.).

¿Por qué podría necesitar conocimientos de lenguajes (marcados, estilos, programación de servidores) cuando trabaja en un sitio web?

O no encontrará un elemento de este tipo en el panel de administración de CMS entre muchas otras configuraciones (la lógica de los autores del motor al colocar algunos elementos de configuración sigue sin estar clara y, tal vez, la fuerza de la costumbre del propio autor juega un cierto papel aquí), o los desarrolladores no incluirán dicho elemento en el panel de administración del sistema de gestión de contenidos. Es imposible implementar configuraciones para todo a través del panel de administración; por lo general, allí solo se muestran las configuraciones más necesarias y utilizadas con más frecuencia.

a menudo sucede más fácil resolver el problema no con las herramientas estándar proporcionadas en el panel de administración del motor, sino directamente, editando algo en la base de datos o ajustando el contenido de ciertos archivos del motor accediendo a ellos a través de FTP.

Sí, esto requerirá dedicar tiempo a aprender al menos los conceptos básicos del lenguaje de marcado HTML, comprender cómo las hojas de estilo en cascada influyen en la apariencia de las páginas web, así como comprender la estructura de la base de datos y aprender a realizar cambios en ella. Y, quizás, lo más difícil es comprender los principios básicos de escribir código en PHP para comprender qué y dónde se puede cambiar sin problemas y qué no se debe tocar.

Por supuesto, empezaré con el diseño de páginas web (de hecho, de momento ya he completado esta tarea y podéis ver los resultados). Como ya mencioné en una de las publicaciones anteriores, hasta hace poco todos los recursos consistían en páginas en formato HTML. Además, allí se especificaba el contenido del sitio web (textos, imágenes, tablas) y su diseño (colores, fondo, sangrías).

En la comprensión moderna del diseño correcto, el contenido debe realizarse utilizando etiquetas de lenguaje de marcado de hipertexto y el diseño de este contenido debe realizarse utilizando archivos de hojas de estilo externos. Esta separación le permite liberar la página del sitio web de códigos de servicio innecesarios.

El hecho es que los motores de búsqueda están muy estrechamente Mire la proporción del componente de información. código de la página web (texto que se muestra en el navegador) y su componente de servicio (etiquetas, varios scripts, etc.). Por tanto, al traspasar los límites de esta página todo lo que no lleva un componente informativo, sino que se encarga únicamente del diseño de las páginas, mejoramos la actitud de los buscadores hacia nuestro proyecto (bueno, al menos en teoría).

Además, la lista de reglas CSS, ubicadas en un archivo separado, le permite unificar el diseño del recurso. Si es necesario, siempre puedes cambiar algo en el diseño sin editar el código de todas las páginas web, porque en este caso bastará con corregir las existentes o agregar nuevas propiedades de estilo en la hoja de estilo común a todas las páginas.

Con la llegada de las hojas de estilo, muchas etiquetas del lenguaje de marcado de hipertexto y sus atributos comenzó a considerarse obsoleto y no se recomienda su uso. En su lugar, se recomienda utilizar propiedades CSS que realicen las mismas acciones. Esto no significa que ya no sea necesario aprender HTML, es solo que ha disminuido la cantidad de etiquetas y sus atributos que necesita conocer y poder usar para crear y mantener un sitio web. Intentaré informarles sobre las etiquetas que yo uso constantemente.

¿Qué editor es mejor para editar o realizar cambios en el código?

No hay nada complicado en esto, porque en esencia ni siquiera es un lenguaje de programación, sino un marcado de hipertexto, algo similar a la sintaxis en el idioma ruso. ¿Qué le gustaría aconsejar inmediatamente, basándose en su propia experiencia? Intente escribir etiquetas usted mismo en el bloc de notas, como Bloc de notas++(lee el mío), y no en programas como Dreamviewer. ¿Por qué?

Sí, porque en este caso mejorarás y recordarás la escritura de etiquetas y atributos. Sí, es más cómodo maquetar en programas como Dreamviewer, porque... puede verlo inmediatamente en el navegador y las opciones de ortografía para una etiqueta en particular se pueden seleccionar en la lista desplegable.

Pero el hecho es que básicamente tendrás que editar el código existente en los archivos de tu motor y será mucho más conveniente si recuerdas escribir todas las etiquetas y sus atributos de memoria (afortunadamente no hay muchas). ¿Por qué abrir un archivo en un engorroso Dreamview para corregir una etiqueta, cuando para estos fines es suficiente un bloc de notas normal, bueno, o su análogo avanzado llamado Notepad plus plus (el enlace se encuentra justo arriba)?

Aunque esta es mi opinión personal (en mi humilde opinión) y tú decides qué es más conveniente. Por ejemplo, Evgeniy Popov, en cuyos cursos estudié todo este asunto, aparentemente es partidario de Dreamviewer. En principio, una cosa es importante: editar el código en un editor que sea capaz de guardar todos los cambios realizados y que, si se desea, pueda devolver todo como estaba(hacia atrás).

En este caso, por mucho que te equivoques, todo se podrá arreglar. Y, por supuesto, el resaltado de sintaxis del idioma en el que escribe o edita el código es muy conveniente. ¡Notepad++ es definitivamente mi elección! Hablé sobre sus capacidades en el artículo anterior.

Probablemente no sea del todo correcto hablar sobre el marcado y su diseño uno por uno, así que intentaré hablar sobre su uso combinado. Debe entenderse que las propiedades CSS están escritas en uno o más archivos separados, que puede encontrar fácilmente en el tema utilizado para su motor.

Mientras que las etiquetas de páginas web en un CMS moderno no se escriben en uno o más archivos, como antes, sino que se generan (interpretan) desde PHP. Y es el código HTML ya generado de esta manera el que se introduce en el navegador para que éste, a su vez, lo interprete como una página de Internet comprensible para nosotros. Complicado, ¿no?

Es por eso editar etiquetas en cualquier CMS No es una tarea tan trivial, incluso si se siente completamente cómodo con el lenguaje de marcado de hipertexto. Después de todo, tendrás que editar etiquetas en archivos PHP y, por tanto, necesitarás conocer al menos sus conceptos básicos y su sintaxis.

Pero no te preocupes, no necesitarás muchos conocimientos de PHP para editar el diseño. Las etiquetas se encuentran, por así decirlo, en la superficie y no es difícil identificarlas y corregirlas si es necesario.

¿Qué herramientas puedes utilizar?

El problema suele surgir en otra parte. ¿Cómo encontrar el archivo con extensión PHP en el que se forma el fragmento de etiquetas deseado? Aquí hay una cuestión de preguntas. Sí, por supuesto, si tienes experiencia trabajando con estos motores, creo que lo dominarás. Pero si eres principiante y no sabes cuál de los cientos de archivos PHP es responsable de qué.

Un complemento excelente para un navegador igualmente excelente le ayudará en este caso, así como el mencionado Notepad++, que no es desconocido para muchos. Este paquete de programas te ayudará a mover montañas y ahorrar mucho tiempo.

En próximas publicaciones les contaré detalladamente cómo utilizar estos programas para solucionar eficazmente los problemas que surjan con el sitio. Sí, casi me olvido del programa indispensable que te permite acceder vía FTP: FileZilla (ya hay un artículo sobre este tema). Pues claro, también hablaremos de ello.

Bueno, se han trazado los objetivos, se han fijado las tareas, solo queda llevarlas a cabo. Por ello, permítame despedirme.

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

Tú podrías estar interesado

Hermosas fuentes rusas para sitios web y computadoras en el servicio en línea Google Font: dónde descargarlas y cómo instalarlas Diseño adaptativo (responsive): optimización del sitio para su visualización en dispositivos móviles
Gif, Png o Jpg: formatos de gráficos rasterizados para la web, sus ventajas y desventajas cuando se utilizan en un sitio web

El código CSS se puede ubicar en el documento HTML o en un archivo separado con la misma extensión. Si el CSS está en un archivo externo y no funciona, lo primero que hay que hacer es comprobar el enlace en el código HTML.

El enlace (href) debe escribirse en una única etiqueta de enlace. El contenido del enlace en HTML5 debería verse así: href=”style.css” rel=”stylesheet”. No olvide que la etiqueta de enlace en sí se encuentra entre las etiquetas clave principales emparejadas.

Después del valor href, se indica el nombre del archivo CSS que se debe adjuntar al documento (esto no es necesariamente estilo). Si el archivo con estilos se encuentra en otra carpeta, debe especificar la ruta mediante una barra diagonal (/).

Sintaxis CSS

Si todo está bien con el enlace, pero el CSS aún no funciona, debes verificar la sintaxis en el código.

Primero, revisa el selector. El selector debe coincidir con lo que has escrito en el archivo html. Es decir, si se selecciona class = “container” en html, entonces “.container” se escribe en CSS en lugar del selector. Tenga en cuenta el punto antes del título. El período se coloca solo antes de clases. Si especifica un estilo para los encabezados h1, no se necesita ningún punto.

El bloque en sí, donde se declara el estilo, se escribe después del nombre del selector entre llaves. Se colocan dos puntos entre el nombre de la propiedad y su valor, seguidos de un punto y coma.

Navegador

Si el navegador en el que está probando su código CSS ya está desactualizado, no podrá mostrar el idioma CSS3 correctamente. Por lo tanto, en caso de que el código no funcione, actualice su navegador a la última versión.

Utilice diferentes navegadores para realizar pruebas: Opera, Google Chrome, Firefox. No se recomienda confiar en Internet Explorer ya que no es el objetivo principal de Microsoft, lo que lo hace "inconsistente" con CSS3.

Las nuevas versiones de navegadores para depurar código contienen un módulo especial que le permite editar el código directamente en el navegador. Para hacer esto, haga clic en "Mostrar código fuente" en el menú contextual de la ventana.

Herencia

Lo más difícil de entender en CSS es la herencia. Aunque suele ser la base de un código que no funciona.

CSS funciona según el mismo principio que las muñecas nido. Se inserta un recipiente en otro, un tercero en él, etc. Para aprender todas las complejidades de la herencia, es necesario dedicar una cantidad considerable de tiempo. Puedes empezar con lo básico.

Primero, intente lógicamente identificar dónde ocurre exactamente el error en el código CSS. Lo entenderás fácilmente, porque... Como resultado del error, uno de los elementos, cuando se muestra en el navegador, saldrá de la imagen que presentó.

Cuando encuentre un contenedor u otro elemento al que se le haya aplicado un estilo que no funcionó, observe de cerca en qué está "anidado" el elemento.

Quizás el elemento principal contenga una propiedad que impide que funcione otra propiedad del elemento secundario. Puede leer más sobre la herencia en cualquier libro de referencia de CSS.

¿Qué es este CSS?

CSS puede considerarse un lenguaje formal para describir la apariencia visual de un documento. CSS completo suena como Hojas de estilo en cascada, que un ruso entiende las hojas de estilo en cascada, es decir, CSS. Por supuesto, nadie usa CTS, pero es costumbre usar CSS. El lenguaje CSS se introdujo el 17 de diciembre de 1996.

¿Por qué necesitamos estilos CSS en un archivo separado?

Para escribir estilos en html, necesitas ingresar .. escribe tus reglas en la etiqueta

dentro del cual se escriben las reglas. También se registra en

— Si decide especificar el estilo directamente contenido interior , entonces deberías usar el parámetro estilo="..."

Reglas correctas para CSS y cómo comentar en CSS

Aquí, por supuesto, puedes escribir una gran cantidad de teoría, pero no tenemos un libro de referencia aquí. Mostraré todo usando un ejemplo simple, lo principal a recordar es que hay selectores, propiedades y valores. El selector es a qué se aplicarán las reglas, la propiedad es el tipo de reglas que usaremos y el valor es el valor. (propiedad + valor = regla)

La escritura se ve así selector(propiedad:valor;), Si necesita aplicar varios selectores, escríbalos usando coma, si se utilizan varias reglas punto y coma. Siempre al final punto y coma.

Para comentar cualquier texto en CSS, debes poner el texto entre comillas como esta /* texto */ y eso es todo :)

Como fue prometido, ejemplos visuales de CSS :

pag(
familia de fuentes: Verdana;
fondo: blanco;
color rojo;
}

El selector aquí es p, es decir, para cualquier párrafo con etiquetas se aplicarán estas reglas. Independientemente de lo que escriba en la parte superior, el párrafo será blanco con texto rojo en la fuente Verdana. Incluso si el fondo general es amarillo y la fuente es diferente.

• Tutorial

Escribí errores y consejos basados ​​en mi propia experiencia. Si hay errores como "malos consejos", estaré encantado de escuchar críticas constructivas. La publicación está destinada a que los principiantes aprendan HTML y CSS, pero quizás los especialistas también estén interesados ​​en leer este material.

1. Validador del W3C

Se recomienda comprobar el HTML y CSS del sitio a través del servicio validator.w3.org. Este servicio escaneará el código y mostrará errores, por ejemplo:

• etiqueta no cerrada;
• caracteres no recomendados en enlaces;
• Se utiliza una etiqueta no recomendada;
• atributo requerido no especificado;
• y otra.

2. Diseño en formato UTF-8

Al diseñar la página, debe asegurarse de que la codificación del archivo esté configurada en UTF-8 (sin lista de materiales). Cada editor de texto establece la codificación de manera diferente.

Un archivo en formato UTF-8 le permite utilizar caracteres no estándar (por ejemplo, símbolos de varios idiomas, símbolos de moneda y otros).

También debe indicar a los navegadores que la página está abierta en codificación UTF-8. Esto se hace a través de la siguiente etiqueta:

3. Varios elementos tienen la misma identificación.

El valor del atributo id en el código HTML no debe repetirse.

4. Duendes

Se recomienda combinar varias imágenes pequeñas en un solo archivo (este archivo se llama sprite). Esto reducirá la cantidad de solicitudes al sitio y mejorará la velocidad de carga de la página.

Hoy en día también es popular utilizar fuentes con iconos en lugar de sprites. Aquellos. En lugar de letras, se muestran íconos de engranajes, caritas sonrientes y otros íconos. Un ejemplo son los glifos utilizados en Twitter Bootstrap.

Las ventajas de las fuentes para sprites son la preservación de la calidad al cambiar el tamaño de los iconos y su menor tamaño. Pero el inconveniente es que no puedes utilizar más de un color en un icono.

5. Muchos selectores

No se recomienda utilizar más de tres selectores, porque esto afecta el rendimiento del sitio.

/* no recomendado, anidamiento grande */ .page .item .title a () /* se puede acortar */ .page .item a ()
Los navegadores leen CSS de derecha a izquierda. Aquellos. En el código anterior, primero se seleccionarán todos los enlaces que están en la página y luego se seleccionarán aquellos enlaces que estén dentro del elemento .item.

6. Estilos HTML

HTML está diseñado para mostrar información (texto, imágenes). El diseño del contenido (cambiar tamaño, color, fuente) se produce en CSS.

Error en el código

Error en el código

7. Nombres de clases incorrectos

Muchos diseñadores de diseño, cuando necesitan hacer que el texto sea verde, le adjuntan la clase .green.

Mensaje de texto

Esto está mal, porque... Al cambiar el diseño, muchos colores pueden cambiar, por ejemplo, el texto del mensaje puede aparecer en azul en lugar de verde. Luego tendrás que buscar todas las etiquetas que tengan la clase .green y reemplazarlas por .blue.

Mensaje de texto

Mensaje de texto

8. Píxeles en valores fraccionarios

Algunos navegadores le permiten especificar píxeles en valores fraccionarios, como "1,5 px". Pero esto está mal, porque... Un píxel es una unidad indivisible. En lugar de "1,5px", es mejor utilizar "1,5em".

P ( /* incorrecto */ espacio entre letras: 1.5px; /* correcto */ espacio entre letras: .005em; )

9. Usar clases en lugar de identificadores

Se recomienda seleccionar por clase en lugar de id, porque Los selectores con id tienen más peso que los de clases y será difícil anularlos.

#modal a ( color: azul; ) /* el color siguiente no se puede anular, porque #modal tiene más peso que las clases */ .modal-header a ( color: #333; ) /* en este caso tendrás que agregar #modal */ #modal .modal-header a ( color: #333; )
¡Tampoco se recomienda su uso! Importante, porque su peso es mayor que el del atributo id y también será difícil de anular.

10. Menú

El menú debe tener el formato de lista.

Inicio Noticias Sobre la empresa

• hogar
• Noticias
• Acerca de la compañía

11. Falta Alt para fotos.

El atributo alt debe especificarse en las etiquetas (puede estar vacío).

12. Etiquetas

Solo debe haber un título por etiqueta por página.

. Básicamente, esta etiqueta contiene el título de la página.

13. Transcripción

Los nombres de todos los elementos deben estar escritos en traducción al inglés. Incluso si no sabes cómo se escribe una palabra en inglés, existen muchos servicios gratuitos que pueden traducirla. Cuando los nombres de los elementos aparecen en la transcripción, parece poco profesional.

/* incorrecto */ .tovar () .stranica () .zapros () /* correcto */ .product () .page () .query ()

14. Limpiar

Es difícil escribir sobre clearfix en pocas palabras, pero señalaré que, en mi opinión, muchos diseñadores de diseño cometen un error.

El class.clearfix debe especificarse en la etiqueta principal y no colocarse junto a ella.

15. HTML - lenguaje de programación

Algunas personas nuevas en HTML piensan que HTML es un lenguaje de programación. De hecho, HTML no es un lenguaje de programación; se puede comparar con Microsoft Word. Por ejemplo, para poner el texto en negrita, debe hacer clic en un botón en Word y en HTML debe escribir el código. Aquellos. HTML es simplemente una herramienta que agrega texto, imágenes, tablas y otros elementos.

Las hojas de estilo en cascada (CSS) se utilizan para hacer que una página web sea atractiva a los ojos de los visitantes. Además, las hojas de estilo CSS simplifican enormemente el proceso de diseño de una página web. CSS también le permite realizar cambios en un solo lugar, en lugar de editar todo el sitio. De esta manera, no es necesario visitar todas las páginas web del sitio y editarlas.

CSS le ahorra tiempo y energía valiosos. Las hojas de estilo en cascada, como su nombre indica, definen un estilo específico para los elementos de las páginas web en función de una lista de prioridades, comúnmente denominada "cascada". Aparte de esto, también le permite administrar varios elementos en las páginas web de su sitio. Una única hoja de estilos CSS puede controlar la fuente, el formato, el tamaño del texto, la posición, el estilo y el color de un sitio web completo. Aunque las hojas de estilo en cascada pueden cambiar la presentación y apariencia de su sitio web, no tienen nada que ver con el diseño del sitio web.

CSS puede ayudar a un webmaster de muchas maneras. Gracias a CSS, tu sitio web tendrá un diseño más atractivo. Dicho esto, incluso los motores de búsqueda prefieren los sitios web basados ​​en CSS cuando se trata de clasificarlos en el índice de búsqueda.

Separar la presentación de un sitio de su contenido.

Con CSS, puedes tener mucho control sobre la apariencia de tu sitio, ya que esta tecnología te permite asociar diferentes hojas de estilo con el texto de tu sitio. Como resultado, si necesita cambiar la apariencia de cualquier elemento en una página web, solo necesita editar un archivo de hoja de estilo CSS externo y se reflejará en todo el sitio web. Este enfoque no sólo proporciona un proceso de gestión del sitio flexible, sino que también ahorra mucho tiempo.

Aumento de la velocidad de carga del sitio.

Debido a que las hojas de estilo en cascada son archivos de texto, son livianas y usan menos ancho de banda, lo que a su vez aumenta la velocidad de carga de su sitio. Según las estadísticas, un sitio que utiliza hojas de estilo externas basadas en CSS se carga aproximadamente siete veces más rápido que un sitio similar sin esta tecnología. Dado que los documentos de texto se cargan muy rápidamente, las páginas web se renderizarán en casi cuestión de segundos, lo que tendrá un impacto positivo en la experiencia general del visitante cuando visite su sitio.

CSS facilita cambiar la posición de cualquier elemento en una página web. Por ejemplo, el menú se puede colocar en cualquier lugar: izquierda, derecha, arriba o abajo. Al mismo tiempo, el objetivo principal de dicho posicionamiento de elementos es garantizar que los robots de los motores de búsqueda rastreen primero el contenido principal de su sitio web. Para lograr esto, debe colocar todos los elementos auxiliares, como los menús, después del contenido principal en el código HTML.

Compatibilidad de CSS con navegadores modernos.

Dado que actualmente existen muchos navegadores diferentes, es difícil para un webmaster comprobar la funcionalidad de un sitio web en absolutamente todos los navegadores. Sin embargo, si se ciñe a un diseño estándar basado en CSS, este problema se resuelve fácilmente.

Como puede verse en lo anterior, la tecnología CSS, además de proporcionar herramientas para crear sitios web modernos y atractivos, también ayuda a resolver una serie de problemas. Lo que en sí mismo determina la gran importancia de CSS.

Uno de los servicios más antiguos de Internet son los foros. Estas plataformas de comunicación fueron de las primeras en aparecer y prácticamente no han cambiado desde entonces. Pero a pesar de su avanzada edad, todavía cumplen con sus funciones. Aquí la gente se comunica, hace preguntas y obtiene respuestas.