WIXLIB

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialZur HTML5-CSS-KurzreferenzDie Kurzreferenz soll beim Lernen von HTML5 und CSS unterstützen und als Spickzettel für HTML-Befehle undCSS Anweisungen dienen. Es wurden hier nur bewusst aktuelle Befehle (Doctype HTML5) aufgenommen.Die Kurzreferenz ist Bestandteil des HTML und CSS-Tutorial des https://www.html-seminar.deWenn Sie diese Referenz für eigene Kurse verwenden wollen, sehen Sie auf der letzten Seite nach.Aufbau HTML-BefehlJeder HTML-Befehl hat die Form html - der Befehl (engl. TAG) am Ende /html Die Befehle sind Abkürzungen zum englischen Begriff und werden kleingeschrieben.Schachteln von HTML-BefehlenBei der Reihenfolge der HTML-Befehle muss darauf geachtet werden, dass diese in umgekehrter Reihenfolgewieder geschlossen werden. befehl1 befehl2 Inhalt /befehl2 /befehl1 siehe: gs.htmAbsätze p /p br Paragraf – bildet einen AbsatzHarter Umbruch – Text geht in nächster Zeile weiter (mit HTML5 auch br / inOrdnung)Überschriften h1 /h1 Überschrift, die Zahl gibt den Rang an (1 am wichtigsten).Es gibt h1 , h2 , h3 , h4 , h5 und h6 Hervorhebungen im Text b /b fett hervorgehoben (physikalisch) (HTML5: stilistisch hervorgehoben) strong /strong fett hervorgehoben (logisch) (HTML5: Text ist wichtig) i /i kursiv (schräg gestellt) (HTML5: z.B. Gedanken, veränderte Stimmlage) em /em betonen von Text (oft kursiv dargestellt) sup /sup hochgestellter Text sub /sub tiefgestellter Text u /u unterstrichen - veraltet (engl. deprecated)! Zum Test von Validierungstools.Trennlinie hr Trennlinie ziehen (HTML5: thematischer Umbruch)Aufzählungen und ListenAuflistung mit Spiegelstrichen ul li li /ul /li /li Start einer Aufzählung (durch ul mit Spiegelstrichen)Aufzählungspunktnächster AufzählungspunktEnde einer Aufzählunghttps://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20191

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialNummerierte Auflistung ol li li /ol /li /li im Gegensatz zu ul Aufzählungen mit NummerierungAufzählungspunktnächster AufzählungspunktEnde einer AufzählungDefinitionslisteWird gerne für Glossare verwendet. Für die Definitionsliste werden 3 HTML-TAGs benötigt. Beispiel iste-dl-dt-dd.htm dl dt Apache /dt dd ist ein weit verbreiteter Webserver, der sich /dd dt Browser /dt dd nennen sich Programme, die /dd /dl logische Textauszeichnungen address /address Um eine Adresse zu kennzeichnen code /code Quellcode darstellen samp /samp Beispiel darstellen kbd /kbd Tastatureingabe darstellen var /var Variable darstellen tt /tt dicktengleich Schrift (alle Buchstaben nutzen dieselbe Breite) in Fernschreiberstil(Teletyper) (HTML5: gibt es nicht mehr) pre /pre präformatierter Textabschnitt (mit dicktengleich Schrift) (Block-Element)Definitionen, Abkürzungen und Zitate dfn /dfn abbr /abbr DefinitionAbkürzung acronym /acronym besondere Abkürzungen (z.B. Lkw) (HTML5: gibt es nicht mehr - abbr nutzen) q /q Zitat cite /cite Quelle oder Autor v. Zitat blockquote /blockquote Zitat (Block-Element)https://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20192

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialÄnderungsmarkierungen del /del Inhalt ist veraltet und nicht mehr gültig ins /ins Inhalt ist auf einer Seite neu dazugekommenphysische Textauszeichnungen small /small Text wird kleiner dargestellt (HTML5: Rechtshinweise, „Kleingedrucktes“) big Text wird größer dargestellt (HTML5: HTML-Befehl gibt es nicht mehr! Veraltet!) /big Abschnitt für CSS-Definitionen style /style CSS-Definitionsbereich in HTML-Datei (siehe Kapitel CSS)Bereiche festlegen ohne vordefinierte logische Struktur div /div span /span Bereich festlegen (Blockelement)Bereich innerhalb Zeile festlegen (Inline-Element)Klasse/ID einfügen für Verknüpfung mit CSSDie Attribute class und id können bei jedem HTML-Befehl genutzt werden. Sehr oft werden diese gerne bei div und span genutzt. Die eigentliche Stärke von Klassen und IDs kommt erst durch CSS zum Vorschein. span class "klassenname" Notwendig, damit man über CSS das Design für den gewählten Bereichbeeinflussen kann! span id "idname" genauso wie class, aber der ID-Name darf pro HTML-Einzelseite nur einmalvorkommenhttps://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20193

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialVerlinkung a href "zielseite" Ausgabe auf Bildschirm für Besucher /a Interne Links: Link nach „zielseite“ – intern dann nur der Dateiname der HTML-Seitez.B. „hobbys.htm“, „index.htm“ etc.Bsp.: a href "hobbys.htm" Meine Hobbys /a Externer Link mit voller URL, z.B. http://www.html-seminar.de/ (der letzte / gehört dazu!)Bsp.: a href "http://www.html-seminar.de/" HTML-Tutorial /a Externer Link in neuem Fenster mit voller URL, z.B. http://www.html-seminar.de/und zusätzlich mit target " blank", damit neue Seite aufgehtBsp.: a href "http://www.html-seminar.de/" target " blank" HTML-Tutorial /a Link auf Bild: anstatt einer HTML-Seite wird ein Bild angegeben.Bsp.: a href "bild.jpg" Anzeige Portrait /a Link auf PDF: anstatt einer HTML-Seite wird ein PDF angezeigt bzw. zum Download angeboten(je nach Einstellung des Browsers/PDF-Programms).Bsp.: a href "html5-css-referenz.pdf" HTML-CSS-Übersicht als PDF /a Beispiel für PDF als externe Datei: a href ferenz.pdf" PDF HTML-R. /a Mail als Link: anstatt einer HTML-Seite wird ein Mail-Adresse mit mailto: angegeben.(sollte wegen Spam vermieden werden!)Bsp.: a href "mailto:mustermann@example.com" Mail an Mustermann /a Sprungmarken Links: Im Dokument wird ein Anker gesetzt (wohin gesprungen wird) in derfolgenden Form: a id "anker2" Bereich 2 /a Und den Link: a href "#anker2" springen zu Bereich 2 /a (Sprung auf Bereich kann auch auf andere Seite erfolgen, dann vor # die URL angeben.Grafikdatei einbinden (Foto, Grafik, etc.) img src "bild.jpg" width " " height " " alt " " title " " im Attribut src wird der Dateiname angegeben und wo das Bild auf dem Server liegt.Breite und Höhe sollten angegeben werdenalt sollten den Inhalt des Bildes in Textform wiedergebensiehe: 9a0Die Angabe von Farbnamen kann direkt mit den entsprechenden englischen Begriffenerfolgen oder Hexadezimal in der Form #rrggbb (rot grün blau)siehe: n/Ausdokumentieren in HTML !-- -- Um Kommentare im Quellcode einzubauen, werden diese zwischen diese Zeichenfolgegesetzt. Dadurch werden diese im Browser nicht mehr angezeigt(so können zum Testen auch Teile des Quellcodes „deaktiviert“ werden)https://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20194

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialTabellen table border "1" thead tr Beginn einer Tabelle (nur zum Testen border “1“ setzen)Bereich für den Kopf beginnthier fängt die erste Reihe für die Kopfzeile an th Überschrift /th hier fängt die erste Zelle für die Kopfzeile (Überschriften für Spalte) th Ü. Spalte 2 /th zweite Überschrift für zweite Spalte /tr /thead erste Reihe für Überschriften beendenBereich für Kopf zu Ende tbody Bereich für Inhalt beginnt tr td Zelle 11 /td td Zelle 12 /td /tr hier fängt die erste Reihe mit Inhalt anhier fängt die erste Zelle an, dann der eigentliche Inhalt und die Zelle beendenhier fängt die zweite Zelle an, dann der eigentliche Inhalt und die Zelle beendenerste Reihe mit Inhalt beenden tr nächste Reihe mit Inhalt td Zelle 21 /td td Zelle 22 /td /tr erste Zelle, zweite Reihezweite Zelle, zweite Reihezweite Reihe mit Inhalt beendenHier können noch beliebig viele weiteren Reihen folgen /tbody Bereich für Inhalt zu Ende tfoot Bereich für die Fußzeile (kommt in HTML5 nach dem Inhalt (war bei HTML4anders))Beginn der Reihe für FußzeileZell-Anfang, Inhalt Fußzeile 1, Zell-EndeZell-Anfang, Inhalt Fußzeile 2, Zell-EndeEnder der Reihe für die FußzeileBereich für Fuß zu Ende tr td Fuß Z1 /td td Fuß Z2 /td /tr /tfoot /table Tabelle beendenWichtig ist: unbedingt auf die korrekte Schachtelung achten!siehe: r HTML-Code ausgeführt:https://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20195

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialStruktur SeiteDTDDTD-Doctype-Definition – Definition für BrowserSeitenaufbausiehe: ndgerüst: Grundsätzlicher Aufbau einer HTML5-Seite !DOCTYPE html html lang "de" head meta charset "UTF-8" title Titel der Seite /title meta name "description" content "Beschreibung des Inhalts (160 Zeichen)" link href "design.css" rel "stylesheet" /head body h1 Eigentlicher Inhalt /h1 /body /html Websites für mobile Geräte (Handy, Tablet & Co.)Angabe Viewport head -Bereich: n.htm head meta charset "UTF-8" meta name "viewport" content "width device-width, initial-scale 1" Weitere Informationen dazu unterMedia esponsive-design.htm@media/*}@media/*}screen {CSS-Anweisungen für die Ausgabe auf Bildschirmen */print {CSS-Anweisungen für die Druckerausgabe */für unterschiedliches Design je nach Bildschirmbreite:@media only screen and ( min-width: 950px ) {/* breites Browserfenster */body { background-color: yellow;}}@media only screen and ( max-width: 440px ) {/* mobile Geräte */body { background-color: green;}}@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {/* Tablets und mittlere Bildschirme */body { background-color: red;}}https://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20196

kostenlose HTML5-CSS3-Kurzreferenz – Unterlagen zum HTML TutorialFormulare form action "" method "" !-Hier kommen nun diegewünschtenFormularelemente-- /form Zwischen diesen TAGs werden die einzelnenFormularfelder eingeschlossenaction "" - entweder Seite, die aufgerufenwerden soll und deren der Inhalt der Felderübergeben wird, oderMailadresse in Form"mailto:donald@duck.ent" (nicht ratsamwegen SPAM!) method "post get" –entweder post oder get input type "text"name "" value ""size "" maxlength "" Text-Boxname "" - Name des Feldes (fürVariablenübergabe)value "" - Vorgabewert (normalerweise leer)size "" - Größe der Anzeigemaxlength "" - maximale Länge des Feldes input type "hidden"name "" value ""size "" maxlength "" verstecktes Feld textareaname ""cols "10"rows "60" /textarea Text-Area für Eingabe von viel Textcols "" - wie viele Spalten angezeigt werdenrows "" - Anzeige der Anzahl Reihen input type "radio"name ""value "v"checked "checked" Radio-ButtonWird gerne verwendet, wenn es umentweder-oder-auswahlen geht (z. B. Herroder Frau)name "" - Name des Feldes (fürVariablenübergabe) pro Auswahl eine inputZeile mit demselben Namen!value "v" - Vorgabewert ist hier wichtig, dader Nutzer nur anklicken kann (Bsp:value "Herr") input type "checkbox"name ""checked "checked" Check-BoxAnklickbox – über checked "checked" kanndie Box bereits angeklickt sein select name "" size "3"multiple "multiple" List-BoxPull-Down Auswahl size "3" - Größe derAnzeige multiple "multiple" - ob mehrereElemente angewählt warden können option - die einzelnen Elementeselected "selected" - vorselektiertes option value "1"selected "selected" 1 /option option value "2" 2 /option option value "3" 3 /option /select input type "Submit"name ""value "speichern" Button zum Anklicken und Absenden desFormularsvalue "speichern" - Der value wird alsBeschriftung der Schaltfläche angezeigthttps://www.html-seminar.de – Weiterempfehlen und Link setzen – Danke – Stand August 20197