Angewandte Informatik

Wahlpflichunterricht

Angewandte Informatik

STT

Kategorie: Informatik

  • 1 Projekt SchulBar

    1 Projekt SchulBar

    —

    von

    hase aut
    in , , ,

    Dein erstes großes Projekt wartet auf dich – du hast den Auftrag bekommen die Homepage der SchulBar zu erstellen. Das Projekt wurde bereits vor einiger Zeit von der Redaktionsgruppe begonnen. Die Aufgabe der Redaktion war es die Texte zu erstellen, Fotos anzufertigen und die Struktur der Seite festzulegen.  Diese Ergebnisse werden nun an dich, der…

  • 3.2 Hintergrund

    —

    von

    hase aut
    in

    In einem HTML-Dokument erscheint der Hintergrund, sofern nichts Anderes bestimmt wurde, üblicherweise Weiß.  Der Hintergrund kann auf verschiedene Arten verändert werden. Die einfachste besteht darin, eine Farbe zu bestimmen. Dies geschieht im Stylesheet als Attribut des Body-Tags und sieht so aus: body { background-color: #E6E8FA; }.

  • 3.1 Weitere Definitionen für Schriften

    —

    von

    hase aut
    in

    Schrift und Abstände font-weight:bold; Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter font-style:italic; Anzeige der Schrift (kurz ob kursiv oder normal)italic = kursiveoblique = schräggestelltnormal = normal letter-spacing:0.3em; Abstände zwischen den einzelnen Buchstaben – sollte relativ angegeben werden, also in EM word-spacing:0.5em; Abstände zwischen den einzelnen Wörtern – sollte relativ angegeben werden, also in EM border-bottem:5px dotted;…

  • 3 Schriftgestaltung und Farbe mit css

    —

    von

    hase aut
    in

    Beispiel 1 Im ersten Beispiel wird der Überschrift h1 die Größe 28pt, die Farbe Orange und die Schriftart Arial zugewiesen. Für die Gestaltung der Schrift werden folgende CSS-Befehle benötigt: color:#FF9F00; Farbe: orange, kann entweder als Hex-Wert:“#FF9F00″ oder als Farbnamen angegeben werden: „orange“, also „color:orange;“ – die Farbnamen sind immer auf Englisch! font-size:28pt; Schriftgröße: hier als…

  • 2.1 Auslagern von CSS-Befehlen

    —

    von

    hase aut
    in

    Grundsätzlich Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll. Bevor wir beginnen erstelle ein neues Arbeitsverzeichnis: /ai/css/2_auslagernJetzt erstelle in diesem Verzeichnis die Datei anfang1.htmlKopiere den folgenden Code.…

  • 1 Was CSS ist

    1 Was CSS ist

    —

    von

    hase aut
    in , , ,

    Schneller, schöner Formatieren mit CSS HTML hauptsächlich mit der Struktur eines Dokumentes beschäftigt, CSS dagegen ist für das Aussehen verantwortlich. Über CSS kann eine wesentlich schlankere Seite erstellt werden, d.h. die Seite kann viel schneller geladen werden.  Über CSS können die Formatierungen einfach und elegant vorgenommen werden. So können z. B. Schriftattribute wie Farbe, Schriftart…

  • 17 Uebersicht

    —

    von

    hase aut
    in ,

    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>…

  • 16.7 Beispiel

    —

    von

    hase aut
    in ,

    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“>…

  • 16.6 Farben

    —

    von

    hase aut
    in ,

    {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>…

  • 16.5 css für Tabellen

    —

    von

    hase aut
    in ,

    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…

  • 16.4 Zeilenhöhe

    —

    von

    hase aut
    in ,

    {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…

  • 16.3 Tabellenbreite

    —

    von

    hase aut
    in ,

        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

  • 16.2 Zellen verbinden

    —

    von

    hase aut
    in ,

    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…

  • 16.1 Tabellen

    —

    von

    hase aut
    in ,

    {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…

  • 16 Tabellen

    —

    von

    hase aut
    in ,

    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.…

  • 15 Bilder einfügen

    —

    von

    hase aut
    in ,

    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…

  • 14 Die Trennlinie

    —

    von

    hase aut
    in ,

    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…

  • 13 Umbruch

    —

    von

    hase aut
    in ,

    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.…

  • 12.4 Steuerung

    —

    von

    hase aut
    in ,

    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…

  • 12.3 externe Links

    —

    von

    hase aut
    in ,

    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…

  • 12.2 interne Links – HTML-TAG

    —

    von

    hase aut
    in ,

    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…

  • 12.1 Dateinamen für HTML-Seiten und die Benennung

    —

    von

    hase aut
    in ,

      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…

  • 12 Links (Hyperlinks) in HTML erstellen

    —

    von

    hase aut
    in ,

      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…

  • 11 Listen und Aufzählungen in HTML

    —

    von

    hase aut
    in ,

      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,…

  • 10 Sauberer HTML-Code unterstützt das HTML lernen

    —

    von

    hase aut
    in ,

      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…

  • 9 Unterstreichen von Text

    —

    von

    hase aut
    in ,

      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…

  • 8 Schachteln von HTML-TAGs

    —

    von

    hase aut
    in ,

      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…

  • 7 Texte formatieren – fett, kursiv und Co

    —

    von

    hase aut
    in ,

      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,…

  • 6 Das Grundgerüst einer HTML Datei

    —

    von

    hase aut
    in ,

      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…

  • 5 Texte formatieren – Überschrift

    —

    von

    hase aut
    in ,

      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…