› › La página web html es. Creación de páginas Web. Aprendizaje del lenguaje HTML. Elementos de la página web: encabezado

La página web html es. Creación de páginas Web. Aprendizaje del lenguaje HTML. Elementos de la página web: encabezado

Antes de comenzar nuestro viaje a través de los tutoriales sobre la creación de sitios web con HTML y CSS, es importante comprender las diferencias entre los dos idiomas, la sintaxis de cada idioma y cierta terminología básica.

¿Qué es HTML y CSS?

HTML (HyperText Markup Language) define la estructura del contenido y su significado definiendo contenido como, por ejemplo, encabezados, párrafos o imágenes. CSS (Hojas de estilo en cascada) u Hojas de estilo en cascada es un lenguaje de presentación diseñado para diseñar la apariencia del contenido utilizando, por ejemplo, fuentes o colores.

Estos dos lenguajes, HTML y CSS, son independientes entre sí y deberían seguir siéndolo. CSS no debe escribirse dentro de un documento HTML y viceversa. Como regla general, HTML siempre representará el contenido y CSS siempre definirá su estilo.

Con esta comprensión de la diferencia entre HTML y CSS, profundicemos en HTML con más detalle.

Términos básicos de HTML

Antes de empezar a trabajar con HTML, es probable que se encuentre con términos nuevos y, a menudo, extraños. Los conocerá a todos con más detalle con el tiempo, pero por ahora, debe comenzar con los tres términos básicos de HTML: elementos, etiquetas y atributos.

Elementos

Los elementos especifican cómo definir la estructura y el contenido de los objetos en una página. Algunos de los elementos comúnmente utilizados incluyen múltiples niveles de encabezados (definidos como elementos con

antes

) y párrafos (definidos como

); se pueden agregar elementos a la lista ,

, , Y y muchos otros.

Los elementos se identifican mediante paréntesis angulares.<>, que rodea el nombre del elemento. Entonces el elemento se verá así:

etiquetas

Adición de paréntesis angulares< и >crea lo que se conoce como una etiqueta alrededor de un elemento. Las etiquetas ocurren con mayor frecuencia en pares de etiquetas de apertura y cierre.

La etiqueta de inicio marca el inicio de un elemento. Consiste en el símbolo<, затем идёт имя элемента и завершается символом >; Por ejemplo,

.

La etiqueta final marca el final de un elemento. Consiste en el símbolo< с последующей косой чертой и именем элемента и завершается символом >; Por ejemplo,

.

El contenido entre las etiquetas de inicio y final es el contenido de ese elemento. El enlace, por ejemplo, tendrá una etiqueta de apertura. y etiqueta de cierre. Lo que se encuentre entre estas dos etiquetas será el contenido del enlace.

Así que las etiquetas de enlace se verían así:

...

Atributos

Los atributos son propiedades que se utilizan para proporcionar información adicional sobre el elemento. Los atributos más comunes incluyen el atributo id, que identifica el elemento; el atributo de clase, que clasifica el elemento; el atributo src, que especifica la fuente del contenido incrustado; y el atributo href, que especifica un enlace al recurso relacionado.

Los atributos se definen en la etiqueta de apertura después del nombre del elemento. En general, los atributos incluyen un nombre y un valor. El formato de estos atributos consta del nombre del atributo seguido de un signo igual, seguido del valor del atributo entre comillas. Por ejemplo, elemento con el atributo href se vería así:

shay howe

Demostración de términos básicos de HTML

Este código mostrará el texto "Shay Howe" en una página web y al hacer clic en este texto, llevará al usuario a http://shayhowe.com. El elemento de enlace se declara con una etiqueta de inicio y etiqueta de cierre texto adjunto, así como el atributo y el valor de la dirección del enlace declarado con href="http://shayhowe.com" en la etiqueta de apertura.

Arroz. 1.01. La sintaxis HTML del esquema incluye elemento, atributo y etiqueta

Ahora que sabe qué son los elementos HTML, las etiquetas y los atributos, echemos un vistazo a nuestra primera página web juntos. Si algo parece nuevo aquí, no se preocupe, lo descifraremos sobre la marcha.

Personalización de la estructura de un documento HTML

Los documentos HTML son documentos de texto sin formato guardados con la extensión .html en lugar de .txt. Para comenzar a escribir HTML, primero necesita editor de texto que es conveniente para su uso. Desafortunadamente, esto no incluye Microsoft Word o Pages, ya que son editores complejos. Los dos editores de texto más populares para escribir HTML y CSS son Dreamweaver y Sublime Text. alternativas gratuitas Consulte también Notepad++ para Windows y TextWrangler para Mac.

Todos los documentos HTML contienen una estructura obligatoria que incluye las siguientes declaraciones y elementos: , , Y .

Declaración de tipo de documento oubicado al principio de un documento HTML y le dice a los navegadores qué versión de HTML está en uso. Ya que estaremos usando ultima versión HTML, nuestro tipo de documento será simplemente. Después de eso viene el elemento que indica el comienzo del documento.

Adentro elemento define la parte superior del documento, incluidos varios metadatos (información que acompaña a la página). Contenido dentro de un elemento no aparece en la propia página web. En su lugar, puede incluir el título del documento (que aparece en la barra de título de la ventana del navegador), enlaces a cualquier archivo externo o cualquier otro metadato útil.

Todo el contenido visible de la página web estará en el elemento . La estructura de un documento HTML típico se ve así:

¡Hola Mundo!

¡Hola Mundo!

Esta es una página web.



Demostración de la estructura de un documento HTML

Este código muestra el documento, comenzando con la declaración del tipo de documento,, seguido inmediatamente por el elemento . Adentro ir elementos Y . Elemento contiene la codificación de la página a través de la etiqueta y el título del documento a través del elemento . Elemento <body>incluye encabezado a través del elemento <h1>y un párrafo de texto a través de<р>. Porque tanto el encabezado como el párrafo están anidados dentro del elemento <body>, son visibles en la página web.</p><p>Cuando un elemento está dentro de otro elemento, también conocido como elemento anidado, es una buena idea agregarle relleno para mantener la estructura del documento bien organizada y legible. En el código anterior, ambos elementos <head>Y <body>anidado y desplazado dentro del elemento <html>. La estructura de acolchado para elementos continúa con nuevos elementos añadidos en el interior <head>Y <body> .</p><h3>Elementos de cierre automático</h3><p>En el ejemplo anterior, el elemento <meta>fue la única etiqueta que no incluía una etiqueta de cierre. No te preocupes, esto fue hecho a propósito. No todos los elementos consisten en etiquetas de apertura y cierre. Algunos elementos simplemente reciben contenido o comportamiento a través de atributos dentro de la misma etiqueta. <meta>es uno de esos elementos. Contenido del elemento <meta>en el ejemplo se asigna utilizando el atributo y el valor charset. Otros elementos típicos de cierre automático incluyen:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>La estructura de conversión, hecha con una declaración de tipo de documento.<!DOCTYPE html>y elementos <html> , <head>Y <body>, es bastante común. Queremos mantener esta estructura de documento a mano, ya que la usaremos con frecuencia al crear nuevos documentos HTML.</p><h3>Validación de código</h3><p>No importa cuán cuidadosamente escribamos nuestro código, los errores son inevitables. Por suerte, al escribir HTML y CSS, tenemos validadores para comprobar nuestro trabajo. El W3C ofrece validadores de HTML y CSS que escanean el código en busca de errores. Validar nuestro código no solo nos ayuda a renderizar correctamente en todos los navegadores, sino que también nos ayuda a aprender las mejores prácticas al escribir código.</p><h2>en la práctica</h2><p>Como diseñadores web y desarrolladores front-end, tenemos el lujo de asistir a una serie de excelentes conferencias dedicadas a nuestro oficio. Vamos a organizar nuestra propia Conferencia de Estilos y crearemos un sitio web para ella durante las próximas lecciones. ¡Como esto!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Cambiemos un poco, alejémonos de HTML y echemos un vistazo a CSS. Recuerda, HTML define el contenido y la estructura de nuestras páginas web, mientras que CSS define su estilo visual y apariencia.</p><h2>Términos básicos de CSS</h2><p>Además de los términos HTML, hay algunos términos básicos de CSS con los que deberá familiarizarse. Estos términos incluyen selectores, propiedades y valores. Al igual que con la terminología HTML, cuanto más trabaje con CSS, estos términos se volverán más naturales para usted.</p><h3>Selectores</h3><p>Al agregar elementos a una página web, se pueden diseñar con CSS. Un selector determina a qué elemento o elementos en HTML apuntar y aplicarles estilos (como color, tamaño y posición). Los selectores pueden incluir una combinación de diferentes métricas para seleccionar elementos únicos, dependiendo de cuán específicos queramos ser. Por ejemplo, queremos seleccionar todos los párrafos de una página, o seleccionar solo un párrafo en particular.</p><p>Los selectores suelen estar asociados con un valor de atributo, como una identificación o un valor de clase, o un nombre de elemento, como <h1>o<р> .</p><p>En CSS, los selectores se emparejan con llaves () que encierran los estilos aplicados al elemento seleccionado. Este selector apunta a todos los elementos <span><p>PAG(...)</p><h3>Propiedades</h3><p>Una vez que se selecciona un elemento, la propiedad determina los estilos que se le aplicarán. Los nombres de las propiedades vienen después del selector, dentro <a href="https://5visa.ru/es/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">llaves</a>() e inmediatamente antes de los dos puntos. Hay muchas propiedades que podemos usar, como fondo, color, tamaño de fuente, alto y ancho, y otras propiedades que se agregan comúnmente. En el siguiente código, definimos las propiedades de color y tamaño de fuente que se aplican a todos los elementos <span><p>P ( color: ...; tamaño de fuente: ...; )</p><h3>Valores</h3><p>Hasta ahora, solo hemos seleccionado el elemento a través del selector y determinado qué estilo nos gustaría aplicarle a través de las propiedades. Ahora podemos establecer el comportamiento de esta propiedad a través de un valor. Los valores se pueden especificar como texto entre dos puntos y un punto y coma. A continuación seleccionamos todos los elementos <p >Y establezca el valor de la propiedad de color en naranja y el valor de la propiedad de tamaño de fuente en 16 píxeles.</p><p>P (color: naranja; tamaño de fuente: 16px;)</p><p>Para probar, en CSS nuestro conjunto de reglas comienza con un selector, seguido inmediatamente por llaves. Dentro de estas llaves hay declaraciones que consisten en pares de propiedades y valores. Cada declaración comienza con una propiedad, seguida de dos puntos, el valor de la propiedad y, finalmente, un punto y coma.</p><p>Una práctica común es cambiar un par de propiedades y valores entre llaves. Al igual que con HTML, la sangría ayuda a mantener nuestro código organizado y claro.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Arroz. 1.03. La estructura de sintaxis CSS incluye selector, propiedades y valores</p><p>Conocer algunos términos básicos y la sintaxis general de CSS es un gran comienzo, pero tenemos algunos puntos más que aprender antes de profundizar. En particular, debemos observar más de cerca cómo funcionan los selectores en CSS.</p><h2>Trabajar con selectores</h2><p>Los selectores, como se mencionó anteriormente, indican qué elementos HTML se diseñarán. Es importante entender completamente cómo usar los selectores y cómo funcionan. El primer paso debe ser conocer <a href="https://5visa.ru/es/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">varios tipos</a> selectores. Comenzaremos con los selectores más básicos: selectores de tipo, clases e identificadores.</p><h3>Selectores de tipo</h3><p>Los selectores de tipo apuntan a los elementos por su tipo. Por ejemplo, si queremos apuntar a todos los elementos <div>tenemos que usar el selector div. El siguiente código muestra el selector de tipo para elementos <div>, así como el HTML correspondiente.</p><p>div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Clases</h3><p>Las clases le permiten seleccionar un elemento en función del valor del atributo de clase. Los selectores de clase son un poco más específicos que los selectores de tipo, ya que seleccionan un grupo específico de elementos en lugar de todos los elementos del mismo tipo.</p><p>Las clases le permiten aplicar el mismo estilo a varios elementos a la vez utilizando el mismo valor de atributo de clase para varios elementos.</p><p>En CSS, las clases se indican con un punto inicial seguido del valor del atributo de clase. El selector de clase a continuación selecciona todos los elementos que contienen el valor de atributo de clase impresionante, incluidos los elementos <div>Y <span><p>Impresionante (...)</p><p> <div class="awesome">...</div> </p><h3>Identificadores</h3><p>Los identificadores son incluso más precisos que las clases porque solo se dirigen a un elemento único a la vez. Así como los selectores de clase usan el valor del atributo de clase, los identificadores usan el valor del atributo id como selector.</p><p>Independientemente del tipo de elemento que se represente, el valor del atributo id solo se puede usar una vez por página. Si los identificadores están presentes, deben reservarse para elementos importantes.</p><p>En CSS, los identificadores se indican con un símbolo hash al frente, seguido del valor del atributo id. Aquí id seleccionará solo el elemento que contiene el atributo id con el valor shayhowe.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Selectores adicionales</h3><p>Los selectores son extremadamente potentes y los descritos anteriormente se encuentran entre los selectores más comunes con los que nos encontramos. Estos selectores son solo el comienzo. Hay muchos selectores avanzados y están fácilmente disponibles. Una vez que se sienta cómodo con ellos, no tenga miedo de mirar también algunos de los más avanzados.</p><p>Bien, empecemos a armar todo. Agregamos elementos a la página dentro de nuestro HTML, luego podemos seleccionar esos elementos y diseñarlos con CSS. Ahora conectemos los puntos entre HTML y CSS para que los dos lenguajes funcionen juntos.</p><h2>Conexión CSS</h2><p>Para hacer que nuestro CSS hable con nuestro HTML, debemos apuntar al archivo CSS del HTML. Es una buena práctica incluir todos nuestros estilos en un archivo externo al que se apunta dentro del elemento. <head>nuestro documento HTML. El uso de un CSS externo nos permite aplicar los mismos estilos en todo el sitio y realizar cambios rápidamente.</p><h3>Otras opciones para agregar CSS</h3><p>Otras opciones para incluir CSS incluyen el uso de estilos en línea y en línea. Puede ver estas opciones en la vida real, pero generalmente están mal vistas ya que hacen que las actualizaciones del sitio sean engorrosas y engorrosas.</p><p>Para crear nuestra hoja de estilo externa, nuevamente queremos usar el editor de texto seleccionado para crear uno nuevo. <a href="https://5visa.ru/es/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">Archivo de texto</a> con extensión .css. Nuestro archivo CSS debe guardarse en la misma carpeta o subcarpeta que nuestro archivo HTML.</p><p>Dentro de un elemento <head>elemento aplicado <link>, que define la relación entre los archivos HTML y CSS. Dado que estamos vinculando a CSS, usamos el atributo rel con el valor de la hoja de estilo para indicar su relación. Además, el atributo href se usa para indicar la ubicación o la ruta al archivo CSS.</p><p>En el siguiente documento HTML de ejemplo, el elemento <head>apunta a un archivo de estilo externo.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Para que CSS se represente correctamente, el valor de la ruta del atributo href debe coincidir directamente con el lugar donde se guarda el archivo CSS. En el ejemplo anterior, el archivo main.css se almacena en la misma ubicación que el archivo HTML, también conocida como carpeta raíz.</p><p>Si el archivo CSS se encuentra en una subcarpeta, el valor del atributo href debería corresponder a esa ruta en consecuencia. Por ejemplo, si nuestro archivo main.css se guardó en una subcarpeta llamada stylesheets, el valor del atributo href sería stylesheets/main.css. Esto usa una barra diagonal (o barra diagonal) para indicar un movimiento a una subcarpeta.</p><p>En <a href="https://5visa.ru/es/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">este momento</a> nuestras páginas están empezando a cobrar vida, de forma lenta pero segura. Todavía no hemos profundizado demasiado en CSS, pero es posible que haya notado que algunos elementos tienen estilos que no declaramos en nuestro CSS. Es el navegador el que impone sus propios estilos preferidos sobre estos elementos. Afortunadamente, podemos anular estos estilos con bastante facilidad, lo que haremos a continuación con un reinicio de CSS.</p><h2>Usando el restablecimiento de CSS</h2><p>Cada navegador tiene sus propios estilos predeterminados para <a href="https://5visa.ru/es/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">varios elementos</a>. Cómo <a href="https://5visa.ru/es/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> muestra encabezados, párrafos, listas, etc., puede diferir de cómo lo hace <a href="https://5visa.ru/es/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">explorador de Internet</a>. El restablecimiento de CSS se ha vuelto ampliamente utilizado para garantizar la compatibilidad entre navegadores.</p><p>Reset CSS toma todos los elementos HTML básicos con un estilo determinado y proporciona un estilo uniforme en todos los navegadores. Estos restablecimientos suelen incluir la eliminación de tamaños, relleno, márgenes o estilos adicionales para reducir estos valores. Dado que la cascada de CSS funciona de arriba a abajo (más sobre eso pronto), nuestro reinicio debe estar en la parte superior de nuestro estilo. Esto asegura que estos estilos se lean primero y listo. <a href="https://5visa.ru/es/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">diferentes navegadores</a> trabajará desde un punto de referencia común.</p><p>Hay un montón de restablecimientos de CSS diferentes disponibles para aplicar, todos tienen su propio <a href="https://5visa.ru/es/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">fortalezas</a>. Uno de los más populares de Eric Meyer, su restablecimiento de CSS está adaptado para incluir nuevos elementos HTML5.</p><p>Si se siente un poco aventurero, también está Normalize.css de Nicholas Gallagher. Normalize.css no se enfoca en usar un restablecimiento completo en todos los elementos principales, sino en establecer estilos comunes para esos elementos. Esto requiere una comprensión más profunda de CSS, además de saber lo que quiere de los estilos.</p><h3>Pruebas y compatibilidad entre navegadores</h3><p>Como se mencionó anteriormente, los diferentes navegadores representan los elementos de manera diferente. Es importante reconocer el valor de la compatibilidad y las pruebas entre navegadores. Los sitios no tienen que verse exactamente iguales en todos los navegadores, pero deben estar cerca. Qué navegadores desea admitir y en qué medida es una decisión que deberá tomar en función de lo que sea mejor para su sitio.</p><p>Hay algunas cosas a tener en cuenta al escribir CSS. La buena noticia es que es factible y requiere un poco de paciencia para dominarlo.</p><h2>en la práctica</h2><p>Volvamos a donde lo dejamos por última vez en el sitio de nuestra conferencia y veamos cómo podemos agregar algo de CSS.</p><ol><li>Dentro de nuestra carpeta de conferencias de estilos, creemos una nueva carpeta llamada activos. Aquí es donde almacenaremos todos los activos de nuestro sitio web, como estilos, imágenes, videos, etc. Para nuestros estilos, sigamos adelante y agreguemos otra carpeta de hojas de estilo dentro de la carpeta de activos.</li><li>Usando un editor de texto, cree un nuevo archivo llamado main.css y guárdelo en la carpeta de hojas de estilo que acabamos de crear.</li><p>Mirando el archivo index.html en el navegador, podemos ver que los elementos <h1>Y <p>Ya contiene el estilo predeterminado. En particular, tienen un tamaño de fuente y un espacio únicos a su alrededor. Usando el reinicio de Eric Meyer, podemos suavizar estos estilos, permitiendo que cada uno de ellos comience desde la misma base. Para hacer esto, eche un vistazo a su sitio web, copie el código y péguelo en la parte superior de nuestro archivo main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licencia: ninguna (dominio público) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar; alineación vertical: línea de base ; ) /* Restablecimiento de la función de visualización de HTML5 para navegadores más antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( pantalla: bloque; ) cuerpo ( altura de línea: 1; ) ol, ul (list-style: none; ) blockquote, q (comillas: none; ) blockquote:antes, blockquote:después, q:antes, q:después (contenido: ""; contenido: ninguno; ) table (border- colapso: colapso; espaciado de borde: 0; )</p><li>Nuestro archivo main.css está comenzando a tomar forma, así que incluyámoslo en nuestro archivo index.html. Abra index.html en un editor de texto y agregue un elemento <link>V <head>, justo después del elemento <title> .</li><li>Porque estamos apuntando estilos a través del elemento. <link>agregue un atributo rel con un valor de hoja de estilo.</li><p>También incluiremos un enlace a nuestro archivo main.css usando el atributo href. Recuerde, nuestro archivo main.css se guarda en la carpeta de hojas de estilo, que se encuentra dentro de la carpeta de activos. Entonces, el valor del atributo href, que es la ruta a nuestro archivo main.css, debe ser assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Conferencia de Estilos

Es hora de probar nuestro trabajo y ver cómo encajan nuestro HTML y CSS. Abrir el archivo index.html (o actualizar la página si ya está abierta) en el navegador debería mostrar un resultado ligeramente diferente al anterior.

Arroz. 1.04. Nuestro sitio web de Styles Conference con reinicio de CSS

Demostración y código fuente

A continuación puede ver el sitio web de Styles Conference en su estado actual, así como descargar fuente sitio en este momento.

Resumen

Entonces, ¡todo está bien! Hemos dado algunos pasos importantes en este tutorial.

Solo piense, ahora conoce los conceptos básicos de HTML y CSS. A medida que continuemos y pase más tiempo escribiendo HTML y CSS, se sentirá mucho más cómodo trabajando con estos dos lenguajes.

Recuerde que hemos considerado lo siguiente:

  • La diferencia entre HTML y CSS.
  • Introducción a los elementos HTML, etiquetas y atributos.
  • Configurando la estructura de tu primera página web.
  • Introducción a los selectores, propiedades y valores de CSS.
  • Trabajando con selectores CSS
  • Puntero a CSS desde HTML.
  • Importancia del reinicio de CSS.

Ahora echemos un vistazo más de cerca a HTML y conozcamos un poco la semántica.

Recursos y enlaces

  • Términos HTML comunes a través de Scripting Master
  • Términos y definiciones de CSS a través de Impressive Webs
  • Herramientas CSS: restablecer CSS a través de Eric Meyer

La mayor parte del contenido en Internet son páginas web. Históricamente, este es el primer tipo de documento destinado a colocarse en el espacio de la red virtual, pero aún conserva su relevancia y prácticamente no tiene formatos competidores. ¿Cuál es la estructura de las páginas web? ¿Qué herramientas de desarrollo web se utilizan para crearlos?

¿Qué es una página Web?

“Enumera los elementos básicos de una página web”, nos dice un examinador en una clase de informática. ¿Qué podemos decirle en respuesta? En primer lugar, hablemos de lo que es una página web en principio.

De acuerdo con la definición generalmente aceptada entre los especialistas en TI, se trata de un documento que debe abrirse en un programa especializado, un navegador, y que contiene datos para mostrar varios contenidos útiles en una pantalla de computadora utilizando el tipo de software apropiado: textos, enlaces, gráficos, videos, música, etc. etc. Una página web es un documento de texto. Los datos relevantes para el navegador son letras, números y Símbolos especiales, utilizados como elementos del lenguaje de marcas - HTML. Es con su ayuda que el creador de la página web "explica" al navegador cómo mostrar este o aquel contenido en la pantalla.

Lugar y papel de las páginas web en la estructura de los sitios.

¿Podemos decir que una página Web es el componente principal de un sitio web? Esto es parcialmente cierto. Sin embargo, como señalamos anteriormente, una página web es solo un documento de texto. El sitio, por regla general, también contiene imágenes, videos y otros elementos multimedia. Una página web no puede contenerlos, pero en su estructura puede contener enlaces a ellos. Por lo tanto, una página web puede llamarse el componente principal del sitio en términos del papel principal en la visualización de contenido virtual para los usuarios.

En casos excepcionales, por supuesto, el documento en cuestión será el único componente del sitio, si por alguna razón no proporciona la visualización de gráficos, videos y otros elementos multimedia. En particular, los primeros sitios, cuando aparecieron por primera vez los lenguajes de marcado de las páginas web, no incluían el contenido correspondiente. Ante los ojos del usuario solo había texto y enlaces.

El principio de usar hipertexto.

Así, una página web es un documento redactado en lenguaje HTML, que se utiliza para marcar hipertexto. Pero, ¿qué es este fenómeno? ¿Qué es el hipertexto? Sin ahondar demasiado en la teoría, señalamos que se trata de un texto que de una forma u otra te permite llegar acceso rápido a otro a través de enlaces. En un libro normal, esto es imposible: hay "texto sin formato". Para acceder a la página deseada, el lector debe dar varias vueltas, habiendo leído previamente el contenido o las notas al pie. En el modo de "hipertexto", la parte principal del trabajo la realiza la computadora, debido a la información reflejada en los elementos HTML de la página.

Si un profesor de informática nos dice: "Enumere los elementos principales de una página web", entonces podemos comenzar correctamente a hablar sobre los componentes del documento correspondiente, que se crean utilizando el lenguaje de marcado HTML. Por lo tanto, para empezar, veamos algunos puntos teóricos sobre HTML.

Estructura del lenguaje HTML: etiquetas

¿Cómo lee un navegador los datos necesarios sobre una página web de un documento HTML? Muy simple.

Elementos esenciales idioma dado son etiquetas. En la mayoría de los casos, están emparejados: hay uno de apertura y uno de cierre. Los primeros se denotan usando solo paréntesis angulares. Los segundos son similares, pero el segundo corchete está precedido por una barra oblicua: el símbolo /. El navegador puede reconocerlos y, por lo tanto, muestra el contenido de las páginas web sin ningún problema de acuerdo con los algoritmos creados por el desarrollador del documento.

La etiqueta de apertura generalmente se escribe en letras mayúsculas, la etiqueta de cierre se escribe en minúsculas. Este es un estándar que se ha establecido entre los profesionales de TI. El navegador ciertamente reconocerá el comando HTML en cualquier letra, pero aún se recomienda a los desarrolladores web que se ciñan al esquema de escritura de etiquetas marcado. Esto facilitará, por ejemplo, la realización de una página web por parte de otros especialistas.

Atributos

Otros elementos importantes del lenguaje HTML son los atributos. Con su ayuda, el creador de una página web puede establecer las propiedades del contenido, por ejemplo, la altura de la fuente, su color, la posición relativa a la página. Lo mismo se aplica a las imágenes, videos y otros componentes multimedia. Los atributos se escriben dentro de la etiqueta de apertura.

Contenido

Entre las etiquetas de apertura y cierre se encuentra el siguiente componente clave de una página web, el contenido. Este es, de hecho, el mismo contenido que debe mostrarse frente al usuario en la pantalla. Puede ser texto, enlace, imagen, video u otro elemento multimedia.

Elementos de la página web

“¡Entonces enumere los elementos básicos de una página web, finalmente!” - repite el profesor. "Con mucho gusto", le respondemos. ¿Qué se incluye en la estructura del tipo de documentos bajo consideración? Acordemos que consideraremos este aspecto en el contexto de los elementos HTML de la página web. Es decir, su visualización en el navegador, lo que el usuario ve en la pantalla, nos interesará en menor medida. El hecho es que los algoritmos HTML correspondientes, en base a los cuales el programa muestra el contenido de la misma manera, pueden ser diferentes. Y esta es la peculiaridad del lenguaje HTML: la imagen deseada en la página Web se puede mostrar diferentes caminos. Al mismo tiempo, pueden ser equivalentes en términos de costos de mano de obra del creador de la página web, o pueden implicar una cantidad diferente de esfuerzo y tiempo para su implementación.

Elementos de la página web: encabezado

Los elementos estándar de una página web, por sorprendente que parezca, están presentes en cantidades muy pequeñas. De hecho, solo hay dos: el encabezado y el cuerpo del documento. Sin embargo, cada uno de ellos puede tener una estructura bastante compleja.

¿Cuáles son los detalles del encabezado? Se encuentra en la parte superior de la página web. El HTML que genera el encabezado generalmente asume que solo el texto está "encriptado", pero si es necesario, también se pueden colocar pequeñas inserciones gráficas en el elemento correspondiente. Y esto, de hecho, es todo lo que se puede decir del título. Parecería que su papel en la estructura del documento correspondiente es insignificante. Pero no lo es. Los títulos de las páginas web son muy importantes en términos de indexación de sitios en los motores de búsqueda: Yandex, Google. Este elemento debe ser completamente relevante para el contenido de la página web, así como las especificidades temáticas del sitio.

¿Cómo se captura el título de una página web usando HTML? Muy simple. Primero, se escribe la etiqueta de apertura, que siempre se parece a HEAD con corchetes angulares, luego el contenido del encabezado, después de eso, la etiqueta de cierre. Están escritos, por supuesto, en la parte superior del documento web.

El título de un documento web puede incluir una serie de elementos adicionales. A veces, el formato de una página web puede requerir que el texto se muestre en una codificación particular. ¿Cómo asegurar que el documento web cumple con este criterio? Muy simple. La estructura del encabezado del documento debe contener algoritmos HTML que indiquen al navegador que use una codificación de idioma específica, por ejemplo, cirílico. Los comandos correspondientes se colocan dentro de la etiqueta META, que, como otras, puede ser de apertura y cierre.

Cuerpo principal de la página web

El cuerpo principal de un documento web se abre con la etiqueta BODY y se cierra con el elemento correspondiente, que incluye una barra inclinada. Al mismo tiempo, puede haber una gran cantidad de comandos adicionales del lenguaje de marcado de hipertexto entre las etiquetas de apertura y cierre. Esto se debe al hecho de que la parte principal de la página web contiene su contenido útil: textos, enlaces, gráficos, videos, varios formularios para completar.

Cada uno de los tipos de contenido respectivos tiene sus propias etiquetas. La estructura de la parte principal de un documento web puede contener comandos HTML que también se pueden usar para dar formato al texto, por ejemplo, dando a la fuente un color, tamaño y otras propiedades específicas.

Echemos un vistazo a los detalles de algunas etiquetas HTML de uso común. En realidad, también forman los elementos principales de la página web.

Etiquetas HTML básicas

Entonces, para estudiar en detalle cuáles son los elementos de una página Web, estudiemos con más detalle la esencia de las etiquetas HTML básicas. Ya hemos enumerado algunos de ellos anteriormente, en particular, aquellos con los que el navegador lee los encabezados de las páginas web y determina dónde se encuentra el cuerpo principal del documento.

La etiqueta P es bastante común y, al igual que otros elementos similares del lenguaje de marcado de hipertexto, puede abrirse y cerrarse. Esta etiqueta le permite dar formato a un solo párrafo de un documento. Puede, por ejemplo, establecer un tipo de fuente o color específico para él. Sin embargo, esto se hace con la ayuda de una etiqueta adicional: FONT. Al mismo tiempo, se colocará dentro del que indica los límites del párrafo; esto le permitirá no distribuir el comando HTML que refleja el tipo de fuente preferido a otros elementos de la página web.

Las tablas se crean utilizando la etiqueta TABLE. Usando los atributos correspondientes, puede determinar el número requerido de columnas y filas, establecer su ancho, los detalles de los bordes, el tamaño y el color de la fuente del texto en la tabla.

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

Los enlaces a otros documentos o archivos web se indican mediante la etiqueta A. Como regla general, los atributos se encuentran dentro de ella que indican el hecho de que la estructura de la página web es un hipervínculo. Esto indica el documento, archivo o sitio al que conduce.

Una etiqueta común es FRAMESET. Con él, puede dividir el espacio de una página web en varias áreas: marcos. En cada uno de ellos es posible separar documentos web. Es decir, los marcos te permiten colocar correctamente dos o más páginas en la misma pantalla al mismo tiempo.

La historia sobre los elementos clave de las páginas web y la historia posterior sobre los medios para formatearlas utilizando el lenguaje HTML: algo así será el algoritmo de nuestra respuesta a la pregunta que nos hizo el examinador. Si se puso en contacto con nosotros, diciendo "enumere los elementos principales de la página web", entonces, utilizando la metodología adecuada, tendremos todas las posibilidades de revelar el tema. Es decir, por el término "elementos" podemos entender los componentes clave de la estructura de un documento web, o tipos de contenido: texto, imágenes, tablas, marcos, enlaces que el webmaster forma utilizando una herramienta como el lenguaje HTML.

Especificaciones de las herramientas de desarrollo web.

Además de lo dicho, podemos aclarar que existe una enorme cantidad de etiquetas y atributos proporcionados por los estándares HTML. Además de HTML, los desarrolladores web pueden utilizar herramientas de formato adicionales para documentos de hipertexto. Por ejemplo, con JavaScript puede crear páginas web dinámicas, es decir, aquellas en las que el contenido se actualiza constantemente (tanto debido a las acciones del propio usuario como de acuerdo con algoritmos preescritos en scripts).

Sería útil agregar que un desarrollador web puede usar lenguajes de programación completos en su trabajo, como, por ejemplo, Perl, PHP, Java, Python, con la ayuda de los cuales las posibilidades de trabajar con documentos de hipertexto se vuelven incluso más ancho. La necesidad de esto puede deberse al hecho de que las áreas de aplicación de las tecnologías web hoy en día son muy diferentes. Las tareas a las que se enfrentan los desarrolladores modernos pueden ser bastante complejas. Por ejemplo, a veces se requiere traducir páginas web escritas en ruso al inglés. En este caso, el conjunto de herramientas del desarrollador será el más diverso.

Objetivo del trabajo: familiarización de los estudiantes con los conceptos básicos del lenguaje HTML, la estructura de un documento HTML, etiquetas obligatorias, comentarios, métodos de formato de texto, estilos físicos y lógicos, y la adquisición de habilidades en la creación de documentos web estáticos simples.

En el laboratorio, utilizaremos el editor de texto Notepad para preparar archivos HTML y el navegador Internet Explorer como herramienta para monitorear lo que se ha hecho.

Información teórica

Conceptos básicos

hipertexto- una estructura de información que le permite establecer relaciones semánticas entre elementos de texto en la pantalla de una computadora de tal manera que puede hacer transiciones fácilmente de un elemento a otro. En la práctica, en el hipertexto, algunas palabras se resaltan subrayándolas o coloreándolas de un color diferente (hipervínculos). Resaltar una palabra indica la presencia de una conexión de esta palabra con algún documento en el que se considera con más detalle el tema asociado con la palabra resaltada. Un solo documento HTML se llama:

documento HTML;

documento web

Página web.

Estas páginas suelen estar en formato HTM o HTML.

Un grupo de páginas Web pertenecientes a un autor oa un IEDI e interconectadas por hipervínculos comunes forman una estructura denominada sitio Web o Sitio Web. Cada página HTML tiene su propia URL única: adpagmiC En Internet.

Marco (marco) es un término con dos significados. El primer valor es el área del documento con sus barras de desplazamiento. La segunda es una imagen 0DNN0H en el archivo gráfico de animación (fotograma).

subprograma (subprograma) - un programa que se transfiere a la computadora del cliente como un archivo separado y se inicia al ver una página web.

Guion (Guion) , o script, es un programa incluido en una página web para mejorar sus capacidades. El navegador Internet Explorer en ciertas situaciones muestra el mensaje: "¿Permitir scripts en la página?". En este caso, se entienden los scripts.

CGI (Común Puerta Interfaz) - el nombre general de los programas que, trabajando en el servidor, le permiten expandir las capacidades de las páginas web. Sin tales programas es imposible crear páginas web interactivas.

Navegador (Navegador) - un programa para ver páginas Web.

Elemento- la construcción del lenguaje HTML. Puede pensar en él como un contenedor que contiene datos y le permite formatearlo de cierta manera. Cualquier página Web es un conjunto de elementos. Una de las ideas principales del hipertexto es la capacidad de anidar elementos. Por ejemplo:

<Начало элемента>El contenido del elemento, los datos que formatea el elemento.

Etiqueta(en inglés etiqueta - etiqueta, descriptor, etiqueta) - el marcador de inicio o fin de un elemento. Las etiquetas definen el alcance de los elementos y separan los elementos entre sí. En el texto de una página web, las etiquetas se encierran entre corchetes angulares.< >, y la etiqueta final siempre va seguida de una barra inclinada. Texto que no está entre estos corchetes (< >) es visible en su totalidad cuando se ve en un navegador. Por ejemplo:

<Начальный тег>El contenido del elemento, los datos que

formatea el elemento

<Р>Este texto irá en un párrafo aparte.

Cualquier página Web es un conjunto de elementos. Uno de los principios básicos de HTML es la capacidad de anidar un elemento dentro de otro.

Atributo- parámetro o propiedad del elemento. Los atributos se encuentran dentro de la etiqueta de inicio y están separados entre sí por espacios. Si el cemento contiene texto, los atributos pueden establecer el color y el tamaño de la fuente, la alineación párrafo de texto etcétera. Si el elemento contiene una imagen, los atributos pueden establecer el tamaño de la imagen, la presencia y el tamaño del marco alrededor de la imagen, etc.

<Р align="center">Este texto se alineará al centro de la pantalla.

En este ejemplo, nuevamente hay una etiqueta que define el principio y el final de un párrafo. Sin embargo, la etiqueta de inicio contiene el atributo de alineación, que establece la alineación del texto en el centro de la pantalla.

Nota:

Cualquier información útil debe estar entre las etiquetas de inicio y final que indican su formato;

Todos los atributos se encuentran en la etiqueta de inicio;

Para mayor comodidad, puede escribir la etiqueta de inicio con una letra mayúscula (mayúscula) (P) y la etiqueta final con una letra minúscula (pequeña) (/p), aunque esto no es necesario;

No todos los elementos requieren una etiqueta de fin (cierre);

Comience a escribir cada nuevo elemento en una nueva línea. Los elementos anidados están sangrados (tabulador). Nuevamente, esto no es obligatorio, pero hará que su trabajo sea mucho más fácil.

Una página web es un documento con formato especial que puede incluir texto, gráficos, hipervínculos, audio, animación y video.

Varias páginas web que comparten un tema, diseño y enlaces comunes, y generalmente se encuentran en el mismo servidor web, forman un sitio web.

Sitio web ait (del inglés. sitio web: web- "web, red" y sitio- "lugar", literalmente "lugar, segmento, parte de la red") - un conjunto documentos electronicos(archivos) de una persona u organización en Red de computadoras, combinados bajo una dirección (nombre de dominio o dirección IP).

Todos los sitios juntos formanLa red mundial, donde la comunicación (web) une segmentos de información de la comunidad mundial en un todo único: una base de datos y comunicaciones a escala planetaria. Para el acceso directo de los clientes a los sitios en los servidores, se desarrolló un protocolo especialmente http .

Un sitio web está estructurado como una revista que contiene información sobre un tema o cuestión. Así como una revista se compone de páginas impresas, un sitio web se compone de páginas web generadas por computadora.

El programa que muestra una página web se llama navegador web.

La creación de sitios web se implementa utilizando el lenguaje de marcado de documentos de hipertexto HTML. La tecnología HTML consiste en que los caracteres de control (etiquetas) se insertan en un documento de texto sin formato y como resultado obtenemos una página web. El navegador, al cargar una página Web, la presenta en pantalla en la forma especificada por las etiquetas.

HTML permite:

Formateo de texto

incluir imágenes, multimedia en el documento;

Este lenguaje crea enlaces de hipertexto a otras páginas web.

HTML se utiliza para crear el contenido de información de un archivo y para definir la estructura y el formato de las páginas web. Dado que los archivos HTML son archivos de texto sin formato, dicho archivo se puede enviar a prácticamente cualquier computadora.

Para crear páginas web, se utilizan editores de texto simples que no incluyen caracteres de control de formato de texto en el documento que se está creando. Como tal editor en Windows, puede usar aplicación estándar"Computadora portátil".

Normalmente, un archivo de página web tiene la extensión .html o .htm.

Además, hay muchas tecnologías en las que los pasos principales para crear sitios ya están automatizados, solo queda hacer cambios de acuerdo con su tema.

Ver una página HTML es tan simple como escribir su URL en la barra de direcciones de su navegador web y luego seguir los hipervínculos. Pero este es precisamente el problema principal: ¿cómo averiguar la dirección de la página? La mayoría de las veces sucede que sabe lo que necesita encontrar, pero no sabe exactamente dónde buscar. Para resolver este problema, existen motores de búsqueda especiales. Desde el punto de vista del usuario, sistema de busqueda es un sitio normal página de inicio que contiene enlaces a otros sitios divididos por encabezados ("Deporte", "Negocios", "Informática", etc.). Además, el motor de búsqueda permite al usuario ingresar múltiples palabras clave y devuelve enlaces a páginas que contienen esas palabras clave.

Sitio web

Sitio web (ing. Sitio web, de web - web y sitio - "lugar") - un conjunto de documentos de una persona u organización privada unidos bajo una dirección en una red informática. De forma predeterminada, se supone que el sitio está ubicado en Internet. Todos los sitios web de Internet forman colectivamente la World Wide Web. El protocolo HTTP fue especialmente diseñado para el acceso directo de clientes a sitios web en servidores. Los sitios web también se conocen como la representación en Internet de una persona u organización. Cuando dicen "tu propia página en Internet", se refiere a un sitio web completo o una página personal como parte del sitio de otra persona. Además de sitios web en Internet, también están disponibles sitios WAP para teléfonos móviles.

Inicialmente, los sitios web eran colecciones de documentos estáticos. Actualmente, la mayoría de ellos se caracterizan por su dinamismo e interactividad. Para tales casos, los expertos usan el término aplicación web: listo paquete de software para solucionar los problemas del sitio web. Una aplicación web es parte de un sitio web, pero una aplicación web sin datos es técnicamente solo un sitio web.

En la mayoría de los casos en Internet, un sitio web corresponde a un nombre de dominio. Precisamente según nombres de dominio Los sitios están identificados en red global. Son posibles otras opciones: un sitio en varios dominios o varios sitios bajo un dominio. Por lo general, varios dominios usan sitios grandes (portales web) para separar lógicamente los diferentes tipos de servicios proporcionados (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). También hay casos frecuentes de asignación de dominios separados para diferentes paises o idiomas. Por ejemplo, google.ru y google.fr son lógicamente un sitio de Google en diferentes idiomas, pero técnicamente son sitios diferentes. Combinar varios sitios bajo un dominio es típico para alojamiento gratuito. Para identificar sitios en la dirección, después de especificar el host, hay una tilde y el nombre del sitio: ejemplo.com/~nombre-de-mi-sitio/.



Populares en la categoría:
Las aplicaciones de Google no se instalarán en Android, no se puede configurar la carpeta predeterminada
Las aplicaciones de Google no se pueden instalar en Android...
leer
mozilla firefox modo seguro
mozilla firefox modo seguro
leer
Descripción general del servicio
Descripción general del servicio "Lecciones de inglés" de Beeline
leer
¿Qué es mejor computadora portátil o computadora de escritorio?
¿Qué es mejor computadora portátil o computadora de escritorio?
leer

últimos artículos
Restaurar sistema de Windows
leer
¿Cómo instalar salva para GTA San Andreas?
leer
Descargar mta para mapear a samp
leer
¿Grand Theft Auto: Vice City no arranca?
leer
Abra el menú de la izquierda ansi. Viaje a través...
leer
Cómo configurar un temporizador de apagado de la computadora
leer
Ejemplos de funciones de texto en Excel Any...
leer
Archivos copiando lentamente
leer
Arriba