Conceptos básicos de html para principiantes en un lenguaje claro. Conceptos básicos de HTML para principiantes Programación HTML para principiantes
HTML significa H yper T extensión METRO arkup Lángulo, es decir El lenguaje de marcado de hipertexto es el componente básico de las páginas web y se utiliza para crear y visualizar páginas web.
El lenguaje HTML agrega marcado al texto sin formato. El hipertexto contiene varios enlaces a través de los cuales las páginas web se vinculan entre sí. Con HTML, cualquiera puede crear sitios web tanto estáticos como dinámicos. HTML es un lenguaje que describe la estructura y la semántica del contenido de un documento web. El contenido de la página web está marcado con etiquetas que representan elementos HTML. Ejemplos de tales elementos son , ,
etc. Estos elementos forman los componentes básicos de cualquier sitio web.
HTML fue inventado en 1991 por un científico, Tim Berners-Lee, y originalmente estaba destinado al intercambio de documentos entre científicos de diferentes universidades. Con su invento, Tim Burns-Lee sentó las bases de la Internet moderna.
Hay varias versiones de HTML. El estándar del idioma se actualiza y complementa continuamente, la consecuencia de esto es que se lanza una nueva versión de HTML casi todos los años. La versión "HTML 2.0" fue la primera especificación HTML estándar, que se publicó en 1995. HTML 4.01 es la versión principal de HTML que se publicó a fines de 1999 y se usa ampliamente en la actualidad. Hoy en día, la versión más popular es HTML-5, que es una extensión de HTML 4.01 y se publicó en 2012.
Un documento HTML o una página web es un documento de texto simple que contiene etiquetas (que son texto sin formato encerrado entre corchetes angulares<имя тэга>). Una página web se puede escribir tanto en un editor de texto normal (Bloc de notas, WordPad, Word, etc.) como en uno especializado con resaltado de código (Notepad++, Sublime Text, etc.). Los documentos HTML se almacenan como archivos .htm o .html.
Ejemplos en línea en cada lección
Durante el transcurso de la presentación, cada lección brindará ejemplos que lo ayudarán a comprender cada código en detalle y, a través de la práctica, disfrutar del aprendizaje. Con nuestro editor HTML en línea, puede editar un documento HTML y luego hacer clic en el botón naranja "Ejecutar" del editor sobre la ventana izquierda del editor para ver el resultado. Si usa un editor HTML especializado, puede copiar el ejemplo y ver los resultados de su trabajo en el navegador instalado en su computadora.
ejemplo HTML:
Inténtalo tú mismo
Título de la página
este es el titulo
Este es un párrafo.
Ejemplos de HTML en línea
El Tutorial de HTML tiene más de 100 ejemplos en línea para que domines fácilmente el lenguaje de marcas. ¡Es mejor ver una vez que escuchar cien veces! La teoría más la práctica es la clave de su éxito en el dominio de HTML.
Conceptos básicos de HTML contienen las reglas básicas del lenguaje HTML, una descripción de la estructura de una página HTML, relaciones en la estructura de un documento HTML entre elementos HTML.
Un documento HTML es un documento de texto sin formato, se puede crear de la misma manera que en un editor de texto normal. (Computadora portátil), y en uno especializado, con resaltado de código (Bloc de notas ++, Código de Visual Studio, etc.). Un documento HTML tiene la extensión .html.
Un documento HTML consta de un árbol de elementos HTML y texto. Cada elemento se identifica en el documento de origen mediante una etiqueta de inicio (apertura) y una de finalización (cierre) (con raras excepciones).
etiqueta de inicio muestra dónde comienza, termina el elemento, dónde termina. etiqueta de cierre se forma agregando una barra inclinada / antes del nombre de la etiqueta:<имя тега> … имя тега>. Entre las etiquetas de inicio y finalización se encuentra el contenido de la etiqueta: contenido.
Las etiquetas individuales no pueden almacenar contenido directamente, se escribe como un valor de atributo, por ejemplo, una etiqueta creará un botón con texto Botón en el interior.
Las etiquetas se pueden anidar unas dentro de otras, por ejemplo,
Texto
. Al invertir, debe seguir el orden de su cierre. (principio de "matryoshka"), por ejemplo, la siguiente entrada sería incorrecta:
Texto
.
Los elementos HTML pueden tener atributos (globales, aplicados a todos los elementos HTML y propios). Los atributos se escriben en la etiqueta de apertura de un elemento y contienen un nombre y un valor especificados en el formato atributo name="value" . Los atributos le permiten cambiar las propiedades y el comportamiento del elemento para el que están configurados.
Cada elemento puede tener múltiples valores de clase y solo un valor de identificación. Los valores de clases múltiples se escriben con un espacio,
. Los valores de clase e id deben contener solo letras, números, guiones y guiones bajos, y deben comenzar solo con letras o números.
El navegador ve (interpreta) un documento HTML, construye su estructura (DOM) y lo muestra de acuerdo con las instrucciones incluidas en este archivo (hojas de estilo, scripts). Si el marcado es correcto, se mostrará en la ventana del navegador una página HTML que contiene elementos HTML: encabezados, tablas, imágenes, etc.
Proceso de interpretación (analizar) comienza antes de que la página web esté completamente cargada en el navegador. Los navegadores procesan documentos HTML secuencialmente desde el principio, mientras procesan CSS y relacionan las hojas de estilo con los elementos de la página.
Un documento HTML consta de dos secciones, el encabezado, entre las etiquetas
… y contenido - entre etiquetas … .
Estructura de la página web
1. La estructura del documento HTML
El lenguaje HTML sigue las reglas contenidas en el archivo de declaración de tipo de documento. (Definición de tipo de documento o DTD). Una DTD es un documento XML que define qué etiquetas, atributos y sus valores son válidos para un tipo de HTML en particular. Cada versión de HTML tiene su propia DTD.
DOCTIPO responsable de la correcta visualización de la página web por parte del navegador. DOCTYPE define no solo la versión HTML (por ejemplo, html), sino también el archivo DTD correspondiente en la web.
...
Elementos dentro de una etiqueta , forman un árbol de documentos, el llamado modelo de objeto de documento, DOM (modelo de objeto de documento). Al mismo tiempo, el elemento es el elemento raíz.
Arroz. 1. La estructura más simple de una página web
Para entender la interacción de los elementos de una página web, es necesario considerar los llamados "relacion familiar" entre elementos. Las relaciones entre varios elementos anidados se clasifican en relaciones padre, hijo y hermanos.
Antepasado Un elemento que contiene otros elementos. En la Figura 1, el ancestro de todos los elementos es . Al mismo tiempo, el elemento
es el ancestro de todas las etiquetas que contiene:
,
, ,
Descendiente- un elemento ubicado dentro de uno o más tipos de elementos. Por ejemplo,
es un descendiente , y el elemento
es hijo de ambos
y .
elemento principal- un elemento asociado con otros elementos de un nivel inferior, y ubicado en el árbol por encima de ellos. Figura 1
y . Etiqueta
es padre solo para .
elemento hijo- un elemento directamente subordinado a otro elemento de un nivel superior. En la figura 1, sólo elementos
,
,
Y
elemento hermano- un elemento que tiene un elemento padre común con el elemento en consideración, los llamados elementos del mismo nivel. Figura 1
y - elementos del mismo nivel, así como elementos
,
y
Son hermanos entre sí.
1.1. Elemento
1.2. Elemento
Capítulo
... contiene información técnica sobre la página: título, descripción, palabras clave para buscadores, codificación, etc. La información ingresada en él no se muestra en la ventana del navegador, pero contiene datos que le indican al navegador cómo procesar la página.
1.2.1. Elemento
Etiqueta de sección requerida
es la etiqueta . El texto colocado dentro de esta etiqueta se muestra en la barra de título del navegador web. La longitud del título no debe tener más de 60 caracteres para que encaje completamente en el título. El texto del título debe contener la descripción más completa del contenido de la página web.
1.2.2. Elemento
Etiqueta de sección opcional
es una sola etiqueta . Con él, puede establecer una descripción del contenido de la página y palabras clave para los motores de búsqueda, el autor del documento HTML y otras propiedades de metadatos. Elemento puede contener varios elementos , porque dependiendo de los atributos utilizados, llevan diferente información.
La descripción del contenido de la página y las palabras clave se pueden especificar simultáneamente en varios idiomas, por ejemplo, en ruso e inglés:
con una etiqueta puede deshabilitar o permitir la indexación de una página web por parte de los motores de búsqueda:
Para recargar automáticamente la página después de un período de tiempo específico, debe usar el valor de actualización:
La página se recargará en 30 segundos. Para redirigir al visitante a otra página, debe especificar la URL en el parámetro de URL:
Tabla 2. Atributos de etiqueta
Atributo
juego de caracteres
Especifica la codificación de caracteres para el documento HTML actual:
contenido
Contiene texto arbitrario que especifica el valor asociado con el atributo http-equiv o name, según su valor.
http-equiv
Controla las acciones del navegador en esta página web (equivalente a los encabezados HTTP). Al mostrar la página, el navegador seguirá las instrucciones dadas en el atributo: estilo predeterminado especifica el estilo preferido para usar en la página. El atributo de contenido debe contener el id del elemento. , que hace referencia a una hoja de estilo CSS o a un ID de elemento
utilizando el elemento . El elemento no requiere una etiqueta de cierre. Este elemento define la relación entre la página actual y otros documentos. Puede haber varios elementos de este tipo en una página. La entrada se verá así:
Tabla 4. Atributos de etiqueta
Atributo
Descripción, valor aceptado
origen cruzado
Especifica si se debe usar CORS (una tecnología de navegador que permite que una página web acceda a recursos de un dominio diferente) al obtener una imagen de un sitio. anónimo: en una solicitud entre dominios, el navegador agrega automáticamente un encabezado de origen que contiene el nombre del dominio desde el que se realizó la solicitud. Si el servidor no responde con un encabezado CORS Access-Control-Allow-Origin: * (o un nombre de dominio en lugar de un asterisco), se bloqueará la carga de la imagen. use-credentials: si el servidor no proporciona credenciales con Access-Control-Allow-Credentials: true , se bloqueará la carga de la imagen.
href
El atributo principal de la etiqueta, el valor es la ruta al archivo con estilos.
hreflang
Especifica el idioma del texto en el documento vinculado.
medios de comunicación
Especifica el tipo de dispositivo al que se aplicará el recurso de enlace.
mientras tanto
Una variable de cadena generada aleatoriamente por el servidor que establece las reglas para usar estilos en línea para proteger el contenido. El valor del atributo es una cadena de texto.
real
El atributo define la relación entre el documento actual y el documento al que se hace referencia. alternativo: un enlace al mismo documento pero en un formato diferente (por ejemplo, páginas imprimibles, traducción, espejo, RSS o fuente Atom),
.
archives indica que el documento vinculado es de interés histórico. El enlace puede apuntar a una colección de registros, documentos y otros materiales. autor enlace a la página sobre el autor del documento oa la página con los datos de contacto del autor. marcador Una referencia al antepasado más cercano del artículo que es el enlace, oa la sección del artículo que está más estrechamente relacionada con el elemento si no hay un antepasado. external se utiliza para indicar que la página enlazada no forma parte de este sitio. primero especifica un enlace al primer documento en una secuencia de documentos. enlace de ayuda a un documento de ayuda. icono especifica la ruta al icono que se utilizará para el documento actual. último especifica un enlace al último documento en una secuencia de documentos. licencia Un vínculo a la información de derechos de autor del documento. next indica que este documento es parte de una serie y que el enlace apunta al siguiente documento de la serie.
nofollow indica que el enlace no está aprobado por el autor de la página, o que el enlace es comercial. noreferrer indica que el encabezado de la solicitud del cliente que contiene la URL de origen de la solicitud no debe pasarse al seguir el enlace. pingback especifica la dirección del servidor de pingback, lo que permite que el blog notifique automáticamente los sitios que enlazan con él. prefetch especifica que el archivo al que se hace referencia debe almacenarse en caché de antemano. prev indica que este documento es parte de una serie y que el enlace apunta al documento anterior de la serie.
search indica que el documento al que se hace referencia contiene una interfaz de búsqueda y recursos relacionados. La barra lateral indica que el documento vinculado, si es posible, se mostrará en un contexto de navegador adicional, y algunos navegadores, cuando se hace clic en el hipervínculo, abrirán una ventana para agregar el enlace a la barra de marcadores. stylesheet es una referencia a un archivo externo que se utilizará como hoja de estilo para este documento. etiqueta indica que la etiqueta a la que conduce el hipervínculo pertenece a este documento. up indica que la página es parte de una estructura jerárquica y que el hipervínculo conduce a un recurso de nivel superior en la estructura.
tamaños
Especifica el tamaño de los iconos para la visualización. El atributo de tamaños solo se usa junto con rel="icon" y puede tomar los siguientes valores: anchos alto - especifica una lista de tamaños separados por espacios, cada tamaño debe tener el formato - anchos alto (los tamaños de los iconos se especifican en píxeles), por ejemplo:
; cualquiera: el icono se puede escalar a cualquier tamaño.
título
Especifica el título del vínculo o el nombre del conjunto de hojas de estilo alternativas. El valor del atributo es texto.
tipo
Especifica el tipo MIME del documento al que se vincula. En este caso, toma el valor "text/css" .
1.2.5. Elemento
Таблица 5. Атрибуты тега
Cuerpo del documento
Tenga en cuenta que los documentos HTML tienen la extensión .html.
Entonces, en orden del ejemplo.
- tipo de documento (doctype)
Esta construcción siempre se indica al principio del documento para que el navegador "entienda" correctamente qué versión de HTML se utiliza al construir el documento.
Debido a que HTML está en constante evolución, tiene varias versiones, como cualquier producto de software. La versión HTML actual es la quinta y se da en el ejemplo. tipo de documento está actualizado.
En principio, no tiene sentido profundizar en el estudio de los tipos de documentos, ya que con el lanzamiento de HTML5, este diseño se ha convertido en un estándar. Simplemente péguelo al principio del documento cada vez que comience a diseñar el diseño del sitio.
- el comienzo del documento
La primera etiqueta que vemos después del doctype es .
etiqueta HTML- unidad estructural de marcado de un documento HTML. El código HTML se compone de bloques de construcción llamados etiquetas. Cada etiqueta tiene su propia función y, en última instancia, aprender el lenguaje de marcado HTML consiste en aprender las etiquetas y sus propiedades en el documento.
Me gustaría señalar que aprender HTML no es una tarea tan difícil como podría parecer a primera vista. Aprender las etiquetas utilizadas en el marcado de documentos no es una carga tan grande para el cerebro.
Entonces, el marcado del documento comienza con la etiqueta y termina con una etiqueta de cierre. Cada etiqueta que contenga otras etiquetas o elementos debe estar cerrada etiqueta de cierre. Por ejemplo, , ,
, etc.
Etiqueta es obligatorio porque contiene toda la estructura del documento y envuelve el resto de los elementos.
Etiqueta
A continuación, vemos etiqueta
, que contiene otros elementos que aún no nos quedan claros. Contiene otros elementos: esto significa que los elementos o etiquetas se encuentran entre las etiquetas de apertura y cierre de la construcción:
<тег>contenido u otras etiquetasтег>
Etiqueta
está diseñado para almacenar la metainformación de un documento HTML, es decir, información que no se muestra en el documento en sí, pero que es importante y determina en gran medida cómo se verá y se comportará el documento. Esta etiqueta es obligatoria en el documento.
Etiqueta - título del documento
encabezamiento
encabezamiento
es un etiqueta requerida A que contiene metainformación textual que se muestra en el título del navegador o pestaña. Etiqueta debe estar en la etiqueta . Además, los motores de búsqueda utilizan el contenido de esta etiqueta para mostrar el documento en los resultados de búsqueda.
Metaetiqueta
Metaetiqueta- una etiqueta especializada diseñada para proporcionar datos estructurados sobre una página. Las metaetiquetas se usan con mayor frecuencia en una etiqueta
. Las metaetiquetas tienen una estructura opcional HTML documento.
icono de favoritos (favicon)
Adjunta un archivo con una imagen de icono favorito al documento. icono de favoritos (favicon)- un icono en miniatura que se muestra junto al nombre del documento en la pestaña del navegador. Un favicon es un archivo gráfico de 16 x 16 (o 32 x 32) píxeles que puede estar en varios formatos, como png, jpg, ico, gif. Tradicionalmente se utiliza el formato ico. Los favicons animados son archivos gif que contienen animaciones. Puede ver un favicon animado, por ejemplo, en VKontakte cuando llega un nuevo mensaje.
Estilos de documentos CSS
Adjunta un archivo de estilo HTML a un documento CSS.
CSS - en cascada estilo del documento HTML. Cada etiqueta que está en la etiqueta
, hay un conjunto de propiedades, como - color, ancho, alto, posición relativa a otros elementos. Todas estas propiedades son estilos CSS que se pueden sacar a un archivo externo. Diseño conecta archivos externos al documento HTML, incluidos los estilos CSS.
Nota: propiedad href diseños especifica la ubicación del archivo externo. En nuestro ejemplo, el archivo estilo.css y favicon.ico, están en la misma carpeta que el archivo índice.html. no tiene etiqueta de cierre.