el principal / Navegantes / A los elementos activos de las páginas web se relacionan. Elementos básicos de la página web

Los elementos activos de las páginas web están relacionadas. Elementos básicos de la página web

La mayor parte del contenido que se presenta en Internet es páginas web. Este es históricamente el primer tipo de documentos destinados a alojamiento en el espacio de la red virtual, pero aún conserva la relevancia y los formatos prácticamente no competidores. ¿Cuál es la estructura de las páginas web? ¿Con qué medios de desarrollo web están creados?

¿Qué es una página web?

"Enumere los elementos básicos de la página web", el examinador nos dice en la lección de informática. ¿Qué podemos decirle en respuesta? En primer lugar, contamos en principio lo que la página web está en principio.

De acuerdo con una definición encontrada en un entorno especialista en TI, este es un documento que está diseñado para abrir en un programa especializado - navegador, y que contiene datos para mostrar en la pantalla de la computadora con el tipo apropiado para varios contenidos útiles: textos, enlaces, Gráficos, video, música y música, etc. La página web es un documento de texto. Los datos correspondientes para el navegador son letras, números y símbolos especialesUtilizado como elementos del lenguaje de marcado - HTML. Lo estaba usando que el creador de la página web "explica" el navegador, cómo mostrar uno u otro contenido en la pantalla.

Lugar y función de las páginas web en la estructura del sitio.

¿Es posible decir que la página web es el componente principal del sitio web? En parte, esto es cierto. Sin embargo, como señalamos anteriormente, la página web es solo un documento de texto. El sitio, como regla general, también organiza imágenes, video y otros elementos multimedia. Una página web para acomodarlos en sí misma, pero en su estructura puede contener enlaces a ellos. Por lo tanto, la página web se puede llamar el componente principal del sitio en el aspecto del papel dominante en la visualización del contenido virtual frente a los usuarios.

En casos raros, por supuesto, el documento en consideración será el único componente del sitio, si no se proporciona por algunas razones para mostrar gráficos, videos y otros elementos multimedia. En particular, los primeros sitios, cuando aparecieron solo los trabajadores de las páginas web, no incluían el contenido apropiado. Antes de los ojos del usuario, solo había texto y enlaces.

Principio de uso del hipertexto.

Por lo tanto, la página web se denomina documento elaborado en HTML, con el que se realiza el marcado de hipertexto. Pero, ¿qué es este fenómeno? ¿Qué es el hipertexto? Sin profundizar fuertemente en la teoría, observamos que este es un texto que de una u otra forma le permite obtener un acceso rápido a otro, por referencia. En el libro habitual, es imposible, hay "texto simple". Para obtener acceso a la página deseada, el lector debe hacer unas cuantas redistribuciones, antes de leer el contenido o las notas al pie. En el modo "HyperText", la parte principal del trabajo hace una computadora, debido a la información reflejada en los elementos HTML de la página.

Si el maestro de informática nos dice: "Enumere los elementos básicos de la página web", entonces podemos comenzar correctamente la historia de los componentes del documento correspondiente, que se crean utilizando el idioma de marcado HTML. Por lo tanto, para empezar, considere algunos momentos teóricos relacionados con HTML.

Estructura de idioma HTML: Etiquetas

¿Cómo lee el navegador los datos necesarios sobre la página web del documento elaborado en HTML? Muy simple.

Los elementos principales de este lenguaje son las etiquetas. En la mayoría de los casos, están emparejados, hay abierto, y hay un cierre. Los primeros se denotan solo por paréntesis angulares. El segundo es similar, pero se coloca una barra antes del segundo soporte, el símbolo. El navegador puede reconocerlos, y, por lo tanto, muestra los contenidos de las páginas web sin ningún problema de acuerdo con los algoritmos creados por el desarrollador del documento.

La etiqueta de apertura suele ser escrita por letras grandes que se cierran, pequeñas. Este es un estándar establecido en un entorno especializado en TI. El navegador definitivamente reconocerá el comando HTML por cualquier letra, pero también se recomienda a los desarrolladores web para adherirse al esquema de escritura de etiquetas marcada. Esto lo hará más fácil, por ejemplo, la mejora de la página web por otros especialistas.

Atributos

Otros elementos esenciales del lenguaje HTML son atributos. Con su ayuda, el creador de la página web puede configurar las propiedades del contenido, por ejemplo, la altura de la fuente, su color, la posición en relación con la página. Lo mismo se aplica a las imágenes, videos y otros componentes multimedia. Los atributos están escritos dentro de la etiqueta de apertura.

Contenido

Entre la etiqueta de apertura y cierre se encuentra el siguiente componente clave de la página web - Contenido. Esto, de hecho, el mismo contenido que debe mostrarse antes del usuario en la pantalla. Este puede ser el texto, enlace, imagen, video u otro elemento multimedia.

Páginas web

"¡Así que enumera los elementos básicos de la página web, ¡Finalmente!" - Repite el profesor. "Con placer," - le respondemos a él. ¿Qué se incluye en la estructura del tipo de documentos en consideración? Estamos de acuerdo en que consideraremos este aspecto al contexto exactamente del contexto de los elementos HTML de la página web. Es decir, su pantalla en el navegador es que el usuario ve en la pantalla, nos preguntaremos en menor medida. El hecho es que los algoritmos HTML correspondientes, sobre la base de los cuales el programa muestra el contenido por igual, puede ser diferente. Y en esta característica del idioma HTML: se puede mostrar la imagen deseada en la página web diferentes caminos. Al mismo tiempo, pueden ser ambos equivalentes desde el punto de vista de los costos laborales del Creador de la página web de manera y asuman diferentes cantidades de esfuerzo y tiempo para su implementación.

Páginas web: encabezado

Elementos estándar de la página web, ya que fue sorprendentemente sonidos, se presentan en una cantidad muy pequeña. En esencia, solo hay dos de ellos, el título y la parte principal del documento. Al mismo tiempo, cada uno de ellos puede tener una estructura bastante complicada.

¿Cuál es la especificidad del encabezado? Se encuentra en la parte superior de la página web. En un código HTML que genera un encabezado, como regla general, se supone que "cifrado" se cifra solo, pero si es necesario, los insertos gráficos pequeños también se pueden colocar en el elemento apropiado. Y esto, de hecho, todo lo que se puede decir sobre el título. Parecería que su papel en la estructura del documento relevante es insignificante. Pero no lo es. Las páginas web Titulares son muy significativas desde el punto de vista de la indexación del sitio en los motores de búsqueda - Yandex, Google. Este elemento Debe ser completamente relevante el contenido de la página web, así como los específicos temáticos del sitio.

¿Cómo se solucionó el encabezado de la página web utilizando HTML? Muy simple. Primero, la etiqueta de apertura está escrita, que siempre se parece a la cabeza con soportes de esquina, luego el contenido del título, después de: la etiqueta de cierre. Están escritos, por supuesto, en la parte superior del documento web.

El encabezado de documentos web puede incluir una serie de elementos adicionales. A veces, el formato de la página web puede requerir una visualización de texto en una codificación específica. ¿Cómo garantizar la conformidad del documento web este criterio? Muy simple. En la estructura del encabezado del documento, se deben colocar algoritmos HTML, prescribiendo el navegador para usar una codificación de idioma específica, por ejemplo, cirílico. Los comandos relevantes se colocan dentro de la etiqueta meta, que, así como los demás, ocurre la apertura y el cierre.

La mayoría parte de la página web

La parte principal del documento web se abre con la etiqueta del cuerpo, se cierra utilizando el elemento apropiado, incluida una barra. Al mismo tiempo, entre las etiquetas de apertura y cierre pueden ser gran cantidad Comandos adicionales del lenguaje de marcado de hipertexto. Esto se debe al hecho de que su contenido útil se publica en la parte principal de la página web: textos, enlaces, gráficos, videos, diversas formas para el llenado.

Cada uno de los tipos de contenido respectivos tiene sus propias etiquetas. En la estructura de la parte principal del documento web, pueden estar presentes un comandos HTML, con el cual se realiza el formato de texto, por ejemplo, lo que hace que la fuente sea de un cierto color, tamaño y otras propiedades.

Considere cuál es la especificidad de algunas etiquetas HTML utilizadas con frecuencia. En realidad, también forman los elementos básicos de la página web.

Etiquetas HTML básicas

Entonces, con el objetivo de un estudio detallado de lo que son elementos de la página web, estudiaremos más la esencia de las etiquetas HTML básicas. Algunos de ellos ya estaban liderados anteriormente, en particular aquellos en los que el navegador lee los encabezados de las páginas web y determina dónde se encuentra la parte principal del documento.

La etiqueta P. está lo suficientemente distribuida. Puede, al igual que otros elementos similares del lenguaje de marcado de hipertexto, puede ser descubriendo y cierre. Esta etiqueta le permite formatear un párrafo separado del documento. Puede, por ejemplo, establecer un cierto tipo de fuente para ello o su color. Sin embargo, esto se hace utilizando una etiqueta adicional - Fuente. Al mismo tiempo, se ubicará dentro de la que denota los límites del párrafo: esto permitirá no distribuir el comando HTML que refleja el tipo de fuente preferida, a otros elementos de la página web.

Con etiqueta Tagle, se crean mesas. Con la ayuda de los atributos correspondientes, puede determinar el número requerido de columnas y filas, configure su ancho, los específicos de los límites, el tamaño y el color de la fuente de texto en la tabla.

Responsable del procesamiento del navegador de imágenes. También puede colocar varios atributos que regulan el tamaño de la imagen, su posición en la página.

Las referencias a otros documentos web o archivos se especifican utilizando la etiqueta A. Como regla general, los atributos que indican el hecho de que en la estructura de la página web es un hipervínculo. Esto especifica el documento, el archivo o el sitio web al que conduce.

La etiqueta se distribuye como Frameset. Con él, puede dividir el espacio de la página web en varias áreas: marcos. En cada uno de ellos, puede en documentos web separados. Es decir, los marcos le permiten posicionar correctamente en una pantalla al mismo tiempo, dos o más páginas.

Una historia sobre elementos clave de las páginas web y una historia posterior sobre los medios de formato que utiliza el idioma HTML, sobre este será el algoritmo de nuestra respuesta a la pregunta que le pedimos al examinador. Si nos apeló, dijo "Listar los elementos básicos de la página web", entonces nosotros, utilizando la metodología apropiada, tendrá todas las posibilidades de revelar el tema. Es decir, bajo el término "elementos", podemos entender los componentes clave de la estructura de documentos web, o los tipos de contenido: texto, imágenes, tablas, marcos, enlaces que el webmaster se genera con la ayuda de dicha herramienta como idioma HTML.

Especificidad de las herramientas de desarrollo web.

Además de dicho, podemos aclarar que las etiquetas y los atributos estipulados por los estándares HTML son una gran cantidad. Además de los desarrolladores web de HTML se pueden utilizar medios adicionales Formato de documentos de hipertexto. Por ejemplo. usando javascript Puede crear páginas web dinámicas, es decir, aquellas en las que el contenido se actualiza constantemente (tanto a través de las acciones del usuario en sí mismo como de acuerdo con los algoritmos de antemano en los scripts).

Será útil agregar que el desarrollador web puede usar lenguajes de programación completos, como, por ejemplo, PERL, PHP, Java, Python, con las que las posibilidades de trabajar con documentos de hipertexto se están volviendo aún más anchas. La necesidad de esto puede deberse al hecho de que las aplicaciones de las tecnologías web de hoy son muy diferentes. Las tareas que enfrentan los desarrolladores modernos pueden ser bastante complicadas. Por ejemplo, a veces es necesario traducir las páginas web escritas en ruso al inglés. En este caso, el kit de herramientas del desarrollador será el más diverso.

Elementos de la página web

Cualquier página web contiene un conjunto específico de elementos estándar que son componentes obligatorios de cada recurso de Internet. Por supuesto, el rango y el número de objetos similares pueden variar según la orientación temática del sitio, el volumen de materiales publicado en él, así como con fines y tareas que el creador de este recurso se establece. El diseño de tales elementos, el diseño de su ubicación mutua y es una de las tareas principales del maestro web.

El primer elemento de la página web que tenemos que considerar es su título. Sin embargo, se puede realizar tanto en texto como en la versión gráfica, y en el otro caso, debe ubicarse en la parte superior del documento. A veces, con el encabezado, combina el menú de selección de codificación cirílica y los botones para ir a la versión en inglés a la versión en inglés, si este recurso web se presenta en dos idiomas. Subtituto directamente al documento, como regla general, hay un espacio asignado para acomodar un banner publicitario. Incluir la pancarta con precisión en la parte superior de la página web en la mayoría de los casos es condición obligatoria Registros de sitios en los servicios de intercambio de banners: sistemas que publican el recurso que ha creado a cambio de mostrar en las páginas de su sitio publicitario a otros participantes de la red Banner. Tamaño estándar Las pancartas publicadas bajo el encabezado del documento son generalmente 468x60 puntos. Si está utilizando un principio de diseño de página estática, el ancho del encabezado de su documento será de aproximadamente 640 píxeles: este valor se debe, en primer lugar, la necesidad de garantizar la visualización correcta del documento en los monitores con una resolución de pantalla de 640x480 puntos y evite la apariencia de la barra de desplazamiento horizontal, lo que dificulta la verlo. Es obvio que el ancho de la pancarta en este caso será significativamente menor que el ancho del encabezado, de modo que, en la parte de la página donde planea tomar un lugar para publicidad, se forma un espacio desocupado, que puede completar el logotipo. del propietario de este sitio o referencia a un servidor que implementa el alojamiento web. Por supuesto, el logotipo no siempre es necesario: como regla general, se incluye en la página web solo si el sitio tiene una orientación comercial.

La parte principal del documento lleva el llamado campo de texto, una parcela donde se coloca el llenado semántico de la página: texto y ilustraciones de información significativa. Los elementos listados también se denominan un contento (de inglés, contenido - contenido). La ubicación del campo de texto depende principalmente de cómo el diseñador web colocará los otros elementos del documento.

El siguiente componente obligatorio de la página web es elementos de navegación - conectación de hipervínculos este documento Con otras secciones del sitio. Los elementos de navegación se pueden hacer en forma de cadenas de texto, objetos gráficos, es decir, botones o ingredientes activos, p.ej Applets de java. Estos últimos son los mismos botones que, a diferencia de sus hermanas tradicionales, son capaces de responder al movimiento del mouse, realizando con el cursor cuando se suba en cualquier acción simple (encendido de la luz de fondo, creando un efecto de presionar, un cambio en la forma, etc.). Como mencioné en la sección "Postulados" básicos del diseño web, los elementos de navegación deben colocarse de tal manera que siempre estén a la vista, a la mano, es decir, para que el usuario no tenga que liberar la página, Si el campo de texto toma una altura de varias pantallas físicas, después de lo cual hace mucho tiempo para buscar enlaces a otras secciones. El enfoque más bien establecido es la colocación de elementos de navegación desde el borde izquierdo de la página.

En la parte inferior del documento, es habitual publicar información sobre los desarrolladores del sitio y la dirección de correo electrónico en la que los visitantes del recurso pueden enviar sus comentarios, sugerencias y deseos a los propietarios. Si la página web es un documento de inicio, en la parte inferior, también coloque un contador de visitas: un script pequeño que llame a la secuencia de comandos CGI instalada en el servidor, que corrige cada apertura del documento en el navegador de usuario cambiando el valor del indicador del medidor . Gracias a esto, el Web-Wizard determinará fácilmente el número de visitantes conectados su página por cualquier momento. Observo que el medidor de visitas se instala solo en la primera página llamada cuando se accede al sitio, falta en otros documentos de recursos. Tampoco se recomienda publicar varios metros diferentes en una página.

Entonces, desmontamos todos los componentes principales de la página web y su posible ubicación en relación entre sí.

En la práctica, los sitios web a menudo se encuentran, en el diseño de los cuales los elementos de navegación se colocan en el borde derecho de la pantalla. En este caso, el campo de texto se desplaza a la izquierda, los componentes restantes del documento se encuentran, en función del principio de la estética máxima de su combinación.

Como se puede ver en la figura, el logotipo en este caso se coloca en un nivel con el encabezado del documento, y la bandera publicitaria se coloca en relación con el centro de la página. Con este enfoque, se recomienda soportar el diseño gráfico del encabezado, el logotipo y los campos para colocar la publicidad en un solo color y estilo artístico, entonces la asimetría de la posición de estos objetos no será tan obvia y no reducirá los ojos a los partidarios. Con diseño estricto de la mesa de la mesa.

Los elementos de navegación se pueden colocar no solo cerca de los bordes a la derecha e izquierdo de la página, sino también en la parte superior del documento. Dicha opción de diseño es la más adecuada, en mi opinión, al crear páginas domésticas: en este caso, todos los objetos de la página están en forma armoniosamente en el ancho especificado mesa invisibleAl mismo tiempo, la preparación de la tabla en sí se simplifica enormemente. La única desventaja de este enfoque es la necesidad de duplicar los elementos de navegación en la parte inferior del documento, ya que cuando la página es desplazamiento vertical, desaparecen después del límite superior de la pantalla, y para llegar a ellos, el usuario tendrá que Enrolle la espalda, que, que ves, es bastante incómodo.

Por supuesto, todo lo que se ha dicho en esta sección no es una panacea, sino el liderazgo a la acción. Estoy tratando de declarar solo principios generalesque se usan al poner la estructura del sitio, la solución final siempre permanece para el maestro web. En última instancia, qué tipo de diseño no inició nuestro proyecto futuro, el resultado de sus obras aún será correcto: no hay censura en Internet, sin regulaciones que persiguen al Creador del sitio en aquellos u otros marcos rígidos. Un ejemplo de una solución de diseñador que no cae en ninguna de las categorías especificadas anteriormente puede servir como el llamado diseño mixto

Como se puede ver en la figura, en este ejemplo, parte de los elementos de control se construye directamente en el título de la página: estamos hablando del botón para cambiar entre las versiones rusas e ingleses del sitio, así como los botones de navegación: Este puede ser un enlace a la dirección de correo electrónico de los creadores de recursos, duplicada en el documento inferior y una referencia a una de las secciones temáticas, por ejemplo, una página de noticias. Sin embargo, la unidad principal de los elementos de navegación se coloca en relación con el límite izquierdo del documento, sin embargo, el menú de selección de codificación cirílica se encuentra directamente debajo del banner publicitario en la parte superior de la página. El campo de texto se divide en dos columnas asimétricas, y los anuncios breves de los recursos de las columnas temáticas, incluidos los enlaces a estas secciones, se colocan a la derecha.

Obviamente, las variantes del diseño mixto de una página web pueden ser un gran conjunto: las soluciones específicas dependen de la cantidad de componentes de recursos de partición, el volumen del texto preparado para el sitio y, finalmente, de la fantasía del diseñador mismo. Solo es importante que la apariencia del sitio no desperte las quejas de los visitantes. Al final, solo usted como desarrollador, usted y nadie más tienen derecho a mostrar todas sus habilidades y talentos y componer la página de su propio gusto. Los creadores de algunos monederos, no atormentados por dudas, coloque el contador de visitas en la esquina superior derecha del documento, el nombre del sitio está escrito con una pequeña fuente de asado y lo publique bajo un banner publicitario, y por algún motivo de los elementos de navegación son inesperadamente detectado justo en medio del bloque de texto, entre una historia sobre usted y fotos del querido perro del autor del proyecto. El sabor y el color, como dicen, sin compañeros. Pero personalmente, esta enfermedad me parece incurable.

Todos leemos una gran cantidad de artículos sobre cómo seleccionar las palabras clave y componerles correctamente una lista, como usar palabras clave para que el sitio sea relevante para ciertas consultas de búsqueda. Consideremos el tema de la alojamiento de palabras clave con más detalle en las páginas web.

Desde el conocimiento de dónde y cómo colocar palabras clave en la página web depende del éxito o el fracaso de su compañía SEO.

En cada página web hay 5 elementos en que se deben colocar las palabras clave:

Título de la página (etiqueta de título)
Páginas Palabras clave (Meta TAG Palabras clave)
Descripción de la página (Meta Etag Descripción)
Texto alternativo para imágenes (TAG ALT)
Contenido de la página web (etiqueta del cuerpo)

De todos los elementos anteriores de la página web, el contenido de la página es el más importante (párrafo 5). Más sobre esto más lejos.

Por ahora, vamos a preguntarnos esta lista en orden.

Elemento número 1. Título de la página (etiqueta de título)

Primero, considere la página del título (Título). Este elemento es el primero y lo más importante de todos los demás elementos en el bloque de la cabeza de cualquier página web.

Título de la página web Puede ver en la línea superior del navegador de Internet. Para asegurarse de que, lanzar cualquier navegador, por ejemplo, Explorador de Internet., Ópera o Mozilla Firefox., Vaya a cualquier sitio y compare el contenido de la etiqueta de título con la línea superior en estos navegadores. Los motores de búsqueda utilizan esta etiqueta para sus propios propósitos: para recopilar información sobre el sitio y las definiciones de sus sujetos, y también usarlos en los resultados de los resultados de búsqueda (SERP) como el nombre de la página web.

¡Recuerda! El encabezado de la página web es ella breve descripción.

Además de los contenidos anteriores, la etiqueta de título se usa como un nombre de página web al agregarlo a favoritos el navegador de Internet.

Elemento número 2. Páginas Palabras clave (Meta TAG Palabras clave)

Ahora hablemos de palabras clave y descripción de Meta Tags. Hace algún tiempo, se utilizaron palabras clave de etiquetas de meta al agregar un sitio al índice de motores de búsqueda. Pero estos tiempos pasaron. Ahora los motores de búsqueda simplemente ignoran esta etiqueta, porque Frisis de su uso con fines "sucios". Algunos motores de búsqueda prestan atención a esta etiqueta para determinar el tema del sitio.

De todo esto se deduce que no se requiere esta etiqueta, pero puede usarlo exclusivamente en cita previa.

Las palabras clave deben estar separadas por una coma. Al comienzo de la lista, publique las palabras clave más importantes, descendiendo aún más su importancia. Los motores de búsqueda dejaron de prestar atención al registro en el que se puntúan las palabras clave, por lo que ahora todas las palabras clave se pueden imprimir en la minúscula.

Elemento número 3. Descripción de la página (Meta Etag Descripción)

DESCRIPCIÓN DE META TAG: otro elemento del sitio en el que se deben colocar las palabras clave. Los motores de búsqueda Ve esta etiqueta para la presencia de palabras clave en ella, y también compare su contenido con los contenidos del sitio en sí (los contenidos de la etiqueta del cuerpo). Una circunstancia muy importante es que los motores de búsqueda utilizan los contenidos de la etiqueta Descripción como una descripción de la página web en los resultados de resultados de búsqueda (SERP).

Esta etiqueta debe contener una breve descripción de la página web, pero no más de 50 palabras.

Elemento número 4. Texto alternativo para imágenes (TAG ALT)

Las etiquetas Alt son una descripción de texto de los contenidos, es decir. Si por alguna razón, la imagen no está cargada, y esta imagen tiene texto alt, en lugar de la imagen se mostrará este texto.

Si la imagen está cargada, y el texto alt de la imagen también tiene, entonces podemos verlo cuando pase el cursor del mouse a la imagen. Las etiquetas Alt se utilizan para la conveniencia de los usuarios de Internet que, por cualquier motivo, no se muestran los gráficos.

Muchos motores de búsqueda indexan los contenidos de esta etiqueta, respectivamente, puede haber palabras clave. Simplemente no olvide que el texto alt debe coincidir con la imagen, describa, sea su equivalente textual. No utilice la etiqueta Alt en relación con las imágenes de marcado, como las líneas divisorias, los marcadores ...

Elemento número 5. Contenido de la página web (etiqueta del cuerpo)

Entonces, finalmente, llegamos al elemento más básico del sitio: la etiqueta del cuerpo, el artículo, cuyos contenidos están más interesados \u200b\u200ben los usuarios de Internet. Los principales motores de búsqueda ya no le darán 1 línea en los resultados de resultados de búsqueda (SERP) solo debido a la presencia de varias repeticiones de palabras clave en la página de su sitio web. Solo habrá la página web más relevante en una consulta de búsqueda específica.

Para lograr esto, debe implementar palabras clave seleccionadas en el código de páginas web, observando la frecuencia de su repetición. Actúa de la siguiente manera: Para cada página específica, seleccione 1-2 palabras clave y optimice la página correspondiente para ellos.

Imagina que estás preparando la presentación de su nuevo sitio o producto. Luego, por ejemplo, las diapositivas de su presentación de PowerPoint: párrafos. Deben ser cortos y claros. Al igual que en PowerPoint Presentation, puede usar listas para enumerar los beneficios de su sitio o producto, cada vez que hace énfasis en las palabras clave seleccionadas.

Implementar palabras clave seleccionadas en los 5 elementos de cada página web enumerada anteriormente, y usted mejora sus posiciones y resultados actuales.

Idioma html

Las páginas web pueden existir en cualquier formato, pero el lenguaje de marcado de Hyper Text se acepta como un lenguaje de marcado de hipertexto estándar, diseñado para crear texto formateado, saturado con imágenes, sonido, animación, videoclips y enlaces de hipertexto a otros documentos dispersos en toda la web. espacio y aquellos ubicados en el mismo servidor o ser parte de El mismo proyecto web.

Puede trabajar en una web sin conocimiento del idioma HTML, ya que los diferentes editores y convertidores especiales pueden crear los textos HTML. Pero escribir directamente a HTML no es difícil. Incluso puede ser más fácil que estudiar un editor o convertidor HTML, que a menudo se limita a sus capacidades, contienen errores o gasta un código HTML incorrecto que no funciona en diferentes plataformas.

El idioma HTML existe en varias opciones y continúa evolucionando, pero los diseños HTML probablemente se utilizarán en el futuro. Estudiando HTML y sabiendo que profundiza creando un documento al principio hTML estudiando y expandiéndolo en la medida de lo posible, tenemos la capacidad de crear páginas web que pueden ser vistas por muchos navegadores webComo ahora y en el futuro. Esto no excluye la posibilidad de usar otros métodos, por ejemplo, el método de característica avanzada, que proporciona NetScape Navigator, Internet Explorer o algunos otros programas.

El trabajo HTML es una forma de asimilar las características de la creación de documentos en un idioma estandarizado utilizando extensiones solo si es realmente necesario.

HTML ha sido ratificado por el consorcio World Wide Web. Es compatible con varios navegadores generalizados, y puede convertirse en la base de casi todo el software que está relacionado con la web.

Principios de crear una página web, los elementos básicos de la página web.

Para crear páginas web, se utiliza un idioma HTML especial (idioma de marcado de hipertexto - lenguaje de marcado de hipertexto). Este idioma define un conjunto de comandos especiales llamados Etiquetas y se utiliza para establecer formateo o asignar ciertos elementos de la página web. Las etiquetas especiales se utilizan para alojar en las páginas web. imágenes gráficas, clips de audio y video y otros llamados objetos incrustados.

Las páginas web son ordinarias. archivos de textoCreado en un bloc de notas estándar o editor de texto simple similar. Y contienen el texto, el mismo texto que desea poner en las páginas solo se coloca de una manera especial. Para que los diversos navegadores web muestren correctamente la misma página web, el idioma HTML debe estar estandarizado.

En la práctica, el estándar HTML tiene una gran influencia con la presencia de las etiquetas propuestas y apoyadas por los navegadores más famosos, como Microsoft Internet Explorador y Google Chrom. Estas etiquetas B. este momento Puede, cómo ingresar y no ser parte de la especificación HTML actual.

Hay herramientas de edición diseñadas específicamente para escribir HTML. Te permiten ahorrar tiempo, ya que contienen llaves. acceso rapido Para realizar operaciones recurrentes, como establecer las instalaciones iniciales de documentos, tablas o simplemente aplicar estilos al texto. Editores HTML Se diferencian del kit de herramientas WYSIWYG del autor porque requieren conocimiento de las reglas de compilación HTML manualmente, los editores solo simplifican y aceleran este proceso. Así como etiquetas html, WWWC estandarizados (etiquetas estándar), los navegadores web admiten múltiples etiquetas no estándar. Estas etiquetas fueron ingresadas por desarrolladores de un programa de navegador web para obtener una ventaja sobre los competidores. Esperaban que estas expansiones de marca entraran posteriormente en el estándar HTML, pero estas esperanzas no estaban destinadas a hacerse realidad. Sin embargo, las etiquetas permanecieron, y todavía están compatibles.

Para crear páginas web, necesitará cualquier navegador: Internet Explorer o Google Chrome Mozilla Firefox, y mejor, ya que muchos elementos HTML son diferentes de diferentes maneras. diferentes programas Visualización y muy deseable para controlar esta diferencia.

Además, necesita cualquier editor de texto, por ejemplo, para entrenamiento html - Archivos, y navegador - para ver y controlar.

Para crear una página web, la primera cosa crea la estructura del sitio. El sitio es un servidor que tiene un nombre único y una dirección permanente, conectada físicamente a WWW, o prácticamente colocada en otro servidor más grande.

Después de crear la estructura del sitio. editor de texto Palabra, crear nuevo documento Y guárdelo como una página web, comienza a crear una página web. Hace que nuestro trabajo sea más fácil y mejor. En ella, definimos el tiempo de la creación del sitio web, su depuración, su sujeto, así como su llenado.

Hay varias reglas simples que permiten que la interfaz del sitio se entienda por visitante [№10].

1. En el sitio no debe ser información inútil, la fuente debe ser leída fácilmente. Los elementos gráficos deben ser claros, expresivos y cargados rápidamente.

2. El ojo humano escanea las páginas del sitio de arriba a abajo. La mayor atención se centra en la parte superior izquierda de la página. Por lo tanto, en la parte superior de la página del sitio, como regla general, es la mayor información importante: Nombre de la empresa, logotipo, nombre del sitio, etc.

3. El visitante del sitio debe encontrar fácilmente la información que le interese y poder obtener información completa (descripción en el formulario de texto más varias fotos).

4. La información debe ser distribuida por grupos. Es posible garantizar la posibilidad de buscar bienes en términos de título y descripciones.

5. En el sitio web debe ser secciones de información:

con datos sobre la empresa (campo de actividad, dirección, contacto Números de teléfono etc.);

Los elementos principales de las páginas web:

1. Título / Logotipo (CAP)

3. Contenido / contenido (campo de texto)

4. Elementos de navegación.

5. Información sobre los desarrolladores del sitio.

Cualquier página web contiene un conjunto específico de elementos estándar que son componentes obligatorios de cada recurso de Internet.

El primer elemento de la página web que tenemos que considerar es su título. El logotipo o título del sitio realiza el mismo papel que el letrero en la entrada de cualquier institución. Otra cosa es Internet: aquí, la forma principal de moverse es la teletransportación y, por lo tanto, necesito ver este "letrero" en cada página.

La parte principal del documento lleva el llamado campo de texto, una parcela donde se coloca el llenado semántico de la página: texto y ilustraciones de información significativa.

Los elementos listados también se llaman "contenido" (de inglés, contenido - contenido). La ubicación del campo de texto depende principalmente de cómo el diseñador web colocará los otros elementos del documento.

Figura 1. Sitio de contenido de muestra

La siguiente parte obligatoria componente de la página web es elementos de navegación: los hipervínculos que conectan este documento con otras secciones del sitio. Los elementos de navegación se pueden hacer en forma de cadenas de texto, objetos gráficos, es decir, botones o componentes activos, como los applets Java.

Figura 2. Información de contacto

Antes de comenzar a crear su sitio, será muy responsable del problema del diseño de las páginas. En general, la página web se divide en páginas, navegación y información relacionada. Estos elementos a su vez se dividen en elementos más pequeños.

Como resultado, la secuencia de acciones para desarrollar un sitio web se reduce al siguiente algoritmo simple:

1. Declaración de objetivos y definición de tareas básicas.

2. Creación de una lista de futuras secciones temáticas.

3. Desarrollo de la estructura lógica y física del recurso.

4. Preparación del diseño de diseño, diseños de sitios, tabla de versal invisible.

5. Preparación de materiales de texto.

6. Preparación de materiales gráficos en forma vectorial.

7. Exportar dibujos vectoriales en formato ráster.

8. Optimización de todas las imágenes.

9. Creación de plantillas de páginas web.

10. Construir páginas web y código de depuración.

11. Revisar la identidad de mostrar páginas web con varias resoluciones de pantalla y paleta de colores y varios navegadores.

Conceptos básicos de diseño web

La historia del desarrollo de internet. El surgimiento de internet en Bielorrusia. Diseño web. La historia de la aparición. Requisitos de diseño del sitio de acuerdo con las normas W3C. Navegadores principales. Estructura del sitio, discipulos y etiquetas.

Internet ( inglés Internet, redes interconectadas - Redes unidas) - Gigante red de computadorasque consiste en una multitud de más pequeños conectados entre sí y cubriendo todo el globo.

La historia de Internet comenzó a mediados del siglo pasado: en 1957. En los Estados Unidos se creó la agencia de desarrollos prometedores (ARPA), que se dedicó a los desarrollos militares.

En 1989, Tim Berners-Lee creó un idioma HTML.

En 1961. La gestión de la investigación prospectiva y el desarrollo del Departamento de Defensa de los EE. UU. (Agencia de investigación avanzada de DIVPA - Defensa) sobre la tarea del Departamento de Defensa de los EE. UU. Comenzó un proyecto para crear una red de transmisión de paquetes experimentales. Esta red llamada Arpanet.Originalmente, estaba destinado a estudiar métodos para garantizar una comunicación confiable entre las computadoras de varios tipos.

En Enero 1969 Durante unos minutos, el sistema de cuatro computadoras en diferentes extremos de los Estados Unidos se lanzó durante unos minutos. Sucedió a lo largo de una línea telefónica de cambio de baja velocidad.

EN 1973 El año a través de Arpanet por primera vez, las computadoras de diferentes países "comunicados". La red se ha vuelto internacional.

El desarrollo de la red fue rápidamente. En 1987, el número de anfitriones superó los 10,000. En 1988, Canadá, Islandia, Dinamarca, Noruega, Francia, Finlandia y Suecia se conectan con NSFNET. En 1989, el número de anfitriones superó los 100,000. La red conectó el Reino Unido, Japón, Alemania, Austria, Israel, Italia, México, Nueva Zelanda, los Países Bajos a la Red. Rusia conectada a la red en 1990. Bielorrusia también está a principios de los 90.

El número de usuarios conectados aumentó anualmente por un ritmo rápido. En 1995. La red se ha convertido en la comunicación masiva más grande, dinámica y asequible.

Diseño web. La historia de la aparición.

Diseño web (de Ing. Diseño web) - Este es un diseño visual de páginas web. Toca el mismo papel del sitio que la impresión de diseño y diseño para la edición en papel. A menudo, el "diseño web" se llama desarrollo web: interfaz de diseño (contenido gráfico y texto del sitio), estructura de diseño, navegación y motor del sitio (parte seleccionada código de software Para implementar una tarea aplicada específica).

Actualmente, el término "diseño web" entiende el diseño de la estructura, la integridad ideológica del recurso de Internet, lo que garantiza la conveniencia de usar el recurso de Internet para los usuarios. Un diseño importante de los sitios web, es su cumplimiento con los estándares W3C (SPN. Consorcio World Wide Web, World Wide Consorcio, una organización que desarrolla e implementa estándares tecnológicos para la World Wide Web), que garantiza la disponibilidad de sitios para personas con personas con limitado oportunidades físicas, así como para usuarios de dispositivos portátiles.

También con sitios de diseño directamente son de marketing adyacente en Internet (marketing en Internet), es decir, promoción y publicidad del recurso creado, optimización de motores de búsqueda

Diseño web, aunque se basa en un componente gráfico, aún difiere significativamente del diseño de impresión. Esto, en primer lugar, se debe a la dinámica e interactividad de la imagen visual de la página web.

Casi todas las páginas web tienen hipervínculos, menú de navegación y otros elementos que proporcionan transiciones entre las unidades de información. Datos interactivos (es decir, aquellos que requieren cierta acción y responden a ellos) elementos y distinguen las interfaces electrónicas del libro habitual, la revista o el periódico.

Al diseñar una página web, estos elementos son clave. El desarrollo del diseño competente de las páginas, la estructura lógica de las rutas de sitio y navegación se basa en un diseño web y la facilidad de uso.

Yuzabilidad (Inglés. Usabilidad - literalmente "facilidad de uso", "aplicabilidad") - aplicado a técnico en computación El término usabilidad es el concepto de desarrollar interfaces de software definidas por el usuario, orientadas a la máxima comodidad psicológica y estética para el usuario.

Requisitos de diseño del sitio de acuerdo con las normas W3C.

El diseño del sitio debe ser cómodo , claramente se muestra en cualquier navegador. El sitio debe tener un diseño gráfico original que garantice la funcionalidad adecuada.

El sitio debe proporcionar conveniencia e integridad de los elementos de navegación.

La información básica, los menús y otros elementos de navegación deben estar disponibles sin desplazamiento horizontal completamente ventana abierta Navegador al resolver la pantalla 1024x768 puntos.

Diseño (ubicación de bloques de información, diseño visual) La página principal puede diferir del diseño de las páginas típicas al preservar la unidad de estilo del sitio.

La presencia de hermosos objetos gráficos, el uso de elementos gráficos pequeños, pero con estilo (pictogramas, visuales) en el diseño de las páginas del sitio.

Se recibe una pequeña inclusión de elementos de animación.

El diseño del sitio debe ser "fácil" en términos del volumen de elementos gráficos y proporcionar tanto como sea posible la velocidad de las páginas de páginas.

Asegúrese de que sea fácil de identificar la partición y la subsección en la que se encuentra el usuario.

Es correcto mostrar información en las computadoras sin complementos flash preinstalados, con soporte deshabilitado para scripts, gráficos, plantillas de estilo.

El diseño debe prever la posibilidad de desarrollar la estructura del sitio a través del desarrollo e inclusión de nuevas secciones y subsecciones a su composición.

Navegador web, o navegador.

Actualmente, cada usuario se elige para sí mismo "su" navegador. Los más populares son Opera y Firefox. Para ellos es Internet Explorer (es decir,).

Navegador web, o navegador (del inglés. Navegador web.) - esto es software Para buscar, vea los sitios web, es decir, para solicitar páginas web (en su mayoría de la red), para procesar, retirarse y transitar de una página a otra.

El sitio del navegador cruzado es un sitio profesional y competente, lo mismo posible al ver varios navegadores. El sitio debe proporcionar la pantalla de datos correcta en los siguientes navegadores:

Internet Explorer (versión 5.5 y superior):

Opera (versión 7.0 y superior);

Mozilla Firefox (versión 1.0 y superior).

El modo de color principal de los monitores, en el que se debe ver correctamente el sitio, 15 descargas de color y arriba (el número de colores es 65536 y superior).

Desarrollo de la estructura del proyecto web.

Según el concepto general del proyecto, se determinan los objetivos del proyecto web y las tareas, a saber,:

§ Estructura de datos, definición de enlaces entre tablas de base de datos, estructuras de transferencia de datos de fuentes externas;

§ Definición del nivel de automatización de datos, desarrollo de la estructura de gestión de datos;

§ Se llevan a cabo la especificación de los formularios y el procedimiento para su aparición;

§ Estructura interfaz de usuario: elementos de menú y elementos de navegación requeridos niveles de anidamiento;

§ Desarrollo de bocetos de diseño del proyecto (el número de opciones está aprobado por adelantado).

Desarrollo.

§ Diseño: solución artística y técnica. Creación de un estilo de sitio original: solución de color, fabricación de elementos de diseño, banners, elementos gráficos;

§ Programación: Creación de elementos de software;

§ Implementación de la navegación en el marco del modelo de proyecto aprobado;

§ Contenido de información básica;

Idioma de marcado de hipertexto HTML

(De los ingleses. Idioma de marcado de hipertexto - "Idioma de marcado de hipertexto"): este es un lenguaje de etiquetado estándar para documentos en World Wide Web. Todas las páginas web se crean utilizando HTML (o XHTML). El lenguaje HTML es interpretado por un navegador y se muestra en forma de un documento conveniente para una persona.
Junto con XML, HTML generalmente se clasifica como "lenguajes de marca de texto". De hecho, el papel de estos dos idiomas, como el formato en sí, llamado "Simplemente texto" ("texto simple") viene mucho más allá del procesamiento información de texto.
El estudio de cualquier lenguaje de computadora comienza con conocido con sus principales bloques de construcción: operadores, expresiones, variables. Desde este punto de vista, el idioma HTML es extremadamente fácil de no decir: Primitivo: además de texto ordinario, el archivo HTML contiene solo un tipo de diseños de control, el llamado etiquetas (Etiquetas).

Palabras prisioneros en soportes angulares "<” и “>"Llame a HTML - descriptores o etiquetas HTML.

Componentes básicos de la página web.

Panel del sitio de navegación principal (menú). Menú alternativo y menú principal de duplicación. Enlaces, tipos de enlaces y su ejecución. Los elementos principales del diseño del sitio. Sitio de página de diseño. Solución lateral de color. Optimización de gráficos web, preparación de imágenes para una página web. Principios de trabajar con fotos.

Panel de sitio de navegación principal (menú). El panel de navegación del sitio, que incluye referencias a las secciones principales del Sitio (y, tal vez en las subsecciones de la sección actual), debe estar en cada página del sitio y no debe cambiarse su ubicación, que se considera para Ser la violación más grave de las normas de usabilidad.

En general, se aceptan dos opciones para colocar el panel de navegación: verticalmente en la columna izquierda o en la línea en el pie de página. A menudo, puede encontrar una combinación de estos métodos cuando la columna izquierda y la cadena superior se usan para organizar el panel de navegación. Al mismo tiempo B. cuerda superiorComo regla general, las referencias a lo más importante, en opinión del desarrollador, se colocan las secciones.

Varios elementos principales del menú se pueden duplicar en menú alternativo. Si la horizontal principal es entonces vertical, o viceversa.

De acuerdo con las normas de usabilidad, nunca y en ningún caso no pueden realizar los enlaces de menú, enlaces a archivos descargables, por ejemplo, en el precio. Todo lo que no conduce a páginas de sitio estándar, debe ser precedido por la inscripción: "Descargar".

La sección activa del menú (la página en la que se encuentra el usuario) debe asignarse explícitamente diferente de otros elementos, como el color.

Las secciones visitadas deben asignarse a otro color para que el visitante pueda verse donde estaba y donde no hay.

Enlace a la página principal. Es muy deseable tener un enlace a la página principal de todas las páginas del sitio. La regla generalmente aceptada fue el uso de un logotipo del sitio por referencia a la página principal o icono en forma de una casa.

Disponibilidad Bienvenido menú principal duplicadoal final de la página.

Los elementos principales del diseño del sitio.

Diseño - Es el diseño de cosas, automóviles, interiores basados \u200b\u200ben los principios de combinación de comodidad, eficiencia y belleza.

Gráficos - Imagen de arte de objetos con líneas de contorno y trazos, sin pinturas (a veces, con manchas de color) (Diccionario de Ozhegov).

La idea principal del diseño gráfico es combinar los principios estéticos y las tareas funcionales en un diseño. El éxito de uno u otro proyecto depende en gran medida del cumplimiento. principios internosque es guiado por un especialista al crear un diseño gráfico.

La tarea principal del diseño web es la creación de un ambiente cómodo para asimilar información en las páginas del sitio web.

La solución universal en el diseño del diseño de las páginas web no existe. Opciones completamente diferentes para el diseño web, que implica el desarrollo de los siguientes elementos:

Diseño de páginas web del sitio;

Gráficos.

Sitio de página de diseño.

La página web se considera realmente como un conjunto de bloques rectangulares que se presentan en un orden determinado. En este caso, como regla general, los datos se ubican en las columnas, por lo que cuando el diseño se usa el término de una, dos y tres columnas de diseño.

El diseño del sitio del sitio debe proporcionar la escala de página automática dependiendo del ancho del navegador de usuario. El tamaño mínimo (ancho) del campo de trabajo del navegador, en el que es necesario proporcionar una pantalla de página de forma completa (sin una barra de desplazamiento horizontal), es de 1024 píxeles.

Solución lateral de color.

Coloree uno de los elementos de diseño web más ambiguos. El color puede enfatizar el contexto, y puede y empujar. El éxito del sitio depende en gran medida del esquema de color seleccionado. Investigadores en el campo de la usabilidad y el diseño web se observa que la primera impresión del recurso de Internet de la información se basa en una composición colorida, y se almacena en la memoria del usuario y no se encuentra el contenido de la información.

Para crear un diseño efectivo, es necesario considerar una serie de requisitos impuestos a la elección de las soluciones de color:

El brillo, el tono y la saturación de color deben cumplir con el estilo de marca de la compañía;

La selección de color se hace tener en cuenta la orientación a la audiencia de este recurso;

El número de colores básicos utilizados como sea posible, no debe exceder los tres;

Los colores utilizados en el sitio deben interactuar y armonizarse entre sí;

El uso del color debe ser responsable de las reglas elementales de la lógica;

Un artículo separado es resaltar la selección de colores para texto. El fondo y el texto de la página deben estar decorados con colores contrastantes. La mejor inteligibilidad se garantiza utilizando caracteres negros sobre un fondo blanco. El texto no debe fusionarse con el fondo, y los titulares se pierden.

Es necesario que la decisión del color corresponda a la forma de material de archivo, su contenido, la audiencia del sitio.

Optimización de gráficos web, preparación de imágenes para una página web. Principios de trabajar con fotos.

El uso de gráficos debe estar justificado, los gráficos deben cumplir claramente con el contenido del sitio. El exceso de oferta de gráficos y animaciones, distrae del contenido principal, cambiando la atención de los visitantes del sitio, dificulta la carga de la página.

El sitio debe descargarse rápidamente, y la gráfica está ocupada por el volumen principal de las páginas web. Una foto en kilobytes tiene lugar en decenas de veces más que el texto del texto A4. ¡Los gráficos deben ser optimizados! Debe usar repetir imágenes, ya que la computadora guarda los archivos descargados en carpetas temporales para ahorrar tiempo. Una imagen repetida puede servir como un "sombrero" del sitio en todas sus páginas.

Si necesita colocar imágenes grandes, puede hacerla para que estén abiertas mediante programación en el clic adicional en la ventana Nuevo navegador. Pero de forma predeterminada, el sitio debe ser fácil.

El tiempo de carga promedio de la página no debe exceder los 30 segundos a una velocidad de conexión de 28.8 Kbps. Se permite aumentar el tiempo de descarga. páginas individuales Hasta 35 segundos, pero no más del 30% del número total de páginas del sitio. Pagina principal Debe tener tiempo de descarga no más de 40 segundos.

Sobre el página web Puede usar archivos gráficos de formatos JPG, GIF y PNG. Formato de red especial de GIF: tiene un tamaño de archivo pequeño, la posibilidad de manifestación y animación suave, así como el efecto de transparencia, lo que le permite usar la imagen como "fondo de pantalla" en la página o en las tablas. Pero porque GIF contiene 256 colores Paleta, es ineficaz para almacenar fotos. JPG Floor no tiene restricciones en la profundidad del color, sino también la posibilidad de animación. Nuevo formato Los archivos de soporte y profundidad y transparencia -png, tienen un inconveniente que los viejos navegadores no lo ven. Por lo tanto, si no tiene en cuenta a los usuarios con programas obsoletos, Pingie se puede incluir en sus páginas. Para incluir un dibujo en la página, debe describir el enlace a él:

donde src (de s.uNED. rce-fuente) \u003d archivo de imagen en formato GIF, JPG o PNG que contiene una imagen.
Puede configurar el diseño mutuo de la figura y el texto para girar el align \u003d "Attribute:

Los siguientes tipos de alineación son posibles:
Align \u003d "Medio" - Relativo al centro de la línea
align \u003d "Izquierda" -Text fortalece la imagen a la derecha
Align \u003d "Derecho" - el mismo a la izquierda

Al usar la alineación izquierda o derecha, puede habilitar en la etiqueta IMG parámetro adicional Salida alrededor de la imagen para que la imagen no haya presionado cerca de su texto. El parámetro VSPACE \u003d "N": crea una indentación vertical, y HSPACE \u003d "N" - horizontalmente en el píxel n. Por lo tanto, las imágenes de etiquetas correctas escritas con un texto correcto que fluye se verán así:

Texto.

El último ancho de parámetro de la frontera. Si está presente sin significado, y simplemente en la forma de un borde de la palabra, el bordillo es dibujado por un navegador a su propia solicitud, y si es así en el ejemplo, el valor indica su ancho. El valor cero de este parámetro se usa si el archivo sirve como un hipervínculo gráfico, por su disfraz.

Información similar.