HTML - Kurzanleitung
HTML steht für Hypertext MArkup LSprache, und es ist die am häufigsten verwendete Sprache zum Schreiben von Webseiten.
Hypertextbezieht sich auf die Art und Weise, wie Webseiten (HTML-Dokumente) miteinander verknüpft werden. Daher heißt der auf einer Webseite verfügbare Link Hypertext.
Wie der Name schon sagt, ist HTML ein Markup Language Dies bedeutet, dass Sie HTML verwenden, um ein Textdokument einfach mit Tags zu "markieren", die einem Webbrowser mitteilen, wie es für die Anzeige strukturiert werden soll.
Ursprünglich wurde HTML mit der Absicht entwickelt, die Struktur von Dokumenten wie Überschriften, Absätzen, Listen usw. zu definieren, um den Austausch wissenschaftlicher Informationen zwischen Forschern zu erleichtern.
Heute wird HTML häufig zum Formatieren von Webseiten mithilfe verschiedener Tags verwendet, die in der HTML-Sprache verfügbar sind.
Grundlegendes HTML-Dokument
In seiner einfachsten Form folgt ein Beispiel für ein HTML-Dokument:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>HTML-Tags
Wie bereits erwähnt, ist HTML eine Auszeichnungssprache und verwendet verschiedene Tags, um den Inhalt zu formatieren. Diese Tags sind in spitzen Klammern eingeschlossen<Tag Name>. Mit Ausnahme weniger Tags haben die meisten Tags ihre entsprechenden schließenden Tags. Zum Beispiel,<html> hat sein schließendes Tag </html> und <body> Tag hat sein schließendes Tag </body> Tag etc.
Das obige Beispiel eines HTML-Dokuments verwendet die folgenden Tags:
| Sr.Nr. | Tag & Beschreibung |
|---|---|
| 1 | <!DOCTYPE...> Dieses Tag definiert den Dokumenttyp und die HTML-Version. |
| 2 | <html> Dieses Tag umfasst das gesamte HTML-Dokument und besteht hauptsächlich aus einem Dokumentkopf, der durch <head> ... </ head> dargestellt wird, und einem Dokumentkörper, der durch <body> ... </ body> -Tags dargestellt wird. |
| 3 | <head> Dieses Tag stellt den Header des Dokuments dar, in dem andere HTML-Tags wie <title>, <link> usw. gespeichert werden können. |
| 4 | <title> Das <title> -Tag wird im <head> -Tag verwendet, um den Dokumenttitel zu erwähnen. |
| 5 | <body> Dieses Tag stellt den Hauptteil des Dokuments dar, in dem andere HTML-Tags wie <h1>, <div>, <p> usw. gespeichert sind. |
| 6 | <h1> Dieses Tag repräsentiert die Überschrift. |
| 7 | <p> Dieses Tag repräsentiert einen Absatz. |
Um HTML zu lernen, müssen Sie verschiedene Tags studieren und verstehen, wie sie sich verhalten, während Sie ein Textdokument formatieren. Das Erlernen von HTML ist einfach, da Benutzer die Verwendung verschiedener Tags lernen müssen, um den Text oder die Bilder zu formatieren und eine schöne Webseite zu erstellen.
Das World Wide Web Consortium (W3C) empfiehlt die Verwendung von Tags in Kleinbuchstaben ab HTML 4.
HTML-Dokumentstruktur
Ein typisches HTML-Dokument hat die folgende Struktur:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Wir werden in den folgenden Kapiteln alle Header- und Body-Tags untersuchen, aber jetzt wollen wir sehen, was ein Dokumentdeklarations-Tag ist.
Die <! DOCTYPE> -Erklärung
Das Deklarationstag <! DOCTYPE> wird vom Webbrowser verwendet, um die im Dokument verwendete HTML-Version zu verstehen. Die aktuelle Version von HTML ist 5 und verwendet die folgende Deklaration:
<!DOCTYPE html>Es gibt viele andere Deklarationstypen, die in HTML-Dokumenten verwendet werden können, je nachdem, welche HTML-Version verwendet wird. Wir werden mehr Details dazu sehen, während wir das <! DOCTYPE ...> -Tag zusammen mit anderen HTML-Tags diskutieren.
Überschriften-Tags
Jedes Dokument beginnt mit einer Überschrift. Sie können verschiedene Größen für Ihre Überschriften verwenden. HTML hat auch sechs Überschriftenebenen, die die Elemente verwenden<h1>, <h2>, <h3>, <h4>, <h5>, und <h6>. Während der Anzeige einer Überschrift fügt der Browser eine Zeile vor und eine Zeile nach dieser Überschrift hinzu.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Dies führt zu folgendem Ergebnis:
Absatz-Tag
Das <p>Tag bietet eine Möglichkeit, Ihren Text in verschiedene Absätze zu strukturieren. Jeder Textabschnitt sollte zwischen einem öffnenden <p> und einem schließenden </ p> -Tag stehen, wie unten im Beispiel gezeigt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Zeilenumbruch-Tag
Wann immer Sie die verwenden <br />Element, alles, was darauf folgt, beginnt in der nächsten Zeile. Dieses Tag ist ein Beispiel für einempty Element, bei dem Sie keine Tags öffnen und schließen müssen, da zwischen ihnen nichts zu tun ist.
Das <br /> -Tag hat ein Leerzeichen zwischen den Zeichen brund der Schrägstrich. Wenn Sie dieses Leerzeichen weglassen, haben ältere Browser Probleme beim Rendern des Zeilenumbruchs. Wenn Sie das Schrägstrichzeichen verpassen und nur <br> verwenden, ist es in XHTML nicht gültig.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Inhalt zentrieren
Sie können verwenden <center> Tag, um Inhalte in die Mitte der Seite oder in eine Tabellenzelle zu setzen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Dies führt zu folgendem Ergebnis:
Horizontale Linien
Horizontale Linien werden verwendet, um Abschnitte eines Dokuments visuell aufzuteilen. Das<hr> Tag erstellt eine Linie von der aktuellen Position im Dokument bis zum rechten Rand und unterbricht die Linie entsprechend.
Beispielsweise möchten Sie möglicherweise eine Zeile zwischen zwei Absätzen wie im folgenden Beispiel angeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Nochmal <hr /> Tag ist ein Beispiel für die empty Element, bei dem Sie keine Tags öffnen und schließen müssen, da zwischen ihnen nichts zu tun ist.
Das <hr /> Element hat ein Leerzeichen zwischen den Zeichen hrund der Schrägstrich. Wenn Sie diesen Bereich weglassen, haben ältere Browser Probleme beim Rendern der horizontalen Linie. Wenn Sie den Schrägstrich verpassen und nur verwenden<hr> Es ist in XHTML nicht gültig
Formatierung beibehalten
Manchmal möchten Sie, dass Ihr Text genau dem Format entspricht, wie er im HTML-Dokument geschrieben ist. In diesen Fällen können Sie das vorformatierte Tag verwenden<pre>.
Beliebiger Text zwischen der Eröffnung <pre> Tag und das Schließen </pre> Tag behält die Formatierung des Quelldokuments bei.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Dies führt zu folgendem Ergebnis:
Versuchen Sie, denselben Code zu verwenden, ohne ihn im Inneren zu behalten <pre>...</pre> Stichworte
Nicht brechende Räume
Angenommen, Sie möchten den Ausdruck "12 böse Männer" verwenden. Hier möchten Sie nicht, dass ein Browser die "12, Angry" und "Men" in zwei Zeilen aufteilt -
An example of this technique appears in the movie "12 Angry Men."In Fällen, in denen der Client-Browser keinen Text unterbrechen soll, sollten Sie eine nicht unterbrechende Space-Entität verwenden anstelle eines normalen Raumes. Wenn Sie beispielsweise die "12 Angry Men" in einem Absatz codieren, sollten Sie etwas verwenden, das dem folgenden Code ähnelt:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Ein HTML elementwird durch ein Start-Tag definiert. Wenn das Element anderen Inhalt enthält, endet es mit einem schließenden Tag, wobei dem Elementnamen ein Schrägstrich vorausgeht, wie unten gezeigt, mit wenigen Tags -
| Tag starten | Inhalt | Tag beenden |
|---|---|---|
| <p> | Dies ist Absatzinhalt. | </ p> |
| <h1> | Dies ist Überschrifteninhalt. | </ h1> |
| <div> | Dies ist Teilungsinhalt. | </ div> |
| <br /> |
Also hier <p>....</p> ist ein HTML-Element, <h1>...</h1>ist ein weiteres HTML-Element. Es gibt einige HTML-Elemente, die nicht geschlossen werden müssen, z<img.../>, <hr /> und <br />Elemente. Diese sind bekannt alsvoid elements.
HTML-Dokumente bestehen aus einem Baum dieser Elemente und geben an, wie HTML-Dokumente erstellt werden sollen und welche Art von Inhalten in welchem Teil eines HTML-Dokuments platziert werden sollen.
HTML-Tag vs. Element
Ein HTML-Element wird durch ein Start-Tag definiert . Wenn das Element anderen Inhalt enthält, endet es mit einem schließenden Tag .
Zum Beispiel, <p> startet das Tag eines Absatzes und </p> schließt aber Tag desselben Absatzes <p>This is paragraph</p> ist ein Absatzelement.
Verschachtelte HTML-Elemente
Es ist sehr erlaubt, ein HTML-Element in einem anderen HTML-Element zu behalten -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>Dies zeigt das folgende Ergebnis an:
Wir haben nur wenige HTML-Tags und deren Verwendung wie Überschriften-Tags gesehen <h1>, <h2>, Absatz-Tag <p>und andere Tags. Wir haben sie bisher in ihrer einfachsten Form verwendet, aber die meisten HTML-Tags können auch Attribute haben, die zusätzliche Informationen darstellen.
Ein Attribut wird verwendet, um die Eigenschaften eines HTML-Elements zu definieren, und wird im Eröffnungs-Tag des Elements platziert. Alle Attribute bestehen aus zwei Teilen - aname und ein value
Das nameist die Eigenschaft, die Sie festlegen möchten. Zum Beispiel der Absatz<p> Das Element im Beispiel enthält ein Attribut mit dem Namen align, mit dem Sie die Ausrichtung des Absatzes auf der Seite angeben können.
Das valueMit diesem Wert soll der Wert der Eigenschaft festgelegt und immer in Anführungszeichen gesetzt werden. Das folgende Beispiel zeigt drei mögliche Werte für das Attribut align: left, center und right.
Bei Attributnamen und Attributwerten wird die Groß- und Kleinschreibung nicht berücksichtigt. Das World Wide Web Consortium (W3C) empfiehlt jedoch in seiner HTML 4-Empfehlung Kleinbuchstabenattribute / Attributwerte.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>Dies zeigt das folgende Ergebnis an:
Kernattribute
Die vier Kernattribute, die für die meisten HTML-Elemente (wenn auch nicht für alle) verwendet werden können, sind:
- Id
- Title
- Class
- Style
Das ID-Attribut
Das idDas Attribut eines HTML-Tags kann verwendet werden, um jedes Element innerhalb einer HTML-Seite eindeutig zu identifizieren. Es gibt zwei Hauptgründe, warum Sie ein ID-Attribut für ein Element verwenden möchten:
Wenn ein Element ein ID-Attribut als eindeutigen Bezeichner trägt, ist es möglich, nur dieses Element und seinen Inhalt zu identifizieren.
Wenn eine Webseite (oder ein Stylesheet) zwei gleichnamige Elemente enthält, können Sie mit dem id-Attribut zwischen gleichnamigen Elementen unterscheiden.
Wir werden das Stylesheet in einem separaten Tutorial diskutieren. Lassen Sie uns zunächst das Attribut id verwenden, um zwischen zwei Absatzelementen zu unterscheiden, wie unten gezeigt.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>Das Titelattribut
Das titleDas Attribut gibt einen vorgeschlagenen Titel für das Element an. Sie Syntax für dietitle Attribut ist ähnlich wie für erklärt id Attribut -
Das Verhalten dieses Attributs hängt von dem Element ab, das es trägt, obwohl es häufig als QuickInfo angezeigt wird, wenn der Cursor über das Element fährt oder während das Element geladen wird.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>Dies führt zu folgendem Ergebnis:
Versuchen Sie nun, den Cursor über "Beispiel für Titelüberschriften" zu bewegen, und Sie werden sehen, dass der Titel, den Sie in Ihrem Code verwendet haben, als QuickInfo des Cursors angezeigt wird.
Das Klassenattribut
Das classDas Attribut wird verwendet, um ein Element einem Stylesheet zuzuordnen, und gibt die Elementklasse an. Weitere Informationen zur Verwendung des Klassenattributs erhalten Sie, wenn Sie Cascading Style Sheet (CSS) lernen. So können Sie es jetzt vermeiden.
Der Wert des Attributs kann auch eine durch Leerzeichen getrennte Liste von Klassennamen sein. Zum Beispiel -
class = "className1 className2 className3"Das Stilattribut
Mit dem style-Attribut können Sie CSS-Regeln (Cascading Style Sheet) innerhalb des Elements angeben.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Zu diesem Zeitpunkt lernen wir noch kein CSS. Fahren wir also fort, ohne uns um CSS zu kümmern. Hier müssen Sie verstehen, was HTML-Attribute sind und wie sie beim Formatieren von Inhalten verwendet werden können.
Internationalisierungsattribute
Es gibt drei Internationalisierungsattribute, die für die meisten (wenn auch nicht alle) XHTML-Elemente verfügbar sind.
- dir
- lang
- xml:lang
Das dir-Attribut
Das dirMit dem Attribut können Sie dem Browser die Richtung angeben, in die der Text fließen soll. Das dir-Attribut kann einen von zwei Werten annehmen, wie Sie in der folgenden Tabelle sehen können:
| Wert | Bedeutung |
|---|---|
| ltr | Von links nach rechts (Standardwert) |
| rtl | Von rechts nach links (für Sprachen wie Hebräisch oder Arabisch, die von rechts nach links gelesen werden) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>Dies führt zu folgendem Ergebnis:
Wenn das dir- Attribut im <html> -Tag verwendet wird, wird festgelegt, wie Text im gesamten Dokument dargestellt wird. Bei Verwendung in einem anderen Tag wird die Richtung des Texts nur für den Inhalt dieses Tags gesteuert.
Das lang-Attribut
Das langMit Attribut können Sie die in einem Dokument verwendete Hauptsprache angeben. Dieses Attribut wurde jedoch nur aus Gründen der Abwärtskompatibilität mit früheren HTML-Versionen in HTML beibehalten. Dieses Attribut wurde durch das ersetztxml:lang Attribut in neuen XHTML-Dokumenten.
Die Werte des lang- Attributs sind zweistellige Standard-Sprachcodes nach ISO-639. PrüfenHTML Language Codes: ISO 639 für eine vollständige Liste der Sprachcodes.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>Dies führt zu folgendem Ergebnis:
Das xml: lang-Attribut
Das xml: lang- Attribut ist der XHTML-Ersatz für das lang- Attribut. Der Wert des Attributs xml: lang sollte ein ISO-639-Ländercode sein, wie im vorherigen Abschnitt erwähnt.
Generische Attribute
Hier ist eine Tabelle mit einigen anderen Attributen, die mit vielen HTML-Tags problemlos verwendet werden können.
| Attribut | Optionen | Funktion |
|---|---|---|
| ausrichten | rechts, links, Mitte | Richtet Tags horizontal aus |
| valign | oben Mitte unten | Richtet Tags innerhalb eines HTML-Elements vertikal aus. |
| bgcolor | numerische, hexadezimale, RGB-Werte | Platziert eine Hintergrundfarbe hinter einem Element |
| Hintergrund | URL | Platziert ein Hintergrundbild hinter einem Element |
| Ich würde | Benutzerdefinierten | Benennt ein Element zur Verwendung mit Cascading Style Sheets. |
| Klasse | Benutzerdefinierten | Klassifiziert ein Element zur Verwendung mit Cascading Style Sheets. |
| Breite | Zahlenwert | Gibt die Breite von Tabellen, Bildern oder Tabellenzellen an. |
| Höhe | Zahlenwert | Gibt die Höhe von Tabellen, Bildern oder Tabellenzellen an. |
| Titel | Benutzerdefinierten | "Popup" -Titel der Elemente. |
Wir werden verwandte Beispiele sehen, während wir andere HTML-Tags untersuchen. Eine vollständige Liste der HTML-Tags und der zugehörigen Attribute finden Sie unter HTML-Tags .
Wenn Sie ein Textverarbeitungsprogramm verwenden, müssen Sie mit der Fähigkeit vertraut sein, Text fett, kursiv oder unterstrichen zu machen. Dies sind nur drei der zehn verfügbaren Optionen, die angeben, wie Text in HTML und XHTML angezeigt werden kann.
Fettgedruckter Text
Alles, was darin erscheint <b>...</b> Element, wird wie unten gezeigt fett dargestellt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kursiver Text
Alles, was darin erscheint <i>...</i> Element wird wie unten gezeigt kursiv dargestellt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Unterstrichener Text
Alles, was darin erscheint <u>...</u> Element, wird mit Unterstreichung angezeigt, wie unten gezeigt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Strike Text
Alles, was darin erscheint <strike>...</strike> Das Element wird durchgestrichen angezeigt. Dies ist eine dünne Linie durch den Text, wie unten gezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Monospaced Schriftart
Der Inhalt von a <tt>...</tt>Element ist in monospaced Schrift geschrieben. Die meisten Schriftarten werden als Schriftarten mit variabler Breite bezeichnet, da unterschiedliche Buchstaben unterschiedliche Breiten haben (z. B. ist der Buchstabe 'm' breiter als der Buchstabe 'i'). In einer monospaced Schriftart hat jedoch jeder Buchstabe die gleiche Breite.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Hochgestellter Text
Der Inhalt von a <sup>...</sup>Element ist hochgestellt geschrieben; Die verwendete Schriftgröße entspricht der Größe der sie umgebenden Zeichen, wird jedoch eine halbe Zeichenhöhe über den anderen Zeichen angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tiefgestellter Text
Der Inhalt von a <sub>...</sub>Element ist in Index geschrieben; Die verwendete Schriftgröße entspricht der der sie umgebenden Zeichen, wird jedoch unter den anderen Zeichen in der Höhe eines halben Zeichens angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Eingefügter Text
Alles, was darin erscheint <ins>...</ins> Element wird als eingefügter Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Gelöschter Text
Alles, was darin erscheint <del>...</del> Element, wird als gelöschter Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Größerer Text
Der Inhalt der <big>...</big> Das Element wird eine Schriftgröße größer angezeigt als der Rest des Textes, der es umgibt (siehe unten).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kleinerer Text
Der Inhalt der <small>...</small> Das Element wird eine Schriftgröße kleiner angezeigt als der Rest des Textes, der es umgibt (siehe unten).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Inhalte gruppieren
Das <div> und <span> Mit Elementen können Sie mehrere Elemente gruppieren, um Abschnitte oder Unterabschnitte einer Seite zu erstellen.
Beispielsweise möchten Sie möglicherweise alle Fußnoten auf einer Seite in einem <div> -Element platzieren, um anzuzeigen, dass sich alle Elemente in diesem <div> -Element auf die Fußnoten beziehen. Sie können diesem <div> -Element dann einen Stil hinzufügen, damit sie mithilfe eines speziellen Satzes von Stilregeln angezeigt werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das <span> -Element kann dagegen nur zum Gruppieren von Inline-Elementen verwendet werden. Wenn Sie also einen Teil eines Satzes oder Absatzes haben, den Sie zusammenfassen möchten, können Sie das Element <span> wie folgt verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Diese Tags werden häufig mit CSS verwendet, damit Sie einem Abschnitt einer Seite einen Stil hinzufügen können.
Die Phrasen-Tags wurden für bestimmte Zwecke entworfen, obwohl sie auf ähnliche Weise wie andere grundlegende Tags wie angezeigt werden <b>, <i>, <pre>, und <tt>haben Sie im vorigen Kapitel gesehen. In diesem Kapitel werden Sie durch alle wichtigen Phrasen-Tags geführt. Lassen Sie uns sie also nacheinander anzeigen.
Hervorgehobener Text
Alles, was darin erscheint <em>...</em> Element wird als hervorgehobener Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Markierter Text
Alles, was mit-in erscheint <mark>...</mark> Element, wird als mit gelber Tinte markiert angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Starker Text
Alles, was darin erscheint <strong>...</strong> Element wird als wichtiger Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Text Abkürzung
Sie können einen Text abkürzen, indem Sie ihn in das Öffnen von <abbr> und das Schließen von </ abbr> -Tags einfügen. Falls vorhanden, muss das title-Attribut diese vollständige Beschreibung und nichts anderes enthalten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Akronym Element
Das <acronym> Mit element können Sie angeben, dass der Text zwischen den Tags <acronym> und </ acronym> ein Akronym ist.
Derzeit ändern die Hauptbrowser das Erscheinungsbild des Inhalts des <acronym> -Elements nicht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Textrichtung
Das <bdo>...</bdo> element steht für Bidirektionales Überschreiben und wird zum Überschreiben der aktuellen Textrichtung verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Sonderkonditionen
Das <dfn>...</dfn>Mit element (oder HTML-Definitionselement) können Sie angeben, dass Sie einen speziellen Begriff einführen. Die Verwendung ähnelt kursiven Wörtern in der Mitte eines Absatzes.
In der Regel verwenden Sie das Element <dfn>, wenn Sie zum ersten Mal einen Schlüsselbegriff einführen. Die neuesten Browser rendern den Inhalt eines <dfn> -Elements in Kursivschrift.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Text zitieren
Wenn Sie eine Passage aus einer anderen Quelle zitieren möchten, sollten Sie sie dazwischen setzen <blockquote>...</blockquote> Stichworte.
Text in einem <blockquote> -Element wird normalerweise am linken und rechten Rand des umgebenden Textes eingerückt und verwendet manchmal eine kursive Schrift.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kurze Zitate
Das <q>...</q> Element wird verwendet, wenn Sie einem Satz ein doppeltes Anführungszeichen hinzufügen möchten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Textzitate
Wenn Sie einen Text zitieren, können Sie die Quelle angeben, die ihn zwischen einer Öffnung platziert <cite> Tag und Schließen </cite> Etikett
Wie in einer Druckpublikation zu erwarten, wird der Inhalt des <cite> -Elements standardmäßig in kursiver Schrift dargestellt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Computercode
Jeder Programmcode, der auf einer Webseite angezeigt wird, sollte darin platziert werden <code>...</code>Stichworte. Normalerweise wird der Inhalt des <code> -Elements in einer monospaced Schriftart dargestellt, genau wie der Code in den meisten Programmierbüchern.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tastaturtext
Wenn Sie über Computer sprechen und einen Leser anweisen möchten, Text einzugeben, können Sie die verwenden <kbd>...</kbd> Element, um anzugeben, was wie in diesem Beispiel eingegeben werden soll.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Programmiervariablen
Dieses Element wird normalerweise in Verbindung mit dem verwendet <pre> und <code> Elemente, um anzuzeigen, dass der Inhalt dieses Elements eine Variable ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Programmausgabe
Das <samp>...</samp> Das Element gibt die Beispielausgabe eines Programms, eines Skripts usw. an. Auch hier wird es hauptsächlich zur Dokumentation von Programmier- oder Codierungskonzepten verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Adresstext
Das <address>...</address> Element wird verwendet, um eine beliebige Adresse zu enthalten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>Dies führt zu folgendem Ergebnis:
Mit HTML können Sie Metadaten angeben - zusätzliche wichtige Informationen zu einem Dokument auf verschiedene Weise. Die META-Elemente können verwendet werden, um Name / Wert-Paare einzuschließen, die Eigenschaften des HTML-Dokuments beschreiben, wie z. B. Autor, Ablaufdatum, eine Liste von Schlüsselwörtern, Dokumentautor usw.
Das <meta>Tag wird verwendet, um solche zusätzlichen Informationen bereitzustellen. Dieses Tag ist ein leeres Element und hat daher kein schließendes Tag, enthält jedoch Informationen in seinen Attributen.
Sie können ein oder mehrere Meta-Tags in Ihr Dokument aufnehmen, basierend auf den Informationen, die Sie in Ihrem Dokument behalten möchten. Im Allgemeinen wirken sich Meta-Tags jedoch nicht auf das physische Erscheinungsbild des Dokuments aus. Aus Sicht des Erscheinungsbilds spielt es also keine Rolle, ob Sie es einschließen sie oder nicht.
Hinzufügen von Meta-Tags zu Ihren Dokumenten
Sie können Ihren Webseiten Metadaten hinzufügen, indem Sie <meta> -Tags in die Kopfzeile des Dokuments einfügen, das durch dargestellt wird <head> und </head>Stichworte. Ein Meta-Tag kann zusätzlich zu den Kernattributen folgende Attribute aufweisen:
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | Name Name für die Immobilie. Kann alles sein. Beispiele sind Schlüsselwörter, Beschreibung, Autor, überarbeitet, Generator usw. |
| 2 | content Gibt den Wert der Eigenschaft an. |
| 3 | scheme Gibt ein Schema zur Interpretation des Werts der Eigenschaft an (wie im Attribut content angegeben). |
| 4 | http-equiv Wird für HTTP-Antwortnachrichtenkopfzeilen verwendet. Beispielsweise kann http-equiv verwendet werden, um die Seite zu aktualisieren oder ein Cookie zu setzen. Zu den Werten gehören Inhaltstyp, Ablaufdatum, Aktualisierung und Set-Cookie. |
Schlüsselwörter angeben
Sie können das <meta> -Tag verwenden, um wichtige Schlüsselwörter für das Dokument anzugeben. Diese Schlüsselwörter werden später von den Suchmaschinen verwendet, während Sie Ihre Webseite für Suchzwecke indizieren.
Beispiel
Im Folgenden finden Sie ein Beispiel, in dem wir HTML, Meta-Tags und Metadaten als wichtige Schlüsselwörter für das Dokument hinzufügen.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Dokumentbeschreibung
Mit dem Tag <meta> können Sie eine kurze Beschreibung des Dokuments geben. Dies kann wiederum von verschiedenen Suchmaschinen verwendet werden, während Ihre Webseite zu Suchzwecken indiziert wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Überarbeitungsdatum des Dokuments
Mit dem Tag <meta> können Sie Informationen darüber angeben, wann das Dokument das letzte Mal aktualisiert wurde. Diese Informationen können von verschiedenen Webbrowsern verwendet werden, während Ihre Webseite aktualisiert wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Dokumentaktualisierung
Ein <meta> -Tag kann verwendet werden, um eine Dauer anzugeben, nach der Ihre Webseite automatisch aktualisiert wird.
Beispiel
Wenn Sie möchten, dass Ihre Seite alle 5 Sekunden aktualisiert wird, verwenden Sie die folgende Syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Seitenumleitung
Sie können das <meta> -Tag verwenden, um Ihre Seite auf eine andere Webseite umzuleiten. Sie können auch eine Dauer angeben, wenn Sie die Seite nach einer bestimmten Anzahl von Sekunden umleiten möchten.
Beispiel
Im Folgenden finden Sie ein Beispiel für die Umleitung der aktuellen Seite auf eine andere Seite nach 5 Sekunden. Wenn Sie die Seite sofort umleiten möchten, geben Sie kein Inhaltsattribut an .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Cookies setzen
Cookies sind Daten, die in kleinen Textdateien auf Ihrem Computer gespeichert werden und zwischen Webbrowser und Webserver ausgetauscht werden, um verschiedene Informationen zu verfolgen, die auf den Anforderungen Ihrer Webanwendung basieren.
Sie können das <meta> -Tag verwenden, um Cookies auf der Clientseite zu speichern. Diese Informationen können später vom Webserver verwendet werden, um einen Website-Besucher zu verfolgen.
Beispiel
Im Folgenden finden Sie ein Beispiel für die Umleitung der aktuellen Seite auf eine andere Seite nach 5 Sekunden. Wenn Sie die Seite sofort umleiten möchten, geben Sie kein Inhaltsattribut an .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Wenn Sie das Ablaufdatum und die Ablaufzeit nicht angeben, wird das Cookie als Sitzungscookie betrachtet und beim Verlassen des Browsers gelöscht.
Note- Im Tutorial zu PHP und Cookies finden Sie ausführliche Informationen zu Cookies.
Autorennamen einstellen
Sie können einen Autorennamen auf einer Webseite mithilfe eines Meta-Tags festlegen. Siehe ein Beispiel unten -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Geben Sie den Zeichensatz an
Mit dem Tag <meta> können Sie den auf der Webseite verwendeten Zeichensatz angeben.
Beispiel
Standardmäßig verwenden Webserver und Webbrowser die ISO-8859-1 (Latin1) -Codierung, um Webseiten zu verarbeiten. Im Folgenden finden Sie ein Beispiel zum Festlegen der UTF-8-Codierung:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Um die statische Seite mit traditionellen chinesischen Schriftzeichen zu versehen, muss die Webseite ein <meta> -Tag enthalten, um die Big5-Codierung festzulegen.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Kommentar ist ein Code, der von jedem Webbrowser ignoriert wird. Es wird empfohlen, Ihrem HTML-Code Kommentare hinzuzufügen, insbesondere in komplexen Dokumenten, um Abschnitte eines Dokuments und andere Notizen für jeden anzuzeigen, der sich den Code ansieht. Kommentare helfen Ihnen und anderen, Ihren Code zu verstehen, und verbessern die Lesbarkeit des Codes.
Dazwischen stehen HTML-Kommentare <!-- ... -->Stichworte. Inhalte, die mit <! - ... -> Tags platziert wurden, werden als Kommentar behandelt und vom Browser vollständig ignoriert.
Beispiel
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>Dies führt zu folgendem Ergebnis, ohne dass der Inhalt als Teil der Kommentare angezeigt wird:
Gültige vs ungültige Kommentare
Kommentare werden nicht verschachtelt, was bedeutet, dass ein Kommentar nicht in einen anderen Kommentar eingefügt werden kann. Zweitens wird die Doppelstrichfolge "-" möglicherweise nicht in einem Kommentar angezeigt, außer als Teil des schließenden -> Tags. Sie müssen auch sicherstellen, dass die Zeichenfolge am Anfang des Kommentars keine Leerzeichen enthält.
Beispiel
Hier ist der angegebene Kommentar ein gültiger Kommentar und wird vom Browser gelöscht.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Die folgende Zeile ist jedoch kein gültiger Kommentar und wird vom Browser angezeigt. Dies liegt daran, dass zwischen der linken spitzen Klammer und dem Ausrufezeichen ein Leerzeichen vorhanden ist.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Mehrzeilige Kommentare
Bisher haben wir einzeilige Kommentare gesehen, aber HTML unterstützt auch mehrzeilige Kommentare.
Sie können mehrere Zeilen mit dem speziellen Anfangstag <! - und Endtag -> kommentieren, das vor der ersten Zeile und dem Ende der letzten Zeile steht, wie im folgenden Beispiel gezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Bedingte Kommentare
Bedingte Kommentare funktionieren nur in Internet Explorer (IE) unter Windows, werden jedoch von anderen Browsern ignoriert. Sie werden ab Explorer 5 unterstützt, und Sie können sie verwenden, um verschiedenen IE-Versionen bedingte Anweisungen zu geben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Sie werden auf eine Situation stoßen, in der Sie ein anderes Stylesheet anwenden müssen, das auf verschiedenen Versionen von Internet Explorer basiert. In solchen Situationen sind bedingte Kommentare hilfreich.
Kommentar-Tag verwenden
Es gibt nur wenige Browser, die das <comment> -Tag unterstützen, um einen Teil des HTML-Codes zu kommentieren.
Note- Das <comment> -Tag ist in HTML5 veraltet. Verwenden Sie dieses Element nicht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Wenn Sie den Internet Explorer verwenden, wird das folgende Ergebnis angezeigt:
Wenn Sie jedoch keinen IE verwenden, wird das folgende Ergebnis angezeigt:
Skriptcode kommentieren
Sie werden zwar JavaScript mit HTML in einem separaten Tutorial lernen, aber hier müssen Sie beachten, dass es empfohlen wird, diesen Skriptcode in die richtigen HTML-Kommentare einzufügen, wenn Sie Java Script oder VB Script in Ihrem HTML-Code verwenden Browser können ordnungsgemäß funktionieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kommentieren von Stylesheets
Sie werden zwar in einem separaten Lernprogramm lernen, Stylesheets mit HTML zu verwenden, aber hier müssen Sie beachten, dass es empfohlen wird, diesen Stylesheet-Code in die richtigen HTML-Kommentare einzufügen, wenn Sie Cascading Style Sheet (CSS) in Ihrem HTML-Code verwenden damit alte Browser richtig funktionieren können.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Bilder sind sehr wichtig, um viele komplexe Konzepte auf einfache Weise auf Ihrer Webseite zu verschönern und darzustellen. Dieses Tutorial führt Sie durch einfache Schritte zur Verwendung von Bildern auf Ihren Webseiten.
Bild einfügen
Sie können jedes Bild in Ihre Webseite einfügen, indem Sie verwenden <img>Etikett. Im Folgenden finden Sie die einfache Syntax zur Verwendung dieses Tags.
<img src = "Image URL" ... attributes-list/>Das <img> -Tag ist ein leeres Tag. Dies bedeutet, dass es nur eine Liste von Attributen enthalten kann und kein schließendes Tag enthält.
Beispiel
Um das folgende Beispiel zu versuchen, lassen Sie unsere HTML-Datei test.htm und die Bilddatei test.png im selben Verzeichnis -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Dies führt zu folgendem Ergebnis:
Sie können PNG-, JPEG- oder GIF-Bilddateien verwenden, je nach Ihrem Komfort. Stellen Sie jedoch sicher, dass Sie den richtigen Bilddateinamen in angeben srcAttribut. Der Bildname unterscheidet immer zwischen Groß- und Kleinschreibung.
Das alt Attribut ist ein obligatorisches Attribut, das einen alternativen Text für ein Bild angibt, wenn das Bild nicht angezeigt werden kann.
Stellen Sie den Bildspeicherort ein
Normalerweise speichern wir alle Bilder in einem separaten Verzeichnis. Lassen Sie uns also die HTML-Datei test.htm in unserem Home-Verzeichnis behalten und ein Unterverzeichnis erstellenimages im Home-Verzeichnis, in dem wir unser Bild test.png aufbewahren.
Beispiel
Angenommen, unser Bildspeicherort ist "image / test.png", versuchen Sie das folgende Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Bildbreite / -höhe ein
Sie können die Bildbreite und -höhe je nach Ihren Anforderungen mithilfe von festlegen width und heightAttribute. Sie können die Breite und Höhe des Bildes entweder in Pixel oder in Prozent seiner tatsächlichen Größe angeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Bildrand ein
Standardmäßig wird das Bild von einem Rand umgeben. Sie können die Rahmenstärke in Pixel mithilfe des Rahmenattributs angeben. Eine Dicke von 0 bedeutet, kein Rand um das Bild.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Bildausrichtung ein
Standardmäßig wird das Bild auf der linken Seite der Seite ausgerichtet, Sie können es jedoch verwenden align Attribut, um es in der Mitte oder rechts zu setzen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kostenlose Webgrafiken
Für kostenlose Webgrafiken einschließlich Mustern können Sie sich kostenlose Webgrafiken ansehen
Mit den HTML-Tabellen können Webautoren Daten wie Text, Bilder, Links, andere Tabellen usw. in Zeilen und Spalten von Zellen anordnen.
Die HTML-Tabellen werden mit dem erstellt <table> Tag, in dem die <tr> Tag wird verwendet, um Tabellenzeilen und zu erstellen <td>Tag wird zum Erstellen von Datenzellen verwendet. Die Elemente unter <td> sind regulär und standardmäßig linksbündig ausgerichtet
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Hier das borderist ein Attribut des <table> -Tags und wird verwendet, um alle Zellen mit einem Rahmen zu versehen. Wenn Sie keinen Rahmen benötigen, können Sie border = "0" verwenden.
Tabellenüberschrift
Die Tabellenüberschrift kann mit definiert werden <th>Etikett. Dieses Tag ersetzt das <td> -Tag, das zur Darstellung der tatsächlichen Datenzelle verwendet wird. Normalerweise setzen Sie Ihre oberste Zeile wie unten gezeigt als Tabellenüberschrift ein, andernfalls können Sie das <th> -Element in jeder Zeile verwenden. Überschriften, die im <th> -Tag definiert sind, sind standardmäßig zentriert und fett gedruckt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Cellpadding- und Cellspacing-Attribute
Es gibt zwei Attribute, Cellpadding und Cellspacing, mit denen Sie den Leerraum in Ihren Tabellenzellen anpassen. Das Zellenabstandsattribut definiert den Abstand zwischen Tabellenzellen, während das Auffüllen von Zellen den Abstand zwischen den Zellenrändern und dem Inhalt innerhalb einer Zelle darstellt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Colspan- und Rowspan-Attribute
Du wirst benutzen colspanAttribut, wenn Sie zwei oder mehr Spalten zu einer einzigen Spalte zusammenführen möchten. Ähnliche Art und Weise werden Sie verwendenrowspan Wenn Sie zwei oder mehr Zeilen zusammenführen möchten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tabellen Hintergründe
Sie können den Tabellenhintergrund auf eine der folgenden zwei Arten festlegen:
bgcolor Attribut - Sie können die Hintergrundfarbe für die gesamte Tabelle oder nur für eine Zelle festlegen.
background Attribut - Sie können das Hintergrundbild für die gesamte Tabelle oder nur für eine Zelle festlegen.
Sie können die Rahmenfarbe auch mit festlegen bordercolor Attribut.
Note- Die Attribute bgcolor , background und bordercolor sind in HTML5 veraltet. Verwenden Sie diese Attribute nicht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Hier ist ein Beispiel für die Verwendung backgroundAttribut. Hier verwenden wir ein Bild, das im Verzeichnis / images verfügbar ist.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis. Hier galt das Hintergrundbild nicht für den Header der Tabelle.
Tischhöhe und -breite
Sie können eine Tabellenbreite und -höhe mit festlegen width und heightAttribute. Sie können die Tabellenbreite oder -höhe in Pixel oder in Prozent der verfügbaren Bildschirmfläche angeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tabellenüberschrift
Das captionDas Tag dient als Titel oder Erklärung für die Tabelle und wird oben in der Tabelle angezeigt. Dieses Tag ist in einer neueren Version von HTML / XHTML veraltet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tabellenkopf, Körper und Fußzeile
Tabellen können in drei Teile unterteilt werden - einen Header, einen Body und einen Foot. Kopf und Fuß ähneln Kopf- und Fußzeilen in einem Textdokument, die für jede Seite gleich bleiben, während der Hauptteil der Hauptinhalt der Tabelle ist.
Die drei Elemente zum Trennen von Kopf, Körper und Fuß eines Tisches sind:
<thead> - um einen separaten Tabellenkopf zu erstellen.
<tbody> - um den Hauptteil der Tabelle anzugeben.
<tfoot> - um eine separate Tabellenfußzeile zu erstellen.
Eine Tabelle kann mehrere <tbody> -Elemente enthalten, um verschiedene Seiten oder Datengruppen anzuzeigen . Es ist jedoch bemerkenswert, dass die Tags <thead> und <tfoot> vor <tbody> erscheinen sollten
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Verschachtelte Tabellen
Sie können eine Tabelle in einer anderen Tabelle verwenden. Sie können nicht nur Tabellen verwenden, sondern fast alle Tags im Tabellendaten-Tag <td>.
Beispiel
Das folgende Beispiel zeigt die Verwendung einer anderen Tabelle und anderer Tags in einer Tabellenzelle.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML bietet Webautoren drei Möglichkeiten zum Festlegen von Informationslisten. Alle Listen müssen ein oder mehrere Listenelemente enthalten. Listen können enthalten -
<ul>- Eine ungeordnete Liste. Dadurch werden Elemente mit einfachen Aufzählungszeichen aufgelistet.
<ol>- Eine geordnete Liste. Dies verwendet verschiedene Zahlenschemata, um Ihre Artikel aufzulisten.
<dl>- Eine Definitionsliste. Dadurch werden Ihre Elemente so angeordnet, wie sie in einem Wörterbuch angeordnet sind.
Ungeordnete HTML-Listen
Eine ungeordnete Liste ist eine Sammlung verwandter Elemente ohne spezielle Reihenfolge oder Reihenfolge. Diese Liste wird mithilfe von HTML erstellt<ul>Etikett. Jedes Element in der Liste ist mit einem Aufzählungszeichen markiert.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Dies führt zu folgendem Ergebnis:
Der Typ Attribut
Sie können verwenden typeAttribut für <ul> Tag, um den Typ des Aufzählungszeichens anzugeben, den Sie mögen. Standardmäßig ist es eine Disc. Im Folgenden sind die möglichen Optionen aufgeführt:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Beispiel
Es folgt ein Beispiel, in dem wir <ul type = "square"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ul type = "disc"> verwendet haben -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ul type = "circle"> verwendet haben -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML-geordnete Listen
Wenn Sie Ihre Artikel in eine nummerierte Liste anstatt in Aufzählungszeichen einfügen müssen, wird eine nach HTML geordnete Liste verwendet. Diese Liste wird mit erstellt<ol>Etikett. Die Nummerierung beginnt bei eins und wird für jedes nachfolgende geordnete Listenelement, das mit <li> gekennzeichnet ist, um eins erhöht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Der Typ Attribut
Sie können verwenden typeAttribut für <ol> -Tag, um die Art der Nummerierung anzugeben, die Sie mögen. Standardmäßig ist es eine Zahl. Im Folgenden sind die möglichen Optionen aufgeführt:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "1"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "I"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "i"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "A"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "a"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das Startattribut
Sie können verwenden startAttribut für das <ol> -Tag, um den Startpunkt der Nummerierung anzugeben, den Sie benötigen. Im Folgenden sind die möglichen Optionen aufgeführt:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Beispiel
Es folgt ein Beispiel, in dem wir <ol type = "i" start = "4"> verwendet haben
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML-Definitionslisten
HTML und XHTML unterstützen einen Listenstil, der aufgerufen wird definition listswo Einträge wie in einem Wörterbuch oder einer Enzyklopädie aufgelistet sind. Die Definitionsliste ist der ideale Weg, um ein Glossar, eine Begriffsliste oder eine andere Namens- / Werteliste zu präsentieren.
Die Definitionsliste verwendet die folgenden drei Tags.
- <dl> - Definiert den Anfang der Liste
- <dt> - Ein Begriff
- <dd> - Begriffsdefinition
- </ dl> - Definiert das Ende der Liste
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Dies führt zu folgendem Ergebnis:
Eine Webseite kann verschiedene Links enthalten, die Sie direkt zu anderen Seiten und sogar zu bestimmten Teilen einer bestimmten Seite führen. Diese Links werden als Hyperlinks bezeichnet.
Mithilfe von Hyperlinks können Besucher zwischen Websites navigieren, indem sie auf Wörter, Ausdrücke und Bilder klicken. So können Sie Hyperlinks mit Text oder Bildern erstellen, die auf einer Webseite verfügbar sind.
Note- Ich empfehle Ihnen, ein kurzes Tutorial zum Verständnis der URL durchzuarbeiten
Dokumente verknüpfen
Ein Link wird mit dem HTML-Tag <a> angegeben. Dieses Tag heißtanchor tagAlles zwischen dem öffnenden <a> -Tag und dem schließenden </a> Tag wird Teil des Links, und ein Benutzer kann auf diesen Teil klicken, um zum verknüpften Dokument zu gelangen. Es folgt die einfache Syntax zur Verwendung des <a> -Tags.
<a href = "Document URL" ... attributes-list>Link Text</a>Beispiel
Versuchen wir das folgende Beispiel, das http://www.tutorialspoint.com auf Ihrer Seite verlinkt -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>Dies führt zu folgendem Ergebnis: Klicken Sie auf den generierten Link, um zur Startseite von Tutorials Point (in diesem Beispiel) zu gelangen.
Das Zielattribut
Wir haben benutzt targetAttribut in unserem vorherigen Beispiel. Dieses Attribut wird verwendet, um den Speicherort anzugeben, an dem das verknüpfte Dokument geöffnet wird. Im Folgenden sind die möglichen Optionen aufgeführt:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | _blank Öffnet das verknüpfte Dokument in einem neuen Fenster oder einer neuen Registerkarte. |
| 2 | _self Öffnet das verknüpfte Dokument im selben Frame. |
| 3 | _parent Öffnet das verknüpfte Dokument im übergeordneten Frame. |
| 4 | _top Öffnet das verknüpfte Dokument im gesamten Fenster. |
| 5 | targetframe Öffnet das verknüpfte Dokument in einem benannten Zielrahmen . |
Beispiel
Versuchen Sie das folgende Beispiel, um den grundlegenden Unterschied zwischen einigen Optionen für das Zielattribut zu verstehen.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie auf verschiedene Links klicken können, um den Unterschied zwischen verschiedenen Optionen für das Zielattribut zu verstehen.
Verwendung des Basispfads
Wenn Sie HTML-Dokumente verknüpfen, die sich auf dieselbe Website beziehen, muss nicht für jeden Link eine vollständige URL angegeben werden. Sie können es loswerden, wenn Sie verwenden<base>Tag in Ihrem HTML-Dokumentkopf. Dieses Tag wird verwendet, um einen Basispfad für alle Links anzugeben. Ihr Browser verkettet also den angegebenen relativen Pfad mit diesem Basispfad und erstellt eine vollständige URL.
Beispiel
Im folgenden Beispiel wird das <base> -Tag verwendet, um die Basis-URL anzugeben. Später können wir den relativen Pfad zu allen Links verwenden, anstatt für jeden Link eine vollständige URL anzugeben.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie auf den generierten Link klicken können HTML Tutorial um zum HTML-Tutorial zu gelangen.
Die jetzt angegebene URL <a href = "/html/index.htm" wird als <ahref = "http://www.tutorialspoint.com/html/index.htm" betrachtet.
Verknüpfen mit einem Seitenabschnitt
Sie können mithilfe von einen Link zu einem bestimmten Abschnitt einer bestimmten Webseite erstellen nameAttribut. Dies ist ein zweistufiger Prozess.
Note- Der Name Attribut ist veraltet in HTML5. Verwenden Sie dieses Attribut nicht. Verwenden Sie stattdessen das Attribut id und title .
Erstellen Sie zunächst einen Link zu dem Ort, an den Sie innerhalb einer Webseite gelangen möchten, und benennen Sie ihn mit dem Tag <a ...> wie folgt:
<h1>HTML Text Links <a name = "top"></a></h1>Der zweite Schritt besteht darin, einen Hyperlink zu erstellen, um das Dokument und den Ort zu verknüpfen, an den Sie gelangen möchten.
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Dadurch wird der folgende Link erstellt, über den Sie auf den generierten Link klicken können Go to the Top um zum Anfang des HTML Text Link-Tutorials zu gelangen.
Go to the TopLinkfarben einstellen
Mit können Sie die Farben Ihrer Links, aktiven Links und besuchten Links festlegen link, alink und vlink Attribute des <body> -Tags.
Beispiel
Speichern Sie Folgendes in test.htm und öffnen Sie es in einem beliebigen Webbrowser, um zu sehen, wie link, alink und vlink Attribute funktionieren.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>Dies führt zu folgendem Ergebnis. Überprüfen Sie einfach die Farbe des Links, bevor Sie darauf klicken, und überprüfen Sie anschließend die Farbe, wenn Sie ihn aktivieren und wenn der Link besucht wurde.
Download links
Sie können einen Textlink erstellen, um Ihre PDF-, DOC- oder ZIP-Dateien herunterzuladen. Das ist sehr einfach; Sie müssen nur die vollständige URL der herunterladbaren Datei wie folgt angeben:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Dies erzeugt den folgenden Link und wird zum Herunterladen einer Datei verwendet.
Dialogfeld zum Herunterladen von Dateien
Manchmal ist es erwünscht, dass Sie eine Option angeben möchten, bei der ein Benutzer auf einen Link klickt und dem Benutzer ein Feld "Dateidownload" öffnet, anstatt den tatsächlichen Inhalt anzuzeigen. Dies ist sehr einfach und kann mithilfe eines HTTP-Headers in Ihrer HTTP-Antwort erreicht werden.
Zum Beispiel, wenn Sie eine machen möchten Filename Datei, die von einem bestimmten Link heruntergeladen werden kann, lautet dann wie folgt.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){ print("$buffer");
}Note- Weitere Informationen zu PERL-CGI-Programmen finden Sie im Tutorial PERL und CGI .
Wir haben gesehen, wie man Hypertext-Links mit Text erstellt, und wir haben auch gelernt, wie man Bilder auf unseren Webseiten verwendet. Jetzt lernen wir, wie man Bilder verwendet, um Hyperlinks zu erstellen.
Beispiel
Es ist einfach, ein Bild als Hyperlink zu verwenden. Wir müssen nur ein Bild innerhalb des Hyperlinks an der Stelle des Textes verwenden, wie unten gezeigt -
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie auf die Bilder klicken können, um zur Startseite von Tutorials Point zu gelangen.
Dies war der einfachste Weg, Hyperlinks mit Bildern zu erstellen. Als nächstes werden wir sehen, wie wir mausempfindliche Bildverknüpfungen erstellen können.
Mausempfindliche Bilder
Die HTML- und XHTML-Standards bieten eine Funktion, mit der Sie viele verschiedene Links in ein einzelnes Bild einbetten können. Sie können verschiedene Links auf dem einzelnen Bild basierend auf verschiedenen auf dem Bild verfügbaren Koordinaten erstellen. Sobald verschiedene Links an verschiedene Koordinaten angehängt sind, können wir auf verschiedene Teile des Bildes klicken, um Zieldokumente zu öffnen. Solche mausempfindlichen Bilder sind als Bildkarten bekannt.
Es gibt zwei Möglichkeiten, Imagemaps zu erstellen:
Server-side image maps - Dies wird durch die aktiviert ismap Attribut des <img> -Tags und erfordert Zugriff auf einen Server und verwandte Image-Map-Verarbeitungsanwendungen.
Client-side image maps - Dies wird mit dem erstellt usemap Attribut des <img> -Tags zusammen mit den entsprechenden <map> - und <area> -Tags.
Serverseitige Image-Maps
Hier setzen Sie einfach Ihr Bild in einen Hyperlink und verwenden ismapAttribut, das es zu einem besonderen Bild macht. Wenn der Benutzer auf eine Stelle im Bild klickt, übergibt der Browser die Koordinaten des Mauszeigers zusammen mit der im <a> -Tag angegebenen URL an den Webserver. Der Server bestimmt anhand der Mauszeigerkoordinaten, welches Dokument an den Browser zurückgesendet werden soll.
Wenn ismap verwendet wird, muss das href-Attribut des enthaltenen <a> -Tags die URL einer Serveranwendung wie ein CGI- oder PHP-Skript usw. enthalten, um die eingehende Anforderung basierend auf den übergebenen Koordinaten zu verarbeiten.
Die Koordinaten der Mausposition sind Bildschirmpixel, die in der oberen linken Ecke des Bildes gezählt werden und mit (0,0) beginnen. Die Koordinaten, denen ein Fragezeichen vorangestellt ist, werden am Ende der URL hinzugefügt.
Wenn ein Benutzer beispielsweise 20 Pixel über und 30 Pixel nach unten in der oberen linken Ecke des folgenden Bilds klickt -
Welches wurde durch das folgende Code-Snippet generiert -
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Anschließend sendet der Browser die folgenden Suchparameter an den Webserver, die von verarbeitet werden können ismap.cgi Skript oder map file und Sie können beliebige Dokumente mit diesen Koordinaten verknüpfen -
/cgi-bin/ismap.cgi?20,30Auf diese Weise können Sie verschiedenen Koordinaten des Bildes unterschiedliche Links zuweisen. Wenn Sie auf diese Koordinaten klicken, können Sie das entsprechende verknüpfte Dokument öffnen. Mehr darüber lernenismapAttribut können Sie überprüfen, wie man Image ismap verwendet?
Note- Sie lernen CGI-Programmierung, wenn Sie Perl-Programmierung studieren. Sie können Ihr Skript schreiben, um diese übergebenen Koordinaten auch mit PHP oder einem anderen Skript zu verarbeiten. Konzentrieren wir uns zunächst auf das Erlernen von HTML. Später können Sie diesen Abschnitt erneut besuchen.
Clientseitige Image-Maps
Clientseitige Imagemaps werden von der aktiviert usemap Attribut des <img /> -Tags und definiert durch spezielle <map> - und <area> -Erweiterungs-Tags.
Das Bild, das die Karte bilden soll, wird mit dem <img /> -Tag als normales Bild in die Seite eingefügt, außer es enthält ein zusätzliches Attribut namens usemap. Der Wert des usemap-Attributs ist der Wert, der in einem <map> -Tag zum Verknüpfen von Karten- und Bild-Tags verwendet wird. Die Tags <map> und <area> definieren alle Bildkoordinaten und entsprechenden Links.
Das <area> -Tag innerhalb des Karten-Tags gibt die Form und die Koordinaten an, um die Grenzen jedes anklickbaren Hotspots zu definieren, der auf dem Bild verfügbar ist. Hier ist ein Beispiel aus der Imagemap -
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>Dies führt zu folgendem Ergebnis:
Koordinatensystem
Der tatsächliche Wert der Koordinaten hängt vollständig von der jeweiligen Form ab. Hier ist eine Zusammenfassung, gefolgt von detaillierten Beispielen -
rect = x1 , y1 , x2 , y2
x 1 und y 1 sind die Koordinaten der oberen linken Ecke des Rechtecks; x 2 und y 2 sind die Koordinaten der unteren rechten Ecke.
circle = xc , yc , radius
x c und y c sind die Koordinaten des Kreismittelpunkts, und der Radius ist der Radius des Kreises. Ein Kreis, der bei 200,50 mit einem Radius von 25 zentriert ist, hätte das Attribut coords = "200,50,25".
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Die verschiedenen xy-Paare definieren Eckpunkte (Punkte) des Polygons, wobei eine "Linie" von einem Punkt zum nächsten Punkt gezogen wird. Ein rautenförmiges Polygon mit einem oberen Punkt von 20,20 und einem Durchmesser von 40 Pixeln an den breitesten Punkten hätte das Attribut coords = "20,20,40,40,20,60,0,40" .
Alle Koordinaten beziehen sich auf die obere linke Ecke des Bildes (0,0). Jede Form hat eine verwandte URL. Sie können jede Bildsoftware verwenden, um die Koordinaten verschiedener Positionen zu kennen.
Es ist nicht schwierig, einen HTML-E-Mail-Link auf Ihre Webseite zu setzen, aber es kann zu unnötigen Spam-Problemen für Ihr E-Mail-Konto führen. Es gibt Leute, die Programme ausführen können, um diese Art von E-Mails zu sammeln und sie später auf verschiedene Weise für Spam zu verwenden.
Sie können eine andere Option haben, um das Versenden von E-Mails zu erleichtern. Eine Möglichkeit könnte darin bestehen, HTML-Formulare zum Sammeln von Benutzerdaten zu verwenden und dann ein PHP- oder CGI-Skript zum Senden einer E-Mail zu verwenden.
Ein einfaches Beispiel finden Sie in unserem Kontaktformular . Über dieses Formular nehmen wir Benutzerfeedback entgegen und verwenden dann ein CGI-Programm, das diese Informationen sammelt und uns eine E-Mail an die angegebene E-Mail-ID sendet.
Note- In unserem weiteren Tutorial erfahren Sie mehr über HTML-Formulare in HTML-Formularen und über CGIPerl CGI Programming.
HTML-E-Mail-Tag
HTML <a>Tag bietet Ihnen die Möglichkeit, eine E-Mail-Adresse anzugeben, um eine E-Mail zu senden. Wenn Sie das <a> -Tag als E-Mail-Tag verwenden, werden Sie es verwendenmailto: email addresszusammen mit href Attribut. Es folgt die Syntax der Verwendungmailto anstatt http zu verwenden.
<a href = "mailto: [email protected]">Send Email</a>Dieser Code generiert den folgenden Link, über den Sie E-Mails senden können.
Send EmailWenn ein Benutzer auf diesen Link klickt, wird ein E-Mail-Client (wie Lotus Notes, Outlook Express usw.) gestartet, der auf dem Computer Ihres Benutzers installiert ist. Es besteht ein weiteres Risiko, diese Option zum Senden von E-Mails zu verwenden, da das Senden von E-Mails nicht möglich ist, wenn der Benutzer keinen E-Mail-Client auf seinem Computer installiert hat.
Standardeinstellungen
Sie können einen Standard- E-Mail-Betreff und einen E- Mail-Text zusammen mit Ihrer E-Mail-Adresse angeben . Im Folgenden finden Sie ein Beispiel für die Verwendung von Standardthema und -körper.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Dieser Code generiert den folgenden Link, über den Sie E-Mails senden können.
Send FeedbackHTML-Frames werden verwendet, um Ihr Browserfenster in mehrere Abschnitte zu unterteilen, in die jeder Abschnitt ein separates HTML-Dokument laden kann. Eine Sammlung von Frames im Browserfenster wird als Frameset bezeichnet. Das Fenster ist ähnlich wie die Tabellen in Frames unterteilt: in Zeilen und Spalten.
Nachteile von Frames
Die Verwendung von Frames weist nur wenige Nachteile auf. Daher wird niemals empfohlen, Frames auf Ihren Webseiten zu verwenden.
Einige kleinere Geräte können Frames nicht oft verarbeiten, da ihr Bildschirm nicht groß genug ist, um aufgeteilt zu werden.
Manchmal wird Ihre Seite aufgrund unterschiedlicher Bildschirmauflösung auf verschiedenen Computern unterschiedlich angezeigt.
Die Zurück- Schaltfläche des Browsers funktioniert möglicherweise nicht wie vom Benutzer erhofft.
Es gibt noch wenige Browser, die die Frame-Technologie nicht unterstützen.
Frames erstellen
Um Frames auf einer Seite zu verwenden, verwenden wir das <frameset> -Tag anstelle des <body> -Tags. Das <frameset> -Tag definiert, wie das Fenster in Frames unterteilt wird. Dasrows Das Attribut des <frameset> -Tags definiert horizontale Frames und colsAttribut definiert vertikale Rahmen. Jeder Frame wird durch das <frame> -Tag angezeigt und definiert, welches HTML-Dokument in den Frame geöffnet werden soll.
Note- Das <frame> -Tag ist in HTML5 veraltet. Verwenden Sie dieses Element nicht.
Beispiel
Es folgt das Beispiel zum Erstellen von drei horizontalen Rahmen:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Dies führt zu folgendem Ergebnis:
Beispiel
Nehmen wir das obige Beispiel wie folgt: Hier haben wir das Zeilenattribut durch Spalten ersetzt und deren Breite geändert. Dadurch werden alle drei Frames vertikal erstellt.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Dies führt zu folgendem Ergebnis:
Die <frameset> -Tag-Attribute
Im Folgenden sind wichtige Attribute des <frameset> -Tags aufgeführt:
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | cols Gibt an, wie viele Spalten im Frameset enthalten sind und wie groß jede Spalte ist. Sie können die Breite jeder Spalte auf eine der vier Arten angeben: Absolutwerte in Pixel. Verwenden Sie zum Erstellen von drei vertikalen Frames beispielsweise cols = "100, 500, 100" . Ein Prozentsatz des Browserfensters. Verwenden Sie zum Erstellen von drei vertikalen Frames beispielsweise cols = "10%, 80%, 10%" . Verwenden eines Platzhaltersymbols. Verwenden Sie zum Erstellen von drei vertikalen Frames beispielsweise cols = "10%, *, 10%" . In diesem Fall nimmt der Platzhalter den Rest des Fensters ein. Als relative Breite des Browserfensters. Verwenden Sie zum Erstellen von drei vertikalen Frames beispielsweise cols = "3 *, 2 *, 1 *" . Dies ist eine Alternative zu Prozentsätzen. Sie können relative Breiten des Browserfensters verwenden. Hier ist das Fenster in Sechstel unterteilt: Die erste Spalte nimmt die Hälfte des Fensters ein, die zweite ein Drittel und die dritte ein Sechstel. |
| 2 | rows Dieses Attribut funktioniert genau wie das Attribut cols und nimmt dieselben Werte an, wird jedoch zum Angeben der Zeilen im Frameset verwendet. Verwenden Sie zum Erstellen von zwei horizontalen Rahmen beispielsweise Zeilen = "10%, 90%" . Sie können die Höhe jeder Zeile auf die gleiche Weise angeben, wie oben für Spalten erläutert. |
| 3 | border Dieses Attribut gibt die Breite des Rahmens jedes Frames in Pixel an. Zum Beispiel border = "5". Ein Wert von Null bedeutet keine Grenze. |
| 4 | frameborder Dieses Attribut gibt an, ob ein dreidimensionaler Rand zwischen Frames angezeigt werden soll. Dieses Attribut hat den Wert 1 (Ja) oder 0 (Nein). Zum Beispiel gibt frameborder = "0" keinen Rand an. |
| 5 | framespacing Dieses Attribut gibt den Abstand zwischen Frames in einem Frameset an. Dies kann einen beliebigen ganzzahligen Wert annehmen. Zum Beispiel bedeutet Framespacing = "10", dass zwischen jedem Frame ein Abstand von 10 Pixel bestehen sollte. |
Die <frame> -Tag-Attribute
Im Folgenden sind die wichtigen Attribute des <frame> -Tags aufgeführt:
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | src Dieses Attribut wird verwendet, um den Dateinamen anzugeben, der in den Frame geladen werden soll. Sein Wert kann eine beliebige URL sein. Beispielsweise lädt src = "/html/top_frame.htm" eine HTML-Datei, die im HTML-Verzeichnis verfügbar ist. |
| 2 | name Mit diesem Attribut können Sie einem Frame einen Namen geben. Es wird verwendet, um anzugeben, in welchen Frame ein Dokument geladen werden soll. Dies ist besonders wichtig, wenn Sie Links in einem Frame erstellen möchten, die Seiten in einen anderen Frame laden. In diesem Fall benötigt der zweite Frame einen Namen, um sich als Ziel des Links zu identifizieren. |
| 3 | frameborder Dieses Attribut gibt an, ob die Ränder dieses Rahmens angezeigt werden. Es überschreibt den Wert, der im Frameborder-Attribut des <frameset> -Tags angegeben ist, falls einer angegeben wird, und dies kann entweder 1 (Ja) oder 0 (Nein) annehmen. |
| 4 | marginwidth Mit diesem Attribut können Sie die Breite des Abstands zwischen dem linken und rechten Rand des Rahmens und dem Inhalt des Rahmens festlegen. Der Wert wird in Pixel angegeben. Zum Beispiel marginwidth = "10". |
| 5 | marginheight Mit diesem Attribut können Sie die Höhe des Abstands zwischen dem oberen und unteren Rand des Rahmens und dessen Inhalt festlegen. Der Wert wird in Pixel angegeben. Zum Beispiel marginheight = "10". |
| 6 | noresize Standardmäßig können Sie die Größe eines Frames ändern, indem Sie auf die Rahmen eines Frames klicken und diese ziehen. Das Attribut noresize verhindert, dass ein Benutzer die Größe des Frames ändern kann. Zum Beispiel noresize = "noresize". |
| 7 | scrolling Dieses Attribut steuert das Erscheinungsbild der Bildlaufleisten, die im Rahmen angezeigt werden. Dies nimmt entweder die Werte "Ja", "Nein" oder "Auto" an. Zum Beispiel bedeutet scrolling = "no", dass es keine Bildlaufleisten geben sollte. |
| 8 | longdesc Mit diesem Attribut können Sie einen Link zu einer anderen Seite bereitstellen, die eine lange Beschreibung des Inhalts des Frames enthält. Zum Beispiel longdesc = "framedescription.htm" |
Browser-Unterstützung für Frames
Wenn ein Benutzer einen alten Browser oder einen Browser verwendet, der keine Frames unterstützt, sollte dem Benutzer das Element <noframes> angezeigt werden.
Sie müssen also ein <body> -Element in das <noframes> -Element einfügen, da das <frameset> -Element das <body> -Element ersetzen soll. Wenn ein Browser jedoch das <frameset> -Element nicht versteht, sollte er verstehen, was sich im Element befindet <body> -Element, das in einem <noframes> -Element enthalten ist.
Sie können Ihrem Benutzer mit alten Browsern eine nette Nachricht senden. Zum Beispiel Entschuldigung !! Ihr Browser unterstützt keine Frames. wie im obigen Beispiel gezeigt.
Name und Zielattribute des Frames
Eine der beliebtesten Anwendungen von Frames besteht darin, Navigationsleisten in einem Frame zu platzieren und dann die Hauptseiten in einen separaten Frame zu laden.
Sehen wir uns das folgende Beispiel an, in dem eine test.htm-Datei folgenden Code enthält:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Hier haben wir zwei Spalten erstellt, um sie mit zwei Frames zu füllen. Der erste Frame ist 200 Pixel breit und enthält die von implementierte Navigationsmenüleistemenu.htmDatei. Die zweite Spalte füllt den verbleibenden Platz aus und enthält den Hauptteil der Seite. Sie wird von implementiertmain.htmDatei. Für alle drei in der Menüleiste verfügbaren Links haben wir den Zielrahmen als angegebenmain_pageWenn Sie also auf einen der Links in der Menüleiste klicken, wird der verfügbare Link auf der Hauptseite geöffnet.
Es folgt der Inhalt der Datei menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>Es folgt der Inhalt der Datei main.htm -
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Wenn wir laden test.htm Datei, es erzeugt folgendes Ergebnis -
Jetzt können Sie versuchen, auf die im linken Bereich verfügbaren Links zu klicken und das Ergebnis anzuzeigen. Das Zielattribut kann auch einen der folgenden Werte annehmen :
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | _self Lädt die Seite in den aktuellen Frame. |
| 2 | _blank Lädt eine Seite in ein neues Browserfenster. Neues Fenster öffnen. |
| 3 | _parent Lädt die Seite in das übergeordnete Fenster, das im Fall eines einzelnen Framesets das Hauptbrowserfenster ist. |
| 4 | _top Lädt die Seite in das Browserfenster und ersetzt alle aktuellen Frames. |
| 5 | targetframe Lädt die Seite in einen benannten Zielrahmen. |
Sie können einen Inline-Frame mit HTML-Tag definieren <iframe>. Das <iframe> -Tag hat nichts mit dem <frameset> -Tag zu tun, sondern kann an einer beliebigen Stelle in Ihrem Dokument angezeigt werden. Das <iframe> -Tag definiert einen rechteckigen Bereich innerhalb des Dokuments, in dem der Browser ein separates Dokument anzeigen kann, einschließlich Bildlaufleisten und Rahmen. Ein Inline-Frame wird verwendet, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten.
Das src Das Attribut wird verwendet, um die URL des Dokuments anzugeben, das den Inline-Frame belegt.
Beispiel
Das folgende Beispiel zeigt, wie der <iframe> verwendet wird -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Die <Iframe> -Tag-Attribute
Die meisten Attribute des <iframe> -Tags, einschließlich Name, Klasse, Frameborder, ID, Longdesc, Randhöhe, Randbreite, Name, Bildlauf, Stil und Titel, verhalten sich genau wie die entsprechenden Attribute für das <frame> -Tag.
Note- Die Attribute Frameborder , Marginwidth , Longdesc , Scrolling und Marginheight sind in HTML5 veraltet. Verwenden Sie diese Attribute nicht.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | src Dieses Attribut wird verwendet, um den Dateinamen anzugeben, der in den Frame geladen werden soll. Sein Wert kann eine beliebige URL sein. Beispielsweise lädt src = "/html/top_frame.htm" eine HTML-Datei, die im HTML-Verzeichnis verfügbar ist. |
| 2 | name Mit diesem Attribut können Sie einem Frame einen Namen geben. Es wird verwendet, um anzugeben, in welchen Frame ein Dokument geladen werden soll. Dies ist besonders wichtig, wenn Sie Links in einem Frame erstellen möchten, die Seiten in einen anderen Frame laden. In diesem Fall benötigt der zweite Frame einen Namen, um sich als Ziel des Links zu identifizieren. |
| 3 | frameborder Dieses Attribut gibt an, ob die Ränder dieses Rahmens angezeigt werden. Es überschreibt den Wert, der im Frameborder-Attribut des <frameset> -Tags angegeben ist, falls einer angegeben wird, und dies kann entweder 1 (Ja) oder 0 (Nein) annehmen. |
| 4 | marginwidth Mit diesem Attribut können Sie die Breite des Abstands zwischen dem linken und rechten Rand des Rahmens und dem Inhalt des Rahmens festlegen. Der Wert wird in Pixel angegeben. Zum Beispiel marginwidth = "10". |
| 5 | marginheight Mit diesem Attribut können Sie die Höhe des Abstands zwischen dem oberen und unteren Rand des Rahmens und dessen Inhalt festlegen. Der Wert wird in Pixel angegeben. Zum Beispiel marginheight = "10". |
| 6 | height Dieses Attribut gibt die Höhe von <iframe> an. |
| 7 | scrolling Dieses Attribut steuert das Erscheinungsbild der Bildlaufleisten, die im Rahmen angezeigt werden. Dies nimmt entweder die Werte "Ja", "Nein" oder "Auto" an. Zum Beispiel bedeutet scrolling = "no", dass es keine Bildlaufleisten geben sollte. |
| 8 | longdesc Mit diesem Attribut können Sie einen Link zu einer anderen Seite bereitstellen, die eine lange Beschreibung des Inhalts des Frames enthält. Zum Beispiel longdesc = "framedescription.htm" |
| 9 | width Dieses Attribut gibt die Breite von <iframe> an. |
Alle HTML-Elemente können in zwei Kategorien eingeteilt werden (a) Block Level Elemente (b)Inline-Elemente.
Blockelemente
Blockelemente werden auf dem Bildschirm so angezeigt, als hätten sie vor und nach ihnen einen Zeilenumbruch. Zum Beispiel die <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <h Die Elemente />, <blockquote> und <address> sind Elemente auf Blockebene. Sie alle beginnen in ihrer eigenen neuen Zeile, und alles, was ihnen folgt, erscheint in einer eigenen neuen Zeile.
Inline-Elemente
Inline-Elemente hingegen können in Sätzen erscheinen und müssen nicht in einer eigenen neuen Zeile erscheinen. Die <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Die Elemente code>, <cite>, <dfn>, <kbd> und <var> sind alle Inline-Elemente.
Gruppieren von HTML-Elementen
Es gibt zwei wichtige Tags, die wir sehr häufig verwenden, um verschiedene andere HTML-Tags zu gruppieren: (i) <div> -Tag und (ii) <span> -Tag
Das <div> -Tag
Dies ist das sehr wichtige Block-Level-Tag, das eine große Rolle bei der Gruppierung verschiedener anderer HTML-Tags und der Anwendung von CSS auf Gruppen von Elementen spielt. Selbst jetzt kann das <div> -Tag verwendet werden, um ein Webseitenlayout zu erstellen, bei dem verschiedene Teile (links, rechts, oben usw.) der Seite mit dem <div> -Tag definiert werden. Dieses Tag bietet keine visuellen Änderungen am Block, hat jedoch eine größere Bedeutung, wenn es mit CSS verwendet wird.
Beispiel
Es folgt ein einfaches Beispiel für das <div> -Tag. Wir werden Cascading Style Sheet (CSS) in einem separaten Kapitel lernen, aber wir haben es hier verwendet, um die Verwendung des <div> -Tags zu zeigen -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das <span> -Tag
Das HTML <span> ist ein Inline-Element und kann zum Gruppieren von Inline-Elementen in einem HTML-Dokument verwendet werden. Dieses Tag bietet auch keine visuellen Änderungen am Block, hat jedoch eine größere Bedeutung, wenn es mit CSS verwendet wird.
Der Unterschied zwischen dem <span> -Tag und dem <div> -Tag besteht darin, dass das <span> -Tag mit Inline-Elementen verwendet wird, während das <div> -Tag mit Elementen auf Blockebene verwendet wird.
Beispiel
Das Folgende ist ein einfaches Beispiel für ein <span> -Tag. Wir werden Cascading Style Sheet (CSS) in einem separaten Kapitel lernen, aber wir haben es hier verwendet, um die Verwendung des <span> -Tags zu zeigen -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Standardmäßig ist Ihr Webseitenhintergrund weiß. Sie mögen es vielleicht nicht, aber keine Sorge. HTML bietet Ihnen zwei gute Möglichkeiten, um den Hintergrund Ihrer Webseite zu dekorieren.
- HTML-Hintergrund mit Farben
- HTML-Hintergrund mit Bildern
Lassen Sie uns nun beide Ansätze einzeln anhand geeigneter Beispiele betrachten.
HTML-Hintergrund mit Farben
Das bgcolor Das Attribut wird verwendet, um den Hintergrund eines HTML-Elements zu steuern, insbesondere den Seitenkörper und den Tabellenhintergrund.
Note- Das Attribut bgcolor ist in HTML5 veraltet. Verwenden Sie dieses Attribut nicht.
Im Folgenden finden Sie die Syntax zur Verwendung des Attributs bgcolor für jedes HTML-Tag.
<tagname bgcolor = "color_value"...>Dieser Farbwert kann in einem der folgenden Formate angegeben werden:
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >Beispiel
Hier sind die Beispiele zum Festlegen des Hintergrunds eines HTML-Tags:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML-Hintergrund mit Bildern
Das backgroundDas Attribut kann auch verwendet werden, um den Hintergrund eines HTML-Elements zu steuern, insbesondere den Seitenkörper und den Tabellenhintergrund. Sie können ein Bild angeben, um den Hintergrund Ihrer HTML-Seite oder -Tabelle festzulegen.
Note- Das in HTML5 veraltete Hintergrundattribut . Verwenden Sie dieses Attribut nicht.
Im Folgenden finden Sie die Syntax zur Verwendung des Hintergrundattributs für jedes HTML-Tag.
Note- Das Hintergrundattribut ist veraltet und es wird empfohlen, das Stylesheet für die Hintergrundeinstellung zu verwenden.
<tagname background = "Image URL"...>Die am häufigsten verwendeten Bildformate sind JPEG-, GIF- und PNG-Bilder.
Beispiel
Hier sind die Beispiele zum Festlegen von Hintergrundbildern einer Tabelle.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Gemusterte und transparente Hintergründe
Möglicherweise haben Sie auf verschiedenen Websites viele Muster oder transparente Hintergründe gesehen. Dies kann einfach erreicht werden, indem ein gemustertes Bild oder ein transparentes Bild im Hintergrund verwendet wird.
Es wird empfohlen, beim Erstellen von Mustern oder transparenten GIF- oder PNG-Bildern die kleinstmöglichen Abmessungen zu verwenden, auch wenn sie nur 1x1 klein sind, um ein langsames Laden zu vermeiden.
Beispiel
Hier sind die Beispiele zum Festlegen des Hintergrundmusters einer Tabelle:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Farben sind sehr wichtig, um Ihrer Website ein gutes Erscheinungsbild zu verleihen. Sie können Farben auf Seitenebene mit dem <body> -Tag angeben oder Farben für einzelne Tags mit festlegenbgcolor Attribut.
Das <body> -Tag verfügt über folgende Attribute, mit denen verschiedene Farben festgelegt werden können:
bgcolor - Legt eine Farbe für den Hintergrund der Seite fest.
text - legt eine Farbe für den Text fest.
alink - Legt eine Farbe für aktive oder ausgewählte Links fest.
link - legt eine Farbe für verknüpften Text fest.
vlink- legt eine Farbe für besuchte Links fest, dh für verknüpften Text, auf den Sie bereits geklickt haben.
HTML-Farbcodierungsmethoden
Es gibt drei verschiedene Methoden, um Farben auf Ihrer Webseite festzulegen:
Color names - Sie können Farbnamen direkt wie Grün, Blau oder Rot angeben.
Hex codes - Ein sechsstelliger Code, der die Menge an Rot, Grün und Blau darstellt, aus der die Farbe besteht.
Color decimal or percentage values - Dieser Wert wird mit der Eigenschaft rgb () angegeben.
Jetzt werden wir diese Farbschemata einzeln sehen.
HTML-Farben - Farbnamen
Sie können direkt einen Farbnamen angeben, um die Text- oder Hintergrundfarbe festzulegen. W3C hat 16 grundlegende Farbnamen aufgelistet, die mit einem HTML-Validator validiert werden. Es gibt jedoch über 200 verschiedene Farbnamen, die von den wichtigsten Browsern unterstützt werden.
Note- Überprüfen Sie eine vollständige Liste der HTML-Farbnamen.
W3C Standard 16 Farben
Hier ist die Liste der W3C Standard 16-Farben-Namen, und es wird empfohlen, sie zu verwenden.
| Schwarz | Grau | Silber | Weiß | ||||
| Gelb | Limette | Aqua | Fuchsie | ||||
| rot | Grün | Blau | Lila | ||||
| Kastanienbraun | Olive | Marine | Blaugrün |
Beispiel
Hier sind die Beispiele zum Festlegen des Hintergrunds eines HTML-Tags nach Farbnamen:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>HTML-Farben - Hex-Codes
Eine Hexadezimalzahl ist eine 6-stellige Darstellung einer Farbe. Die ersten beiden Ziffern (RR) stehen für einen roten Wert, die nächsten beiden für einen grünen Wert (GG) und die letzten für den blauen Wert (BB).
Ein hexadezimaler Wert kann von jeder Grafiksoftware wie Adobe Photoshop, Paintshop Pro oder MS Paint übernommen werden.
Vor jedem Hexadezimalcode steht ein Pfund- oder Rautezeichen #. Im Folgenden finden Sie eine Liste einiger Farben in hexadezimaler Schreibweise.
| Farbe | Farbe HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Beispiel
Hier sind die Beispiele zum Festlegen des Hintergrunds eines HTML-Tags durch Farbcode in hexadezimaler Reihenfolge -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>HTML-Farben - RGB-Werte
Dieser Farbwert wird mit dem angegeben rgb( )Eigentum. Diese Eigenschaft akzeptiert drei Werte, jeweils einen für Rot, Grün und Blau. Der Wert kann eine Ganzzahl zwischen 0 und 255 oder ein Prozentsatz sein.
Note - Alle Browser unterstützen die Eigenschaft rgb () von color nicht, daher wird empfohlen, sie nicht zu verwenden.
Im Folgenden finden Sie eine Liste, in der einige Farben mit RGB-Werten angezeigt werden.
| Farbe | Farbe RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192, 192, 192) | |
| rgb (255,255,255) |
Beispiel
Hier sind die Beispiele zum Festlegen des Hintergrunds eines HTML-Tags anhand des Farbcodes mithilfe von rgb () -Werten.
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Browser sichere Farben
Hier ist die Liste von 216 Farben, die als sicherste und computerunabhängigste Farben gelten sollen. Diese Farben reichen von Hexa-Code 000000 bis FFFFFF und werden von allen Computern mit 256 Farbpaletten unterstützt.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Schriftarten spielen eine sehr wichtige Rolle, um eine Website benutzerfreundlicher zu gestalten und die Lesbarkeit von Inhalten zu verbessern. Schriftart und -farbe hängen vollständig von dem Computer und dem Browser ab, mit denen Ihre Seite angezeigt wird. Sie können jedoch HTML verwenden<font>Tag, um dem Text auf Ihrer Website Stil, Größe und Farbe hinzuzufügen. Sie können eine verwenden<basefont> Tag, um Ihren gesamten Text auf die gleiche Größe, das gleiche Gesicht und die gleiche Farbe einzustellen.
Das Font-Tag hat drei Attribute size, color, und faceum Ihre Schriftarten anzupassen. Verwenden Sie einfach das <font> -Tag, um die Schriftattribute jederzeit auf Ihrer Webseite zu ändern. Der folgende Text bleibt geändert, bis Sie mit dem </ font> -Tag schließen. Sie können eines oder alle Schriftattribute innerhalb eines <font> -Tags ändern.
Note−Die Tags für Schriftarten und Basisschriftarten sind veraltet und sollten in einer zukünftigen HTML-Version entfernt werden. Sie sollten daher nicht verwendet werden. Es wird empfohlen, CSS-Stile zu verwenden, um Ihre Schriftarten zu bearbeiten. In diesem Kapitel werden Schrift- und Basisschriftarten im Detail erläutert.
Stellen Sie die Schriftgröße ein
Sie können die Schriftgröße für Inhalte mithilfe von festlegen sizeAttribut. Der Bereich der akzeptierten Werte reicht von 1 (kleinste) bis 7 (größte). Die Standardgröße einer Schriftart ist 3.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>Dies führt zu folgendem Ergebnis:
Relative Schriftgröße
Sie können angeben, wie viele Größen größer oder wie viele Größen kleiner als die voreingestellte Schriftgröße sein sollen. Sie können es wie angeben<font size = "+n"> oder <font size = "−n">
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>Dies führt zu folgendem Ergebnis:
Schriftart einstellen
Sie können die Schriftart mithilfe des Gesichtsattributs festlegen. Beachten Sie jedoch, dass der Benutzer, der die Seite anzeigt, die Schriftart nicht installiert hat und diese nicht sehen kann. Stattdessen wird dem Benutzer die Standardschriftart angezeigt, die für den Computer des Benutzers gilt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>Dies führt zu folgendem Ergebnis:
Geben Sie alternative Schriftarten an
Ein Besucher kann Ihre Schriftart nur sehen, wenn er diese Schriftart auf seinem Computer installiert hat. Es ist also möglich, zwei oder mehr Alternativen für Schriftarten anzugeben, indem die Namen der Schriftarten durch Komma getrennt aufgelistet werden.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Wenn Ihre Seite geladen wird, zeigt der Browser die erste verfügbare Schriftart an. Wenn keine der angegebenen Schriftarten installiert ist, wird die Standardschriftart Times New Roman angezeigt .
Note - Überprüfen Sie eine vollständige Liste von HTML Standard Fonts.
Festlegen der Schriftfarbe
Sie können eine beliebige Schriftfarbe mithilfe des Farbattributs festlegen . Sie können die gewünschte Farbe entweder durch den Farbnamen oder den Hexadezimalcode für diese Farbe angeben.
Note - Sie können eine vollständige Liste von überprüfen HTML Color Name with Codes.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das <basefont> -Element
Das <basefont> -Element soll eine Standardschriftgröße, -farbe und -schrift für alle Teile des Dokuments festlegen, die ansonsten nicht in einem <font> -Tag enthalten sind. Mit den <font> -Elementen können Sie die <basefont> -Einstellungen überschreiben.
Das <basefont> -Tag akzeptiert auch Farb-, Größen- und Gesichtsattribute und unterstützt die relative Schriftarteneinstellung, indem der Größe für eine größere Größe ein Wert von +1 oder für zwei kleinere Größen ein Wert von –2 zugewiesen wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML-Formulare sind erforderlich, wenn Sie Daten vom Website-Besucher erfassen möchten. Beispielsweise möchten Sie während der Benutzerregistrierung Informationen wie Name, E-Mail-Adresse, Kreditkarte usw. sammeln.
Ein Formular nimmt Eingaben vom Site-Besucher entgegen und sendet sie dann an eine Back-End-Anwendung wie CGI, ASP-Skript oder PHP-Skript usw. Die Back-End-Anwendung führt die erforderliche Verarbeitung der übergebenen Daten basierend auf der darin definierten Geschäftslogik durch die Anwendung.
Es stehen verschiedene Formularelemente wie Textfelder, Textfeldfelder, Dropdown-Menüs, Optionsfelder, Kontrollkästchen usw. zur Verfügung.
Der HTML <form> Das Tag wird zum Erstellen eines HTML-Formulars verwendet und hat die folgende Syntax:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Formularattribute
Neben den allgemeinen Attributen finden Sie im Folgenden eine Liste der am häufigsten verwendeten Formularattribute:
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | action Backend-Skript zur Verarbeitung Ihrer übergebenen Daten. |
| 2 | method Methode zum Hochladen von Daten. Am häufigsten werden GET- und POST-Methoden verwendet. |
| 3 | target Geben Sie das Zielfenster oder den Zielrahmen an, in dem das Ergebnis des Skripts angezeigt wird. Es braucht Werte wie _blank, _self, _parent usw. |
| 4 | enctype Mit dem Attribut enctype können Sie angeben, wie der Browser die Daten codiert, bevor er sie an den Server sendet. Mögliche Werte sind - application/x-www-form-urlencoded - Dies ist die Standardmethode, die die meisten Formulare in einfachen Szenarien verwenden. mutlipart/form-data - Dies wird verwendet, wenn Sie Binärdaten in Form von Dateien wie Bild, Word-Datei usw. hochladen möchten. |
Note- Weitere Informationen zur Funktionsweise des Hochladens von Formulardaten finden Sie in Perl & CGI .
HTML-Formularsteuerelemente
Es gibt verschiedene Arten von Formularsteuerelementen, mit denen Sie Daten mithilfe von HTML-Formularen erfassen können.
- Steuerelemente für die Texteingabe
- Kontrollkästchen Steuerelemente
- Radio Box-Steuerelemente
- Wählen Sie Box Controls
- Datei Auswahlfelder
- Versteckte Steuerelemente
- Klickbare Schaltflächen
- Senden und Zurücksetzen
Steuerelemente für die Texteingabe
Es gibt drei Arten der Texteingabe für Formulare:
Single-line text input controls- Dieses Steuerelement wird für Elemente verwendet, für die nur eine Benutzereingabe erforderlich ist, z. B. Suchfelder oder Namen. Sie werden mit HTML erstellt<input> Etikett.
Password input controls- Dies ist ebenfalls eine einzeilige Texteingabe, die das Zeichen jedoch maskiert, sobald ein Benutzer es eingibt. Sie werden auch mit dem HTMl-Tag <input> erstellt.
Multi-line text input controls- Dies wird verwendet, wenn der Benutzer Details angeben muss, die länger als ein einzelner Satz sein können. Mehrzeilige Eingabesteuerelemente werden mit HTML erstellt<textarea> Etikett.
Einzeilige Texteingabesteuerelemente
Dieses Steuerelement wird für Elemente verwendet, für die nur eine Benutzereingabe erforderlich ist, z. B. Suchfelder oder Namen. Sie werden mit dem HTML-Tag <input> erstellt.
Beispiel
Hier ist ein grundlegendes Beispiel für eine einzeilige Texteingabe, mit der Vor- und Nachname verwendet werden.
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste der Attribute für das <input> -Tag zum Erstellen eines Textfelds.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | type Gibt die Art der Eingabesteuerung an und wird für die Texteingabesteuerung auf eingestellt text. |
| 2 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 3 | value Dies kann verwendet werden, um einen Anfangswert innerhalb des Steuerelements bereitzustellen. |
| 4 | size Ermöglicht die Angabe der Breite des Texteingabesteuerelements in Zeichen. |
| 5 | maxlength Ermöglicht die Angabe der maximalen Anzahl von Zeichen, die ein Benutzer in das Textfeld eingeben kann. |
Steuerelemente für die Passworteingabe
Dies ist auch eine einzeilige Texteingabe, die das Zeichen jedoch maskiert, sobald ein Benutzer es eingibt. Sie werden auch mit dem HTML-Tag <input> erstellt, das Attribut type ist jedoch auf festgelegtpassword.
Beispiel
Hier ist ein grundlegendes Beispiel für eine einzeilige Passworteingabe zur Verwendung des Benutzerkennworts:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste der Attribute für das <input> -Tag zum Erstellen eines Kennwortfelds.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | type Gibt die Art der Eingabesteuerung an und für die Passworteingabesteuerung wird sie eingestellt password. |
| 2 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 3 | value Dies kann verwendet werden, um einen Anfangswert innerhalb des Steuerelements bereitzustellen. |
| 4 | size Ermöglicht die Angabe der Breite des Texteingabesteuerelements in Zeichen. |
| 5 | maxlength Ermöglicht die Angabe der maximalen Anzahl von Zeichen, die ein Benutzer in das Textfeld eingeben kann. |
Steuerelemente für die mehrzeilige Texteingabe
Dies wird verwendet, wenn der Benutzer Details angeben muss, die länger als ein einzelner Satz sein können. Mehrzeilige Eingabesteuerelemente werden mithilfe des HTML-Tags <textarea> erstellt.
Beispiel
Hier ist ein grundlegendes Beispiel für eine mehrzeilige Texteingabe, mit der die Artikelbeschreibung erstellt wird:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste der Attribute für das <textarea> -Tag.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 2 | rows Gibt die Anzahl der Zeilen des Textbereichs an. |
| 3 | cols Gibt die Anzahl der Spalten des Textbereichs an |
Kontrollkästchen-Steuerung
Kontrollkästchen werden verwendet, wenn mehr als eine Option ausgewählt werden muss. Sie werden auch mit dem HTML-Tag <input> erstellt, das Attribut type ist jedoch auf festgelegtcheckbox..
Beispiel
Hier ist ein Beispiel für einen HTML-Code für ein Formular mit zwei Kontrollkästchen:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste der Attribute für das <checkbox> -Tag.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | type Zeigt die Art der Eingabesteuerung an und für die Eingabesteuerung des Kontrollkästchens wird sie eingestellt checkbox.. |
| 2 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 3 | value Der Wert, der verwendet wird, wenn das Kontrollkästchen aktiviert ist. |
| 4 | checked Stellen Sie zu überprüfen , ob Sie es standardmäßig auswählen möchten. |
Optionsfeldsteuerung
Optionsfelder werden verwendet, wenn aus vielen Optionen nur eine Option ausgewählt werden muss. Sie werden auch mit dem HTML-Tag <input> erstellt, das Attribut type ist jedoch auf festgelegtradio.
Beispiel
Hier ist ein Beispiel für einen HTML-Code für ein Formular mit zwei Optionsfeldern:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste der Attribute für das Optionsfeld.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | type Zeigt die Art der Eingabesteuerung an und für die Eingabesteuerung des Kontrollkästchens wird Radio eingestellt. |
| 2 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 3 | value Der Wert, der verwendet wird, wenn das Optionsfeld ausgewählt ist. |
| 4 | checked Stellen Sie zu überprüfen , ob Sie es standardmäßig auswählen möchten. |
Wählen Sie Box Control
Ein Auswahlfeld, auch Dropdown-Feld genannt, das die Option bietet, verschiedene Optionen in Form einer Dropdown-Liste aufzulisten, aus der ein Benutzer eine oder mehrere Optionen auswählen kann.
Beispiel
Hier ist ein Beispiel für einen HTML-Code für ein Formular mit einem Dropdown-Feld
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste wichtiger Attribute des <select> -Tags -
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 2 | size Dies kann verwendet werden, um ein Bildlauflistenfeld anzuzeigen. |
| 3 | multiple Wenn "Mehrfach" eingestellt ist, kann ein Benutzer mehrere Elemente aus dem Menü auswählen. |
Im Folgenden finden Sie eine Liste wichtiger Attribute des <option> -Tags -
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | value Der Wert, der verwendet wird, wenn eine Option im Auswahlfeld ausgewählt ist. |
| 2 | selected Gibt an, dass diese Option der ursprünglich ausgewählte Wert sein soll, wenn die Seite geladen wird. |
| 3 | label Eine alternative Art der Kennzeichnung von Optionen |
Datei-Upload-Box
Wenn Sie einem Benutzer erlauben möchten, eine Datei auf Ihre Website hochzuladen, müssen Sie ein Feld zum Hochladen von Dateien verwenden, das auch als Dateiauswahlfeld bezeichnet wird. Dies wird auch mit dem <input> -Element erstellt, aber das type-Attribut ist auf gesetztfile.
Beispiel
Hier ist ein Beispiel für einen HTML-Code für ein Formular mit einem Feld zum Hochladen von Dateien:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Attribute
Im Folgenden finden Sie eine Liste wichtiger Attribute der Datei-Upload-Box -
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | name Wird verwendet, um dem Steuerelement einen Namen zu geben, das an den Server gesendet wird, um erkannt zu werden und den Wert abzurufen. |
| 2 | accept Gibt die Dateitypen an, die der Server akzeptiert. |
Tastensteuerung
In HTML gibt es verschiedene Möglichkeiten, anklickbare Schaltflächen zu erstellen. Sie können eine anklickbare Schaltfläche auch mit dem <input> -Tag erstellen, indem Sie das type-Attribut auf setzenbutton. Das type-Attribut kann die folgenden Werte annehmen:
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | submit Dadurch wird eine Schaltfläche erstellt, die automatisch ein Formular sendet. |
| 2 | reset Dadurch wird eine Schaltfläche erstellt, mit der Formularsteuerelemente automatisch auf ihre ursprünglichen Werte zurückgesetzt werden. |
| 3 | button Dadurch wird eine Schaltfläche erstellt, mit der ein clientseitiges Skript ausgelöst wird, wenn der Benutzer auf diese Schaltfläche klickt. |
| 4 | image Dadurch wird eine anklickbare Schaltfläche erstellt, wir können jedoch ein Bild als Hintergrund für die Schaltfläche verwenden. |
Beispiel
Hier ist ein Beispiel für einen HTML-Code für ein Formular mit drei Arten von Schaltflächen:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Steuerelemente für ausgeblendete Formulare
Versteckte Formularsteuerelemente werden verwendet, um Daten auf der Seite auszublenden, die später auf den Server übertragen werden können. Dieses Steuerelement versteckt sich im Code und wird nicht auf der eigentlichen Seite angezeigt. Das folgende versteckte Formular wird beispielsweise verwendet, um die aktuelle Seitenzahl beizubehalten. Wenn ein Benutzer auf die nächste Seite klickt, wird der Wert des verborgenen Steuerelements an den Webserver gesendet und dort wird basierend auf der übergebenen aktuellen Seite entschieden, welche Seite als nächstes angezeigt wird.
Beispiel
Hier ist ein Beispiel für einen HTML-Code, der die Verwendung versteckter Steuerelemente zeigt:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Dies führt zu folgendem Ergebnis:
Manchmal müssen Sie Ihrer Webseite Musik oder Videos hinzufügen. Der einfachste Weg, Ihrer Website Video oder Ton hinzuzufügen, besteht darin, das spezielle HTML-Tag namens aufzurufen<embed>. Dieses Tag bewirkt, dass der Browser selbst Steuerelemente für das automatisch bereitgestellte Multimedia enthält, sofern der Browser das <embed> -Tag und den angegebenen Medientyp unterstützt.
Sie können auch a einschließen <noembed>Tag für die Browser, die das <embed> -Tag nicht erkennen. Sie können beispielsweise <embed> verwenden, um einen Film Ihrer Wahl anzuzeigen, und<noembed> um ein einzelnes JPG-Bild anzuzeigen, wenn der Browser das <embed> -Tag nicht unterstützt.
Beispiel
Hier ist ein einfaches Beispiel zum Abspielen einer eingebetteten MIDI-Datei:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Die <embed> -Tag-Attribute
Im Folgenden finden Sie eine Liste wichtiger Attribute, die mit dem <embed> -Tag verwendet werden können.
Note- Die Attribute " Ausrichten" und " Autostart" sind in HTML5 veraltet. Verwenden Sie diese Attribute nicht.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | align Legt fest, wie das Objekt ausgerichtet wird. Es kann entweder auf Mitte, links oder rechts eingestellt werden . |
| 2 | autostart Dieses boolesche Attribut gibt an, ob das Medium automatisch gestartet werden soll. Sie können entweder wahr oder falsch einstellen. |
| 3 | loop Gibt an, ob der Sound kontinuierlich abgespielt werden soll (Loop auf true setzen), eine bestimmte Anzahl von Malen (ein positiver Wert) oder überhaupt nicht (false). |
| 4 | playcount Gibt an, wie oft der Sound abgespielt werden soll. Dies ist eine alternative Option für die Schleife, wenn Sie den IE verwenden. |
| 5 | hidden Gibt an, ob das Multimedia-Objekt auf der Seite angezeigt werden soll. Ein falscher Wert bedeutet nein und wahre Werte bedeuten ja. |
| 6 | width Breite des Objekts in Pixel |
| 7 | height Höhe des Objekts in Pixel |
| 8 | name Ein Name, der zum Verweisen auf das Objekt verwendet wird. |
| 9 | src URL des einzubettenden Objekts. |
| 10 | volume Regelt die Lautstärke des Tons. Kann zwischen 0 (aus) und 100 (volle Lautstärke) liegen. |
Unterstützte Videotypen
Sie können verschiedene Medientypen wie Flash-Filme (.swf), AVI- (.avi) und MOV- (.mov) Dateitypen im Embed-Tag verwenden.
.swf files - sind die Dateitypen, die vom Flash-Programm von Macromedia erstellt wurden.
.wmv files - sind die Media Video-Dateitypen von Microsoft Windows.
.mov files - sind Apples Quick Time Movie-Format.
.mpeg files - sind Filmdateien, die von der Expertengruppe für bewegte Bilder erstellt wurden.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Dies führt zu folgendem Ergebnis:
Hintergrund Audio
Sie können HTML verwenden <bgsound>Tag, um einen Soundtrack im Hintergrund Ihrer Webseite abzuspielen. Dieses Tag wird nur von Internet Explorer unterstützt und die meisten anderen Browser ignorieren dieses Tag. Es lädt eine Audiodatei herunter und spielt sie ab, wenn das Hostdokument zum ersten Mal vom Benutzer heruntergeladen und angezeigt wird. Die Hintergrund-Sounddatei wird auch wiedergegeben, wenn der Benutzer den Browser aktualisiert.
Note- Das bgsound-Tag ist veraltet und soll in einer zukünftigen HTML-Version entfernt werden. Sie sollten daher nicht verwendet werden. Es wird empfohlen, HTML5-Tag-Audio zum Hinzufügen von Sound zu verwenden. In diesem Kapitel wird das bgsound-Tag jedoch noch zu Lernzwecken ausführlich erläutert.
Dieses Tag hat nur zwei Attribute loop und src . Beide Attribute haben dieselbe Bedeutung wie oben erläutert.
Hier ist ein einfaches Beispiel, um eine kleine Midi-Datei abzuspielen:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Dies erzeugt den leeren Bildschirm. Dieses Tag zeigt keine Komponente an und bleibt verborgen.
Internet Explorer kann auch nur drei verschiedene Soundformatdateien verarbeiten - wav, das native Format für PCs; au, das native Format für die meisten Unix-Workstations; und MIDI, ein universelles Musikcodierungsschema.
HTML-Objekt-Tag
HTML 4 führt die <object>Element, das eine universelle Lösung für die generische Objektaufnahme bietet. Das<object> Mit element können HTML-Autoren alles angeben, was ein Objekt für die Präsentation durch einen Benutzeragenten benötigt.
Hier einige Beispiele -
Beispiel 1
Sie können ein HTML-Dokument wie folgt in ein HTML-Dokument selbst einbetten:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Hier wird das alt- Attribut angezeigt, wenn der Browser das Objekt- Tag nicht unterstützt .
Beispiel - 2
Sie können ein PDF-Dokument wie folgt in ein HTML-Dokument einbetten:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Beispiel - 3
Sie können einige Parameter für das Dokument mit dem angeben <param>Etikett. Hier ist ein Beispiel zum Einbetten einer WAV-Datei:
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Beispiel - 4
Sie können ein Flash-Dokument wie folgt hinzufügen:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Beispiel - 5
Sie können ein Java-Applet wie folgt zum HTML-Dokument hinzufügen:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>Das classidDas Attribut gibt an, welche Version des Java-Plug-Ins verwendet werden soll. Mit dem optionalen Codebasisattribut können Sie angeben, ob und wie die JRE heruntergeladen werden soll.
Ein HTML-Auswahlrahmen ist ein scrollender Text, der je nach Einstellung entweder horizontal über oder vertikal auf Ihrer Webseite angezeigt wird. Dies wird mithilfe des HTML-Tags <marquees> erstellt.
Note- Das <marquee> -Tag ist in HTML5 veraltet. Verwenden Sie dieses Element nicht, sondern verwenden Sie JavaScript und CSS, um solche Effekte zu erstellen.
Syntax
Eine einfache Syntax zur Verwendung des HTML-Tags <marquee> lautet wie folgt:
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Die <marquee> -Tag-Attribute
Im Folgenden finden Sie eine Liste wichtiger Attribute, die mit dem <marquee> -Tag verwendet werden können.
| Sr.Nr. | Attribut & Beschreibung |
|---|---|
| 1 | width Dies gibt die Breite des Auswahlrahmens an. Dies kann ein Wert wie 10 oder 20% usw. sein. |
| 2 | height Dies gibt die Höhe des Festzeltes an. Dies kann ein Wert wie 10 oder 20% usw. sein. |
| 3 | direction Dies gibt die Richtung an, in die das Auswahlrechteck scrollen soll. Dies kann ein Wert wie oben, unten, links oder rechts sein . |
| 4 | behavior Dies gibt die Art des Bildlaufs des Auswahlrahmens an. Dies kann einen Wert wie Scrollen, Schieben und Alternieren haben . |
| 5 | scrolldelay Dies gibt an, wie lange zwischen den einzelnen Sprüngen verzögert werden soll. Dies hat einen Wert wie 10 usw. |
| 6 | scrollamount Dies gibt die Geschwindigkeit des Laufschrifttextes an. Dies kann einen Wert wie 10 usw. haben. |
| 7 | loop Dies gibt an, wie oft eine Schleife durchgeführt werden soll. Der Standardwert ist INFINITE, was bedeutet, dass sich das Auswahlrahmen endlos wiederholt. |
| 8 | bgcolor Dies gibt die Hintergrundfarbe in Bezug auf den Farbnamen oder den Farbhexwert an. |
| 9 | hspace Dies gibt den horizontalen Raum um das Festzelt an. Dies kann ein Wert wie 10 oder 20% usw. sein. |
| 10 | vspace Dies gibt den vertikalen Raum um das Festzelt an. Dies kann ein Wert wie 10 oder 20% usw. sein. |
Im Folgenden finden Sie einige Beispiele zur Veranschaulichung der Verwendung von Laufschrift-Tags.
Beispiele - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiele - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiele - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>Dies führt zu folgendem Ergebnis:
Beispiele - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>Dies führt zu folgendem Ergebnis:
Wir haben gelernt, dass ein typisches HTML-Dokument folgende Struktur hat:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>In diesem Kapitel werden einige Details zum Header-Teil erläutert, der durch das HTML-Tag <head> dargestellt wird. Das <head> -Tag ist ein Container mit verschiedenen wichtigen Tags wie <title>, <meta>, <link>, <base>, <style>, <script> und <noscript>.
Das HTML <title> -Tag
Das HTML-Tag <title> wird zum Angeben des Titels des HTML-Dokuments verwendet. Es folgt ein Beispiel, um einem HTML-Dokument einen Titel zu geben:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das HTML <meta> -Tag
Das HTML-Tag <meta> wird verwendet, um Metadaten zum HTML-Dokument bereitzustellen, die Informationen zum Seitenablauf, zum Seitenautor, zur Liste der Schlüsselwörter, zur Seitenbeschreibung usw. enthalten.
Im Folgenden sind einige wichtige Verwendungen des <meta> -Tags in einem HTML-Dokument aufgeführt:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das HTML <base> -Tag
Das HTML-Tag <base> wird zum Angeben der Basis-URL für alle relativen URLs auf einer Seite verwendet. Dies bedeutet, dass alle anderen URLs bei der Suche nach dem angegebenen Element zur Basis-URL verkettet werden.
Beispielsweise werden alle angegebenen Seiten und Bilder durchsucht, nachdem den angegebenen URLs die Basis-URL http://www.tutorialspoint.com/ vorangestellt wurde.
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Dies führt zu folgendem Ergebnis:
Wenn Sie jedoch die Basis-URL in eine andere ändern, z. B. wenn die Basis-URL http://www.tutorialspoint.com/home lautet, werden das Bild und andere angegebene Links wie http://www.tutorialspoint.com/home/images angezeigt /logo.png und http://www.tutorialspoint.com/html/index.htm
Das HTML <link> -Tag
Das HTML-Tag <link> wird verwendet, um Beziehungen zwischen dem aktuellen Dokument und der externen Ressource anzugeben. Im Folgenden finden Sie ein Beispiel zum Verknüpfen einer externen Stylesheet-Datei, die in verfügbar istcss Unterverzeichnis im Webstamm -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das HTML <style> -Tag
Das HTML-Tag <style> wird verwendet, um das Stylesheet für das aktuelle HTML-Dokument anzugeben. Im Folgenden finden Sie ein Beispiel zum Definieren einiger Stylesheet-Regeln im <style> -Tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Note- Um zu erfahren, wie Cascading Style Sheet funktioniert, lesen Sie bitte ein separates Tutorial, das bei css verfügbar ist
Das HTML <script> -Tag
Das HTML-Tag <script> wird verwendet, um entweder eine externe Skriptdatei einzuschließen oder ein internes Skript für das HTML-Dokument zu definieren. Es folgt ein Beispiel, in dem wir JavaScript verwenden, um eine einfache JavaScript-Funktion zu definieren:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie versuchen können, auf die angegebene Schaltfläche zu klicken:
Note- Um zu erfahren, wie JavaScript funktioniert, lesen Sie bitte ein separates Tutorial, das unter Javascript verfügbar ist
Cascading Style Sheets (CSS) beschreiben, wie Dokumente auf Bildschirmen, in gedruckter Form oder möglicherweise ausgesprochen werden. W3C hat seit der Gründung des Konsortiums im Jahr 1994 die Verwendung von Stylesheets im Internet aktiv gefördert.
Cascading Style Sheets (CSS) bieten einfache und effektive Alternativen, um verschiedene Attribute für die HTML-Tags anzugeben. Mit CSS können Sie eine Reihe von Stileigenschaften für ein bestimmtes HTML-Element angeben. Jede Eigenschaft hat einen Namen und einen Wert, die durch einen Doppelpunkt (:) getrennt sind. Jede Eigenschaftsdeklaration wird durch ein Semikolon (;) getrennt.
Beispiel
Betrachten wir zunächst ein Beispiel für ein HTML-Dokument, bei dem das <font> -Tag und die zugehörigen Attribute verwendet werden, um die Textfarbe und die Schriftgröße anzugeben.
Note- Das Font- Tag ist veraltet und soll in einer zukünftigen HTML-Version entfernt werden. Sie sollten daher nicht verwendet werden. Es wird empfohlen, CSS-Stile zu verwenden, um Ihre Schriftarten zu bearbeiten. Dieses Kapitel wird jedoch noch zu Lernzwecken anhand eines Beispiels unter Verwendung des Schriftart-Tags erstellt.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>Wir können das obige Beispiel mit Hilfe des Stylesheets wie folgt umschreiben:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Sie können CSS in Ihrem HTML-Dokument auf drei Arten verwenden:
External Style Sheet - Definieren Sie Stylesheet-Regeln in einer separaten CSS-Datei und fügen Sie diese Datei mithilfe des HTML-Tags <link> in Ihr HTML-Dokument ein.
Internal Style Sheet - Definieren Sie Stylesheet-Regeln im Kopfbereich des HTML-Dokuments mit dem Tag <style>.
Inline Style Sheet - Definieren Sie Stylesheet-Regeln direkt zusammen mit den HTML-Elementen mit style Attribut.
Lassen Sie uns alle drei Fälle nacheinander anhand geeigneter Beispiele betrachten.
Externes Stylesheet
Wenn Sie Ihr Stylesheet für verschiedene Seiten verwenden müssen, wird immer empfohlen, ein gemeinsames Stylesheet in einer separaten Datei zu definieren. Eine kaskadierende Stylesheet-Datei hat die Erweiterung als.css und es wird mit dem <link> -Tag in HTML-Dateien aufgenommen.
Beispiel
Stellen Sie sich vor, wir definieren eine Stylesheet-Datei style.css welches folgende Regeln hat -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Hier haben wir drei CSS-Regeln definiert, die auf drei verschiedene Klassen anwendbar sind, die für die HTML-Tags definiert sind. Ich schlage vor, Sie sollten sich nicht darum kümmern, wie diese Regeln definiert werden, da Sie sie während des CSS-Studiums lernen werden. Verwenden wir nun die obige externe CSS-Datei in unserem folgenden HTML-Dokument -
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Internes Stylesheet
Wenn Sie Stylesheet-Regeln nur auf ein einzelnes Dokument anwenden möchten, können Sie diese Regeln mithilfe des <style> -Tags in den Kopfbereich des HTML-Dokuments aufnehmen.
Im internen Stylesheet definierte Regeln überschreiben die in einer externen CSS-Datei definierten Regeln.
Beispiel
Lassen Sie uns das obige Beispiel noch einmal neu schreiben, aber hier werden wir Stylesheet-Regeln in dasselbe HTML-Dokument mit dem <style> -Tag schreiben -
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Inline-Stylesheet
Sie können Stylesheet-Regeln mit direkt auf jedes HTML-Element anwenden styleAttribut des relevanten Tags. Dies sollte nur erfolgen, wenn Sie daran interessiert sind, eine bestimmte Änderung nur an einem HTML-Element vorzunehmen.
Inline mit dem Element definierte Regeln überschreiben die in einer externen CSS-Datei definierten Regeln sowie die im <style> -Element definierten Regeln.
Beispiel
Lassen Sie uns das obige Beispiel noch einmal neu schreiben, aber hier werden wir Stylesheet-Regeln zusammen mit den verwendeten HTML-Elementen schreiben style Attribut dieser Elemente.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
EIN scriptist ein kleines Programm, das Ihrer Website Interaktivität hinzufügen kann. Ein Skript kann beispielsweise eine Popup-Warnmeldung generieren oder ein Dropdown-Menü bereitstellen. Dieses Skript kann mit JavaScript oder VBScript geschrieben werden.
Sie können verschiedene kleine Funktionen, sogenannte Ereignishandler, in einer beliebigen Skriptsprache schreiben und diese Funktionen dann mithilfe von HTML-Attributen auslösen.
Nur noch heute JavaScript und zugehörige Frameworks werden von den meisten Webentwicklern verwendet. VBScript wird nicht einmal von verschiedenen gängigen Browsern unterstützt.
Sie können JavaScript-Code in einer separaten Datei speichern und ihn dann überall dort einfügen, wo er benötigt wird, oder Sie können Funktionen im HTML-Dokument selbst definieren. Lassen Sie uns beide Fälle einzeln mit geeigneten Beispielen betrachten.
Externes JavaScript
Wenn Sie eine Funktionalität definieren möchten, die in verschiedenen HTML-Dokumenten verwendet wird, ist es besser, diese Funktionalität in einer separaten JavaScript-Datei zu speichern und diese Datei dann in Ihre HTML-Dokumente aufzunehmen. Eine JavaScript-Datei hat die Erweiterung als.js und es wird mit dem <script> -Tag in HTML-Dateien aufgenommen.
Beispiel
Stellen Sie sich vor, wir definieren eine kleine Funktion mit JavaScript in script.js welches folgenden Code hat -
function Hello() {
alert("Hello, World");
}Verwenden wir nun die obige externe JavaScript-Datei in unserem folgenden HTML-Dokument -
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie versuchen können, auf die angegebene Schaltfläche zu klicken:
Internes Skript
Sie können Ihren Skriptcode direkt in Ihr HTML-Dokument schreiben. Normalerweise behalten wir den Skriptcode mit dem <script> -Tag in der Kopfzeile des Dokuments bei, andernfalls gibt es keine Einschränkung, und Sie können Ihren Quellcode an einer beliebigen Stelle im Dokument platzieren, jedoch innerhalb des <script> -Tags.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Dies führt zu folgendem Ergebnis, bei dem Sie versuchen können, auf die angegebene Schaltfläche zu klicken:
Ereignishandler
Ereignishandler sind nichts anderes als einfach definierte Funktionen, die für jedes Maus- oder Tastaturereignis aufgerufen werden können. Sie können Ihre Geschäftslogik in Ihrem Ereignishandler definieren, die von einem einzelnen bis zu Tausenden von Zeilencode variieren kann.
Im folgenden Beispiel wird erläutert, wie Sie einen Ereignishandler schreiben. Schreiben wir eine einfache Funktion EventHandler () in die Kopfzeile des Dokuments. Wir werden diese Funktion aufrufen, wenn ein Benutzer mit der Maus über einen Absatz fährt.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Dies führt zu folgendem Ergebnis. Bewegen Sie die Maus über diese Linie und sehen Sie das Ergebnis -
Skripte vor älteren Browsern ausblenden
Obwohl die meisten (wenn nicht alle) Browser heutzutage JavaScript unterstützen, tun dies einige ältere Browser nicht. Wenn ein Browser kein JavaScript unterstützt, zeigt er dem Benutzer den Code an, anstatt Ihr Skript auszuführen. Um dies zu verhindern, können Sie einfach HTML-Kommentare wie unten gezeigt um das Skript platzieren.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>Das <noscript> -Element
Sie können auch alternative Informationen für Benutzer bereitstellen, deren Browser keine Skripte unterstützen, und für Benutzer, die die Skriptoption deaktiviert haben, ihre Browser. Sie können dies mit dem tun<noscript> Etikett.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Standard-Skriptsprache
Es kann vorkommen, dass Sie mehrere Skriptdateien einschließen und letztendlich mehrere <script> -Tags verwenden. Sie können eine Standard-Skriptsprache für alle Ihre Skript- Tags angeben . Dies erspart Ihnen die Angabe der Sprache bei jeder Verwendung eines Skript-Tags auf der Seite. Unten ist das Beispiel -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Beachten Sie, dass Sie die Standardeinstellung weiterhin überschreiben können, indem Sie eine Sprache im Skript-Tag angeben.
Ein Webseitenlayout ist sehr wichtig, um Ihre Website besser aussehen zu lassen. Es dauert sehr lange, das Layout einer Website mit großartigem Erscheinungsbild zu gestalten.
Heutzutage verwenden alle modernen Websites CSS- und JavaScript-basiertes Framework, um reaktionsschnelle und dynamische Websites zu erstellen. Sie können jedoch ein gutes Layout mit einfachen HTML-Tabellen oder Teilungs-Tags in Kombination mit anderen Formatierungs-Tags erstellen. In diesem Kapitel finden Sie einige Beispiele zum Erstellen eines einfachen, aber funktionierenden Layouts für Ihre Webseite unter Verwendung von reinem HTML und seinen Attributen.
HTML-Layout - Verwenden von Tabellen
Die einfachste und beliebteste Methode zum Erstellen von Layouts ist die Verwendung des HTML-Tags <table>. Diese Tabellen sind in Spalten und Zeilen angeordnet, sodass Sie diese Zeilen und Spalten beliebig verwenden können.
Beispiel
Das folgende Beispiel für ein HTML-Layout wird beispielsweise mithilfe einer Tabelle mit 3 Zeilen und 2 Spalten erstellt. Die Kopf- und Fußzeilenspalte umfasst jedoch beide Spalten mithilfe des Attributs colspan.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Dies führt zu folgendem Ergebnis:
Layout mehrerer Spalten - Verwenden von Tabellen
Sie können Ihre Webseite so gestalten, dass Ihr Webinhalt auf mehreren Seiten angezeigt wird. Sie können Ihren Inhalt in der mittleren Spalte behalten und die linke Spalte verwenden, um das Menü zu verwenden, und die rechte Spalte kann verwendet werden, um Werbung oder andere Dinge zu platzieren. Dieses Layout wird dem auf unserer Website tutorialspoint.com sehr ähnlich sein.
Beispiel
Hier ist ein Beispiel zum Erstellen eines dreispaltigen Layouts:
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Dies führt zu folgendem Ergebnis:
HTML-Layouts - Verwenden von DIV, SPAN
Das <div> -Element ist ein Element auf Blockebene, das zum Gruppieren von HTML-Elementen verwendet wird. Während das <div> -Tag ein Element auf Blockebene ist, wird das HTML-Element <span> zum Gruppieren von Elementen auf Inline-Ebene verwendet.
Wir können zwar mit HTML-Tabellen ziemlich schöne Layouts erzielen, aber Tabellen waren nicht wirklich als Layout-Tool konzipiert. Tabellen eignen sich eher zur Darstellung von Tabellendaten.
Note - In diesem Beispiel wird Cascading Style Sheet (CSS) verwendet. Bevor Sie dieses Beispiel verstehen, müssen Sie die Funktionsweise von CSS besser verstehen.
Beispiel
Hier werden wir versuchen, dasselbe Ergebnis mit dem <div> -Tag zusammen mit CSS zu erzielen, was auch immer Sie mit dem <table> -Tag im vorherigen Beispiel erreicht haben.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Sie können mit DIV, SPAN und CSS ein besseres Layout erstellen. Weitere Informationen zu CSS finden Sie im CSS-Tutorial.