Lektion 13 - Hobby

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 13 - Hobby

Beitrag von Admin » Di 19. Aug 2014, 11:19

Erzählen wir von unserem Hobby, sind wir voll in unserem Element. Wir verfallen ganz schnell in die Fachsimpelei und verhalten uns wie absolute Fachidioten. Ein Laie, der von dem Thema keine Ahnung hat, versteht wahrscheinlich nur die Hälfte, von dem, was wir ihm erzählen.

Das liegt häufig daran, dass wir Fachausdrücke verwenden - oder noch schlimmer - Abkürzungen, die für Eingeweihte absolut normal sind, mit denen aber ein Laie aber nichts anfangen kann. Mit diesen Inline-Text-Elementen ist es möglich, einen Text entsprechend seiner Bedeutung hervor zu heben.

[col]Diese Elemente rufst du über Menü Format - Schriftschnitt auf:

hervorgehobener Text <em>Bild
  • Hebt einen Text als wichtig hervor. Beispiel:
    Der neue Harry Potter läuft in diesem Sommer in den Kinos an. Es wird die letzte Folge aus der Harry Potter-Serie sein.
    <em> wird automatisch von jedem Browser kursiv dargestellt.
Stark hervorgehobener Text <strong>Bild
  • Zeichnet einen Text als besonders wichtig aus und hebt ihn entsprechend hervor. Beispiel:
    Der neue Harry Potter läuft in diesem Sommer in den Kinos an. Es wird die letzte Folge aus der Harry Potter Serie sein.
    <strong> wird von jedem Browser fett-formatiert dargestellt.
Zitat <cite>
  • zeichnet eine Quelle bzw. Autors eines Zitates aus. Das Zitat wird als blockquote oder q gekennzeichnet.
    Beispiel:
    • "Ach was muss man oft von bösen Kindern hören oder lesen
      wie zum Beispiel hier von diesen,
      welche Max und Moritz hießen ..."
      von Wilhelm Busch
    . Das Element <q> klammert das Zitat mit Anführungsstrichen ein. Das Element blockquote rückt den Absatz ein. Mit dem Element cite wird dem Autor ein kursives Auto-Format zugewiesen.
    Die Elemente blockquote und q sind nicht in KompoZer hinterlegt. Sie müssen manuell zugewiesen werden.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    1. Klicke in den Absatz, den du als Zitat hervorheben willst, zum Beispiel ein Absatz. In der Statusleiste wird dieser Absatz als <p> angezeigt.
    2. Klicke mit rechter Maustaste auf den Tag in der Statusleiste und wähle "Tag ändern".
    3. überschreibe das p mit blockquote oder q.
    4. Bestätige die Eingabe mit OK
    .
Abkürzungen <abbr>
  • Eine Abkürzung zeichnet einen Text als Abkürzung aus. Abkürzungen werden mit einem Punkt markiert. z.B., usw.,o.g.
    Der Abkürzung kannst du über einen Titel die Bedeutung zugewiesen. Beim Lesen des Textes wird die Bedeutung dann angezeigt, wenn man mit der Maus auf die Bedeutung anzeigt.
    Bei Abkürzungen werden Wörter durch einen Punkt abgekürzt. Beispiel:
    z.B.,usw.,s.o.,A.B.
[/col]

Akronym <acronym>
  • [col]Zeichnet einen Text mit der Bedeutung "dies ist ein Akronym" aus. Akronyme sind besondere Abkürzungen, die aus den Anfangsbuchstaben mehrerer (Teil-)Wörter gebildet werden. Sie werden im Deutschen in der Regel ohne Punkte gebildet: HTML. Akronyme lassen sich darüber hinaus meist als Wort aussprechen (z.B. "NATO").
  • Um einem Element einen Titel hinzuzufügen, klickst du mit der rechten Maustaste in der Statusleiste auf das Element und wählst: erweiterte Einstellungen.
  • Öffne das linke Drop-Down-Menü und wähle Titel.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]
  • Schreibe als Wert die Erklärung bzw. das ausgeschriebene Wort.
  • Bestätige den Assistenten mit OK.

    Die Abkürzung wird nun gepunktet unterstrichen dargestellt Pkw.
    Fährst du mit der Maus darüber, wird der Wert des Titels in Form eines "Tooltipps" angezeigt.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]
Code <code>
  • Mit diesem Element zeichnest du einen Text - als Code etc. aus.
    Ein Code wird automatisch in der Schriftart Curier bzw. Curier New dargestellt.
    Bespiel:

    Code: Alles auswählen

    <div id="navi">
        <ul>
          <li><a href="index.html">Startseite</a></li>
          <li>
            <a href="hobby.html">Hobby</a></li>
           <li>
            <a href="galerie.html">Galerie</a></li>
          <li>
            <a href="glossar.html">Glossar</a></li>
          <li>
            <a href="termine.html">Termine</a></li>
          <li>
            <a href="gaestebuch.html">Gästebuch</a></li>
          <li>
            <a href="wegbeschreibung.html">Wegbeschreibung</a></li>
          <li>
            <a href="impressum.html">Impressum</a></li>
        </ul>
        </div>
Beispieltext <sample>
  • Code: Alles auswählen

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    Auch der Beispieltext wird automatisch in der Schriftart Curier dargestellt.
Variable <var>
  • zeichnet eine Variable aus bzw. einen Namen der Variabel ist. Beispie:
    Ein Name kann verschiedene Schreibweisen haben. Je nachdem aus welchem Sprachraum er abgeleitet ist:
    Stefan Stephan Stevan

    Eine Variable wird automatisch kursiv angezeigt.
Übung

Öffne deine hobby.html und fülle sie mit einem Text zu deinem Hobby. Strukturiere deinen Text in Überschriften und Absätzen. Verwende mindestens zwei der oben vorgestellten Text-Elemente.

Speichere deine hobby.html in deinem Webordner. Schau dir die Seite über die Vorschau in der Symbolleiste an.

[anmerk]Bild|Achtung!
dein Browser muss über Menü Bearbeiten - Einstellungen - Hilfsanwendungen als benutzerdefiniert eingestellt sein.[/anmerk]

Meine Lösung der Startseite sieht so aus --> Lösungsbeispiel

Hier natürlich auch wieder für die Quelltextpuristen.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Hobby</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1</h1>
</div>

<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Hobby<br>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<h3>Überschrift 3<br>
 </h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <strong>totam</strong>
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit <acronym title="Gnu Image Manipulation - Programm Grafikprogramm für alle Betriebssysteme">GIMP</acronym> aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui <acronym title="Hyper-text-markup-language">HTML</acronym>
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem.</p>
 
<p><samp>Beispieltext: Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?</samp></p>
<h4>Überschrift 4<br>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
<em>ex ea commodo consequat</em>. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<h3>Zitat<br>
 </h3>
<q>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. <cite><br>
von Wilhelm Busch</cite><br>
</q>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p>
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body></html>

Code: Alles auswählen

sample {
  margin-left: 10%;
  color: #333300;
  font-size: 1.1em;
}
q {
  padding-left: 10%;
  font-style: italic;
}

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 13 - Hobby

Beitrag von kp2709 » Do 28. Aug 2014, 08:19

guten morgen,
ich hoffe ihr seit alle wohlauf :)
hier mein arbeit :)
http://reikuma27.reikuma.bplaced.de/web/


lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 13 - Hobby

Beitrag von anke » Do 28. Aug 2014, 12:10

Hallo Kurt

ja danke, gut geschlafen, schnell gearbeitet und jetzt schnell mittag bevor es wieder losgeht ;)

Ich habe mir deine CSS einmal angeschaut. Das sieht ganz gut aus. Du kannst dir aber die Auszeichnungen "normal" sparen. Das schleicht sich ein, wenn man eine Formatierung ausprobiert hat und sie wieder zurückstellt. Schau einmal bei den Klassen .infobox und .einruecken

Viele Grüße und weiter gehts ...

Anke

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 13 - Hobby

Beitrag von eibauoma » Sa 13. Sep 2014, 10:58

Der Beginn für meine Hobby-Seite ist gemacht.
http://gimpfreak.bplaced.net/hobby.html

Habe probehalber den Style SoftWood eingeschaltet, für die Augen ist er angenehm. Der Rest wird sich in der nächsten Zeit herausstellen.

Der persönliche Bereich ist einfach zu handhaben und übersichtlich.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 13 - Hobby

Beitrag von anke » Sa 13. Sep 2014, 11:37

Hallo eibauoma
dein Hobby hast du super umschrieben ;)

auf gehts zur nächsten Lektion

Gruß Anke

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 13 - Hobby

Beitrag von Moendel » Do 7. Jan 2016, 14:25

Eine Hobby-Seite von mir

hobby

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 13 - Hobby

Beitrag von camouflage1984 » Do 7. Jan 2016, 15:25

Hallo Moendel

Dein navi und deine h1 sind auf deiner Seite hobby.html noch nicht i.O.(So wie es Anke schon mal beschrieben hat ;) in deiner index Datei (Home) aber schon ;)
Hast du ne alte Datei erwischt?

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 13 - Hobby

Beitrag von Moendel » Do 7. Jan 2016, 18:56

..Hast du ne alte Datei erwischt?..
Jepp, das habe ich allerdings. Gar nicht darüber nachgedacht, wenn ich ehrlich bin. :roll:
Also noch ein Versuch:
hobby

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 13 - Hobby

Beitrag von camouflage1984 » Fr 8. Jan 2016, 06:15

Hallo Moendel

Das passt jetzt, weiter gehts!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 13 - Hobby

Beitrag von Kerberos » So 22. Mai 2016, 13:40


Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast