EntradaIdioma de programación HTML para maniquíes. Conceptos básicos de HTML para principiantes en lenguaje comprensible.
Conceptos básicos html Estas son las reglas básicas del idioma HTML, la descripción de la estructura de la página HTML, la relación en la estructura del documento HTML entre los elementos HTML.
El documento HTML es un documento de texto ordinario, se puede crear como en el editor de texto habitual. (Computadora portátil)y en un código especializado, con el código de iluminación. (Notepad ++, código de estudio visual, etc.). El documento HTML tiene una extensión .html.
El documento HTML consiste en un árbol de elementos y texto HTML. Cada elemento se denota en el documento inicial inicial (apertura) y la etiqueta final (cierre) (con excepción rara).
Etiqueta de inicio Muestra dónde comienza el elemento, la final, donde termina. Etiqueta de cierre Se forma agregando una barra / antes del nombre de la etiqueta:<имя тега> … . Entre las etiquetas iniciales y de cierre, existe el contenido del contenido de la etiqueta.
Las etiquetas individuales no pueden almacenar contenido directamente, se prescribe como un valor de atributo, por ejemplo, etiqueta Crea un botón con texto Botón Adentro.
Las etiquetas se pueden invertir entre sí, por ejemplo,
Texto
. Al invertir, se debe seguir el orden de su cierre. (El principio de "matryshka")Por ejemplo, la siguiente entrada será incorrecta:Texto
.Los elementos HTML pueden tener atributos (global aplicable para todos los elementos HTML, y su propio). Los atributos se escriben en la etiqueta del elemento de descubrimiento y contienen el nombre y el valor especificado en el formato del nombre de atributo \u003d "valor". Los atributos le permiten cambiar las propiedades y el comportamiento del elemento para el que se especifican.
Cada elemento se puede asignar varios valores de clase y solo un valor de ID. Los valores de clase múltiple se registran a través del espacio,
El navegador navegando (interpreta) un documento HTML, construyendo su estructura (DOM) y mostrándola de acuerdo con las instrucciones incluidas en este archivo (estilos, scripts). Si el marcado es correcto, la página HTML que contiene elementos HTML se mostrará en la ventana del navegador: titulares, tablas, imágenes, etc.
Proceso de interpretación (Analizando) Comienza antes de que la página web esté completamente cargada en el navegador. Los navegadores manejan los documentos HTML de forma secuencial, desde el principio, mientras se procesan CSS y hojas de estilo correlacionadoras con elementos de la página.
El documento HTML consta de dos secciones - título - entre las etiquetas
… y parte significativa - entre etiquetas … .Estructura de la página web
1. Estructura de documento HTML
El idioma HTML sigue las reglas que están contenidas en el archivo de anuncios de tipo de anuncio del documento. (Definición de tipo de documento, o DTD). DTD es un documento XML que determina qué etiquetas, atributos y sus valores son válidos para un tipo HTML específico. Cada versión de HTML tiene su propio DTD.
DOCTYPE. Responsable de la pantalla correcta del navegador de la página web. DOCTYPE define no solo la versión HTML (por ejemplo, HTML), sino también el archivo DTD correspondiente en Internet.
Elementos ubicados dentro de la etiqueta. , formar un árbol de un documento llamado modelo de documento operativo, DOM (Modelo de objeto de documento). Al mismo tiempo elemento Es un elemento raíz.
Higo. 1. Estructura de página web más simple Para comprender la interacción de los elementos de la página web, es necesario considerar el llamado "Relación relacionada" Entre los elementos. La relación entre múltiples elementos anidados se divide en padres, subsidiarias y enfermería.
Antepasado - Un elemento que entra en otros elementos. Figura 1, el antepasado para todos los elementos es . Al mismo tiempo elemento
Es el ancestro para todas las etiquetas contenidas en ella:,
, ,
Descendiente - Un elemento ubicado dentro de uno o más tipos de artículos. Por ejemplo,
Es un descendiente y elementoEs un descendiente al mismo tiempo para
y .Elemento parental - El elemento asociado con otros elementos del nivel inferior, y en el árbol sobre ellos. Figura 1.
y . EtiquetaEs el padre solo para .
Elemento hija - Elemento directamente subordinado a otro elemento del nivel superior. Figura 1 solo artículos
, ,
Y
Elemento de enfermería - Un elemento que tiene un elemento padre común con los llamados elementos de un nivel. Figura 1.
y - Elementos de un nivel, así como elementos. , y
Están entre ellos enfermos.
1.1. Elemento
1.2. Elemento
Sección
... Contiene información técnica sobre la página: Título, Descripción, Palabras clave para motores de búsqueda, codificación, etc. Sin embargo, la información ingresada en ella no se muestra en la ventana del navegador, contiene los datos que el navegador indica cómo procesar la página.1.2.1. Elemento </h4>
<p>Sección obligatoria de etiqueta <head> es etiqueta <title> . El texto ubicado dentro de esta etiqueta se muestra en la barra de título del navegador web. La longitud del encabezado no debe tener más de 60 caracteres para encajar completamente en el título. El texto del encabezado debe contener la descripción más completa de los contenidos de la página web.</p>
<h4>1.2.2. Elemento <meta></h4>
<p>Etiqueta seccional opcional <head> es la misma etiqueta <meta> . Con él, puede configurar una descripción de los contenidos de la página y las palabras clave para los motores de búsqueda, el autor del documento HTML y otras propiedades de los metadatos. Elemento <head> Puede contener varios elementos. <meta> Porque dependiendo de los atributos utilizados, llevan diversas información.</p><p>
<meta name="description" content="Descripción del contenido de la página">
<meta name="keywords" content="Palabras clave a través de una coma">
</p><p>La descripción del contenido de la página y las palabras clave se pueden indicar simultáneamente en varios idiomas, por ejemplo, en ruso e inglés:</p><p>
<meta name="description" lang="ru" content="Descripción del contenido de la página">
<meta name="description" lang="en" content="Descripción.">
<meta name="keywords" lang="ru" content="Palabras clave a través de una coma">
<meta name="keywords" lang="en" content="Palabras clave.">
</p><p>Usando etiqueta <meta> Puede prohibir o permitir la indexación de la página web por los motores de búsqueda:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Para reiniciar automáticamente la página en un período de tiempo específico, debe usar el valor de actualización:</p><p>
<meta content="30">
</p><p>La página se reiniciará después de 30 segundos. Para transferir al visitante a otra página, debe especificar la URL en el parámetro URL:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Tabla 2. Atributos de la etiqueta <meta>
<tbody><tr><th style="width: 20%;">Atributo</th>
<th></th>
</tr><tr><td> Charst.</td>
<td>Especifica la codificación de caracteres para el documento HTML actual: <meta charset="UTF-8">
</td>
</tr><tr><td> Contenido</td>
<td>Contiene texto arbitrario que determina el valor asociado con el atributo HTTP-Equiv o Name, dependiendo de su valor.</td>
</tr><tr><td> Http-equiv.</td>
<td>Controla las acciones del navegador en esta página web (equivalente de encabezados HTTP). Al mostrar la página, el navegador seguirá las instrucciones especificadas en el atributo: <br> Estilo predeterminado Especifica el estilo preferido para usar en la página. El atributo de contenido debe contener un identificador de elemento <link> que se refiere a la tabla de estilos CSS, o un identificador de elementos<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
usando el elemento . El elemento no requiere una etiqueta de cierre. Este elemento determina la relación entre la página actual y otros documentos. Puede haber varios elementos de este tipo en la página. El registro tendrá el siguiente formulario:
| Atributo | Descripción |
|---|---|
| Crossorigin. | Especifica si se deben usar CORS (tecnología del navegador que le permite proporcionar un acceso a una página web a otros recursos de dominio) al extraer una imagen del sitio. Anónimo: en la consulta de dominio cruzado, el navegador agrega automáticamente el encabezado de origen que contiene el nombre de dominio desde el cual se realiza una solicitud. Si el servidor no contesta el control de acceso-Permiso-Permiso: * (o nombre de dominio en lugar de las estrellas), entonces la carga de la imagen será bloqueada. Uso-credenciales: si el servidor no proporciona credenciales utilizando Access-Control-Permitir-Credenciales: True, entonces la carga de la imagen se bloqueará. |
| href. | El atributo principal de la etiqueta, como un valor, es la ruta al archivo con estilos. |
| hreflang. | Especifica el idioma del texto en el documento al que es el enlace. |
| Medios de comunicación | Define el tipo de dispositivo al que se debe aplicar el recurso de referencia. |
| MIENTRAS TANTO | RANDING VARIABLE GENERADORA GENERADORA EN EL SERVIDOR, QUE ESTABLECE las reglas para usar estilos incrustados para proteger el contenido. Valor de atributo - cadena de texto. |
| Rel. | El atributo determina la relación entre el documento actual y el documento que es la referencias. Alternativa: enlace al mismo documento, pero en otro formato (por ejemplo, imprimir páginas, traducción, espejo, cinta en formato RSS o Atom), . Archivos: indica que el documento en el enlace representa el interés histórico. El enlace puede indicar una colección de registros, documentos y otros materiales. Autor Enlace a la página sobre el autor del documento o la página con los detalles de contacto del autor. Favorita la referencia en el antepasado más cercano del artículo, que es un enlace, o a la sección del artículo, más estrechamente relacionada con el elemento, si no hay antepasado. Externo se utiliza para indicar que la página a la que el enlace no es parte de este sitio. Primero especifica el vínculo que conduce al primer documento de la secuencia del documento. Ayuda a la referencia a un documento con un certificado. El icono define la ruta al icono que se utilizará para el documento actual. La última especifica el vínculo que conduce al último documento en la secuencia de documentos. Referencia de licencia a información de derechos de autor para el documento. Siguiente indica que este documento es parte de la serie, y que el enlace conduce al siguiente documento en esta 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 solicitud del cliente que contiene la URL de la fuente de solicitud no debe transmitirse durante el enlace. Pingback Especifica la dirección del servidor Pingback, que permite al blog notificar automáticamente los sitios que se conectan a él. Prefetch indica que el archivo debe mantenerse por adelantado al que lleva el enlace. Prev indica que este documento es parte de la serie, y que el enlace conduce al documento anterior en esta serie. La búsqueda indica que el documento de referencia contiene la interfaz de búsqueda y los recursos relacionados. La barra lateral indica que el documento de referencia, si es posible, se mostrará en el contexto adicional del navegador, y algunos navegadores al hacer clic en el hipervínculo Abra la ventana para agregar un enlace al panel Marcadores. Enlace de estilo de estilo a un archivo externo que se utilizará como hoja de estilo para este documento. La etiqueta indica que la etiqueta en la que el hipervínculo está llevando a este documento. Up indica que la página es parte de la estructura jerárquica, y que el hipervínculo conduce a un nivel más alto de recurso en la estructura. |
| Tamaños. | Especifica el tamaño de los iconos para la pantalla visual. El atributo de los tamaños se usa solo con rel \u003d "icon", y puede tomar los siguientes significados: Los anchos son de altura: define una lista de tamaños separados por espacios, cada tamaño debe estar en el formato: los anchos de la altura (las dimensiones de los iconos se establecen en píxeles), por ejemplo: ; Cualquier icono puede escalar a cualquier tamaño. |
| Título | Especifica el título del enlace o el nombre del conjunto de tablas de estilo alternativo. Valor de atributo - Texto. |
| Tipo | Especifica el tipo de documento MIME al que es el enlace. En este caso, toma el valor "Texto / CSS". |
1.2.5. Elemento Cuerpo del documento Tenga en cuenta que los documentos HTML tienen una extensión .html.
Entonces, en orden del ejemplo.
- Tipo de documento (DC)
Este diseño siempre está indicado al comienzo del documento para el navegador correcto de "comprensión" de qué versión de HTML se usa al crear un documento.
Debido al hecho de que HTML se está desarrollando constantemente, tiene varias versiones, como cualquier producto del programa. La versión actual de HTML es la quinta y una dada en el ejemplo. droga es relevante.
En principio, no tiene sentido profundizar en el estudio del tipo de documento, porque con la salida HTML5, este diseño se ha convertido en el estándar. Simplemente insértelo al comienzo del documento cada vez que inicie el diseño del sitio.
- Inicio del documento.
La primera etiqueta que nos reunimos después del médico es .
Etiqueta html - Unidad estructural de marcado Documento HTML. El código HTML se pliega de ladrillos, que se conocen como etiquetas. Cada etiqueta tiene su propia función, y el estudio del idioma de marcado HTML, en última instancia, es precisamente en el estudio de las etiquetas y sus propiedades en el documento.
Me gustaría señalar que el estudio de HTML no es una lección tan compleja, ya que puede parecer a primera vista. Para aprender las etiquetas utilizadas en el markup, no una carga tan grande en el cerebro.
Entonces, el marcado del documento comienza con la etiqueta. y termina con una etiqueta de cierre. Cada etiqueta que contiene otras etiquetas o elementos debe estar cerrada. etiqueta de cierre. Por ejemplo, , ,
, etc.Etiqueta Es obligatorio, ya que contiene toda la estructura del documento y es una concha para otros elementos.
Etiqueta
A continuación, vemos etiqueta que contiene otros hasta que los artículos lo entiendan. Contiene otros elementos: esto significa que los elementos o las etiquetas están entre la etiqueta de apertura y cierre de la estructura:
<тег> Contenido u otras etiquetas
Etiqueta
Está destinado a almacenar la metamización del documento HTML, es decir, la información que no se muestra en el propio documento, pero es importante y determina en gran medida cómo se verá el documento y cómo comportarse.Esta etiqueta se requiere en el documento.
Etiqueta - Encabezado de documentos</h4>
<title>Título
Título
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,