Lernzettel für HTML, PHP und CSS PDF

Preview

Summary

Mitschriften über HTML, PHP und CSS mit Erklärung...

Description

HTML HTML Grundgerüst



Titel



Überschrif

1 Überschrift 1.1 Überschrift 1.1.1 Überschrift

Absätze Hier beginnt ein Absatz, und hier ist er zu Ende. Hier beginnt ein neuer Absatz, und hier ist er zu Ende.

Einbinden von Bildern

Sicht auf tolle Skyline

figure-Element = umschließt den genannten Inhalt figcaption-Element = für eine Beschreibung für den Inhalt (z.B. für ein Bild) Die Bilder selbst werden mithilfe des img-Elements eingebunden:

Folgende Angaben sind immer nötig: • src (engl. source für Quelle) für die Referenz der Bilddatei. • alt (engl. alternative) gibt den Alternativtext an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder soll. Screenreader lesen den Text vor.

Tabellen • leitet eine Kopfzelle ein (th = table header = Tabellenkopf), • eine normale Datenzelle (td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Start-Tag notiert.

Kopfzeile 1, Spalte 1 Kopfzeile 1, Spalte 2 Kopfzeile 1, Spalte 3 Zeile 3, Spalte 1 Zeile 3, Spalte 2 Zeile 3, Spalte 3 border= Die Angabe border sorgt dafür, dass die Tabelle auch einen Rahmen hat. Wenn kein Rahmen gewünscht ist, wird border einfach weggelassen.

Zellen in einer Zeile verbinden colspan (deutsch: Spalte überspannen) erlaubt es, eine Tabellenzelle nach rechts über mehrere Spalten auszudehnen. Überspannte Zellen in der Zeile müssen fehlen! 1. Sp. 2. Sp. 3. Sp. 4. Sp. 1. Sp. 4. Sp. 1. Sp. 2. Sp. 1. Sp. 2. Sp. 3. Sp. 4. Sp.

Zellen in einer Spalte verbinden Teil 2 rowspan (deutsch: Zeile überspannen) erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen. Bereits überspannte Zellen müssen in den Folgezeilen fehlen! 1. Spalte 2. Spalte 3. Spalte 1. Spalte 2. Spalte 3. Spalte 2. Spalte 3. Spalte 3. Spalte 1. Spalte 3. Spalte

Listen in HTML In HTML gibt es 3 grundsätzlich verschiedene Listentypen. • ol (geordnete Listen) (Mit Zahlen) • ul (ungeordnete Listen) (Mit Punkten) • dl (Beschreibungslisten)

Ungeordnete Liste Listeneintrag Geordnete Liste

Listeneintrag

Definitionsliste

Begriff Erklärung des Begriffs

Verweise (Links) Otto-BennemannSchule - ein externer Verweis

Ein Bild als Verweis

Validator Überprüfen Sie Ihre Webseiten auf mögliche Fehler!

Im obigen Fall bilden die Überschrif und der Absatz den Link. Papier und Hefte Hier wurde eine andere HTML Datei eingebunden

Sprungmarken und Anker Sprungmarken für seiteninterne Verweise werden durch die Angabe einer id angegeben. Überschrift Eins Zwei - ein Verweis zur zweiten Überschrift innerhalb dieser Seite Etwas Raum schaffen, damit das Sprungziel nicht gleich Anfang des Dokuments ist. Überschrift Zwei Auch noch etwas Raum. Und wieder zurück nach oben

Formulare Beim Erstellen von Formularen ist zu beachten, dass alle Elemente, die zu einem Formular gehören, sich innerhalb der Tags und befinden. Mit Hilfe des -Tags kann ein Name vergeben werden, der im zugehörigen Eingabefeld wiederverwendet wird.

Telefonauskunft

Name

Ort



Das input-Element wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen (input = Eingabe). Für unterschiedliche Zwecke stehen viele verschiedene Typen zur Verfügung. Das input-Element erlaubt eine Vielzahl neuer Werte. Dies sind u. a.: • text: Standardwert: einzeiliges Eingabefeld; Ein fehlendes type-Attribut ist also gleichbedeutend mit type = "text". • textarea: mehrzeiliges Textfeld • tel: Eingabefeld für eine Telefonnummer • search: Für Eingabe von Suchbegriffen vorgesehen. Es unterscheidet sich von einem Eingabefeld des Typs text nur unwesentlich. • url: Eingabe einer Web-Adresse. Schon während der Eingabe wird überprüft, ob diese eine gültige Web-Adresse ist. • email: Eingabe von E-Mail-Adressen. Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe das @-Symbol automatisch im Tastenfeld. Es wird überprüft, ob die Eingabe ein @Symbol beinhaltet und verhindert Satzzeichen außer dem Punkt hinter dem @. • date: Für Datumseingaben. • time: Für Uhrzeiteingaben. • number: Beschränkt das Eingabefeld nur auf Zahleneingaben. • radio: Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein. • checkbox: ankreuzbares Kontrollfeld • submit: Button zum Abschicken eines Formulars • reset: Löschen der Benutzereingaben eines Formulars Zusätzlich zu erwähnen ist der Wert datalist. Das Element unterstützt die Eingabe durch Vorschläge aus einer Liste. Ein Anwendungsbeispiel:



Vogelart









finden!

Seitenstrukturierung (Navigation) Der body ist der sichtbare Bereich einer Webseite. Die meisten Webpräsenzen haben oben einen Seitenkopf, den sogenannten header, der Logo, Titel und evtl. Navigationselemente enthält. Weiterhin gibt es den footer, der Kontakt, Impressum, Copyright und evtl. die Sitemap enthält.



HTML5-Seite mit Grundstruktur



Titel

Startseite Unterseite 1 Unterseite 2 Kontakt

………

CSS (Stylesheets) Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.

Einbinden einer CSS-Datei in HTML Mit folgendem Befehl wird die Datei eingebunden:



Folgende Attribute sind für uns relevant: • rel: bestimmt den Typ der einzubindenden Datei. „stylesheet“ bedeutet, dass ein Stylesheet verwendet werden soll. • href: referenziert die einzubindende Stylesheet-Datei.

Regeln Ein Stylesheet besteht im Wesentlichen aus einer Menge von Regeln. Eine Regel (auch: Regelmenge, Regelsatz) ist die Grundkonstruktion eines Stylesheets. Regeln bestehen aus mindestens einem Selektor und einem Paar geschweifter Klammern, Deklarationsblock genannt, die eine Liste mit null oder mehreren durch Semikola voneinander abgetrennten Deklarationen enthalten.

Eine Deklaration ist Bestandteil eines CSS-Deklarationsblocks. Deklarationen bestehen aus einer Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert. Vor und hinter diesen Bestandteilen kann sich Leerraum befinden. Deklarationen werden durch Semikola voneinander getrennt. Selektor {Deklarationsblock} Beispiel: p {margin: 0;} 2. Beispiel: p {color: #366bf4;} (p = Absatz)

Selektoren

Selektoren Universalselektor: Er gilt für alle Elemente und wird als * vermerkt. Beispiel: *{margin: 0; padding:0;} Typ-Selektor: Ein Typ-Selektor (auch HTML-Selektor genannt) besteht aus einem HTML-Tag. Beispiel: body { background-color: silver;} Klassen-Selektor: Eine Klasse dient zur Differenzierung eines HTMLSelektors. Eintrag in HTML: Artikel Beispiel: .zelle1 {width: 20%;} ID-Selektor: Mit Hilfe von ID-Selektoren können HTML-Selektoren individuell dargestellt werden. Eintrag in HTML: Artikel Beispiel: #zelle1 {width:20%;}

Regeln Selektor {Deklarationsblock} Begriffe: Regel, Selektor, Deklarationsblock, Deklaration, Eigenschaft, Wert

Beispielseigenschafen: Margin, margin-top (Außenabstände um ein Element) Padding (Innenabstände eines Elements) Font-family, front-size (20px), font-weight Background-color, background-image, color Border-width, border-color, border-style

Einheiten Px = pixel Em = 1em =100% % = 10%

Boxelement Auszug aus der HTML-Datei:

Leben unter der Erde

Ein Dokumentarfilm über das Leben der Maulwürfe

Eintrag in der CSS-Datei: #box1 {background: silver; margin: 2em auto};

PHP (Hypertext Preprocessor) Einbinden von php in html Dateien

Einlesen Warenwert :

Variablen Variablen werden in PHP durch ein Dollar-Zeichen ($) gefolgt vom Namen der Variablen dargestellt. Bei Variablen wird zwischen Groß- und Kleinschreibung unterschieden Variablennamen beginnen mit einem Buchstaben oder einem Unterstrich („_“), gefolgt von einer beliebigen Anzahl von Buchstaben, Zahlen oder von Unterstrichen.

Beispiele: $index; $index = 0; $name = „klein“; $Umsatz = 2345.56;

Operatoren Arithmetische Operatoren Arithmetische Operatoren werden verwendet, um Rechenoperatoren durchzuführen.

Beispiel

Name

Ergebnis

$a + $b $a - $b $a * $b $a / $b $a % $b

Addition Subtraktion Multiplikation Division Modulo

$a++

Post-Instrument

$a--

Post-Dekrement

Summe von $a und $b Differenz von $a und $b Produkt von $a und $b Quotient von $a und $b Rest der ganzzahligen Divison $a / $b Gibt zuerst den aktuellen Wert von $a zurück und erhöht dann den Wert von $a um eins Gibt zuerst den aktuellen Wert von $a zurück und verringert dann den Wert von $a um eins

Relationale Operatoren (Vergleichsoperatoren)# Vergleichsoperatoren erlauben es – wie der Name schon sagt – zwei Werte zu vergleichen.

Beispiel

Name

Ergebnis

$a == $b

Gleich

$a != $b

Ungleich

$a < $b

Kleiner als

$a > $b

Größer als

$a = $b

Größer gleich

Gibt TRUE zurück, wenn $a gleich $b ist, sonst FALSE Gibt TRUE zurück, wenn $a ungleich $b ist, sonst FALSE Gibt TRUE zurück, wenn $a kleiner als $b ist, sonst FALSE Gibt TRUE zurück, wenn $a größer als $b ist, sonst FALSE Gibt TRUE zurück, wenn $a kleiner oder gleich $b ist, sonst FALSE Gibt TRUE zurück, wenn $a kleiner oder gleich $b ist, sonst FALSE

Logische Operatoren Operator && || !

Ausgabe von Texten / Variablen

Bedingung Abfrage In PHP

IN HTML



Beispiel 2

Beispiel 3

Eingabefeld erzeugen in php datei $var1 = $_post ["eingabe"];

Rechnungen $zahl1 = 20; $zahl2 = 30; $ergebnis = $zahl1 + $zahl2 echo $ergebnis;

Rechnung 2 $zahl1 = 20; $zahl1 = $zahl1 + 1; oder $zahl1++ oder $zahl1 += 10 echo $zahl1;

Übungsaufgabe preis.php



Preisberechnung

Preisberechnung



preis.html



Preisberechnung

Preisberechnung

Preis Menge Zahlungsfrist Daten absenden...