Schlagwort: HTML

Veröffentlicht am

HTML- Einstieg zum Selbstlernen

Schaut euch zunächst mal folgende Videos an!

Jetzt solltet ihr in der Lage sein, eine erste Website zu erstellen. Meldet euch mit eurer Schulemail bei CodePen.io an und erstellt dort eure erste Website 8Ihr müsst euch anmelden, um die Seite auch speichern zu können. Die Seite ist ein ziemlich cooler Online-Editor. Ihr könnt entweder einfach loslegen oder euch noch kurz das untenstehende Einführungsvideo anschauen.

Probiert min. die Tags für Überschriften, Absätze und Links aus. Erstellt also min. 3 Überschriften, 10 Absätze und 5 Links auf eure Lieblings-Websites. Um nicht so viel tippen zu müssen, könnt ihr Textabsätze einfach mit Blindtextgenerator erstellen. Wenn ihr noch mehr wissen wollt, könnt ihr die Tags und Attribute auch auf selfhtml.org nachschlagen.

Veröffentlicht am

Trennung von Inhalt und Design

Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.

Beispiel

CSS Zen Garden: The Beauty of CSS Design

Zurück zur Übersicht

Veröffentlicht am

Bilder in Webseiten

<img src="../img/enten.jpg" alt="Alternativer Text">
AttributErläuterung
srcengl. source für Quelle – Referenz der Bilddatei
altengl. alternative für Alternativtext – Textliche Beschreibung des Bildes. Wird angezeigt, wenn das Bild nicht geladen werden kann bzw. von Screen Readern vorgelesen.
heightHöhe des Bildes
widthBreite des Bildes
titlewird als Tooltip beim Mousehover angezeigt

Ausführliche Doku auf selfhtml.org

Bildgröße anpassen

Beispielseite

Weitere Infos zum Berechnen von Seitenverhältnissen

Zurück zur Übersicht
Veröffentlicht am

Inline- und Blockelemente

Bei den zweiteiligen HTML-Tags unterscheidet man zwischen Block- und Inline Elementen.

Ein Block-Element füllt unabhängig von seiner Länge den gesamten Raum (Zeile) aus. Sie stehen als einzelner Block auf einer Zeile. Block-Elemente können Nachfahren des Body-Elements oder eines anderen Block-Elements sein.
Typische Block-Elemente sind: h1 … h6, p

Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Sie können normalen Text und andere Inline-Elemente, aber keine Block-Elemente enthalten.
Typische Inline-Elemente sind: a, br, b, i, img, …
Liste der Inline-Elemente auf webkompetenz.wikidot.com

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block- und Inline-Elemente</title>
  </head>
  <body>
  
  <div style="background-color:red; color:white; width:500px">Dies ist mein Block-Element (DIV)</div>
  <span style="background-color:blue; color:white; width:500px">Ich bin eine Inline-Element (SPAN)</span>

  </body>
</html>
Zurück zur Übersicht

Veröffentlicht am

HTML-Elemente und Tags

Und damit sind wir schon mitten drin im HTML-Seiten erstellen.
HTML besteht aus sogenannten Tags, die in der Regel eine Textpassage umklammern und dieser eine Bedeutung (Semantik) geben. Tags bestehen aus einem öffnenden und einem schließenden Tagteil.
z.B. <h1>Dies ist eine Überschrift</h1>
Der Tag besteht aus einem Kleiner- und Größerzeichen (man spricht bei HTML von spitzen Klammern) und einem Bezeichner (z.B. h1). Der schließende Tag startet zusätzlich mit einem Schrägstrich / Slash (/) und beendet den markierten Textabschnitt.

Der H1-Tag macht also aus einem beliebigen Text eine Überschrift 1. Grades (=Hautpüberschrift)

Die wichtigsten Tags

HTML-TagBedeutung
<html>…</html>Das html-Element , auch root(-Element) oder Wurzelelement enthält den vollständigen Inhalt einer Internetseite.
<head>…<head>Das head-Element (deutsch: Kopf) ist das erste Kindelement des html-Elements und enthält im Wesentlichen Meta-Informationen über das im HTML-Körper (body) folgende Dokument.
<body>…</body>Das body-Element enthält den darzustellenden Inhalt eines HTML-Dokuments.
<h1>…</h1>Das h1-Element stellt eine Überschrift (engl. heading) 1. Ordnung dar.
<h1> bis <h6>
<p>…</p>Das p-Element definiert einen Textabsatz (engl. paragraph). Absätze dienen der Gliederung eines Textes.
<a href=“https://selfhtml.org“>Das ist ein Link</a>Das a-Element stellt einen Verweis, (Hyper-)Link auf eine (andere) Web-Adresse dar.
<b>…</b> oder
<strong>…</strong>		Das b-Element zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise in Fettschrift dargestellt wird.

Auf selfhtml findest du eine komplette Referenz aller HTML-Tags

Einseitige Tags

Neben den typischen Tags mit öffnenden und schließenden Teil gibt es einige einseitige Tags, da sie keinen Text umschließen, sondern andere Dinge wie Bilder einfügen.

HTML-TagBedeutung
<img src=„./bilder/affevorhaus.jpg“ alt=“Auf dem Bild ist ein Affe vor einem Haus zu sehen“>Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen
<hr>Das hr-Element kennzeichnet einen thematischen Bruch (paragraph-level thematic break). Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal.
<br>Das br-Element erzeugt einen Zeilenumbruch (engl. line break).
Zurück zur Übersicht
Weiter zu Inline- und Blockelemente

Veröffentlicht am

Was braucht man um HTML-Dokumente zu schreiben?

Eigentlich braucht man keinen besonderen Editor, um HTML-Dokumente zu schreiben. Aber Editoren und IDEs (Integrierte Entwicklungsumgebungen) erleichtern einem das Leben mit Featuren wie Syntax Highlighting, Code-Snippets und Ähnlichem.

Editoren und IDEs

Online-Editoren

Zurück zur Übersicht
Grundgerüst einer HTML-Seite

Veröffentlicht am

Grundlagen Webentwicklung

Was du eigentlich lernen musst, ist HTML, CSS und evtl. JavaScript (je nachdem wir tief du in das Thema einsteigen willst.

Ich persönlich mag den Youtube-Kanal The Morpheus Tutorials, hier findest du sehr viele fachlich gute Tutorials zum vielen IT-Themen.

Ich nutze und schätze folgende Online-Doku zum Webentwicklungsthemen:

Hier im Unterricht benutzen wir notepad++. Ich bevorzuge Visual Studio Code.

Veröffentlicht am

Übung: Flagge Zentralafrikanischen Republik

Information zur Flagge findet ihr auf Wikipedia

<!DOCTYPE html>
<html>
<body>

<h1>Zentral Afrikanische Rebublik</h1>

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
   <!-- Dies ist ein HTML-Kommentar -->
   <!-- Und das ist der Stern den ihr braucht, die Stelle passt auch schon so ungefähr -->
   <polygon points="40,25  45,50   65,50  50,65 60,85  40,70  20,85  30,65   15,50   35,50" fill="yellow" />
   
 </svg>
</body>
</html>