Durante la creazione di un sito, la prima cosa che devi rappresentare è come si forma la pagina Web. Questa è una specie, "Fondazione" nell'edificio del sito. Pertanto, prima, di approfondire lo studio di tecnologie più complesse per la creazione di siti, si consiglia di avere almeno informazioni di base su HTML. In questa lezione, faremo conoscere Html.Comprenderemo struttura del documento HTML. E in esempi pratici, risolveranno le conoscenze acquisite.
Cos'è HTML?
Html. È decifrato come linguaggio di markup ipertesto (dall'inglese. Lingua del markup ipertesto). Questa lingua è responsabile per esattamente come viene visualizzato l'ipertesto sulle pagine del sito. Ora lo capiamo, cos'è l'ipertesto? Non è un segreto che una pagina web separata possa contenere molte informazioni diverse, se testo, alcune tabelle, grafica, video, audio, ecc. Quindi, tutte queste informazioni possono essere chiamate in una parola - ipertesto.
Si noti che HTML è la lingua del markup e non il linguaggio di programmazione. In questa lingua non ci sono funzioni logiche e rendono impossibile alcun calcolo matematico. Le pagine HTML hanno un'estensione .html. o .htm. Ed elaborato dai browser - cioè, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, ecc.
Ora capiamo come il browser capisce cosa e come visualizzare sulla pagina web? È molto semplice. La lingua di marcatura Hypertext HTML ha comandi integrati, sono chiamati tag. È su di loro che il browser è orientato.
Struttura del documento HTML.
Qualsiasi documento HTML (web artista) deve avere una struttura specifica. Ciò eviterà possibili problemi durante l'apertura di pagine nei browser. Ad esempio, guardiamo alla pagina che contiene il seguente codice HTML:
Struttura del documento HTML. ...
Analizzeremo in ordine, che è incluso in questa struttura:
1. La prima cosa che va nel documento HTML è specificare la versione (prima riga). Per funzionare correttamente, specificare questa stringa quando si posa una pagina Web.
3. Poi c'è una regione per la parte superiore del sito (Caps). Per questo serve un tag
. Nell'intestazione indiciamo il nome della nostra pagina, posizionando il titolo della pagina tra i tag4. Meta Tag "Descrizione": un breve contenuto di pagine, progettato per i motori di ricerca. Questo tag è importante per l'ottimizzazione dei motori di ricerca e deve essere compilato.
5. Meta Tag "Parole chiave" - \u200b\u200bParole chiave che possono verificarsi sulla pagina. Questo tag è anche destinato ai motori di ricerca. Attualmente, questo tag è usato raramente.
6. Corpo della pagina Apre il tag
e si chiude, rispettivamente, tag. La pagina Web è pubblicata, come regola, il contenuto principale - testo, video, audio e altre informazioni.Pertanto, abbiamo risposto alla domanda Quale HTML è e ha studiato la struttura del documento HTML. Le informazioni ottenute in questa lezione sono i concetti di base, senza di loro non è necessario. Parleremo di cose più complesse in altre lezioni.
Nozioni di base HTML. Queste sono le regole di base del linguaggio HTML, la descrizione della struttura della pagina HTML, la relazione nella struttura del documento HTML tra elementi HTML.
Il documento HTML è un documento di testo ordinario, può essere creato come nel solito editor di testo. (Taccuino)e in uno specializzato, con il codice di illuminazione (Blocco note ++, codice studio visivo, ecc.). Il documento HTML ha un'estensione .html.
Il documento HTML è costituito da un albero di elementi e testo HTML. Ogni elemento viene denotato nel documento iniziale iniziale (apertura) e il tag finale (chiusura) (con eccezione rara).
Iniziare Tag. Mostra dove inizia l'elemento, il finale - dove finisce. Tag di chiusura È formato aggiungendo una barra / prima del nome del tag:<имя тега> … . Tra i tag iniziali e di chiusura c'è il contenuto del contenuto del tag.
I singoli tag non possono memorizzare direttamente il contenuto, è prescritto come un valore di attributo, ad esempio, tag Crea un pulsante con il testo Pulsante Dentro.
I tag possono essere investiti l'uno nell'altro, ad esempio,
Testo
. Quando si investe, è necessario seguire l'ordine della loro chiusura. (Il principio di "Matryshka")Ad esempio, la prossima voce sarà errata:Testo
.Gli elementi HTML possono avere attributi (globale applicabile per tutti gli elementi HTML e il loro). Gli attributi sono scritti nel tag dell'elemento Discovery e contengono il nome e il valore specificato nel formato del nome dell'attributo \u003d "valore". Gli attributi consentono di modificare le proprietà e il comportamento dell'articolo per il quale sono specificati.
Ogni elemento può essere assegnato diversi valori di classe e solo un valore ID. I valori di classe multipli sono registrati tramite spazio,
La navigazione del browser (interpreta) un documento HTML, costruendo la sua struttura (DOM) e la visualizzando in conformità con le istruzioni incluse in questo file (stili, script). Se il markup è corretto, la pagina HTML contenente elementi HTML verrà visualizzata nella finestra del browser - titoli, tabelle, immagini, ecc.
Processo di interpretazione (Parsing) Inizia prima che la pagina web sia completamente caricata nel browser. I browser gestiscono i documenti HTML in sequenza, fin dall'inizio, durante l'elaborazione dei fogli CSS e di stile correlazione con gli elementi della pagina.
Il documento HTML è composto da due sezioni - Titolo - Tra tag
… e parte significativa - tra i tag … .Struttura della pagina web
1. Struttura del documento HTML
La lingua HTML segue le regole contenute nel file annuncio del tipo di annuncio del documento. (Definizione del tipo di documento o DTD). DTD è un documento XML che determina quali tag, attributi e i loro valori sono validi per un tipo HTML specifico. Per ogni versione di HTML ha il proprio DTD.
DOCTYPE. Responsabile della corretta visualizzazione del browser della pagina Web. DOCTYPE definisce non solo la versione HTML (ad esempio, HTML), ma anche il file DTD corrispondente su Internet.
Elementi situati all'interno del tag , forma un albero di un documento il cosiddetto modello di documento operativo, DOM (modello oggetto documento). Allo stesso tempo elemento È un elemento radice.
Fico. 1. Struttura della pagina web più semplice Per comprendere l'interazione degli elementi di webpage, è necessario considerare il cosiddetto "Relazione correlata" Tra gli elementi. La relazione tra più elementi nidificati è suddivisa in genitori, filiali e infermieristi.
Antenato - Un elemento che entra in altri elementi. Figura 1, l'antenato per tutti gli elementi è . Allo stesso tempo elemento
È l'antenato per tutti i tag contenuti in esso:,
, ,
Discendente - Un elemento situato all'interno di uno o più tipi di articoli. Per esempio,
È un discendente e elementoÈ un discendente allo stesso tempo per
e .Elemento parentale - L'elemento associato ad altri elementi del livello inferiore e sull'albero sopra di loro. Figura 1.
e . EtichettaÈ il genitore solo per .
Elemento figlia - Elemento direttamente subordinato a un altro elemento di livello superiore. Figura 1 Solo articoli
, ,
E
Elemento infermieristico - Un elemento con un elemento genitore comune con i cosiddetti elementi di un livello. Figura 1.
e - elementi di un livello, così come elementi , e
Sono tra loro infermieri.
1.1. Elemento
1.2. Elemento
Sezione
... Contiene informazioni tecniche sulla pagina: titolo, descrizione, parole chiave per motori di ricerca, codifica, ecc. Le informazioni inserite in esso non vengono visualizzate nella finestra del browser, tuttavia, contiene i dati che il browser indica come elaborare la pagina.1.2.1. Elemento </h4>
<p>Sezione tag obbligatoria <head> è tag. <title> . Il testo situato all'interno di questo tag viene visualizzato nella barra del titolo del browser Web. La lunghezza dell'intestazione non dovrebbe essere superiore a 60 caratteri per adattarsi completamente al titolo. Il testo dell'intestazione deve contenere la descrizione più completa dei contenuti della pagina Web.</p>
<h4>1.2.2. Elemento <meta></h4>
<p>Tag sezionale opzionale <head> è lo stesso tag <meta> . Con esso, è possibile impostare una descrizione del contenuto della pagina e parole chiave per i motori di ricerca, l'autore del documento HTML e altre proprietà dei metadati. Elemento <head> può contenere diversi elementi <meta> Perché a seconda degli attributi utilizzati, portano varie informazioni.</p><p>
<meta name="description" content="Descrizione del contenuto della pagina">
<meta name="keywords" content="Parole chiave attraverso una virgola">
</p><p>La descrizione del contenuto della pagina e delle parole chiave può essere simultaneamente indicata in diverse lingue, ad esempio, in russo e inglese:</p><p>
<meta name="description" lang="ru" content="Descrizione del contenuto della pagina">
<meta name="description" lang="en" content="Descrizione.">
<meta name="keywords" lang="ru" content="Parole chiave attraverso una virgola">
<meta name="keywords" lang="en" content="Parole chiave">
</p><p>Usando tag. <meta> Puoi vietare o consentire l'indicizzazione della pagina web da parte dei motori di ricerca:</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>Per riavviare automaticamente la pagina in un determinato periodo di tempo necessario utilizzare il valore di aggiornamento:</p><p>
<meta content="30">
</p><p>La pagina verrà riavviata dopo 30 secondi. Per trasferire il visitatore in un'altra pagina, è necessario specificare l'URL nel parametro URL:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Tabella 2. TAG Attributi <meta>
<tbody><tr><th style="width: 20%;">Attributo</th>
<th></th>
</tr><tr><td> Charset.</td>
<td>Specifica la codifica dei caratteri per il documento HTML corrente: <meta charset="UTF-8">
</td>
</tr><tr><td> Soddisfare</td>
<td>Contiene testo arbitrario che determina il valore associato all'attributo HTTP-Equiv o Nome, a seconda del loro valore.</td>
</tr><tr><td> Http-equiv.</td>
<td>Controlla le azioni del browser su questa pagina Web (equivalente di intestazioni HTTP). Durante la visualizzazione della pagina, il browser seguirà le istruzioni specificate nell'attributo: <br> Stile predefinito Specifica lo stile preferito da utilizzare sulla pagina. L'attributo del contenuto deve contenere un identificatore di elementi <link> che si riferisce alla tabella degli stili CSS, o un identificatore di elementi<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 elemento. . L'elemento non richiede un tag di chiusura. Questo elemento determina la relazione tra la pagina corrente e altri documenti. Ci possono essere diversi elementi simili sulla pagina. Il record avrà il seguente modulo:
| Attributo | Descrizione |
|---|---|
| Crossorigin. | Specifica se i cranti dovrebbero essere utilizzati (tecnologia del browser che consente di fornire un accesso a una pagina Web ad altre risorse di dominio) quando si estrae un'immagine dal sito. Anonymous - Nella query cross-domain, il browser aggiunge automaticamente l'intestazione di origine contenente il nome di dominio da cui viene eseguita una richiesta. Se il server non risponde al controllo di accesso-consenso: * (o nome di dominio anziché le stelle), il carico dell'immagine verrà bloccato. Le credenziali dell'uso - se il server non fornisce credenziali utilizzando Access-Control-Allow-Credentials: TRUE, quindi il carico dell'immagine verrà bloccato. |
| href. | L'attributo principale del tag, come valore, è il percorso del file con gli stili. |
| Hreflang. | Specifica la lingua del testo nel documento a cui è il collegamento. |
| Media | Definisce il tipo di dispositivo a cui deve essere applicata la risorsa di riferimento. |
| Necesco | Variabile randing generata a caso sul server, che imposta le regole per l'utilizzo degli stili incorporati per proteggere il contenuto. Valore attributo - Stringa di testo. |
| Rel. | L'attributo determina la relazione tra il documento corrente e il documento che i riferimenti sono. Alternativo - collegamento allo stesso documento, ma in un altro formato (ad esempio, pagine di stampa, traduzione, specchio, nastro in formato RSS o Atom), . Archivi - indica che il documento sul collegamento rappresenta l'interesse storico. Il collegamento può indicare una raccolta di record, documenti e altri materiali. Autore Link alla pagina sull'autore del documento o sulla pagina con i dettagli di contatto dell'autore. Segnalibro Riferimento presso l'antenato più vicino dell'articolo, che è un collegamento, o alla sezione dell'articolo, più strettamente correlata all'elemento, se non c'è antenato. L'esterno viene utilizzato per indicare che la pagina a cui il collegamento non fa parte di questo sito. Prima specifica il collegamento che porta al primo documento dalla sequenza dei documenti. Aiutare a fare riferimento a un documento con un certificato. L'icona definisce il percorso verso l'icona che verrà utilizzata per il documento corrente. L'ultima specifica il collegamento che porta all'ultimo documento nella sequenza di documenti. Riferimento della licenza alle informazioni sul copyright per il documento. Successiva indica che questo documento fa parte della serie e che il collegamento porta al seguente documento in questa serie. Nofollow Indica che il collegamento non è approvato dall'autore della pagina o che il collegamento è commerciale. NoreFerrer indica che l'intestazione della richiesta del client contenente l'URL della sorgente di richiesta non deve essere trasmessa durante il collegamento. Pingback Specifica l'indirizzo del server Pingback, che consente al blog di avvisare automaticamente i siti che si collegano ad esso. PREFETCH indica che il file dovrebbe essere tenuto in anticipo a cui il collegamento conduce. Indietro Indica che questo documento fa parte della serie e che il collegamento porta al documento precedente in questa serie. La ricerca indica che il documento di riferimento contiene l'interfaccia di ricerca e le risorse correlate. La barra laterale indica che il documento di riferimento, se possibile, verrà visualizzato nel contesto aggiuntivo del browser e alcuni browser quando si fa clic sul collegamento ipertestuale Aprire la finestra per aggiungere un collegamento al pannello dei segnalibri. Stylesheet Link a un file esterno che verrà utilizzato come foglio di stile per questo documento. L'etichetta indica che l'etichetta su cui il collegamento ipertestuale sta portando a questo documento. Indica che la pagina fa parte della struttura gerarchica e che il collegamento ipertestuale porta a un livello più alto di risorsa nella struttura. |
| Taglie. | Specifica la dimensione delle icone per il display visivo. L'attributo delle taglie viene utilizzato solo con rel \u003d "icona" e può prendere i seguenti significati: Le larghezze sono altezza - Definisce un elenco di dimensioni separate da spazi, ogni dimensione deve essere nel formato - le larghezze dell'altezza (le dimensioni delle icone sono impostate in pixel), ad esempio: ; Qualsiasi - icona può scalare a qualsiasi dimensione. |
| Titolo | Specifica il titolo del collegamento o il nome del set di tabelle di stile alternative. Valore attributo - Testo. |
| genere | Specifica il tipo di documento MIME a cui è il collegamento. In questo caso, prende il valore "Testo / CSS". |
