Código de plantilla de página. Con un marco amplio. Etiquetas opcionales en HTML5

La lección "Cómo crear una página HTML" está dedicada al diseño de una página web muy sencilla. Aprenderá cómo guardar correctamente un archivo HTML, configurar la codificación necesaria para mostrar correctamente una página HTML en un navegador y colocar textos, listas e imágenes en una página web.

Después de estudiar esta lección, ya aprenderá cómo crear su primera página web, como en la Figura 1.

Foto 1

1. Estructura del documento HTML

Los archivos HTML tienen la extensión .htm o .html.

Las etiquetas suelen estar emparejadas: etiquetas de inicio y fin. Inicial -<>, definitivo, Por ejemplo

Y

Una etiqueta emparejada también se llama envase .

Algunas etiquetas no tienen un par de etiquetas requerido; esta etiqueta se llama soltero . Una etiqueta de este tipo se cierra escribiendo una barra diagonal derecha antes del corchete angular de cierre, por ejemplo

La estructura del documento html se ve así (Figura 2).

Figura 2

Explicaciones para el listado en la Figura 2

En la primera línea, la construcción DOCTYPE significa uno de los estándares de diseño de páginas web.

Entre etiquetas Y contiene la parte del encabezado. Incluye un diseño </b> Y <b>. Este nombre aparece en la barra de título del navegador al cargar un documento (Figura 3).

figura 3

Registro significa la codificación cirílica para que las letras se muestren correctamente en el navegador. Si no se especifica la codificación, las fuentes a veces se pueden mostrar de la siguiente manera (Figura 4)

Figura 4

La misma página después de insertar la codificación (Figura 5)

Figura 5

Nota: en lugar de codificar conjunto de caracteres="windows-1251" puedes usar codificación juego de caracteres=" utf -8" , que permite crear sitios multilingües, ya que en él están presentes todos los personajes existentes en el mundo. En este caso, en Bloc++ es necesario antes de diseñar y guardarHTML-seleccionar archivo en el menú superior Codificaciones - Codificar a UTF -8 sin lista de materiales (UTF-8 sin lista de materiales)

Esta información es suficiente para crear el primer documento.

Práctica 1

1. Crea una carpeta, nómbrala micasa. Los nombres de todas las carpetas y archivos deben crearse en letras minúsculas latinas, No se pueden utilizar nombres rusos.. Mantenga los nombres breves y significativos.

Escribiremos el código de la página web en el Bloc de notas. Es mejor utilizar no el Bloc de notas que viene con Windows, sino uno más "avanzado", por ejemplo Notepad++. Distribución Bloc de notas++ esta en la carpeta CD/distribución.

2. Abra el Bloc de notas++. Asegúrese de que la codificación ANSI esté configurada, para hacerlo en el menú en el elemento Codificaciones, posición de ajuste Codificar a ANSI.

3. Escriba el código del listado de la Figura 2 en Notepad++.

El código del listado de la Figura 2 nos servirá como plantilla en el futuro para que no tengamos que escribir la estructura del documento HTML cada vez. Copie la construcción DOCTYPE desde aquí (no es necesario memorizarla ni memorizarla).

4. Guarde el archivo como plantilla.html en carpeta mi casa, mientras en el campo Tipo de archivo instalar Todos los tipos(Figura 6), de lo contrario su página web no se abrirá en el navegador.

Figura 6

5. Después de guardar, ejecute plantilla. HTML haga doble clic. Como resultado, su archivo se verá así (Figura 7).

Figura 7

Si no obtiene el resultado como en la figura anterior, significa que lo más probable es que haya un error en el código. Un carácter incorrecto es suficiente y la página web no se mostrará correctamente. Verifique el código nuevamente con el listado en la Figura 2.

6. Dentro de la carpeta mi casa crear una carpeta público_ HTML. Este nombre suele ser la carpeta en la que se almacena el sitio cuando se aloja en un hosting real (esta carpeta también se puede llamar www).

7. Guarde el archivo plantilla. HTML en carpeta público_ HTML bajo un nuevo nombre principal. HTML.

8. Desde una carpeta CD/ html_css_1 abre el archivo texto_principal.txt en Notepad++, y también abra el archivo guardado con el nombre principal. HTML

9. Copie todo el texto del archivo. texto_principal.txt y pegarlo en el archivo principal. HTML en lugar de la frase "Contenido de la página web". en la etiqueta escriba la palabra "Inicio". Como esto <b><title>hogar.

10. Guarde los cambios y obtenga una vista previa del archivo. principal. HTML en el navegador. Verá texto sin formato. El navegador ni siquiera realiza saltos de línea en el texto fuente (Figura 8).

Figura 8

2. Formateoweb-páginas etiquetadasHTML

Este tutorial de Cómo crear una página HTML cubre las etiquetas básicas que se utilizan para marcar una página web.

Las etiquetas están diseñadas para dar formato al texto de una página web. La lista de etiquetas se puede ver con más detalle en la carpeta CD/DirectorioHTML en el directorio html401_en.chm(en el elemento del menú superior elementos).

Veamos algunas de las etiquetas.

Elementos h 1, h 2, h 3, h 4, h 5, h 6

La estructuración del cuerpo del documento se realiza dentro del elemento. < cuerpo> utilizando encabezados especificados por los elementos h1, h2, h3, h4, h5, h6.

Los elementos del encabezado están emparejados, por lo que deben tener una abertura. < h1> y cerrando h1> etiquetas.

HTML tiene seis niveles de encabezado: h1 (arriba), h2, h3, h4, h5 y h6 (abajo). La funcionalidad de los elementos de encabezado es similar a los estilos de encabezado habituales en los editores de texto.

Los efectos de estas seis etiquetas se muestran en las figuras siguientes. en una foto fuente(Figura 9), por el otro, la vista en el navegador (Figura 10).

Figura 9

Figura 10

Dividir texto en párrafos

Etiqueta < pag> establece el comienzo de un párrafo e inserta un espacio en la parte superior del párrafo: una sangría para separar este párrafo del anterior.

Forzar salto de línea

Etiqueta
le permite ajustar el texto restante de un párrafo a la siguiente línea. Se trata de una etiqueta no emparejada y, a diferencia de la etiqueta de párrafo, no aumenta el espacio entre líneas.

Práctica 2

1. Formatee el título “Catálogo de proyectos arquitectónicos” usando etiquetas.

Y

.

2. Formatee el título "Proyectos para su futuro hogar" usando etiquetas.

Y

.

3. Formatee los títulos "Proyectos de la casa" y "Áreas de la casa" usando etiquetas.

Y

.

4. Divide el texto principal en párrafos usando una etiqueta.

Dentro de los dos primeros párrafos, utilice la etiqueta
para romper una línea. Como resultado, su código debería verse así (Figura 11).

5. Vea el resultado en un navegador.

Figura 11

Listas con viñetas y numeradas

Con las herramientas HTML puede crear cualquier lista: numerada (numérica y alfabética) y con viñetas diferentes tipos marcadores.

Etiqueta < ul>…ul> genera una lista con viñetas.

Etiqueta < viejo>…viejo> genera una lista numerada.

Elemento de lista única como en

    , y en
      formado usando una etiqueta < li> .

      Práctica 3

      1. Cree una lista numerada bajo el título "Proyectos de casas".

      2. Cree una lista con viñetas bajo el título "Áreas de la casa". Su código se verá así (Figura 12).

      Figura 12

      3. Vea la página en un navegador.

      Las listas se pueden anidar unas dentro de otras utilizando diferentes marcadores.

      Un ejemplo de una lista anidada se muestra en la Fig. 13

      Práctica 4

      1. Implemente el código que se muestra en la Figura 13 en un nuevo archivo.
      2. Guarde el archivo en una carpeta. mi casa bajo el nombre espía_ vlozh. HTML. El resultado en la Fig. 13

      Figura 13. Ejemplo de una lista anidada

      Estilos de fuente

      Etiqueta - le permite mostrar texto en negrita.

      Etiqueta - le permite mostrar texto en cursiva.

      Etiqueta - muestra texto subrayado.

      Por ejemplo:

      En este caso se mostrará el texto. negrita cursiva , pero no subrayado.

      Y en este caso el texto se escribirá. negrita subrayada cursiva .

      Subíndices y superíndices

      Etiqueta < sub> Y sub> le permite bajar el texto media línea por debajo del texto normal.

      Etiqueta < sorber> Y sorber> le permite elevar el texto media línea por encima del texto normal. El texto ubicado entre estas etiquetas aparecerá en una fuente más pequeña que el texto normal.

      Práctica 5

      1. Formatee el nombre myhouse.ru en negrita en el primer párrafo (Figura 14).

      Figura 14

      2. Formatee la frase “Más del 95% de los proyectos” en cursiva subrayada en el segundo párrafo (Figura 15).

      Figura 15

      3. Formatee superíndices cuando se utilicen metros cuadrados (Figura 16).

      Figura 16

      4. Guarde el archivo. Ver a través del navegador. La página web debería verse así (Figura 17).

      Figura 17

      3. Insertar imágenes

      En nuestro artículo Cómo crear una página HTML, veremos cómo colocar imágenes en una página web.

      La etiqueta se utiliza para insertar imágenes. . El atributo requerido para esta etiqueta es src(de la fuente en inglés - fuente). Determina el camino hacia archivo gráfico, cuya imagen deberá mostrarse en la página web.

      Para insertar una imagen, use el comando

      Por ejemplo: " imagen1.jpg" alt="Imagen" /> !}

      El atributo alt es necesario para que al visualizar una página web en el modo de imágenes deshabilitadas, en lugar de la imagen que falta haya una inscripción escrita en el atributo alt. También se recomienda utilizar siempre textos alternativos, porque Los motores de búsqueda las analizan como palabras clave cuando buscan imágenes.

      Los archivos gráficos pueden tener el formato jpg, gif, png y siempre en el modelo de colorRGB.

      Práctica 6

      1. Después de la lista de áreas de la casa, inserte imágenes de proyectos de cabañas en la página web. proyecto_1.jpg Y proyecto_2.jpg de la carpeta CD/html_CSS_1 . Para hacer esto, primero copie estas dos imágenes a la carpeta donde se encuentra el archivo main.html. El código de inserción de la imagen se verá así (Figura 18).

      Figura 18

      2. Vea el resultado en el navegador (Figura 19).

      Figura 19

      Básicamente el principio de usar etiquetas.HTMLdebe quedar claro. Se utilizan según el mismo principio: si la etiqueta es un contenedor, entonces hay una etiqueta de apertura y otra de cierre. Si la etiqueta es única, entonces no hay etiqueta de cierre; en este caso, la barra diagonal derecha se escribe antes del corchete angular de cierre, por ejemplo< hermano/>. Ya sea que la etiqueta sea contenedora o individual, siempre puedes buscar en la especificación.html401_ru.chm en la sección "elementos".

      4. Direccionamiento dentro del sitio

      En nuestra primera lección, Cómo crear una página HTML, exploraremos los conceptos de direcciones en HTML.

      Consideremos las opciones de abordaje cuando necesite colocar imágenes en un archivo html que puede estar ubicado en diferentes carpetas del sitio.

      Hay dos tipos de direccionamiento:

      • absoluto;
      • relativo.

      direccionamiento absoluto (usando nombres de unidades de computadora) no utilizado(Figura 20)

      Figura 20

      Usado direccionamiento relativo - direccionamiento dentro de un documento o un conjunto de documentos en un servidor. Para hacer referencia a un archivo dentro de un sitio, debe indicarle al navegador qué ruta debe tomar para llegar al archivo deseado.

      Ejemplo 1

      La imagen se encuentra en la misma carpeta que el documento HTML (Figura 21). Es decir, la imagen y el archivo HTML están en el mismo nivel en sistema de archivos y el documento HTML puede adjuntar inmediatamente la imagen. En este caso, insertar una imagen en una página web se verá así.

      / >

      Figura 21

      tarea practica7

      Implemente el ejemplo 1 (cree una carpeta, un archivo doc.html, tome cualquier imagen). Imagen

      Ejemplo 2

      Imagen Foto. jpg esta en la carpeta carpeta_1 . El documento HTML se encuentra fuera de la carpeta_1. Aquellos. En el sistema de archivos del sitio, el documento HTML se ubica un nivel por encima de la imagen (Figura 22). Debes ingresar a la carpeta carpeta_1, luego adjuntar la imagen

      Figura 22

      tarea practica8

      Implemente el ejemplo 2 (cree una carpeta, un archivo doc.html, tome cualquier imagen). La imagen debe insertarse en la página web doc.html.

      Ejemplo 3

      Imagen Foto. jpg esta en la carpeta carpeta_1 , que a su vez se encuentra en la carpeta carpeta_2 . El documento HTML se encuentra fuera de estas carpetas (Figura 23). Por tanto, el documento HTML está dos niveles por encima de la imagen. Necesario:

      • ingrese a la carpeta carpeta_2,
      • luego ingrese a la carpeta carpeta_1,
      • luego adjunte la imagen.

      Figura 23

      tarea practica9

      Implemente el ejemplo 3 (cree carpetas, archivo doc.html, tome cualquier imagen). La imagen debe insertarse en la página web doc.html.

      Ejemplo 4

      carpeta_1 . La imagen se encuentra fuera de la carpeta_1. Aquellos. El documento HTML se encuentra un nivel más abajo que la imagen (Figura 24). Debe salir de la carpeta_1 y luego adjuntar la imagen. Dejar una carpeta está indicado por la construcción. ../ (dos puntos y una barra a la derecha).

      / >

      Figura 24

      tarea practica10

      Implemente el ejemplo 4 (cree una carpeta, un archivo doc.html, tome cualquier imagen). La imagen debe insertarse en la página web doc.html.

      Ejemplo 5

      El documento HTML se encuentra en la carpeta carpeta_1 , que a su vez se encuentra en la carpeta carpeta_2 . La imagen está fuera de estas carpetas. Así, el documento HTML se ubica dos niveles más abajo que la imagen (Figura 25). Necesario:

      • salir de la carpeta carpeta_1,
      • salir de la carpeta carpeta_2,
      • adjunte una imagen.

      Como necesitas salir dos veces, el diseño ../ repetido dos veces.

      / >

      Figura 25

      Práctica 11

      Implemente el ejemplo 5 (cree carpetas, archivo doc.html, tome cualquier imagen). La imagen debe insertarse en la página web doc.html.

      Ejemplo 6 (Figura 26)

      Necesario:

      • salir de la carpeta carpeta_1,
      • salir de la carpeta carpeta_2,
      • ve a la carpeta carpeta_3,
      • ve a la carpeta carpeta_4,
      • adjuntar imagen pic.jpg

      Figura 26

      Práctica 12

      Implemente el ejemplo 6 (cree carpetas, archivo doc.html, tome cualquier imagen). Imagen

      debe insertarse en la página web doc.html.

      Ejemplo 7 (Figura 27)

      Necesario:

      • salir de la carpeta carpeta_1,
      • salir de la carpeta carpeta_2,
      • salir de la carpeta carpeta_3,
      • ingrese a la carpeta carpeta_4,
      • adjuntar imagen pic.jpg.

      Como necesitas salir tres veces, el diseño ../ repetido tres veces.

      Figura 27

      Práctica 13

      Implemente el ejemplo 7 (cree carpetas, archivo doc.html, tome cualquier imagen). Imagen

      debe insertarse en la página web doc.html.

      Así, no importa cuántas veces necesites salir, ponemos la construcción ../ tantas veces, y si entras, enumeramos los nombres de las carpetas que encontramos en el camino.

      Práctica 14

      1. Cree un documento html e inserte una imagen en él para que la ruta a la imagen sea la siguiente.

      " ../../../../../../carpeta_1/carpeta_2/carpeta_3/imagen.jpg" / >

      2. Desarrolle su propio ejemplo de inserción de una imagen en un documento html para que contenga y salida de carpetas y entrada en carpetas. El ejemplo debe ser diferente de todos los ejemplos anteriores.

      Como resultado de completar este tema, debería tener creados los siguientes archivos:

      • plantilla.html
      • principal.html
      • spisok_vlozh.html
      • dentro de la carpetami casadebería haber una carpetapúblico_ HTMLcon archivos del futuro sitio
      • siete ejemplos de direccionamiento relativo y dos ejemplos de control de tarea practica 14

      Se han inventado muchos lenguajes, pero HTML es uno de los lenguajes especiales y más populares. Muchos otros desarrollos clave en programación están asociados con él. Mucho se vuelve posible cuando la mente del desarrollador tiene conocimiento del lenguaje de marcado: el lenguaje de marcado de hipertexto (HTML).

      En esencia, no hay nada complicado en HTML, y en unos minutos cualquiera que esté lejos de la programación e Internet podrá crear una página HTML en el Bloc de notas. Un ejemplo digno de atención, sencillez realmente accesible a todos.

      descripción general

      Un archivo HTML es una página del sitio, aunque esto se puede argumentar, pero el hecho de que un archivo constituye una página está claro para empezar.

      Un archivo HTML comienza con un encabezado DOCTYPE, que indica que el tipo de archivo es HTML. Todos los elementos de la página (etiquetas) se indican entre paréntesis angulares. Cada pareja ("<» и «>") incluye una etiqueta HTML. Normalmente las etiquetas HTML vienen en pares, es decir, para cada “etiqueta” hay una “/etiqueta”. Ambos están encerrados entre corchetes angulares. Hay etiquetas individuales, la más popular de las cuales es "br/": pasa a la siguiente línea.

      La etiqueta más grande del archivo es el propio HTML, que contiene sólo dos etiquetas: HEAD y BODY. En el primero se realizan diversas descripciones, se indican enlaces a otros archivos necesarios en la página, que pueden estar presentes scripts PHP y JavaScript. El segundo registra el contenido de la página. También en forma de etiquetas y scripts.

      Página HTML sencilla

      A continuación en el artículo se proporciona un ejemplo de cómo crear una página de este tipo. Veámoslo detenidamente.

      Sección principal

      Propósito principal - descripción general páginas y guiones generales, aunque este último es un concepto bastante relativo. Por lo general, aquí sólo se da importancia significativa a dos cosas:

      • palabras clave y descripción de la página;
      • enlaces a otros archivos (*.css y *.js).

      Para mostrar el contenido de la página, el contenido de esta sección sólo tiene una importancia indirecta, ya que indica: en algún lugar de otros archivos hay reglas CSS para etiquetas y scripts en otros idiomas.

      Una página HTML tiene una que se muestra cuando el visitante mueve el mouse a la pestaña donde está abierta la página. Este punto importante, ya que hace que la página sea mucho más presentable, más fácil de decir y firmada con texto legible.

      Las etiquetas META son importantes en la programación de Internet en general, pero cuando necesita crear una página HTML en el Bloc de notas, no es aconsejable saturar el ejemplo con construcciones innecesarias.

      Si se debe abordar la creación de secuencias de comandos una vez que se establece el conocimiento de HTML, entonces se deben abordar las hojas de estilo en cascada de inmediato. Los archivos CSS contienen, en particular, reglas de diseño. etiquetas HTML.

      sección CUERPO

      En realidad, la página HTML de ejemplo es la sección BODY. Aquí es donde está contenida toda la información, todo el contenido de la página del sitio. Toda la información se presenta en forma de etiquetas y scripts, por ejemplo insertando código JavaScript o fragmentos de programas PHP.

      Es importante comprender que un ejemplo de una página web HTML en un navegador y el mismo ejemplo en un editor de texto, en particular el Bloc de notas, no son lo mismo. En el primer caso, tenemos un texto HTML ya preparado en el que se ejecutan todos los scripts. Por ejemplo, PHP hizo su parte y formó las etiquetas necesarias en los lugares correctos en lugar de su código. JavaScript también ha cumplido su cometido, aunque queda por comentarlo por separado.

      HTML son etiquetas, no scripts. En última instancia, en el navegador sólo se muestra el contenido de la página, sólo sus etiquetas. No hay ningún código PHP allí.

      JavaScript está en una posición especial, su preocupación es servir a la página no solo en el momento de la carga (sobrecarga), sino también en los momentos en que la página está en el navegador del visitante y él la está estudiando.

      A continuación se muestra un ejemplo sencillo (sólo en la sección CUERPO).

      Y en el navegador del visitante se ve así:

      El código no especificaba cómo deberían verse los elementos que mostraría el navegador. Todo el estilo visible está en las reglas CSS. En este caso, en el archivo Mcss/scPhpWordRW.css que estaba vinculado (consulte el primer ejemplo de la página HTML).

      A diferencia de HTML, el tema CSS es más simple, hay reglas muy accesibles y su número es pequeño, cuando un ejemplo de creación de una página HTML no requiere nada más que un bloc de notas. Todo es muy accesible para un dominio inmediato:

      Esto muestra cuán simple se describe la etiqueta scLogo_vDoc, y esta descripción es tal que en su estado normal la etiqueta muestra la imagen vDoc-logo.png, y cuando el mouse está sobre ella, se muestra vDoc-logo-h.png.

      Estructura de las descripciones HTML

      El lenguaje no implica ninguna estructura y el concepto de sintaxis aquí es muy relativo. No hay variables, pero sí muchas posibilidades. La base fundamental del hipertexto es que existe un elemento (etiqueta) que necesariamente tiene un nombre.

      El nombre, en el caso de una etiqueta emparejada, se compone del propio nombre (tagName) y corchetes angulares (“<» + tagName +«>"), Si estamos hablando acerca de sobre el inicio de la etiqueta, y ""si se registra su fin.

      Una página HTML de ejemplo que describe los atributos se encuentra debajo del texto.

      Una etiqueta puede tener atributos, en cuyo caso se colocan con un espacio después del nombre de la etiqueta antes del corchete angular de cierre ">". Los atributos, si una etiqueta los tiene, se escriben sólo al principio de la etiqueta. Se considera contenido de una etiqueta lo que se encuentra entre el inicio de la etiqueta y su final.

      HTML le permite describir elementos en bloque y en línea. Los primeros ocupan un área determinada en la ventana del navegador, pueden ubicarse de manera absoluta, es decir, en el lugar deseado en el área de visualización de la página HTML, y tienen un tamaño específico.

      Los elementos en línea generalmente se muestran en un hilo, es decir, tal como se especificaron en el archivo de la página, se muestran en la pantalla. La visualización del flujo general puede verse influenciada cuando se carga la página. La ubicación, la visibilidad y otras propiedades de los elementos del bloque se pueden influir en cualquier momento mediante código JavaScript.

      Además de elementos simples, HTML ofrece la descripción de tablas y formularios. Estos elementos tienen una gran demanda en la “creación diaria de sitios web”.

      Descripción de la tabla: etiquetas TABLE, TR, TD

      Con la etiqueta TABLE, puede crear una tabla, especificar una cierta cantidad de filas TR y una cierta cantidad de celdas TD en cada fila. A diferencia de la organización tabular habitual, debido a las peculiaridades del marcado HTML, la organización tabular se limita a esta declaración, por lo tanto, si el desarrollador quiere tener una tabla rectangular en la que el número de columnas en todas las filas sea el mismo, entonces debe controlar esto él mismo.

      La posición principal de HTML es hacer todo lo que se especifica, pero nada que no se entienda. En algunos casos, el número de columnas en cada fila de la tabla no es tan importante, pero si necesitas fusionar celdas vertical u horizontalmente, tendrás que contar todo con mucho cuidado.

      En el artículo se muestra claramente una página HTML de ejemplo que describe una tabla simple.

      Aquí se muestra una tabla de tres filas por tres columnas, y en la primera fila, en lugar de la etiqueta TD, se utilizó la etiqueta TH: el encabezado de la columna. Estas dos etiquetas no son particularmente diferentes, pero es muy posible usar la primera para distinguir la primera fila de la tabla, y en CSS puedes adjuntar tu propio estilo a TH, que lo distingue de otros TD.

      Descripción del formulario: etiquetas FORMATO, ENTRADA

      Los formularios son la parte más popular de las etiquetas HTML. Mediante formularios puede transferir información. En realidad, la página en sí es la salida de información, pero el formulario es su entrada.

      Ejemplo de página HTML que describe un formulario simple:

      Hay muchas más opciones para utilizar formularios, pero estas son las principales posibilidades. Puede especificar campos de entrada, asignarles un diseño y controladores para analizar los datos ingresados ​​por el usuario. Puede especificar campos ocultos y transmitir información de fondo desde la página. Puede designar botones para transmitir información, al hacer clic en ellos se inicia el proceso de transmisión de información.

      Usando HTML

      Conocer el lenguaje de hipertexto es un trabajo en cualquier especialización en el campo de la programación de Internet, pero si necesitas escribir programas en PHP o JavaScript, entonces necesitas conocer perfectamente HTML + CSS.

      El lenguaje PHP fue indicado en el ejemplo anterior. PHP se ejecuta en el servidor, por lo que la página con este formulario voló desde el servidor al navegador con los campos completados. En particular, la función TestOnBlur mencionada en la etiqueta INPUT (controlador de eventos onblur) recibió todos los parámetros como campos de texto.

      JavaScript se ejecuta en el navegador y para que el botón que envía datos al servidor funcione correctamente, es decir, la construcción: onclick=jQuery("#to").val("cart"), debe tener una idea no sólo de qué es jQuery, sino también de qué es #to, val, cart. Más precisamente, necesita conocer las etiquetas HTML básicas y reglas generales aplicándoles estilos CSS.

      Esto es suficiente para mejorar rápidamente sus calificaciones en cualquier especialización en el campo de la programación de Internet.

      Hola queridos lectores del blog. Con este artículo comenzaremos a aprender los conceptos básicos del lenguaje HTML.

      Probablemente ya sepas que el idioma principal de Internet es lenguaje de marcado de hipertexto HTML (lenguaje de marcado de hipertexto). En este artículo, aprenderemos los conceptos básicos de HTML y cómo crear páginas WEB sencillas.

      Empecemos por lo más importante, veamos cómo funciona. La World Wide Web—Internet. Para producir páginas web, crea archivos escritos en HTML y los coloca en un servidor web. Después de esto, cualquier navegador instalado en un dispositivo con acceso a Internet, ya sea una computadora, teléfono o tableta, podrá encontrar sus páginas web.

      Servidor web- esta es una computadora común y corriente con un especial software con acceso a Internet. Escucha continuamente las solicitudes de los navegadores para páginas web, imágenes, archivos de audio y vídeo. Al recibir una solicitud de uno de estos recursos, el servidor lo busca y lo envía al navegador.

      Navegador- Este programa especial, destinado a navegar por sitios web, por ejemplo explorador de Internet. Al utilizar un navegador, navega por sitios web haciendo clic en enlaces. Cualquier clic de este tipo hace que el navegador solicite la página HTML al servidor web, reciba una respuesta y muestre la página en su ventana. Es cuando se muestra la página que el lenguaje HTML comienza a funcionar; le dice al navegador todo sobre la estructura y el contenido de la página web. Usando comandos - etiquetas, HTML le dice al navegador dónde comienzan los párrafos de texto, qué parte del texto es un encabezado y dónde insertar tablas e incluso imágenes. Y las etiquetas son palabras entre paréntesis angulares, por ejemplo.

      ,

      , .

      Se necesita urgentemente una tienda online y tiempo para aprendiendo HTML, CSS, PHP y otras tecnologías no están disponibles. Luego, simplemente puede alquilar una tienda en línea con funcionalidad y optimización completamente implementadas para los motores de búsqueda.

      Lenguaje HTML y sus etiquetas.

      La primera versión del lenguaje HTML apareció en 1992. En el momento de 2013, la especificación se está desarrollando. nueva versión HTML número 5. El desarrollo de esta especificación lo lleva a cabo el World Wide Web Consortium, o W3C para abreviar. La organización W3C desarrolla otros estándares web. Puede familiarizarse con estos estándares en su sitio web www.w3.org. Por cierto, muchos navegadores web ya admiten algunas funciones de HTML 5.

      Sugiero comenzar a aprender HTML de inmediato con un ejemplo. Así que creemos nuestra primera página web. Cualquiera puede crear páginas WEB. editor de texto. Sugiero usar primero el sistema integrado de Windows. Bloc(En general, en el futuro recomiendo usarlo para editar código html). Puede encontrarlo: "Inicio->Todos los programas->Accesorios->Bloc de notas". Creemos una página sobre autos. Entonces, abra el Bloc de notas y escriba el siguiente texto en él:





      Ejemplo de página web


      Sitio web sobre coches.


      Bienvenido a nuestro sitio web de automoción. Aquí encontrará muchos artículos interesantes y útiles sobre carros. El sitio contiene descripciones de muchos automóviles nacionales e importados.





      A continuación, guarde la página web creada en un archivo llamado index.html. En este caso, en el cuadro de diálogo para guardar el archivo, debe configurar la codificación en UTF-8 y escribir el nombre del archivo entre comillas; de lo contrario, el Bloc de notas le agregará la extensión txt y nuestro archivo se llamará index.htm.txt:

      Ahora solo queda abrir el archivo creado en el navegador y mirar el resultado. Para hacer esto, puede utilizar el suministrado navegador de windows Microsoft Internet Explorer, o cualquier otro navegador instalado en su computadora, haciendo doble clic en el archivo index.html o arrastrando el archivo al ícono del navegador. Ábrelo y verás algo como esto:

      Así, creamos una página web en el Bloc de notas, aunque un poco anodina, pero que ya contiene un título grande y un párrafo de texto que se divide automáticamente en líneas y contiene un fragmento en negrita.

      ¿Qué es una etiqueta?

      Ahora hablemos más sobre la estructura de la página. Veamos el fragmento:

      Sitio web sobre coches.

      . Aquí vemos el texto que aparece en la página como título, encerrado entre etiquetas.

      Y

      . ¿Qué es una etiqueta en HTML?

      etiqueta HTML son palabras y símbolos comunes encerrados entre corchetes angulares, por ejemplo

      ,

      , . Entonces etiqueta

      es la etiqueta de apertura, etiqueta

      etiqueta de cierre, y el texto entre ellos se llama contenido de la etiqueta. También etiquetar

      y etiquetar

      se llaman etiquetas emparejadas. Juntos, la etiqueta de apertura más el contenido más la etiqueta de cierre forman un elemento de documento HTML. También hay elementos que constan de una etiqueta de apertura:

      Etiqueta tan emparejada

      define un elemento de encabezado de primer nivel. Hay seis niveles de títulos en total, estos son los elementos

      .

      Los elementos pueden ser en bloque o en línea (texto). Elementos de bloque realizar el formateo estructural de la página. Los elementos de bloque siempre se muestran en una nueva línea de la página y tienen sangría de los elementos adyacentes. Elementos en línea realizar formato de texto directo o formato lógico. Elemento

      es un elemento de bloque.

      ¡¡¡Eso es todo para mí!!! ¡Nos vemos en las próximas publicaciones!

      : HTML: lenguaje de marcado de hipertexto (o lenguaje de marcado de hipertexto).

      Así que vamos a conocerlo mejor.

      Primero, cree un archivo en su computadora con cualquier nombre y extensión.html (el nombre debe estar en idioma en Inglés - por ejemplo index.html). Para crear un archivo de este tipo, cree uno normal. Documento de texto ("Inicio" - "Todos los programas" - "Accesorios" - "Bloc de notas") y guarda ("Archivo" - "Guardar como") en cualquier lugar ingresando el nombre y la extensión (sucede que cuando introduces una extensión, el bloc de notas aún la guarda como Archivo de texto, y necesitamos un archivo web. Para hacer esto, antes de guardar, seleccione el tipo de archivo: "Todos los archivos (*.*)").

      Esto no es un requisito previo (ya que puede cambiar el nombre de la primera página en la configuración del servidor), sino una regla de buenos modales. El nombre de la primera página es preferiblemente índice (index.html), ya que el servidor, al acceder a ella, genera un archivo con el mismo nombre: índice.

      Cuando se guarda correctamente, el ícono del archivo debería cambiar al ícono del navegador (Internet Explorer de forma predeterminada).

      Ahora abra este archivo usando el Bloc de notas y copie el siguiente código allí.

      ¡Esta es la primera página web!

      Guardar y abrir en un navegador.

      Felicitaciones, acaba de crear su primera página web.

      Texto "¡Esta es la primera página web!" Puedes cambiarlo por cualquier otro, por ejemplo, “¡¡¡Esta es mi primera página web!!!” guarde, actualice el navegador y admire el resultado.

      Pero nuestra página no tiene título.

      Necesitamos arreglar esto: corregiremos un poco el código, o mejor dicho, le agregaremos un "Cabecera del sitio" usando etiquetas. Y .</p><p> <html> <head> <title>Primera página Esta es mi primera pagina web!!!

      Guarda, actualiza, admira. Nuestra página ahora tiene un título.

      Descripción de etiquetas.

      La primera etiqueta es (esta etiqueta está emparejada, es decir, la etiqueta de cierre requerido): se utiliza como un contenedor dentro del cual se encuentran todos los contenidos de la página (texto, imágenes, etc.). Aunque esta etiqueta ( Y) es opcional, pero su uso indica buenos modales. Por eso te aconsejo que lo uses.

      Siguiente etiqueta - . Esta también es una etiqueta emparejada ( Y). Esta etiqueta no aparece en la página (excepto en el encabezado), pero es obligatoria para indicar parámetros adicionales páginas: descripción de la página (utilizada por los motores de búsqueda), palabras clave (utilizadas por los motores de búsqueda), estilos, secuencias de comandos, título, etc.

      Etiqueta </b>- etiqueta emparejada ( <title>Y), es necesario indicar el título de la página. Además, esta etiqueta debe colocarse únicamente dentro de la etiqueta. !

      Y la última etiqueta en nuestro código es: . También una etiqueta emparejada ( Y

      ), dentro del cual se encuentra toda la parte visible del sitio, es decir. textos, imágenes, enlaces, en información general que desea colocar en el sitio.

      En la próxima lección hablaremos sobre los tipos de etiquetas y las reglas para escribirlas.



       Arriba