Diseño de marketing y comunicación
¿Qué es CSS?
La demostración de este capítulo tiene cinco pasos que cubren los conceptos básicos de la producción de páginas. No se preocupe por aprender los elementos de texto específicos o las reglas de la hoja de estilo en este momento; llegaremos a ellos en los siguientes capítulos. Por ahora, solo preste atención al proceso, la estructura general del documento y la nueva terminología. A primera vista, este parece un gran diseño; después de todo, suaviza cualquier pequeño desliz que pueda cometer. En particular, este comportamiento hace que sea muy fácil que errores graves acechen sin ser detectados en sus páginas web.
Secciones básicas de un documento
«Prettying» es solo mi forma de decir que me gustaría cambiar su presentación, que es el trabajo de Cascading Style Sheets. Los navegadores tratan los elementos de bloque como si estuvieran en pequeñas cajas rectangulares, apiladas en la página. Cada elemento de bloque comienza en una nueva línea y, de forma predeterminada, también se agrega algo de espacio encima y debajo de todo el elemento. En la Figura 4-10, los bordes de los elementos del bloque están delineados en rojo. Con los elementos correctamente identificados, el navegador ahora puede mostrar el texto de una manera más significativa. Hay algunas cosas importantes a tener en cuenta sobre lo que está sucediendo en la Figura 4-9.
La barra lateral Lo que ignoran los navegadores enumera otra información de la fuente que no se muestra en la ventana del navegador. Se indica a los navegadores que ignoren cualquier etiqueta que no comprendan o que se haya especificado incorrectamente. Dependiendo del elemento y del navegador, esto puede tener resultados variados. El navegador puede no mostrar nada en absoluto, o puede mostrar el contenido de la etiqueta como si fuera texto normal.
Para mostrar una imagen dentro de una página web, use este elemento. Asegúrese de especificar el atributo src para indicar el nombre de archivo de la imagen que desea que muestre el navegador. En lugar de decirle al navegador, «Aquí es donde va a la siguiente línea y aquí es donde agrega cuatro espacios adicionales», HTML le dice al navegador, «Aquí hay dos párrafos y una lista con viñetas». Depende del navegador mostrar la página, siguiendo las instrucciones que incluye en su HTML.
Consulte las convenciones de nomenclatura de la barra lateral para obtener más consejos sobre cómo nombrar archivos. Al agregar una imagen a la página, aprenderá sobre atributos y elementos vacíos. Describirá el contenido utilizando los elementos de texto adecuados y aprenderá sobre la forma correcta de utilizar HTML. Echó un vistazo a un documento HTML en el Capítulo 2, pero ahora podrá crear uno usted mismo y jugar con él en el navegador.
Pequeñas cosas como esta salen mal todo el tiempo, incluso para los profesionales. Dependiendo del contenido y el propósito de su sitio web, puede decidir que la representación predeterminada del navegador donde-vive.com de su documento es perfectamente adecuada. Sin embargo, creo que me gustaría embellecer un poco la página de inicio de Black Goose Bistro para dar una buena primera impresión a los posibles clientes.
Primero, los navegadores web lo muestran en la pestaña del navegador o en la parte superior de la ventana del navegador. En segundo lugar, cuando un visitante marca su página como favorita, el navegador utiliza el título como etiqueta del marcador. En tercer lugar, cuando su página aparece en una búsqueda web, el motor de búsqueda generalmente muestra este título como la primera línea compra venta automoviles en los resultados, seguido de un fragmento de contenido de la página. , donde intenta comportarse de la misma manera que lo hizo hace 10 años, con peculiaridades y todo. Esto garantiza que las páginas web realmente antiguas conserven el aspecto que tenían cuando se crearon por primera vez, incluso si se basan en errores de navegador antiguos que se han solucionado hace mucho tiempo.
Este capítulo presentó los elementos que establecen la estructura del documento. Los elementos restantes introducidos en los ejercicios se tratarán con más profundidad en los siguientes capítulos. Cometer errores en sus primeros documentos HTML y corregirlos es una excelente manera de aprender. Si escribe sus primeras páginas a la perfección, le recomiendo que juegue con el código que tengo aquí para ver cómo reacciona el navegador a varios cambios. Esto puede resultar extremadamente útil en las páginas de solución de problemas posteriores. He enumerado algunos problemas comunes en la barra lateral ¿Tiene problemas? Tenga en cuenta que estos problemas no son específicos de los principiantes.
- Los diseñadores de sitios web pueden considerar que es una buena práctica ajustarse a los estándares.
- Por lo general, se crea manualmente, aunque algunos sitios utilizan un proceso de creación automatizado, similar a un sitio web dinámico, cuyos resultados se almacenan a largo plazo como páginas completadas.
- Cada vez que se solicita esa página, se devuelve el mismo contenido.
- Un sitio web estático almacena un archivo único para cada página de un sitio web estático.
La página de inicio después de que el contenido se haya marcado con elementos HTML. ) a nuestro contenido, como lo haremos en el ejercicio 4-3 | Definición de elementos de texto. Sin embargo, antes de comenzar, quiero tomarme un momento para hablar sobre lo que estamos haciendo y lo que no hacemos al marcar contenido con HTML. porque contiene todos los elementos del documento y no puede estar incluido en ningún otro elemento. El texto está todo junto, no es así como se veía en el documento original. Lo primero que es evidente es que el navegador ignora los saltos de línea en el documento fuente.
Desafortunadamente, los diferentes navegadores se comportan de manera diferente cuando ve una página sin un tipo de documento. Es probable que obtenga diferentes tamaños de texto, márgenes y bordes inconsistentes y contenido colocado incorrectamente. Por esa razón, las páginas web sin doctypes son malas noticias y debes evitar crearlas. La definición del tipo de documento es el primer dato de un archivo HTML. Le dice al navegador qué estándar de marcado usó para escribir la página. Por cierto, el reemplazo de caracteres es una de las razones por las que puede tener problemas si intenta escribir sus documentos HTML en un procesador de texto.