3.1 Grundlagen von HTML5
Was ist HTML und warum ist es wichtig?
HTML (Hypertext Markup Language) ist eine Sprache, die zur Strukturierung und Darstellung von Inhalten auf Webseiten verwendet wird. Grundkenntnisse von HTML sind wichtig, um eigene Websites zu erstellen oder Templates anzupassen, auch wenn ein CMS verwendet wird.
Welche drei Sprachen sind grundlegend für die Erstellung einer modernen Website?
HTML für die Struktur, CSS (Cascading Stylesheets) für das Design und JavaScript für die Interaktivität.
Warum ist CSS wichtig für Websites?
CSS ermöglicht die Gestaltung von Webseiten, wie z. B. die Anpassung von Farben, Layout und Typografie, was die visuelle Attraktivität und Lesbarkeit verbessert.
Wie kann man eine HTML-Datei in Visual Studio Code anzeigen lassen?
Mit der Extension "Live Server" kann eine HTML-Datei automatisch im Browser angezeigt und bei Änderungen in Echtzeit aktualisiert werden.
Was ist ein HTML-Tag?
Ein HTML-Tag ist ein Element in spitzen Klammern, das Inhalte auf einer Webseite strukturiert. Es besteht aus einem Start- und einem End-Tag.
Welche Funktion hat das <head>-Element in einer HTML-Datei?
<head>
Das <head>-Element enthält Metainformationen über die Webseite, wie z. B. den Titel und Verweise auf Stylesheets.
Welche Inhalte kapselt das <body>-Element in HTML?
<body>
Das <body>-Element enthält den gesamten sichtbaren Inhalt der Webseite, wie Texte, Bilder, Überschriften und Links.
Was versteht man unter "semantischem Markup"?
Semantisches Markup bezeichnet HTML-Code, der durch seine Struktur eine klare Bedeutung hat, was wichtig für Suchmaschinen und Screenreader ist.
Was ist der Unterschied zwischen einem <h1>-Tag und einem <p>-Tag?
<h1>
<p>
Das <h1>-Tag wird für die wichtigste Überschrift einer Seite verwendet, während das <p>-Tag für Absätze (Textblöcke) genutzt wird.
Wie wird eine Tabelle in HTML strukturiert?
Eine Tabelle wird mit dem <table>-Tag erstellt, der Header mit <thead>, die Zeilen mit <tr>, die Überschriften mit <th> und die Zellen mit <td>.
<table>
<thead>
<tr>
<th>
<td>
Welche Struktur hat ein typisches HTML-Dokument?
Ein HTML-Dokument besteht aus einer Dokumententypdeklaration (<!DOCTYPE html>), dem <html>-Tag, dem <head>-Element und dem <body>-Element.
<!DOCTYPE html>
<html>
Wie können Änderungen in einer HTML-Datei in git eingepflegt werden?
Mit Visual Studio Code können Änderungen über das Repository-Icon eingepflegt und durch "commit" und "push" im git gespeichert werden.
Was ist das <main>-Element in HTML und wofür wird es verwendet?
<main>
Das <main>-Element kapselt den Hauptinhalt einer Webseite. Es enthält den zentralen Content, der für die jeweilige Seite relevant ist und sollte einzigartig für jede Seite sein.
Wofür wird das <nav>-Element in HTML verwendet?
<nav>
Das <nav>-Element wird für die Navigation einer Webseite verwendet. Es kapselt eine Liste von Links (meist in einer <ul>-Liste), die auf andere Seiten oder Bereiche der Webseite führen.
<ul>
Was ist das <section>-Element in HTML und wann wird es verwendet?
<section>
Das <section>-Element wird verwendet, um inhaltlich zusammengehörige Abschnitte auf einer Webseite zu gruppieren. Es dient der semantischen Gliederung und verbessert die Übersichtlichkeit des Codes.
Welche Funktion hat das <header>-Element in HTML?
<header>
Das <header>-Element kapselt den Kopfbereich einer Webseite oder eines Abschnitts. Es enthält häufig Navigationselemente, Logos oder Titel und ist oft auf jeder Seite gleich.
Welche Inhalte gehören typischerweise in das <footer>-Element einer HTML-Seite?
<footer>
Das <footer>-Element enthält den Fußbereich einer Webseite, der typischerweise Links zu rechtlichen Informationen wie Impressum und Datenschutz, Kontaktinformationen oder Social Media-Links enthält.
Was sind Attribute in HTML und wofür werden sie verwendet?
Attribute in HTML bieten zusätzliche Informationen zu einem Tag. Sie werden im Start-Tag angegeben und beeinflussen das Verhalten oder Aussehen eines Elements, z. B. href für Links oder src für Bilder.
href
src
Was macht das lang-Attribut im <html>-Tag?
lang
Das lang-Attribut im <html>-Tag gibt die Sprache des Dokuments an. Beispielsweise bedeutet lang="de", dass die Seite auf Deutsch verfasst ist.
lang="de"
Wie wird das href-Attribut in einem <a>-Tag verwendet?
<a>
Das href-Attribut im <a>-Tag gibt die URL an, zu der der Link führt. Beispielsweise: <a href="https://example.com">Linktext</a>.
<a href="https://example.com">Linktext</a>
Was bewirkt das type-Attribut im <input>-Tag?
type
<input>
Das type-Attribut im <input>-Tag bestimmt, welche Art von Eingabefeld erstellt wird, z. B. text für ein Textfeld oder password für ein Passwortfeld.
text
password
3.2 Grundlagen von Cascading Style Sheets
Was ist die Hauptaufgabe von CSS im Webdesign?
CSS verleiht Webseiten ihr Aussehen, indem es das Layout und das Design festlegt, während der HTML-Inhalt unverändert bleibt. Es trennt Design und Inhalt und ermöglicht die Anpassung für verschiedene Geräte (z. B. Handy, Tablet, PC).
Was ist ein CSS-Selektor?
Ein CSS-Selektor ist eine Regel, die verwendet wird, um bestimmte HTML-Elemente auszuwählen und deren Aussehen zu ändern. Die wichtigsten Selektoren sind Tag-Selektoren, Klassen-Selektoren und ID-Selektoren.
Wie wird ein Tag-Selektor in CSS verwendet?
Ein Tag-Selektor wählt alle HTML-Elemente mit einem bestimmten Tag-Namen aus. Beispiel: h1 { color: green; } färbt alle h1-Überschriften grün.
h1 { color: green; }
Was ist der Unterschied zwischen einem Klassen-Selektor und einem ID-Selektor in CSS?
Ein Klassen-Selektor (beginnend mit .) wählt alle HTML-Elemente mit einer bestimmten Klasse aus, z. B. .green { color: green; }. Ein ID-Selektor (beginnend mit #) wählt ein eindeutiges HTML-Element mit einer bestimmten ID aus, z. B. #main-content { background-color: grey; }.
.
.green { color: green; }
#
#main-content { background-color: grey; }
Was bedeutet das CSS-Box-Modell?
Das CSS-Box-Modell beschreibt, wie HTML-Elemente auf der Seite dargestellt werden. Es besteht aus vier Schichten: Margin (Außenabstand), Border (Rand), Padding (Innenabstand) und Content (Inhalt).
Welche CSS-Eigenschaft legt die Farbe des Textes in einem HTML-Element fest?
Die CSS-Eigenschaft color legt die Textfarbe eines Elements fest. Beispiel: p { color: red; } färbt den Text in allen <p>-Elementen rot.
color
p { color: red; }
Was ist der Unterschied zwischen margin und padding in CSS?
margin
padding
Margin definiert den äußeren Abstand eines Elements zu anderen Elementen, während padding den inneren Abstand zwischen dem Inhalt und dem Rand eines Elements festlegt.
Margin
Wie kann die Schriftgröße eines HTML-Elements in CSS festgelegt werden?
Die Schriftgröße wird mit der Eigenschaft font-size festgelegt. Beispiel: h1 { font-size: 24px; } definiert die Schriftgröße einer h1-Überschrift auf 24 Pixel.
font-size
h1 { font-size: 24px; }
Wie kann man mehrere CSS-Selektoren miteinander kombinieren?
Man kann Selektoren mit einem Komma trennen, um mehrere Elemente mit derselben Regel anzusprechen. Beispiel: h1, h2 { color: orange; } färbt sowohl h1- als auch h2-Überschriften orange.
h1, h2 { color: orange; }
Was ist der Web Inspector und wofür wird er verwendet?
Der Web Inspector ist ein Werkzeug in modernen Browsern, mit dem man den HTML- und CSS-Code von Webseiten analysieren, Regeln testen und das Layout in Echtzeit verändern kann.
Last changed4 months ago