` und weiss, was ihre Aufgaben sind. -- Ich kenne die allgemeine Struktur von HTML-Tags. +- Ich kenne die HTML-Tags `
` und weiss, wofür ich diese verwende. +- Ich kenne die allgemeine Struktur und den Aufbau von HTML-Tags. ## Erklärung zum vorherigen Beispiel @@ -25,18 +25,18 @@ Im vorherigen Beispiel hatten wir diesen Code:
Keinen, das ist ein Hardware-Problem!
``` -Du hast gesehen, dass das zwischen `` und `
` in eigenen Abschnitten dargestellt wurde. +Du hast gesehen, dass der Teil zwischen `` und `
` in eigenen Abschnitten dargestellt wurden. ## HTML Tags -Du hast schon die ersten "HTML Tags" kennengelernt: ``. `
` wird für Absätze verwendet. +Damit hast du bereits die ersten "HTML Tags" kennengelernt: `
`. `
` für Absätze verwendet. HTML Tags sind wie Keywords (Schlüsselbegriffe), die beschreiben, wie der Browser deren Inhalt (Content) interpretiert. -Die Tags inklusiv deren Inhalt nennen wir "Element". Das Element ist wie folgt aufgebaut: +Die Tags inklusive deren Inhalt nennen wir "Element". Das Element ist wie folgt aufgebaut:  Jedes Element beginnt mit einem "Opening Tag". Zwischen diesem und dem Closing Tag befindet sich der Content, der auf Grundlage des Tags formatiert wird. Der Content wird oft "InnerText" oder "InnerHtml" genannt. Das Closing Tag hat immer vor dem Tag-Namen ein "/", das symbolisiert, dass es sich um ein Closing Tag handelt. -Im Opening Tag können Attribute vorkommen, die den Tag "konfigurieren". Eine solche Konfiguration beinhaltet in den meisten Fällen ein Attribut-Key und -Value, welche mit einem Gleichzeichen verbunden werden. Der Attribut-Value (Wert) beginnt und endet IN JEDEM FALL mit einem Anführungs- bzw. Schlusszeichen, auch wenn der Wert eine Zahl oder true bzw. false ist. +Im Opening Tag können Attribute vorkommen, die den Tag "konfigurieren". Eine solche Konfiguration beinhaltet in den meisten Fällen einen Attribut-Key und -Value, welche mit einem Gleichzeichen verbunden werden. Der Attribut-Value (Wert) beginnt und endet **in jedem Fall** mit einem Anführungs- beziehungsweise Schlusszeichen, auch wenn der Wert eine Zahl oder true/false ist. diff --git a/content/en/docs/web/html_css/04_weitere_tags.md b/content/en/docs/web/html_css/04_weitere_tags.md index 92d42d9d2..d35026d3f 100755 --- a/content/en/docs/web/html_css/04_weitere_tags.md +++ b/content/en/docs/web/html_css/04_weitere_tags.md @@ -3,21 +3,21 @@ title: "Weitere HTML-Tags" linkTitle: "Weitere HTML-Tags" weight: 4 description: > - Modul #F3 - HTML und CSS - Nützliche HTML Tags + Modul #F3 - HTML und CSS - Nützliche HTML-Tags --- #### Ziele - Ich weiss, wie ich HTML-Dokumente strukturieren kann. - Ich weiss, wie ich mit HTML Texte formatieren kann. -- Ich weiss, wie ich Links und Bilder in einer Webseite hinzufügen kann. +- Ich weiss, wie ich Links und Bilder in eine Webseite einbetten kann. - Ich weiss, wie ich geordnete/sortierte Listen erstellen kann. - Ich weiss, wie ich ungeordnete/unsortierte Listen erstellen kann. - Ich weiss, was Definitionslisten sind und wie und wozu ich sie einsetzen kann. ## Überschrift (Heading) -Du hast bereits erfahren, dass du mit `
`-Tag erreichen. Der Text, der innerhalb dieses Tags steht, wird in einem gleichen Abschnitt dargestellt. Ausserdem trennt es diesen Inhalt mit Leerschlag zum nächsten Element. Das wird im folgenden Beispiel verdeutlicht:
+Du hast bereits erfahren, dass Zeilenumbrüche in HTML keine Wirkung haben. Möchtest du eine neue Zeile einfügen, könnte dir das `
`-Tag weiterhelfen. Besser ist aber, wenn du den Text, der zusammengehört, auch entsprechend gruppierst: Das kannst du mit dem `
`-Tag bewerkstelligen. Der Text, der innerhalb dieses Tags steht, wird im gleichen Abschnitt dargestellt. Wenn ein weiteres p-Element hinzugefügt wird, wird dieses mit einem Leerschlag vom vorherigen getrennt. Das lässt sich im folgenden Beispiel gut sehen: ```html
This too.
-Beachte hier, dass ``-Tags mehr Leerraum erzeugen als `
`.
+Beachte hierbei, dass aufeinanderfolgende `
`-Tags mehr Leerraum erzeugen als `
`-Tags.
## Text formatieren
-Du wirst in die Situation kommen, wo du einen bestimmten Teil eines Textes z.B. fett oder kursiv formatieren musst.
+Du wirst in die Situation kommen, in der du einen bestimmten Teil eines Textes fett oder kursiv formatieren musst.
-Das kannst du mit HTML sehr einfach erreichen, denn dafür gibt es spezielle Tags:
+Das kannst du mit HTML sehr einfach bewerkstelligen, dafür gibt es nämlich spezielle Tags:
```html
-
- Heared about the new restaurant called - Karma? -
-There's no menu: You get what you deserve.
+Heard about the new restaurant calledKarma?
+There's no menu: You get what you deserve.
``` -Um also einen bestimmten Text fett darzustellen, kannst du es in ein ``- oder ``-Element verwenden. Beide Tags BEZWECKEN im Prinzip genau das Gleiche, MEINEN aber nicht zwingend das Gleiche: ``-Elemente sind einfach fett-gedruckt, während ``-Elemente betont sein sollen. `` soll dem fett-gedruckten Wort also mehr Ausdruck verleihen. Dieser Unterschied ist vor allem für den Einsatz von Screenreadern wichtig. Mit einem eigenen Styling (kommt im CSS-Teil) könntest du ``-Elemente z.B. auch grösser oder rot darstellen. Mit einem ``-Element sagt man im Prinzip nur, dass der Text fett-gedruckt sein soll. +Um also einen bestimmten Text fett darzustellen, kannst du diesen in ein ``- oder ``-Element einbinden. Beide Tags **bezwecken** im Prinzip genau das Gleiche, **bedeuten** aber nicht das Gleiche: ``-Elemente sind einfach fett-gedruckt, während ``-Elemente betont sein sollen. `` soll dem fett-gedruckten Wort also mehr Ausdruck verleihen. Dieser Unterschied ist vor allem für den Einsatz von Screenreadern wichtig. Mit einem eigenen Styling (kommt im CSS-Teil) könntest du ``-Elemente z.B. auch grösser oder rot darstellen. Mit einem ``-Element sagt man im Prinzip nur, dass der Text fett-gedruckt sein soll. -Einen Text kursiv darstellen kannst du mit `` bzw. ``. Das Pendant zu `` ist `` (italic), und dasjenige zu `` das `` (emphasis = Betonung). +Einen Text kursiv darstellen kannst du mit `` beziehungsweise ``. Das Pendant zu `` ist `` (italic), wobei das von `` `` (emphasis = Betonung) ist. -Das obige Beispiel wird so gerendert: +Das obige Beispiel wird gerendert wie folgt:- Heared about + Heard about the new restaurant called Karma?
@@ -91,22 +88,22 @@ Das obige Beispiel wird so gerendert: