Mittwoch, 9. April 2014

Meine Übungen

Tag4 - Ausgabe: 

DIV (2)
Strukturierungselemente: Absatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Strukturierungselemente: Absatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Strukturierungselemente: Absatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
Tag 4: Quelltext
<!doctype html>
<html>
    <head>
        <title>DIV (2)</title>
       
    </head>
   
    <body>
        <div  style="width: 600px; color: lightblue; background-color: lightgreen;">
           
            <p align="justify" width="600"><font color="deeppink" size="-1" face="Comic Sans MS">
            Strukturierungselemente: Absatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br />
            <span style="background-color: silver;"> At vero eos et accusam et justo duo dolores et ea rebum. </span> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br />
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</font></p>
        </div>
       
        <div style="width: 200px; color: lightblue; background-color: yellow;>
           
            <p align="justify" width="200"><font color="deeppink" size="-1" face="Comic Sans MS">
            Strukturierungselemente: Absatz Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br />
            At vero eos et accusam et justo duo dolores et ea rebum. <span style="background-color: orange;">Stet </span>clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br />
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</font></p>
           
            <div style="background-color: purple; width: 500px;">
            <p align="justify" width="200"><font color="deeppink" size="-1" face="Comic Sans MS">
                Strukturierungselemente:<span style="background-color: grey;"> Absatz Lorem ipsum </span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
            </div>
        </div>
    </body>
</html>

Tag2 - Ausgabe: 

Zeichenformate

Zeichenformate

Physische Zeichenformate

fett - bold
kursiv - italic
unterstrichen - underlined
Kombinationen sind möglich
Kombinationen sind möglich
durchgestrichen - strike
Fernschreiber - teletyper
Grösser - big
Kleiner - small
Sehr gross
hochgestellt
tiefgestellt

Logischen, semantische Zeichenformate

Zitat
Beispiel
Tastatureingabe
Variable
Programmiercode
Definition
stark hervorgehoben
betonten, emphatisch
Abk
LKW
HTML
Inline-Element

Proprietäre Formate (nicht standardkonform)

Es blinkt heute nicht mehr Es läuft Es läuft Es läuft Es läuft Tag2 - Quelltext: 
<!doctype html> <!-- Ich bin ein Kommentar -->

<html>
<head>
<title>Zeichenformate</title>

<meta charset="utf-8">
</head>
<body>
<h1>Zeichenformate</h1>

<h2>Physische Zeichenformate</h2>

<p>
<b>fett</b> - bold<br />
<i>kursiv</i> - italic<br />
<u>unterstrichen</u> - underlined
</p>
<p><b><i>Kombinationen sind möglich</i></b></p>
<p><i><b>Kombinationen</b> sind <b>möglich</b></i></p>
<p>
<s>durchgestrichen</s> - strike<br />
<tt>Fernschreiber</tt> - teletyper<br />
<big>Grösser</big> - big<br />
<small>Kleiner</small> - small<br />
<big><big><big><big>Sehr gross</big></big></big></big><br />
<sup>hoch</sup>gestellt<br>
<sub>tief</sub>gestellt<br>
</p>
<h2>Logischen, semantische Zeichenformate</h2>

<p>
<cite>Zitat</cite><br />
<samp>Beispiel</samp><br />
<kbd>Tastatureingabe</kbd><br />
<var>Variable</var><br />
<code>Programmiercode</code><br />
<dfn>Definition</dfn><br />

<strong>stark hervorgehoben</strong><br>
<em>betonten, emphatisch</em><br>

<abbr title="Abkürzung" lang="de">Abk</abbr><br>
<acronym title="Lastkraftwagen">LKW</acronym><br>

<abbr title="Hypertext Markup Language" >HTML</abbr><br>

<span lang="en">Inline-Element</span>


<h2>Proprietäre Formate (nicht standardkonform) </h2>

<blink>Es blinkt heute nicht mehr</blink>

<marquee direction="left">Es läuft</marquee>
<marquee direction="right">Es läuft</marquee>
<marquee direction="up">Es läuft</marquee>
<marquee direction="down">Es läuft</marquee>


</body>
</html>


Tag1 - Ausgabe: 

Dokumententitel Hallo!
Meine erste Seite mit HTML war ein voller Erfolg.
Jetzt möchte ich prüfen, warum es keine Absätze in HTML gibt.



Selbst eine Leerzeile wird ignoriert!

Selbst eine Leerzeile wird ignoriert!

Selbst eine Leerzeile wird ignoriert!

Selbst eine Leerzeile wird ignoriert!

Tag1 - Quelltext: 
<!doctype html> <!-- HTML5 Standardbeschreibung in der ersten Zeile -->
<html>
    <head>
        <title>Dokumententitel</title>
        <!-- Kommentarzeile für den Entwickler)-->
        <!-- Alles was ich in den Kommentar schreibe wir nicht ausgegeben - es dient der Strukturierung und Übersichtlichkeit! -->
        <!-- META charset = korrekte Darstellung der Umlaute -->
        <meta charset="UTF-8" />
    </head>
   
    <body>
        Hallo!<br />
        Meine erste Seite mit <b>HTML</b> war ein voller Erfolg.<br />
        Jetzt möchte ich prüfen, warum es keine Absätze in HTML gibt.<br />
        <br />
        <br />
        <br />
        <b>Selbst eine Leerzeile wird ignoriert!</b><br />
        <br />
        <b>Selbst eine Leerzeile wird ignoriert!</b><br />
        <br />
        <b>Selbst eine Leerzeile wird ignoriert!</b><br />
        <br />
        <b>Selbst eine Leerzeile wird ignoriert!</b><br />
    </body>
</html>

Keine Kommentare:

Kommentar veröffentlichen