› › 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 las lecciones de creación de sitios web HTML y CSS, es importante comprender las diferencias entre los dos idiomas, la sintaxis de cada idioma y cierta terminología básica.

¿Qué son HTML y CSS?

HTML (HyperText Markup Language) define la estructura del contenido y su significado, definiendo contenidos como encabezados, párrafos o imágenes. CSS (Cascading Style Sheets) es un lenguaje de presentación creado 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á el estilo.

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

Términos HTML básicos

Antes de empezar a trabajar con HTML, es probable que se encuentre con algunos términos nuevos y, a menudo, extraños. Te familiarizarás con todos ellos con el tiempo, pero por ahora deberías comenzar con los tres términos HTML básicos: 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 títulos (definidos como elementos con

antes

) y párrafos (definidos como

); Puedes incluir elementos en la lista. ,

, , Y y muchos otros.

Los elementos se identifican mediante corchetes angulares.<>, rodeando el nombre del elemento. Entonces el elemento se verá así:

Etiquetas

Agregar corchetes angulares< и >crea lo que se conoce como una etiqueta alrededor del elemento. Las etiquetas suelen aparecer en pares de etiquetas de apertura y cierre.

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

.

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

.

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

Entonces, las etiquetas de enlace se verán así:

...

Atributos

Los atributos son propiedades utilizadas 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 un atributo href, que especifica un enlace al recurso asociado.

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á así:

Shay Howe

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

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 mediante una etiqueta de apertura. y etiqueta de cierre que cubre el texto, así como el atributo y valor de la dirección del enlace declarado a través de href="http://shayhowe.com" en la etiqueta de apertura.

Arroz. 1.01. La sintaxis HTML en forma de esquema incluye elemento, atributo y etiqueta.

Ahora que sabe qué son los elementos, etiquetas y atributos HTML, echemos un vistazo a nuestra primera página web. Si algo parece nuevo aquí, no se preocupe: lo desglosaremos a medida que avancemos.

Personalización de la estructura del documento HTML

Los documentos HTML son documentos de texto simples guardados con la extensión .html en lugar de .txt. Para comenzar a escribir HTML, primero necesita un editor de texto con el que se sienta cómodo. Desafortunadamente, esto no incluye Microsoft Word o Pages, ya que se trata de editores complejos. Los dos editores de texto más populares para escribir HTML y CSS son Dreamweaver y Sublime Text. Alternativas gratuitas también Notepad++ para Windows y TextWrangler para Mac.

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

Declaración de tipo de documento ose encuentra al principio de un documento HTML e indica a los navegadores qué versión de HTML se está utilizando. Ya que usaremos ultima versión HTML, nuestro tipo de documento será simplemente. Después de esto viene el elemento. indicando el comienzo de un 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 archivos externos o cualquier otro metadato útil.

Todo el contenido visible de la página web estará contenido 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 del documento HTML.

Este código muestra el documento, comenzando con la declaración del tipo de documento,, luego viene inmediatamente el elemento . Adentro los elementos estan viniendo 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 el título a través del elemento <h1>y un párrafo de texto a través<р>. Porque tanto el título 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 anidado, es una buena idea aplicarle sangría 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 sangría para elementos continúa con nuevos elementos agregados 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 se hizo intencionalmente. No todos los elementos constan de etiquetas de apertura y cierre. Algunos elementos simplemente reciben contenido o comportamiento a través de atributos dentro de una sola etiqueta. <meta>es uno de estos elementos. Contenido del elemento <meta>en el ejemplo se asigna utilizando el atributo charset y un valor. 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>Estructura reducida realizada mediante declaración de tipo documento.<!DOCTYPE html>y elementos <html> , <head>Y <body>, es bastante común. Queremos que esta estructura de documento sea conveniente porque 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, a la hora de escribir HTML y CSS, contamos con validadores para comprobar nuestro trabajo. El W3C ofrece validadores HTML y CSS que escanean el código en busca de errores. Revisar nuestro código no solo ayuda a que se muestre correctamente en todos los navegadores, sino que también ayuda a enseñar las mejores prácticas al escribir código.</p><h2>En la practica</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 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>Alejémonos un poco del HTML y echemos un vistazo a CSS. Recuerde, 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, existen algunos términos CSS básicos con los que deberá familiarizarse. Estos términos incluyen selectores, propiedades y valores. Al igual que con la terminología HTML, cuanto más se trabaja con CSS, más se vuelven naturales estos términos.</p><h3>Selectores</h3><p>Cuando agrega elementos a una página web, se les puede aplicar estilo usando CSS. Un selector determina a qué elemento o elementos en HTML apuntar y aplicar 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 lo específicos que queramos ser. Por ejemplo, queremos seleccionar todos los párrafos de una página o seleccionar solo un párrafo específico.</p><p>Los selectores suelen estar asociados con un valor de atributo, como un id o un valor de clase, o un nombre de elemento, como <h1>o<р> .</p><p>En CSS, los selectores se combinan con llaves (), que encierran los estilos que se aplican al elemento seleccionado. Este selector apunta a todos los elementos. <span><p>PAG(...)</p><h3>Propiedades</h3><p>Una vez seleccionado un elemento, la propiedad determina los estilos que se le aplicarán. Los nombres de las propiedades aparecen después del selector, entre llaves () y justo antes de los dos puntos. Hay muchas propiedades que podemos usar, como fondo, color, tamaño de fuente, alto y ancho y otras propiedades agregadas 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 un elemento a través de un selector y determinado qué estilo nos gustaría aplicarle a través de propiedades. Ahora podemos establecer el comportamiento de esta propiedad mediante 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 esto, en CSS nuestro conjunto de reglas comienza con un selector, seguido inmediatamente por llaves. Estas llaves contienen declaraciones que constan de 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 desplazar pares de propiedades y valores dentro de 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 cubrir 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 a qué elementos HTML se les aplicará estilo. Es importante comprender completamente cómo utilizar los selectores y cómo funcionan. El primer paso debe ser conocer <a href="https://5visa.ru/es/installation-and-configuration/kak-postavit-otpechatok-palca-na-meizu-5c-obzor-meizu-m5c-dostupnyi.html">varios tipos</a> selectores. Comenzaremos con los selectores más básicos: selectores de tipo, clase e identificador.</p><h3>Selectores de tipo</h3><p>Los selectores de tipo apuntan a elementos por su tipo. Por ejemplo, si queremos apuntar a todos los elementos <div>debemos usar el selector div. El siguiente código muestra el selector de tipo para elementos. <div>, así como el HTML correspondiente.</p><p>División(...)</p><p> <div>...</div> <div>...</div> </p><h3>Clases</h3><p>Las clases le permiten seleccionar un elemento según el valor del atributo de clase. Los selectores de clase son un poco más específicos que los selectores de tipo porque seleccionan un grupo específico de elementos en lugar de todos los elementos del mismo tipo.</p><p>Las clases le permiten aplicar los mismos estilos a diferentes elementos a la vez utilizando el mismo valor de atributo de clase para varios elementos.</p><p>En CSS, las clases están representadas por un punto inicial seguido del valor del atributo de clase. El siguiente selector de clase selecciona todos los elementos que contienen el valor del 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 apuntan solo 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 muestre, el valor del atributo id solo se puede usar una vez en una página. Si los identificadores están presentes, deben reservarse para elementos importantes.</p><p>En CSS, los identificadores están representados por un símbolo de almohadilla delante, seguido del valor del atributo id. Aquí el id solo seleccionará 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 cosas extremadamente poderosas y los descritos anteriormente se encuentran entre los selectores más comunes que encontramos. Estos selectores son sólo el comienzo. Hay muchos selectores avanzados disponibles y están disponibles fácilmente. Una vez que se sienta cómodo con ellos, no tema consultar algunos de los más avanzados.</p><p>Bien, comencemos a armar todo. Agregamos elementos a la página dentro de nuestro HTML, luego podemos seleccionar esos elementos y diseñarlos usando CSS. Ahora conectemos los puntos entre HTML y CSS para que los dos lenguajes funcionen juntos.</p><h2>Conectando CSS</h2><p>Para hacer que nuestro CSS se comunique con nuestro HTML debemos apuntar al archivo CSS desde el HTML. Una buena práctica es incluir todos nuestros estilos en un archivo externo, al que 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 incorporar CSS incluyen el uso de estilos internos y en línea. Es posible que encuentre estas opciones en la realidad, pero generalmente están mal vistas porque hacen que la actualización de los sitios sea engorrosa y engorrosa.</p><p>Para crear nuestra hoja de estilo externa, nuevamente queremos usar nuestro editor de texto elegido para crear una nueva <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 archivos HTML y CSS. Como estamos vinculando a CSS, usamos el atributo rel con un valor de hoja de estilo para indicar su relación. Además, el atributo href se utiliza para indicar la ubicación o ruta del 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 está almacenado 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, entonces el valor del atributo href debe corresponder correspondientemente a esa ruta. Por ejemplo, si nuestro archivo main.css se guardó en una subcarpeta llamada hojas de estilo, entonces el valor del atributo href sería hojas de estilo/main.css. Esto utiliza una barra diagonal (o barra diagonal) para indicar el 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. Aún no hemos profundizado demasiado en CSS, pero es posible que hayas notado que algunos elementos tienen estilos que no declaramos en nuestro CSS. Es el navegador el que impone sus propios estilos preferidos a estos elementos. Afortunadamente, podemos reescribir estos estilos con bastante facilidad, que es lo que haremos a continuación usando un restablecimiento 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/installation-and-configuration/ispolzovanie-rasshireniya-chrome-to-mobile-dlya-otpravki-stranicy-na-mobilnoe.html">Google Chrome</a> muestra títulos, 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>. Para garantizar la compatibilidad entre navegadores, el restablecimiento de CSS se ha utilizado ampliamente.</p><p>Un restablecimiento de CSS toma todos los elementos HTML básicos con un estilo determinado y proporciona un estilo consistente en todos los navegadores. Estos restablecimientos suelen implicar la eliminación de dimensiones, relleno, márgenes o estilos adicionales que reducen estos valores. Dado que la cascada CSS funciona de arriba a abajo (lo aprenderá 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/program/sohranenie-parolya-vkontakte-v-raznyh-brauzerah-kak-sohranit-stranicu-v.html">diferentes navegadores</a> empezaremos a trabajar desde un punto de referencia común.</p><p>Hay varios restablecimientos de CSS diferentes disponibles para aplicar, todos ellos tienen el suyo 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 te sientes un poco aventurero, también está Normalize.css creado por Nicholas Gallagher. Normalize.css no se centra en utilizar un restablecimiento completo para todos los elementos principales, sino en establecer estilos comunes para esos elementos. Esto requiere una comprensión más profunda de CSS, así como un conocimiento de lo que le gustaría lograr con los estilos.</p><h3>Compatibilidad y pruebas entre navegadores</h3><p>Como se mencionó anteriormente, diferentes navegadores representan los elementos de manera diferente. Es importante reconocer la importancia de la compatibilidad y las pruebas entre navegadores. Los sitios no deben verse exactamente iguales en todos los navegadores, pero deben ser parecidos. 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 varias cosas a las que prestar atención al escribir CSS. La buena noticia es que puedes hacerlo todo y sólo hace falta un poco de paciencia para dominarlo.</p><h2>En la practica</h2><p>Volvamos al punto donde lo dejamos la última vez en nuestro sitio de conferencia y veamos cómo podemos agregar algo de CSS.</p><ol><li>Dentro de nuestra carpeta de conferencia de estilos, creemos una nueva carpeta llamada activos. Aquí es donde almacenaremos todos los recursos 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, creemos 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 único y un espacio a su alrededor. Usando el reset de Eric Meyer podemos suavizar estos estilos, permitiendo que cada uno de ellos parta de 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, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar, dl, dt, dd, ol, ul, li, conjunto de campos, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, a un lado, 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 base ; ) /* Restablecimiento de la función de visualización HTML5 para navegadores antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) cuerpo ( line-height: 1; ) ol, ul (estilo de lista: ninguno;) blockquote, q (comillas: ninguno;) blockquote:antes, blockquote:después, q:antes, q:después (contenido: ""; contenido: ninguno;) tabla (borde- colapso: colapso; espaciado de bordes: 0; )</p><li>Nuestro archivo main.css está empezando a tomar forma, así que conectémoslo al archivo index.html. Abra index.html en un editor de texto y agregue un elemento <link>V <head>, inmediatamente después del elemento <title> .</li><li>Ya que estamos apuntando a estilos a través del elemento. <link>agregue un atributo rel con la hoja de estilo de valor.</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 activos/hojas de estilo/main.css.</p><p> <head> <meta charset="utf-8"> <title>Conferencia de estilos

Es hora de comprobar nuestro trabajo y ver cómo nuestro HTML y CSS funcionan juntos. 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 de Conferencia de estilos con restablecimiento de CSS

Demostración y código fuente

A continuación puede ver el sitio web de Styles Conference en su estado actual y también descargar fuente sitio en este momento.

Resumen

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

Piénselo, ahora conoce los conceptos básicos de HTML y CSS. A medida que avancemos y usted dedique más tiempo a escribir HTML y CSS, se sentirá mucho más cómodo trabajando con estos dos lenguajes.

En resumen, cubrimos lo siguiente:

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

Ahora echemos un vistazo más de cerca a HTML y familiaricémonos un poco con 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 webs impresionantes
  • Herramientas CSS: restablecer CSS a través de Eric Meyer

La mayor parte del contenido presentado en Internet son páginas web. Históricamente, este es el primer tipo de documento destinado a ser colocado en un espacio de red virtual, pero sigue siendo relevante y prácticamente no tiene formatos competitivos. ¿Cuál es la estructura de las páginas web? ¿Qué herramientas de desarrollo web se utilizan para crear?

¿Qué es una página web?

“Enumere los elementos principales de una página web”, nos dice el examinador en una lección de informática. ¿Qué podemos decirle en respuesta? En primer lugar hablaremos de qué es en principio una página web.

Según 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 su visualización en la pantalla de la computadora utilizando el tipo apropiado de software de diversos contenidos útiles: textos. , enlaces, gráficos, vídeos, música, etc. Una página web es Documento de texto. Los datos correspondientes para el navegador son letras, números y Símbolos especiales, utilizado como elementos del lenguaje de marcado: HTML. Es con su ayuda que el creador de la página web "explica" al navegador cómo mostrar tal o cual contenido en la pantalla.

El lugar y el 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 en parte cierto. Sin embargo, como señalamos anteriormente, una página web es sólo un documento de texto. El sitio suele contener también imágenes, vídeos y otros elementos multimedia. Una página web no puede contenerlos, pero sí puede contener enlaces a ellos en su estructura. Por lo tanto, la página web puede considerarse el componente principal del sitio en términos de su papel dominante en la visualización de contenido virtual frente a los usuarios.

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

El principio de uso del hipertexto.

Entonces, una página web es un documento compilado 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, advertimos que se trata de un texto que de una forma u otra permite obtener acceso rápido a otro - a través de enlaces. Esto es imposible en un libro normal: hay un "texto simple". Para acceder a la página deseada, el lector debe dar varias vueltas, leyendo primero el índice o las notas a pie de página. En el modo hipertexto, la mayor parte del trabajo lo realiza la computadora, utilizando 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 a hablar con bastante razón sobre los componentes del documento correspondiente que se crean utilizando el lenguaje de marcado HTML. Por lo tanto, primero, 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 desde un documento HTML? Muy simple.

Elementos esenciales de este idioma- estas son etiquetas. En la mayoría de los casos, están emparejados: uno de apertura y otro de cierre. Los primeros se indican utilizando únicamente corchetes angulares. Los segundos son similares, pero antes del segundo paréntesis hay una barra diagonal: el símbolo /. El navegador es capaz de reconocerlos y, por lo tanto, muestra el contenido de las páginas web sin problemas de acuerdo con los algoritmos creados por el desarrollador del documento.

La etiqueta de apertura suele estar escrita en letras mayúsculas y la etiqueta de cierre en letras minúsculas. Este es un estándar que se ha consolidado entre los especialistas en TI. Por supuesto, el navegador reconocerá el comando HTML en cualquier letra, pero aun así se recomienda a los desarrolladores web que sigan el esquema de escritura de etiquetas marcadas. Esto facilitará, por ejemplo, que otros especialistas mejoren la página web.

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 y la posición relativa a la página. Lo mismo ocurre con las imágenes, vídeos y otros componentes multimedia. Los atributos están escritos 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 contenido que debería mostrarse frente al usuario en la pantalla. Puede ser texto, un enlace, una imagen, un vídeo u otro elemento multimedia.

Elementos de la página web

“¡Así que, por fin, enumere los elementos principales de una página web!” - repite la maestra. “Con mucho gusto”, le contestamos. ¿Qué se incluye en la estructura del tipo de documento considerado? 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, según los cuales el programa muestra el contenido de la misma manera, pueden ser diferentes. Y esta es una característica del lenguaje HTML: la imagen deseada en una página web se puede mostrar diferentes caminos. Al mismo tiempo, pueden ser equivalentes en términos de costos laborales del creador de la página web o requerir 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, se presentan en cantidades muy pequeñas. De hecho, solo hay dos: el título y el cuerpo principal del documento. Además, cada uno de ellos puede tener una estructura bastante compleja.

¿Cuáles son los detalles del título? Está ubicado en la parte superior de la página web. El código HTML que forma el encabezado suele estar destinado a "cifrar" sólo el texto, pero si es necesario, también se pueden colocar pequeñas inserciones gráficas en el elemento correspondiente. Y eso, 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 eso no es cierto. Los títulos de las páginas web son muy importantes desde el punto de vista de la 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 para 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 parece HEAD con corchetes angulares, luego el contenido del encabezado y luego 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 específica. ¿Cómo puede asegurarse de que su documento web cumpla con este criterio? Muy simple. Los algoritmos HTML deben colocarse en la estructura del encabezado del documento, indicando al navegador que utilice 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.

Parte principal de la página web.

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

Cada uno de los tipos de contenido correspondientes tiene sus propias etiquetas. La estructura de la parte principal de un documento web puede contener comandos HTML, que también se utilizan para formatear el texto, por ejemplo, dando a la fuente un determinado color, tamaño y otras propiedades.

Veamos los detalles de algunas etiquetas HTML de uso común. De hecho, forman los elementos principales de una 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 mencionado 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 la parte principal del documento.

Es bastante común la etiqueta P. Al igual que otros elementos similares del lenguaje de marcado de hipertexto, puede abrirse y cerrarse. Esta etiqueta le permite formatear un solo párrafo de un documento. Puede, por ejemplo, establecer un tipo de fuente o color específico. Sin embargo, esto se hace mediante una etiqueta adicional: FONT. En este caso, se colocará dentro del que marca los límites del párrafo; esto evitará que el comando HTML que refleja el tipo de fuente preferido se distribuya a otros elementos de la página web.

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

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

Los enlaces a otros documentos o archivos web se indican mediante la etiqueta A. Como regla general, dentro de ella hay atributos que indican el hecho de que hay un hipervínculo en la estructura de la página web. En este caso se indica el documento, expediente 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 puedes utilizar documentos web separados. Es decir, los marcos le permiten colocar correctamente dos o más páginas en una pantalla al mismo tiempo.

Una historia sobre los elementos clave de las páginas web y una historia posterior sobre cómo formatearlas utilizando el lenguaje HTML: aproximadamente este será el algoritmo para nuestra respuesta a la pregunta que nos hizo el examinador. Si vino a nosotros diciendo "enumerar los elementos principales de una página web", entonces nosotros, utilizando la metodología adecuada, tendremos todas las posibilidades de descubrir el tema. Es decir, bajo el término "elementos" podemos entender los componentes clave de la estructura de un documento web, o los tipos de contenido (texto, imágenes, tablas, marcos, enlaces) que el webmaster genera utilizando una herramienta como el lenguaje HTML. .

Detalles de las herramientas de desarrollo web

Además de lo dicho, podemos explicar 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 usando javascript puede crear páginas web dinámicas, es decir, aquellas en las que el contenido se actualiza constantemente (tanto gracias a las acciones del propio usuario como de acuerdo con algoritmos preescritos en scripts).

Sería útil agregar que un desarrollador web puede utilizar lenguajes de programación completos en su trabajo, como, por ejemplo, Perl, PHP, Java, Python, con la ayuda de los cuales se amplían las posibilidades de trabajar con documentos de hipertexto. aún más amplio. 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. Los desafíos que enfrentan los desarrolladores modernos pueden ser bastante complejos. Por ejemplo, a veces es necesario traducir páginas web escritas en ruso al inglés. En este caso, las herramientas del desarrollador serán muy diversas.

Objetivo del trabajo: familiarizar a 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, adquirir habilidades en la creación de documentos web estáticos simples.

En las clases de laboratorio utilizaremos el editor de texto Notepad para preparar archivos HTML, y el navegador Internet Explorer como herramienta de seguimiento de lo realizado.

Información teórica

Conceptos básicos

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

documento HTML;

documento web;

Página web.

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

Un grupo de páginas web que pertenecen a un autor o a un organismo IEDV y que están interconectadas por hipervínculos comunes forman una estructura denominada nodo web o sitio web. Cada página HTML tiene su propia URL única. adpagmiC En Internet.

Marco (Marco) - un término que tiene dos significados. El primer valor es el área del documento con sus propias barras de desplazamiento. La segunda es una imagen 0DNN0H en un archivo gráfico animado (marco).

Subprograma (subprograma) - un programa transferido a la computadora cliente como un archivo separado y ejecutado al visualizar una página web.

Guion (Guion) , o script, es un programa incluido en una página web para ampliar sus capacidades. En determinadas situaciones, el navegador Internet Explorer muestra el mensaje: "¿Permitir la ejecución de scripts en la página?" En este caso nos referimos a guiones.

CGI (Común Puerta Interfaz) - un nombre general para programas que, al trabajar en un servidor, le permiten ampliar las capacidades de las páginas web. Sin estos programas es imposible crear páginas web interactivas.

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

Elemento- Diseño en lenguaje HTML. Puedes considerarlo como un contenedor que contiene datos y te permite formatearlos de cierta manera. Cualquier página web es un conjunto de elementos. Una de las ideas principales del hipertexto es la posibilidad 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 inicial o final de un elemento. Las etiquetas definen los límites de la acción de los elementos y separan los elementos entre sí. En el texto de una página web, las etiquetas están entre corchetes angulares.< >y la etiqueta de cierre siempre va seguida de una barra. Texto que no está entre estos corchetes (< >), es completamente visible cuando se ve en un navegador. Por ejemplo:

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

formatea un elemento

<Р>Este texto se ubicará en un párrafo separado.

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 de un elemento. Los atributos se encuentran dentro de la etiqueta de inicio y están separados entre sí por espacios. Si el cemento contiene texto, entonces 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, entonces los atributos pueden especificar el tamaño de la imagen, la presencia y el tamaño de un marco alrededor de la imagen, etc.

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

Este ejemplo vuelve a utilizar una etiqueta que define el principio y el final de un párrafo. Sin embargo, la etiqueta de inicio contiene un atributo de alineación, que establece la alineación del texto en el centro de la pantalla.

Nota:

Cualquier información útil debe aparecer entre las etiquetas de inicio y fin indicando su formato;

Todos los atributos se encuentran en la etiqueta de inicio;

Para facilitar su uso, puede escribir la etiqueta de inicio con una letra mayúscula (mayúscula) (P) y la etiqueta de final con una letra minúscula (minúscula) (/p), aunque esto no es necesario;

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

Comience a escribir cada elemento nuevo en una nueva línea. Sangrar elementos anidados (pestaña). De nuevo, esto no es necesario, pero facilitará mucho su trabajo.

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

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

Sitio web (del inglés. sitio web: web- “web, red” y sitio- “lugar”, literalmente “lugar, segmento, parte de la red”) - una colección documentos electronicos(archivos) de un individuo u organización en Red de computadoras, unidos bajo una dirección (nombre de dominio o dirección IP).

Todos los sitios juntos constituyenWorld Wide Web, 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. Se desarrolló un protocolo especialmente para el acceso directo de los clientes a los sitios en los servidores. HTTP .

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

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

Los sitios web se crean utilizando el lenguaje de marcado de documentos de hipertexto HTML. La tecnología HTML consiste en insertar caracteres de control (etiquetas) en un documento de texto normal 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 etiquetas.

HTML le permite:

· dar formato al texto;

· incluir imágenes y multimedia en el documento;

· Utilizando este lenguaje se crean enlaces de hipertexto a otras páginas web.

HTML se utiliza para crear contenido de información de archivos y para definir la estructura y el formato de las páginas web. Dado que los archivos HTML son archivos de texto sin formato, dichos archivos se pueden 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 creado. Como tal editor en Windows puedes usar aplicación estándar"Computadora portátil".

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

Además, existen muchas tecnologías en las que los pasos básicos para la creación de sitios web ya están automatizados, solo queda hacer cambios de acuerdo con tu tema.

Para ver una página HTML, simplemente ingrese su URL en la barra de direcciones de su navegador web y luego siga los hipervínculos. Pero este es precisamente el principal problema: ¿cómo saber la dirección de la página? La mayoría de las veces sucede que sabes lo que necesitas encontrar, pero no sabes exactamente dónde buscar. Para solucionar este problema, existen buscadores especiales. Desde el punto de vista del usuario, sistema de búsqueda- este es un sitio habitual en pagina de inicio que contiene enlaces a otros sitios, divididos en categorías (“Deportes”, “Negocios”, “Informática”, etc.). Además, el motor de búsqueda permite al usuario ingresar varias palabras clave y devuelve enlaces a páginas que contienen esas palabras clave.

Sitio web

Un sitio web (sitio web en inglés, de web - web y sitio - "lugar") es una colección 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 constituyen colectivamente la World Wide Web. El protocolo HTTP fue desarrollado especialmente para que los clientes accedan directamente a sitios web en servidores. Los sitios web también se denominan 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 los 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 el dinamismo y la interactividad. Para tales casos, los expertos utilizan el término aplicación web - lista para usar paquete de software para resolver problemas del sitio web. Una aplicación web es parte de un sitio web, pero una aplicación web sin datos sólo es técnicamente un sitio.

En la mayoría de los casos en Internet, un sitio web corresponde a un nombre de dominio. exactamente 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, los sitios grandes (portales web) utilizan varios dominios para separar lógicamente los diferentes tipos de servicios prestados (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). También hay casos en los que se asignan dominios separados para diferentes paises o idiomas. Por ejemplo, google.ru y google.fr son lógicamente sitios de Google en diferentes idiomas, pero técnicamente son sitios diferentes. Combinar varios sitios bajo un dominio es típico de alojamiento gratuito. Para identificar sitios, la dirección contiene una tilde y el nombre del sitio después del host: ejemplo.com/~my-site-name/.



Popular en la categoría:
¿Cómo crear un clip de karaoke en una computadora?
¿Cómo crear un clip de karaoke en una computadora?
leer
Se requiere la aplicación Origin para el juego, pero no está instalada. FIFA 16 requiere Origin.
Se requiere la aplicación Origin para jugar, pero no está instalada FIFA...
leer
Registrar una página personal en la red social Facebook
Registrar una página personal en la red social Facebook
leer
Cómo ejecutar un escaneo Nmap simple de Nmap
Cómo ejecutar un escaneo Nmap simple de Nmap
leer

últimos artículos
Cómo rotar una imagen unos grados...
leer
Deshabilitar la publicidad en el navegador Yandex Dónde...
leer
Solución de problemas de conexión Wi-Fi en...
leer
Cambiar contraseña en el perfil de Windows 10
leer
Instrucciones para configurar enrutadores inalámbricos...
leer
Cómo elegir un disco duro y cuál es mejor comprar...
leer
Meizu para tontos. Llamadas y libreta de direcciones....
leer
Descargar PDFPrograma Master
leer
Arriba