docÜbersicht HTML-tags Seite 1 / 2 HTML
download 
Denúncia Transcrição
Übersicht HTML-tags Seite 1 / 2 HTML
HTML5-‐Grundgerüst HTML-‐Befehle Beschreibung <!DOCTYPE html> HTML5-‐Doctype, erste Zeile der HTML-‐Datei <html lang="de"> Umschliesst den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet <head> Head-‐Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt) <meta charset="UTF-‐8" /> Verwendete Codierung -‐ mit UTF-‐8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü) Titel der Seite -‐ hat mehrere wichtige Funktionen: <title>HTML5-‐Grundgerüst</title> -‐ Titelzeile im Browserfenster -‐ Namen von gesetzten Lesezeichen/Bookmarks -‐ Liste der bereits besuchten Seiten -‐ für den Eintrag bei Suchmaschinen in der ersten Zeile </head> <body> Umschliesst den Inhalt, der im Browserfenster angezeigt wird INHALT Hier kommen nun der Inhalt (und alle weiteren HTML-‐Befehle, die den Inhalt strukturieren) </body> </html> Ende der HTML-‐Seite Text strukturieren HTML-‐Befehle Beschreibung Hauptüberschrift -‐ wichtig, sollte 1 mal auf jeder einzelnen Seite kommen <h1> … </h1> (engl. h = headline = Überschrift) <h2> … </h2> bis <h6> … </h6> Unterüberschriften -‐ sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3> <p> … </p> <br/> auch <br> möglich <hr/> auch <hr> möglich HTML-‐Befehle (HTML-‐TAG) <b> … </b> <strong> … </strong> <i> … </i> <em> … </em> <u> … </u> <sup> … </sup> <sub> … </sub> <s> … </s> <small> … </small> HTML-‐Befehle (HTML-‐TAG) <a href="URL">BESCHREIBUNG</a> Absatz -‐ nach dem Absatz wird automatisch Platz gehalten (engl. p = paragraph = Absatz) erzwungener Zeilenumbruch (Zeilenende) (engl. br = break = Umbruch) Trennlinie -‐ soll 2 unterschiedliche Inhalte trennen (engl. hr = horizontal ruler = horizontale Linie) Textstellen hervorheben Beschreibung Schrift wird fett angezeigt (engl. b = bold = fett) wichtiger Bereich, Schrift wird fett angezeigt (engl. strong = kräftig, überzeugend) Schrift wird kursiv angezeigt (engl. i = italic = kursiv, schräg) hervorgehobener Bereich, Schrift wird kursiv dargestellt (engl. em = emphasis = betont, Hervorhebung) unterstrichene Schrift (engl. u = underline, zu Deutsch unterstreichen) hochgestellte Schrift, z.B. Fußnote2 (engl. sup = superscript, zu Deutsch hochstellen) tiefgestellte Schrift, z.B. H2O (engl. sub = subscript, zu Deutsch tiefstellen) durchstrichen = strike für das "Kleingedruckte" im Text (engl. small = klein) Links, Verweise Beschreibung für interne & externe Links "Beschreibung" wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen. (engl. a = anchor = Anker) (engl. href = hyper reference = Hypertext-‐Referenz) <a href="webbasics.ch">webbasics</a> interner Link / relativ <a href="http://www.webbasics.ch/">webbasics</a> externer Link / absolut neues (leeres) Browserfenster wird beim Anklicken geöffnet <a href="http://www.webbasics.ch/" target="_blank"> … (engl. target = Ziel, blank = leer) <a href="#Kapitel 1">Kapitel 1</a> <a name="Kapitel 1">Kapitel 1</a> Sprungmarke für z.B. Inhaltsverzeichnis zu einem bestimmten Punkt, hier "Kapitel 1", mit "#" gekennzeichnet. Kapitel-‐Überschrift wird durch "a name" gekennzeichnet. <a href="mailto:[email protected]">Mail</a> So kann eine E-‐Mail-‐Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-‐Mail-‐Programm (sofern installiert) und die E-‐Mail-‐Adresse ist bereits eingegeben. (e: mailto = maile nach) Übersicht HTML-tags Seite 1 / 2 Grafiken einfügen HTML-‐Befehle (HTML-‐TAG) <img src="bild.jpg">, <img src="http://www.xy.jpg"> <body style="background-‐image:url(bild.jpg)"> HTML-‐Befehle (HTML-‐TAG) <li>AUFZÄHLUNGSPUNKT</li> Beschreibung Grafiken einfügen (engl. image source=Bildquelle), Speicherort/Dateiname oder URL background-‐image:url, Befehl um Hintergrundbild einzufügen. Kann anhand Inline CSS (style-‐Zusatz im HTML-‐tag) eingfügt werden, wird jedoch besser gleich im CSS Style Sheet eingefügt / nicht direkt im HTML-‐tag. Aufzählungen / Tabellen Beschreibung Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein. (engl. li = list item = Listeneintrag ) Art der Auflistung. Umschließt alle einzelnen <li> <ul> … </ul> Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste) Art der Auflistung. Umschließt alle einzelnen <li> <ol> … </ol> Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste) <table> </table> Definiert Anfang und Ende einer Tabelle <tr>...</tr> tr = table row, Tabellenreihe (kommt vor jeder Tabellereihe hin) <td>...</td> td = table data, Tabellendaten (kommt vor jeder Tabellenzelle hin) Bereiche definieren HTML-‐Befehle (HTML-‐TAG) <div id="NAME">BEREICH</div> Beschreibung Über DIV wird ein Bereich im HTML definiert. Diesen Bereich kann man über CSS dann das Design "überstülpen". Angesprochen wird der Bereich über seinen ID-‐Namen. Bei DIV handelt es sich um ein Blockelement -‐ das Blockelement nutzt die komplette Bildschirmbreite. (engl. div = division = Bereich, Gruppierung von Elementen) <div class="NAME">BEREICH</div> Der DIV-‐Bereich kann auch per CSS über seinen Klassen-‐Namen angesprochen werden. (engl. class = Klasse) <span id="NAME">BEREICH</span> <span class="NAME">BEREICH</span> HTML5-‐Befehle <header> <nav> <section> <article> <aside> <footer> HTML-‐Befehle (HTML-‐TAG) <!-‐-‐ KOMMENTAR -‐-‐> <!-‐-‐ QUELLCODE ohne Wirkung -‐-‐> Übersicht HTML-tags Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-‐ Element ist ein Inline-‐Element, was den Unterschied zum DIV-‐Element ausmacht. (engl. span = Abgrenzung, Bereich) Kann über den Klassennamen und CSS mit Design versehen werden. Bereiche einteilen über HTML5 Beschreibung Bereich für Kopf (nicht verwechseln mit <head>) Bereich Navigation (Steuerung) Gruppiert Elemente Bereich für Inhalt Bereich für Zusatzinformationen zum Inhalt Bereich für Fuss Kommentieren, Auskommentieren Beschreibung Über diese Anweisung können Kommentare im HTML-‐Code gemacht werden bzw. Teile des HTML-‐Codes auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-‐Befehlen. Seite 2 / 2
