Kategorie: html2

  Warum überhaupt der Hinweis auf sauberen Code? Dafür gibt es einige Gründe: WYSIWYG-Editoren machen es nicht 🙂 Eine eventuelle Fehlersuche geht später schneller Nachträgliche Änderungen und Hinzufügen von Informationen ist problemlos du selber siehst deinen Fehler schneller dein Lehrer sieht gemachte Tippfehler schneller Diesen sauberen HTML-Code machst du eigentlich nur für dich. Dem Webbrowser…

  Listen und Aufzählungen kommen laufend vor. Z.B. wenn du deine Interessen, Freund, Adressen usw. aufzählen willst. Listen mit Spiegelstrichen in HTML Jeder Punkt in Auflistung wird von dem HTML-TAG <li> umschlossen. Dabei steht <li> für englische „list item“ = Element der Liste. Erstellen wir für folgende 3 Aufzählungspunkte eine Liste – stell dir vor,…

  Durch Links wurde das WWW so groß und erfolgreich. Links (korrekt Hyperlinks, aber zu lang, um jedes Mal auszuschreiben 🙂 verweisen auf andere Seiten und mehr. Es gibt mehrere Arten von Links: Links innerhalb der Homepage Links auf andere Seiten im Internet Links mit E-Mail-Funktion Dabei kann das Aussehen der Links verschieden sein. Einerseits…

  Dateinamen der Startdatei einer Domain   Die Startdatei solltest du „index.html“ nennen. Wird bei einer URL, was gerne gemacht wird, nur der Pfad angeben, sucht der Browser automatisch nach einer index.html. Findet er diese, was zu hoffen ist, wird diese Startseite angezeigt. Findet er diese Seite nicht, erhält der Nachfrager unter Umständen eine Auflistung…

interne Links – HTML-TAG <a href Hier ist unser erster HTML-TAG, der nicht ohne Attribut auskommen kann. Schauen wir uns als erstes den kompletten Aufbau des HTML-Befehls für Hyperlinks an – wir wollen einen Link zur Seite UEbersicht HTML Befehle Der HTML-TAG a steht für das englische „anchor“ was „Anker, ankern, verankern“ bedeutet. Wir setzen…

Links auf andere Seiten – externe Links Bei einem externen Link muss die komplette URL angegeben werden. Also sowohl Dienstart, Servername noch Länderkürzel eingegeben und die Unterverzeichnisse, wenn diese verwendet werden. Einfach und sicher fahren Sie, indem Sie die Seite, auf die Sie einen Link setzen möchten, im Browser angeben und wenn die Seite erfolgreich angezeigt…

Textlink   Ein Link hat immer die Form von <a href=“datei.html“>Wohin zeigt der Link</a> Dabei sollten die ai/datei.html und „Wohin zeigt der Link“ durch dein entsprechenden Inhalt ersetzt werden.In dem obigen Beispiel liegt die aufzurufende datei.html auch noch im Unterverzeichnis /ai. Wenn die aufzurufende (verlinkte) Datei im selben Verzeichnis liegt, muss keine Pfadangabe erfolgen. Also…

Wenn Sie einen Umbruch erzwingen möchten, nutzen Sie dazu den TAG <br />. <p>Hier kommt unser erster Test <br /> und hier geht es in der nächsten Zeile weiter.</p> Erstelle die Datei /ai/html/umbruch.html und schaue dir das Ergebnis an. Alle HTML-TAGs kommen aus dem Englischen. So ist <br /> die Abkürzung für break = Umbruch.…

Hier kommt die Maus – nein, eine Trennlinie. Durch diese können Sie Inhalte trennen. Trennlinien <hr /> sind an und für sich nichts Besonderes. Diese trennen zwei Abschnitte. Das <hr /> steht für engl. horizont ruler = horizontale Linie. <p>Text eins</p> <hr /> <p>Text zwei</p> Erstelle die Datei ./ai/html/trennlinie.html kopiere den code – Grundgerüst nicht…

Es gibt bisher 2 Grafikformate, die in Betracht kommen. Diese 2 Formate werden von allen Browsern unterstützt. GIF und JPEG sind die Grafikformate, die heute im Internet verwendet werden. Wenn du im Browser ein Bild siehst, kannst du die über die rechte Maustaste  die „Eigenschaften“ des Bildes anzeigen lassen. Gezeigt werden der Name, die Datei-Größe…

Aufgabe: Erstelle das Verzeichnis /ai/html/tabellenErstelle in diesem Verzeichnis die Datei tabelle11.html und füge den obigen code ein.   Aufgabe Erstelle die Datei tabelle31.html. Erstelle den code, der eine Tabelle mit 3 Zeilen erzeugt.   Aufgabe Erstelle die Datei tabelle1.html. Erstelle den code, der eine Tabelle mit 3 Spalten erzeugt.   Aufgabe Erstelle die Datei tabelle42.html.…

{source}<!– You can place html anywhere within the source tags —> <script language=“javascript“ type=“text/javascript“> // You can place JavaScript like this </script><?php // You can place PHP like this ?> <h1>HTML Tabellen – Grundlagen</h1> <h2>Wie kam fr&uuml;her das Design auf Homepages</h2> <p>Sicher haben Sie sich bisher schon gefragt, wie kam das Design fr&uuml;her ohne CSS…

Hier der Screenshot vom Kalenderblatt Dezember: Hier noch ein paar einfache Übungen zu colspan und rowspan: (Achtung! Kann Fehler enthalten durch Umzug der Webseite) Wenn wir nun Tabellenzellen miteinander verbinden möchten, dass z.B. anstatt 3 Zellen nur eine vorhanden ist, funktioniert das über colspan und rowspan. Im folgenden Beispiel sollen das Feld A, B, C…

    Aufgabe Erstelle die Datei ai/html/tabellen/breite1.html Kopiere den Code und schau die das Ergebnis im Browser an.   Aufgabe Erstelle die Datei ai/html/tabellen/breite2.html Erstelle eine Tabelle mit 4 Spalten. Die erste soll 100 Pixel groß sein, die zweite 350, die dritte 50 und die vierte 20

{source}<!– You can place html anywhere within the source tags —> <script language=“javascript“ type=“text/javascript“> // You can place JavaScript like this </script><?php // You can place PHP like this ?> <P> Um einen Effekt sch&ouml;n zur Geltung zu bringen, kann es unter Umst&auml;nden n&ouml;tig sein, auch die H&ouml;he einer Tabelle anzugeben.<BR> <I>Achtung:</I> im Gegensatz zur…

Rahmen (Border) CSS-Selektor Eigenschaft Erklärung Beispiel table, th, td border Definiert einen Rahmen. border: 2px solid black; table border-collapse Steuert, wie benachbarte Zellenrahmen dargestellt werden. border-collapse: collapse; (Wichtig für saubere Rahmen!) table border-spacing Definiert den Abstand zwischen den Zellrahmen (nur bei border-collapse: separate;). border-spacing: 10px; Hintergrundfarbe CSS-Selektor Eigenschaft Erklärung Beispiel table, th, td background-color Legt…

{source}<p>Farben (<b>16,7 Millionen</b>) kann man mit einem <b>Hexadezimal-Code</b> angeben: Solch ein Code wird immer mit einem Gatter (Doppelkreuz) # eingeleitet. Danach folgen 6 Zeichen: Die ersten zwei legen den Rot-Anteil fest, die mittleren den Gr&uuml;n-Anteil und die letzten beiden den Blau-Anteil. Dabei bedeuten:</p> <ul><p style=“font-family: Courier New;“><b>0</b> (entspricht dezimal 0)<br /><b>1</b> (entspricht dezimal 1)<br /><b>2</b>…

Aufgabe Erstelle die Datei ai/html/tabellen/layout1.html Kopiere den folgenden code. Experimentiere mit dem Attributen und verändere die Vorgaben nach deinen Vorstellungen. Erstelle zudem die drei Dateien, auf die verlinkt wird. Diese sollen ein ähnliches Layout haben.     <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“><html> <head><title>Beispiel eines einfachen Tabellen-Layouts</title></head> <body bgcolor=“#FFFFFF“ link=“#FFFF00″ vlink=“#FFCC00″ alink=“#FFFFFF“ text=“#FFFFFF“>…

Diese Tags benötigst du für die Klassenarbeit „html“ <p> Ein Absatz wird gesetzt.    </br> Zeilenumbruch     <li> Punkt einer Liste.    <ul> Unsortierte Liste   <ol> Nummeriete Liste    <a> Der Link   <img> Ein Bild laden   <strong> Schrift auf fett   <i> Schrift auf kursiv   <h1> .. <h6> Überschriften    <table>…

    erste eigene HTML-Seite erstellen Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen, die in einem Web-Browser angezeigt werden kann.Dabei werden die Beispiele am Anfang sehr einfach gehalten sein, damit ein grundlegendes Verständnis aufgebaut werden kann.  sehr einfache HTML-Seite erstellen Für das Grundverständnis legen wir nun eine Seite…

  HTML-Grundlagen Was ist HTML?   HTML ist eine „Strukturierungssprache“, mit der dem Browser „gesagt“ wird, wie die Inhalte strukturiert sind: welche Bereiche (Buchstaben, Wörter, Sätze) z.B. Überschriften sind, was Absätze sind, was fett ausgegeben werden soll – HTML ist keine Programmiersprache – man beschreibt, wie eine Seite im Browser ausgegeben werden soll (nicht mehr,…

  Absätze erstellen – HTML-TAG <p> Ein wichtiger HTML-TAG ist der für Absätze. Ein Absatz hält einen Abstand zum nachfolgenden Element, was z.B. wieder ein Absatz oder z.B. eine Überschrift sein kann. Wie viel Abstand gehalten wird, interessiert hier nicht, da dies in den Bereich Design fällt und für Design nicht HTML sondern CSS zuständig…

  Texte formatieren – Überschrift in HTML HTML-TAGs für Überschriften stellen die grundlegendsten Gliederungsmöglichkeiten für Texte dar. Ein Text wird durch Einsatz der verschiedenen Überschriftengrade sauber strukturiert. Anhand von Überschriften wird Text gegliedert und strukturiert. Dabei sind wie in einem Fachbuch verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.B. Kapitelüberschrift, Abschnittsüberschriften usw. Wichtig ist der korrekte…

  Grundgerüst einer HTML-Seite – DOCTYPE-Definition   Wie haben bisher mit den 2 HTML-TAGs bereits Inhalte ausgezeichnet, damit im Browserfenster dieser Inhalt angezeigt wird. Beispiel mit bisherigen HTML-TAGs <h1>HTML-Tutorial</h1>   <p>der erster Absatz ...</p> Allerdings gibt es neben dem Inhalt, welchen man im Browserfenster sieht, weitere Informationen über jede Einzelseite. Zu diesen weiteren Informationen gehört…

  Texte mit HTML formatieren – fett, kursiv und Co Fett – hervorgehoben   Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben werden. Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG <b> zur Verfügung. Das b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG <strong> – engl. „überzeugend,…

  Schachteln von HTML-TAGs TAGs verschachtelt Die TAGs können nun bunt gemischt werden – verschachtelt. Wollen Sie z. B. einen Text erst fett und dann noch kursiv darstellen, ist das jetzt kein Problem. Hier kommt nun <strong>fetter und <em>kursiver (schräger)</em></strong> Text Erstelle die Datei ./schachteln.htm, das Grundgerüst und ergänze das voranstehende Beispiel.   ÜbungHinweis: verschachteln ist durchaus…

  Unterstreichung von Text in HTML Nur der Vollständigkeit halber wird hier der TAG für unterstrichen aufgeführt. Dieser sollte nach Möglichkeit vermieden werden!!! Warum nicht einsetzen? – Als Standard für Links gilt der blau unterstrichene Text. Somit nehmen die meisten Besucher bei unterstrichenem Text an, dass es sich um einen Link handelt (auch wenn der Text nicht…