Nur auf Docsity: Lade Informatik — HTML und CSS und mehr Mitschriften als PDF für Informatik herunter!
Einführung
Website : ges. Webauftritt Webseite :^ einzelne Seiten^ einer Website^ Homepage :^ Startseite einer Website eindex. htm
responsiv :^ anpassungsfähig" ; Webseiten^ passen sich^ der^ Umgebung an
Quelltext (^) : Bauplan" : Der Browser erstellt aus dem^ Quelltext^ eine benutzbare Webseite (^) ; er bleibt (^) im (^) Hintergrund
besteht aus 3 Sprachen :
HTML :^ ordnet den Inhalt einer Webseite a wichtig
HTML CSS CSS^ : gestaltet die^ HTML-Elemente^ (Styling) Java (^) Script JavaScript :^ ändert^ das^ Verhalten^ einer^ Website Webseiten bestehen^ aus (^) rechteckigen Kästchen In (^) der (^) Regel erstellt man mehrere Dateien^ - diese werden dann^ gemeinsam in 1 Ordner^ gespeichert Startseite :^ index^. html ; Name der^ Datei^ +. html HTML-Einführung
HTML = Hypertext Markup
Language
= Auszeichnungssprache
11 Text mit (^) autom .Tag Vokabeln & Querverweisen (^) (Links) (^) Grammatikregeln Tags ,^ Elemente > (^) a
href
= (^) "https : (^) /www. gmx. at" < (^) GMX < (^) /a S
L ↓ ↓^ ↓ HTML^ -^ Element
Anfangs - Tag Attribut^ Wert^ Anfangs^ - Tag-Ende (^) Browserscheint im^ End-Tag auf
Viewpoint =^ sichtbare^ Teil^ des^ Browserfensters^ exkl^.^ Scrollbalken^ , Adressleiste^ ,^ Favoritenleiste^ &^ Taskleiste
Jeder Browser (^) hat (^) voreingestellte (^) Formatierungen = Browser-Stylesheets leeres Element^ =^ haben^ keinen^ Endtag
Block & Inline^ - Elemente
Blockelemente werden von oben nach unten
gestapelt ;^
Box so breit , wie es geht e
Inlineelemente werden (^) entlang des (^) Textflusses nebeneinander (^) gesetzt : Box so breit (^) ,^ wie^ der Inhalt (^) : keine neue^ Zeil
Struktur &^ Hierarchie
· Elternelement : ein Element , das andere Elemente enthält
· Kinderelement: ein Element
, das^ Teil^ eines^ anderen^ Elements^ ist
~ wichtig für (^) Formatierung mit CSS
Warum HTML & CSS trennen?
Übersichtlicher &^ Lesbarer
Wiederverwendbarkeit
· (^) wenn
Änderungen
Ladegeschwindigkeit erhöht^ sich^ durch^ 1x^ herunterladen
CSS-Einführung
CSS-Cascading Style Sheets = (^) eine (^) Beschreibungssprache & Regel : Deklaration/Vereinbarung- h [color : red (^) ; 3 ↓ (^) * Selektortigenschaft wert
CSSin HTML^ einbinden
2. direkt im Style-Attribut (Inline-Style)
an ein Element gebunden (Formatierung gilt nur für diesen Absatz
für schnelle^ Tests
- (^) zentral als (^) style - Element im head bessere (^) Trennung von HTML & CSS -^ für alle^ betroffenen Elemente an^1 zentralen Stelle
~ nur für die aktuelle Batei - nicht für andere Unterseiten der Website
3. einbinden einer externen CSS-Datei
Separate Patei^ mit^.^ CSS
4 bei Websites mit mehreren Seiten
per link>^ eingebunden CSS-Selektoren -^ >^ damit^ definiert wird^ , welche Elemente man (^) anspricht ·
Typselektoren
m (^2). B (^) .: (^4153) ; p{3, (^) ....
· Universalselektor
gilt für^ alle^ Elemente 3 * {}
· Klassenselektor
wird mit (^). angesprochen
. xy
class = "Xy" hat (^) man in der HTML-Datei (^) schon def
· Id-Selektor
wird mit (^) #angesprochen (^4) z (^). B .: (^) #Name des Id (^) Abschnittes (^) &
Id hat man in der HTML-Datei schon def.
· Nachfahrenselektor
& z . B .: ul li 93- es werden nur die Listenpunkte einer Aufzählung formatiert ,
nicht die Listenpunkte einer Nummerierung
Name des Id^ Abschnittes^ img S3- es werden nur die Bilder im (^) Abschnittform.
· Pseudo klassen
OSS 1
- (^) * / (^) Kommentar · (^) xy 53 Klassenselekto (^) ; xy so wird die^ zuvor (^) eingefügte class^ (HTML) (^) angespr.
display :^ block^ ; wandelt^ ein^ inlineelement^ in^ ein^ Blockelement^ um
margin :^ auto^ :^ linker^ &^ rechter^ Abstand^ werden^ autom^.^ berechnet^ e^ hilft^ bei^ zentr.
(font-weight :^ bold^ ; I^ macht^ das^ Wort^ fett ohne^ das^ es^ sematische^ Auswirkungen hat
font-family : xy : Schrifttext
background H^ intergrundfarbe
font-size Schriftgröße
padding Abstand^ zwischen^ Text^ &^ Boxrand List-style-type (^) Aufzählungszeichen e z^.^ B^. square
text-align Textausrichtung
font-weight für^7.^ B^.^ fett
