Scribd
Hochladen
263 Ansichten

Handout HTML Und CSS

Das Dokument beschreibt grundlegende HTML-Elemente wie Überschriften, Absätze und Links sowie CSS-Eigenschaften zur Gestaltung wie Hintergrundfarbe, Rahmen und Abstände. Es erklärt die Verwendung von Tags wie <h1> bis <h6> für Überschriften, <p> für Absätze, <a> für Links und <img> für Bilder.

Hochgeladen von

Jannik
Copyright
© © All Rights Reserved
Verfügbare Formate
Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
263 Ansichten

Handout HTML Und CSS

Das Dokument beschreibt grundlegende HTML-Elemente wie Überschriften, Absätze und Links sowie CSS-Eigenschaften zur Gestaltung wie Hintergrundfarbe, Rahmen und Abstände. Es erklärt die Verwendung von Tags wie <h1> bis <h6> für Überschriften, <p> für Absätze, <a> für Links und <img> für Bilder.

Hochgeladen von

Jannik
Copyright
© © All Rights Reserved
Verfügbare Formate
Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
Sie sind auf Seite 1/ 2

HTML

HTML-Headings
Headings sind absteigend nach ihrer Wichtigkeit mit den tags <h1> bis <h6> definiert.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML-Paragraphs
Paragraphen sind durch den tag <p> definiert.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Empty Elements
Leere Elemente haben keinen end tag.
<br> Zeigt einen Zeilenumbruch an. Bsp.:
<p>This is<br>a paragraph<br>with line breaks.</p>
<hr> Zeigt einen thematischen Bruch durch einen horizontalen Strich an. Bsp.:
<p>This is some text.</p> <hr> <h2>This is heading 2</h2>

HTML-Links
Links sind durch das Element <a> definiert. Die Adresse des Links gibt das Attribut href an.
Link mit vollständiger URL:
<a href="https://www.w3schools.com">This is a link</a>

Link mit relativer URL: <a href="html_images.asp">HTML Images</a>

HTML-Images
Bilder sind durch den tag <img> definiert. Das Attribut src gibt den Dateinamen der
Bildquelle an. Die Attribute width und height legen die Bildgröße in Pixeln fest. Das
Attribut alt gibt einen alternativen Text an, der in Erscheinung tritt, wenn das Bild nicht
angezeigt werden kann (Attribut alt wird zwingend benötigt! width und height
empfohlen auch über Attribut style möglich).
<img src="img_girl.jpg" width="500" height="600" alt="Girl with a jacket">
HTML Grouping Tags
Mit den Elementen <div> und <span> können Abschnitte in einem Text gruppiert werden,
um das Layout der einzelnen Abschnitte mit CSS zu definieren.
<div> Wird benutzt, um Blockelemente zu gruppieren, Bsp.:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

<span> Wird benutzt, um Inline-Elemente zu gruppieren, Bsp.:


<p>My mother has <span style="color:blue">blue</span> eyes.</p>

CSS
background-color Hintergrundfarbe, Bsp.: <h1 style="background-
color:DodgerBlue;">Hello World</h1>

background-image Hintergrundbild, Bsp.: background-image:


url("gradient_bg.png");

border Hier können alle Eigenschaften zu Rahmen zusammengefasst werden


in der Reihenfolge width, style, color;
Bsp.: border: 5px solid red;
margin Zusammenfassung aller Abstände in der Reihenfolge top, right, bottom,
left; Bsp.: margin: 25px 50px 75px 100px;

padding Zusammenfassung aller Abstände in der Reihenfolge top, right, bottom,


left; Bsp.: padding: 25px 50px 75px 100px;

CSS Height and Width


Die Höhe und Breite von Elementen kann mit den Eigenschaften height und width
verändert werden. Der Wert dieser Eigenschaften kann eine Länge (px, cm), eine Prozentzahl
in Relation zum übergeordneten Block oder auto (voreingestellt, Werte vom Browser
abhängig) sein.
Bsp.: div {height: 200px;
width: 50%;
background-color: powderblue;}

Das könnte Ihnen auch gefallen