HTML-Grundlagen für Anfänger. Grundlagen von HTML und CSS für Anfänger. So lernen Sie kostenlos eine Sprache a
HTML-Grundlagen enthalten die Grundregeln der HTML-Sprache, eine Beschreibung des Aufbaus einer HTML-Seite, Beziehungen in der Struktur eines HTML-Dokuments zwischen HTML-Elementen.
HTML-Dokument ist normal Text dokument, kann wie in einem normalen Texteditor erstellt werden (Notizbuch), und spezialisiert, mit Code-Highlighting (Notizblock ++, Visual Studio Code usw.)... Das HTML-Dokument hat die Erweiterung .html.
Ein HTML-Dokument besteht aus einem Baum von HTML-Elementen und Text. Jedes Element wird im Quelldokument durch ein Start- (öffnendes) und ein End- (schließendes) Tag (mit seltenen Ausnahmen) gekennzeichnet.
Starttag zeigt an, wo das Element beginnt, das Ende zeigt, wo es endet. End-Tag wird durch Hinzufügen eines Schrägstrichs / vor dem Tag-Namen gebildet:<имя тега> … ... Zwischen den Start- und End-Tags befindet sich der Inhalt des Tags - content.
Einzelne Tags können keinen Inhalt direkt in sich selbst speichern, er wird als Attributwert geschrieben, zum Beispiel ein Tag erstellt eine Schaltfläche mit Text Taste Innerhalb.
Tags können ineinander verschachtelt werden, z.
Text
... Wenn Sie investieren, sollten Sie die Reihenfolge des Abschlusses einhalten ("Matroschka"-Prinzip), wird beispielsweise der folgende Eintrag falsch sein:Text
.HTML-Elemente können Attribute haben (global, die für alle HTML-Elemente gelten, und eigene). Attribute werden in das öffnende Tag eines Elements geschrieben und enthalten einen Namen und einen Wert, der im Format Attributname = "Wert" angegeben ist. Mit Attributen können Sie die Eigenschaften und das Verhalten des Elements ändern, für das sie festgelegt sind.
Jedem Element können mehrere Klassenwerte und nur ein ID-Wert zugewiesen werden. Mehrere Klassenwerte werden durch ein Leerzeichen getrennt,
Der Browser betrachtet (interpretiert) ein HTML-Dokument, baut seine Struktur (DOM) auf und zeigt es gemäß den in dieser Datei enthaltenen Anweisungen (Stylesheets, Skripte) an. Wenn das Markup korrekt ist, zeigt das Browserfenster eine HTML-Seite an, die HTML-Elemente enthält - Kopfzeilen, Tabellen, Bilder usw.
Interpretationsprozess (Parsing) beginnt, bevor die Webseite vollständig in den Browser geladen wurde. Browser verarbeiten HTML-Dokumente von Anfang an sequentiell, während sie CSS verarbeiten und Stylesheets mit Seitenelementen korrelieren.
HTML-Dokument besteht aus zwei Abschnitten - Überschrift - zwischen Tags
… und der Inhaltsteil - zwischen den Tags … .Webseitenstruktur
1. Die Struktur des HTML-Dokuments
HTML folgt den Regeln in der Dokumenttyp-Deklarationsdatei (Dokumenttypdefinition oder DTD)... Eine DTD ist ein XML-Dokument, das definiert, welche Tags, Attribute und deren Werte für einen bestimmten HTML-Typ gültig sind. Jede HTML-Version hat ihre eigene DTD.
DOCTYP ist für die korrekte Darstellung der Webseite durch den Browser verantwortlich. DOCTYPE definiert nicht nur die HTML-Version (wie html), sondern auch die entsprechende DTD-Datei im Internet.
Elemente innerhalb des Tags , bilden einen Dokumentenbaum, den sogenannten Dokumentobjektmodell (DOM)... In diesem Fall ist das Element ist das Wurzelelement.
Feige. 1. Der einfachste Aufbau einer Webseite Um das Zusammenspiel von Elementen einer Webseite zu verstehen, ist es notwendig, die sog "Familienbeziehung" zwischen Elementen. Beziehungen zwischen mehreren verschachtelten Elementen werden als übergeordnete, untergeordnete und gleichgeordnete Elemente kategorisiert.
Vorfahr- ein Element, das andere Elemente enthält. In Abbildung 1 ist der Vorfahr für alle Elemente elements ... Gleichzeitig ist das Element
ist der Vorfahre aller darin enthaltenen Tags:,
, ,
Nachfahre- ein Element, das sich innerhalb eines oder mehrerer Elementtypen befindet. Beispielsweise,
ist ein Nachkomme und ElementIst gleichzeitig ein Nachkomme für
und .Übergeordnetes Element- ein Element, das mit anderen Elementen zusammenhängt mehr niedriges Niveau, und der im Baum über ihnen. Abbildung 1
und ... EtikettNur Eltern für .
Untergeordnetes Element- ein Element, das einem anderen Element einer höheren Ebene direkt untergeordnet ist. In Abbildung 1 sind nur Elemente
, ,
UND
Pflegeelement- ein Element, das mit dem betrachteten Element ein gemeinsames Elternelement hat, die sogenannten Geschwisterelemente. Abbildung 1
und - Elemente der gleichen Ebene, sowie Elemente , und
Sie sind Schwestern unter sich.
1.1. Element
1.2. Element
Abschnitt
... enthält technische Informationen zur Seite: Titel, Beschreibung, Schlüsselwörter für Suchmaschinen, Kodierung usw. Die darin eingegebenen Informationen erscheinen nicht im Browserfenster, enthalten jedoch Daten, die dem Browser mitteilen, wie die Seite zu handhaben ist.1.2.1. Element </h4>
<p>Erforderliches Abschnitts-Tag <head>ist das Etikett <title>... Der in diesem Tag platzierte Text wird in der Titelleiste des Webbrowsers angezeigt. Die Länge des Titels sollte nicht mehr als 60 Zeichen betragen, damit er vollständig in den Titel passt. Der Titeltext sollte eine möglichst vollständige Beschreibung des Inhalts der Webseite enthalten.</p>
<h4>1.2.2. Element <meta></h4>
<p>Optionales Abschnitts-Tag <head>ist ein einzelnes Tag <meta>... Es kann verwendet werden, um eine Beschreibung des Seiteninhalts und Schlüsselwörter für Suchmaschinen, den Autor des HTML-Dokuments und andere Metadateneigenschaften festzulegen. Element <head>kann mehrere Elemente enthalten <meta>denn sie tragen je nach verwendeten Attributen unterschiedliche Informationen.</p><p>
<meta name="description" content="Beschreibung des Seiteninhalts">
<meta name="keywords" content="Durch Kommas getrennte Schlüsselwörter">
</p><p>Die Beschreibung der Seiteninhalte und Schlagworte können gleichzeitig in mehreren Sprachen angegeben werden, beispielsweise in Russisch und Englisch:</p><p>
<meta name="description" lang="ru" content="Beschreibung des Seiteninhalts">
<meta name="description" lang="en" content="Beschreibung">
<meta name="keywords" lang="ru" content="Durch Kommas getrennte Schlüsselwörter">
<meta name="keywords" lang="en" content="Schlüsselwörter">
</p><p>Verwenden des Tags <meta>Sie können die Indexierung einer Webseite durch Suchmaschinen verbieten oder zulassen:</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>Um die Seite nach einem bestimmten Zeitraum automatisch neu zu laden, müssen Sie den Aktualisierungswert verwenden:</p><p>
<meta content="30">
</p><p>Die Seite wird in 30 Sekunden neu geladen. Um einen Besucher auf eine andere Seite zu leiten, müssen Sie die URL im URL-Parameter angeben:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tabelle 2. Attribute des Tags <meta>
<tbody><tr><th style="width: 20%;">Attribut</th>
<th></th>
</tr><tr><td>Zeichensatz</td>
<td>Gibt die Zeichenkodierung für das aktuelle HTML-Dokument an: <meta charset="UTF-8">
</td>
</tr><tr><td>Inhalt</td>
<td>Enthält freien Text, der den mit dem http-equiv- oder name-Attribut verknüpften Wert definiert, je nach Wert.</td>
</tr><tr><td>http-Äquiv</td>
<td>Steuert Browseraktionen auf einer bestimmten Webseite (entspricht HTTP-Headern). Beim Rendern der Seite folgt der Browser den Anweisungen im Attribut: <br>default-style gibt den bevorzugten Stil für die Verwendung auf der Seite an. Das content-Attribut muss die Element-ID enthalten <link>was auf ein CSS-Stylesheet oder eine Element-ID verweist<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>
Element verwenden ... Das Element benötigt kein End-Tag. Dieses Element definiert die Beziehung zwischen der aktuellen Seite und anderen Dokumenten. Auf der Seite können mehrere solcher Elemente vorhanden sein. Der Eintrag sieht so aus:
| Attribut | Beschreibung, akzeptierter Wert |
|---|---|
| Ursprungsländer | Gibt an, ob CORS (eine Browsertechnologie, die es einer Webseite ermöglicht, auf Ressourcen in einer anderen Domäne zuzugreifen) verwendet werden soll, wenn ein Bild von einer Site abgerufen wird. anonym - Der Browser fügt der domänenübergreifenden Anfrage automatisch den Origin-Header hinzu, der den Namen der Domäne enthält, von der die Anfrage gestellt wurde. Wenn der Server nicht mit dem Access-Control-Allow-Origin: * CORS-Header (oder dem Domain-Namen anstelle eines Sternchens) antwortet, wird der Bild-Upload blockiert. use-credentials - Wenn der Server keine Anmeldeinformationen mit Access-Control-Allow-Credentials: true bereitstellt, wird der Bild-Upload blockiert. |
| href | Das Hauptattribut des Tags, der Wert, ist der Pfad zur Datei mit Stilen. |
| hreflang | Bestimmt die Sprache des Textes im referenzierten Dokument. |
| Medien | Gibt den Gerätetyp an, auf den die Linkressource angewendet werden soll. |
| nichtce | Eine zufällig generierte Zeichenfolgenvariable auf dem Server, die die Regeln für die Verwendung von Inline-Stilen zum Schutz von Inhalten angibt. Der Attributwert ist eine Textzeichenfolge. |
| rel | Das Attribut definiert die Beziehung zwischen dem aktuellen Dokument und dem referenzierten Dokument. alternativ - ein Link zu demselben Dokument, jedoch in einem anderen Format (z. B. Seiten zum Drucken, Übersetzen, Spiegeln, RSS- oder Atom-Feed), . Archive - zeigt an, dass das referenzierte Dokument von historischem Interesse ist. Der Link kann auf eine Sammlung von Datensätzen, Dokumenten und anderen Materialien verweisen. author ist ein Link zur Seite über den Autor des Dokuments oder zur Seite mit den Kontaktdaten des Autors. Lesezeichen bezieht sich auf den nächsten Vorfahren des Artikels, der der Link ist, oder auf den Abschnitt des Artikels, der am engsten mit dem Element verwandt ist, wenn kein übergeordnetes Element vorhanden ist. external wird verwendet, um anzuzeigen, dass die verlinkte Seite nicht Teil dieser Site ist. first gibt einen Link zum ersten Dokument in einer Folge von Dokumenten an. help ist ein Link zu einem Dokument mit Hilfe. icon definiert den Pfad zum Symbol, das für das aktuelle Dokument verwendet wird. last gibt einen Link an, der zum letzten Dokument in der Dokumentenfolge führt. Lizenz bezieht sich auf die Copyright-Informationen für das Dokument. next zeigt an, dass dieses Dokument Teil einer Serie ist und der Link zum nächsten Dokument in der Serie führt. nofollow weist darauf hin, dass der Link vom Autor der Seite nicht genehmigt wurde oder dass der Link kommerzieller Natur ist. noreferrer gibt an, dass der Client-Request-Header, der die URL der Request-Quelle enthält, beim Klicken auf den Link nicht übergeben werden soll. pingback gibt die Adresse des Pingback-Servers an, wodurch es dem Blog ermöglicht wird, Sites, die darauf verweisen, automatisch zu benachrichtigen. prefetch gibt an, dass die Verknüpfungsdatei im Voraus zwischengespeichert werden soll. prev gibt an, dass dieses Dokument Teil einer Serie ist und dass der Link auf das vorherige Dokument in der Serie verweist. search gibt an, dass das referenzierte Dokument eine Suchschnittstelle und zugehörige Ressourcen enthält. Die Seitenleiste zeigt an, dass das referenzierte Dokument, wenn möglich, in einem zusätzlichen Browserkontext angezeigt wird, und einige Browser öffnen beim Klicken auf den Hyperlink ein Fenster, um den Link zur Lesezeichenleiste hinzuzufügen. stylesheet ist ein Link zu einer externen Datei, die als Stylesheet für dieses Dokument verwendet wird. tag gibt an, dass das Tag, auf das der Hyperlink verweist, für das angegebene Dokument gilt. up zeigt an, dass die Seite Teil einer hierarchischen Struktur ist und dass der Hyperlink zu einer höheren Ebene der Ressource in der Struktur führt. |
| Größen | Gibt die Größe der Symbole für die visuelle Anzeige an. Das Größenattribut wird nur in Verbindung mit rel = "icon" verwendet und kann folgende Werte annehmen: widths height - definiert eine Liste von Größen, die durch Leerzeichen getrennt sind, jede Größe muss im Format - widths height (Symbolgrößen werden in Pixeln angegeben) sein, zum Beispiel: ; any - das Symbol kann auf jede beliebige Größe skaliert werden. |
| Titel | Gibt den Titel des Links oder den Namen eines Satzes alternativer Stylesheets an. Der Attributwert ist Text. |
| Art | Gibt den MIME-Typ des Dokuments an, auf das verwiesen wird. In diesem Fall nimmt es den Wert "text / css" an. |
