Embedded Files
Alle Elemente, die Sie bisher kennengelernt haben (Überschriften, Absätze, Listen und Spannen), haben eines gemeinsam: Sie bestehen vollständig aus Text! Was ist, wenn Sie Ihrer Webseite Inhalte hinzufügen möchten, die nicht aus Text bestehen , wie Bilder?
Mit diesem <img> Tag könne Sie einer Webseite ein Bild hizufügen. Die meisten Elemente erfordert sowohl öffnende als auch schließende Tags, aber dieser <img> Tag ist ein selbstschließender Tag. Beachten Sie, dass das Ende des <img> Tags einen Schrägstrich hat /. Selbstschließende Tags können den abschließenden Schrägstrich enthalten oder weglassen - beide werden korrekt dargestellt.
Das <img> Tag hat ein erforderliches Attribut namens src. Das Attribut muss auf die Bildquelle src oder den Speicherort des Bildes eingestellt werden. In diesem Fall muss der src Wert der Uniform Resource Locator (URL) des Bildes sein. Eine URL ist eine Webadresse oder lokale Adresse, unter der eine Datei gespeichert ist.
Bildalternativtext
Bildalternativtext
(<img src="#" alt="Bild" />)
(<img src="#" alt="Bild" />)
Ein Teil der Arbeit als hervorragender Webentwickler besteht darin, Ihre Webseite für Benutzer aller Hintergründe zugänglich zu machen. Um die Webseite inklusiver zu gestalten müsse wir berücksichtigen was passiert wenn unterstützende Technologien wie Bildschirmleseprogramme auf Bilder treffen.
Das alt Attribut verleiht dem Bildern auf unseren Seiten also Alternativtext. Das alt Attribut kann dem Bild - Tag hinzugefügt werden, genau wie das src Attribut. Der Wert alt sollte eine Beschreibung des Bildes sein.
Das alt Attribut dient außerdem den folgenden Zwecken:
Wenn ein Bild auf einer Webseite nicht geladen werden kann, kann ein Benutzer mit der Maus über den urspünglich für das Bild vorgesehenen Bereich fahren und eine kurze Beschreibung des Bildes lesen. Dies wird durch die Beschreibung ermöglicht, die Sie im alt Attribut angeben.
Sehbehinderte Benutzer surfen im Internet häufig mithilfe von Bildschirmlesesoftware. Wenn Sie das alt Attribut einschließen kann die Bildschirmlesesoftware dem sehbehinderten Benutzer die Beschreibung des Bildes vorlesen.
Das alt Attribut spielt auch eine Rolle bei der Suchmaschinenoptimierung (SEO), da Suchmaschinen die Bilder auf Webseiten beim Crawlen des Internets nicht "sehen" können. Beschreibende alt Attribute kann das Ranking Ihrer Seite verbessern.
Wenn das Bild auf der Webseite einem Benutzer (mit Sehbehinderung oder anderen Problemen) keine sinnvollen Informationen vermittelt, sollte das alt Attribut leer gelassen werden.
Videos
Videos
(<video src="#" width="#" height="#" controls></video>)
(<video src="#" width="#" height="#" controls></video>)
Neben Bildern unterstützt HTML auch die Anzeige von Videos. Das <video> Element erfordert wie das <img> Element ein src Attribut mit einem Link zur Videoquelle. Im Gegensatz zum <img> Element erforder das <video> Element jedoch ein öffnendes und ein schließendes Tag.
In diesem Beispiel ist die Videoquelle (src) "myVideo.mp4". Die Quelle kann eine Videodatei sein die neben Ihrer Webseite gehostet wird oder eine URL die auf eine Videodatei verweist welche auf einer anderen Webseite gehostet wird.
Nach dem src Attribut werden die Attribute width und height verwendet um die Größe des im Browser angezeigten Videos festzulegen. Das controls Attribut weist den Browser an grundlegende Videosteuerelemente wie "anhalten" und "abspielen" einzuschließen.
Der Text "Video not supported" zwischen dem öffnenden und schließenden Video - Tag wird nur angezeigt wenn der Browser das Video nicht laden kann.
Zusammenfassung
Zusammenfassung
Herzlichen Glückwunsch Sie sind auf dem besten Weg, ein erfahrender Webentwickler zu werden.
Gehen wir noch einmal durch was wir bereits gelernt haben:
HTML steht für HyperTextMarkupLanguage und wird verwendet um die Struktur und den Inhalt einer Webseite zu erstellen.
Die meisten HTML - Elemente enthalten öffnende und schließende Tags mit reinem Text oder anderem HTML - Tags dazwischen.
HTML - Elemente können in anderen Elemente eingebettet werden. Das eingeschlossene Element ist das untergeordnete Element des übergeordneten Elements welches es umschließt.
Jeglicher sichtbarer Inhalt sollte zwischen den öffnenden und schließenden Tags platziert werden <body>.
Überschriften und Unterüberschriften <h1> bzw. <h6> Tags werden verwendet um Inhaltsabschnitte zu betiteln.
<p>, <span> und <div> Tags geben Text oder Blöcke an.
Die Tags <em> und <strong> werden verwendet um Text hervorzuheben.
Zeilenumbrüche werden mit dem <br> Tag erzeugt.
Sortierte Listen ( <ol> ) sind nummeriert und ungeordnete Listen ( <ul> ) sind mit Aufzählungszeichen versehen.
Bilder ( <img> ) und Videos ( <video> ) können durch Verlinkung auf eine vorhandene Quelle hinzugefügt werden.
Nächstes Kapitel: Verlinkungen und Navigation
Nächstes Kapitel: Verlinkungen und Navigation
Images
Absätze und Textformatierung
Listen
Zitate und Code
Page updated
Google Sites
Report abuse