HTML

Aus AkiWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(Sonderzeichen in HTML: de.selfhtml.org)
(feddisch)
Zeile 21: Zeile 21:
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
 +
 +
http://de.wikipedia.org/wiki/Kategorie:HTML
.
.
Zeile 36: Zeile 38:
.
.
-
== Meta daten - engl. meta tags ==
+
== Seitenquelltext ansehen ==
-
 
+
-
<meta name="keywords" CONTENT="eLearning Recherche Newsletter Suchmaschinen ">
+
-
<meta name="description" CONTENT="AKI Stuttgart">
+
-
 
+
-
<meta name="robots" CONTENT="index,follow"> - seite taucht in google auf = visible web
+
-
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> - seite taucht nicht in google auf = deep web
+
-
 
+
-
<meta name="language" CONTENT="de"> - sprache der seite ist deutsch
+
-
<meta name="author" content="Karl Dietz"> - ersteller der seite heisst: k.dz.
+
-
  Diese Metadaten sind ein wichtiger Part des [[Semantic Web]]. - s.a. Dublin Core.
+
  Im Browser clicken auf: ANSICHT
 +
Dann auf: Seitenquelltext ansehen
.
.
Zeile 86: Zeile 80:
  pre
  pre
  >
  >
-
  dies ist ein schöner Kurs - so so
+
  dies ist ein HTML-Kurs
  </ p r e>
  </ p r e>
Zeile 133: Zeile 127:
HTML-Zeichenreferenz in SelfHTML: http://de.selfhtml.org  
HTML-Zeichenreferenz in SelfHTML: http://de.selfhtml.org  
-
 
-
.
 
-
 
-
== Seitenquelltext ansehen ==
 
-
 
-
Ansicht
 
-
Seitenquelltext ansehen
 
.
.
Zeile 159: Zeile 146:
== SelfHTML online / SelfHTML als Buch ==
== SelfHTML online / SelfHTML als Buch ==
-
http://de.selfhtml.org
+
DIE site zum thema ist: http://de.selfhtml.org
Der IT-Fachverlag Addison-Wesley und Stefan Münz, der Initiator und Autor von SelfHTML machen allen an Webentwicklung Interessierten ein tolles Geschenk: Münz' Buch "Professionelle Websites" gibt es als kostenlosen Download ... http://aktuell.de.selfhtml.org/weblog/schenk_kultur_verlage
Der IT-Fachverlag Addison-Wesley und Stefan Münz, der Initiator und Autor von SelfHTML machen allen an Webentwicklung Interessierten ein tolles Geschenk: Münz' Buch "Professionelle Websites" gibt es als kostenlosen Download ... http://aktuell.de.selfhtml.org/weblog/schenk_kultur_verlage
Zeile 167: Zeile 154:
== HTML erzeugen per ... ==
== HTML erzeugen per ... ==
-
  mit der Hand am Arm im Editor oder hier im Wiki
+
  mit der Hand am Arm im Editor, zB NotePad oder hier im Wiki
  mit [[Word]] schreiben und dann als HTML abspeichern
  mit [[Word]] schreiben und dann als HTML abspeichern
  mit [[PowerPoint]] schreiben und dann als HTML abspeichern
  mit [[PowerPoint]] schreiben und dann als HTML abspeichern
Zeile 186: Zeile 173:
.
.
-
== Zusatzinfos beim img tag ==
+
== Zusatzinfos beim image tag ==
Das <img> Tag zum Einfügen eines Bildes in (X)HTML kann mittels einiger Attribute mit Textinformationen über das Bild versehen werden.
Das <img> Tag zum Einfügen eines Bildes in (X)HTML kann mittels einiger Attribute mit Textinformationen über das Bild versehen werden.
Zeile 200: Zeile 187:
.
.
 +
 +
== Meta daten - engl. meta tags ==
 +
 +
<meta name="keywords" CONTENT="eLearning Recherche Newsletter Suchmaschinen ">
 +
<meta name="description" CONTENT="AKI Stuttgart">
 +
 +
<meta name="robots" CONTENT="index,follow"> - seite taucht in google auf = visible web
 +
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> - seite taucht nicht in google auf = deep web
 +
 +
<meta name="language" CONTENT="de"> - sprache der seite ist deutsch
 +
<meta name="author" content="Karl Dietz"> - ersteller der seite heisst: k.dz.
 +
 +
Die Metadaten sind ein wichtiger Part im [[Semantic Web]]. - s.a. Dublin Core.
.
.
-
== pc2 - Die steinernen Jungfrauen ==
+
== Die steinernen Jungfrauen ==
 +
 
 +
Übungstext zum eigenen formatieren
 +
 
 +
.
<b>
<b>
Zeile 223: Zeile 227:
.
.
-
== pc4 Am Anfang war die Tat ==
+
== Beispiele von Homepages ==
-
 
+
-
>html<
+
-
 
+
-
>h1< Test eines geschriebenen Textes >br<
+
-
 
+
-
Hallo, wie geht es Dir?
+
.
.
-
== Flechtzöpfe ==
+
Flechtzöpfe == http://kupferzopf-flechtfrisuren.de
-
 
+
-
http://kupferzopf-flechtfrisuren.de
+
.
.
-
== Höhlen u.a. ==
+
Höhlen u.a. Fotos == http://www.schilling-wn.de
-
 
+
-
http://www.schilling-wn.de
+
.
.

Version vom 6. Mai 2009, 08:37 Uhr

Inhaltsverzeichnis

HTML - die Sprache des Internet - 06.05.2009 - VHS ES

Hypertext Markup Language (HTML) ist die Sprache des Internet, genauer des World Wide Web. In diesem Seminar wird die Fähigkeit vermittelt, HTML-Dokumente zu verstehen (Header, Body, Meta Tags) und einfache HTML-Dokumente selbst zu erstellen und zu formatieren.

Vorkenntnisse: Interneteinführungskurs

Referent: Karl Dietz

06.05.09, 18.00 - 21.00 Uhr, VHS Esslingen

.

HTML - Infos via Wikipedia

Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache), oft auch kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die zB über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Die Auszeichnungssprache wurde vom World Wide Web Consortium (W3C) bis Version 4.01 weiterentwickelt

http://de.wikipedia.org/wiki/Hypertext_Markup_Language

http://de.wikipedia.org/wiki/Kategorie:HTML

.

Aufbau einer HTML-datei

<html>
<head>
<title> Titel </title>
<meta name=" ...>
</head>
<body> Text </body>
</html>

.

Seitenquelltext ansehen

Im Browser clicken auf: ANSICHT
Dann auf: Seitenquelltext ansehen

.

Überschriften mit h1 - h6


<h1 align="center">HTML - die Sprache des Web</h1>

<h2 align="center">HTML - die Sprache des Web</h2>

<h6 align="center">HTML - die Sprache des Web</h6>

<h4 align="center">HTML - die Sprache des Web</h4>

<h5 align="center">HTML - die Sprache des Web</h5>
 
<h6 align="center">HTML - die Sprache des Web</h6>

.

Text und Textauszeichnung

Fette Schrift (Beispiel: fett) 
Kursive Schrift (Beispiel: Der schiefe Turm von Pisa) 
Courier, also eine nicht-proportionale Schrift (Beispiel: Sehr geehrte Damen und Herren) 

.

Vorformatierter Text

<
pre
>
dies ist ein HTML-Kurs
</ p r e>

.

Zeilenumbrüche und Absätze

 

 <br> - Zeilenumbruch

 <p> - Absatz

.

Listen im Dokument einfügen

 <ul>
    <li>zeile 1 der liste</li>
    <li>zeile 2 der liste</li>
    <li>zeile 3 der liste</li>
 </ul>

.

Links und Fotos und Mailadressen

Links: <a href="www.adresse.de">angezeigter text im browser</a>
 Fotos: <img align="right" src="http://www.karldietz.de/2007/v1.jpg">
 Ausrichtung per: align="right" align="left" align="center"
<a href="mailto:fritz@url.org">Fritz, fritz@url.org</a>

.

Sonderzeichen in HTML

  • Ellipse = Auslassungszeichen = … = …
  • Gedankenstrich = Halbgeviert = – = –
  • An- und Abführungszeichen = „ und “ = „ und ”

HTML-Zeichenreferenz in SelfHTML: http://de.selfhtml.org

.

Farben in HTML

      • ...und falls es in ROT sein soll...
      • ...falls es mal in BLUE sein soll...
      • ...oder in GREEN ...
      • ...oder in yellow ...
      • ...oder in brown ...
      • ...oder in magenta ...
      • ...oder in grau ...
      • ...oder in dark ...
      • ...oder in white ... ...ist in weiss :)

.

SelfHTML online / SelfHTML als Buch

DIE site zum thema ist: http://de.selfhtml.org

Der IT-Fachverlag Addison-Wesley und Stefan Münz, der Initiator und Autor von SelfHTML machen allen an Webentwicklung Interessierten ein tolles Geschenk: Münz' Buch "Professionelle Websites" gibt es als kostenlosen Download ... http://aktuell.de.selfhtml.org/weblog/schenk_kultur_verlage

.

HTML erzeugen per ...

mit der Hand am Arm im Editor, zB NotePad oder hier im Wiki
mit Word schreiben und dann als HTML abspeichern
mit PowerPoint schreiben und dann als HTML abspeichern
mit HTML-software, zB Dreamweaver oder Frontpage oder ...

.

HTML Einführungen

http://www.lerneniminternet.de/htm/html_lernen_g.html

http://www.inf.hs-anhalt.de/html/einfuehr.htm

http://www.karzauninkat.com/Goldhtml/

http://webdesign.crissov.de/Typographie

.

Zusatzinfos beim image tag

Das <img> Tag zum Einfügen eines Bildes in (X)HTML kann mittels einiger Attribute mit Textinformationen über das Bild versehen werden.

alt: ein <img src="monalisa.gif" alt="Mona Lisa "> fügt einen sogenannten Alternativtext ein. Dieser wird angezeigt falls das Bild nicht geladen werden kann, etwa wenn die referenzierte Bilddatei nicht existiert. Diese Angabe ist Pflicht. Für unbedeutende Bilder wie etwa einem Spacer-GIF kann alt="" angegeben werden, dann wird nichts angezeigt.

title: ein <img src="monalisa.gif" title="Picasso hat dieses Bild um 1503 gemalt"> Öffnet ein Tooltip mit dem Titel wenn man den Mauszeiger auf das Bild bewegt (title kann auch bei Links eingesetzt werden, wie bei diesem hier).

longdesc: <img src="monalisa.gif" longdesc="beschreibung.htm"> verlinkt auf ein externes Dokument mit einer Beschreibung des Bildes. Ein besonders wichtiges Bild, wie beispielsweise ein Diagramm, kann manchmal nur schlecht mit ein paar Worten beschrieben werden. Hier kann es in einem eigenen Dokument ausführlich beschrieben werden. Blinden Menschen werden auf diese Art Grafiken zugänglich gemacht. Die Robots der Suchmaschinen sind übrigens auch "blind" und ignorieren Grafiken ohne alt, title oder longdesc.

aus: http://netzwelt.gaming-hut.de/sections.php?op=viewarticle&artid=31

.

Meta daten - engl. meta tags

<meta name="keywords" CONTENT="eLearning Recherche Newsletter Suchmaschinen ">
<meta name="description" CONTENT="AKI Stuttgart">
<meta name="robots" CONTENT="index,follow"> - seite taucht in google auf = visible web
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> - seite taucht nicht in google auf = deep web
<meta name="language" CONTENT="de"> - sprache der seite ist deutsch
<meta name="author" content="Karl Dietz"> - ersteller der seite heisst: k.dz.
Die Metadaten sind ein wichtiger Part im Semantic Web. - s.a. Dublin Core.

.

Die steinernen Jungfrauen

Übungstext zum eigenen formatieren

.

  • Der Sage nach lebte auf der Eselsburg einst ein hübsches, aber hartherziges Fräulein, dem kein Freier gut genug war.
  • Als nach Jahren keiner mehr um sie warb, begann sie die Männer zu hassen.
  • Ihren Mägden untersagte sie jeglichen Umgang mit ihnen.
  • Doch die vergnügten sich insgeheim mit den jungen Fischern am Fluss

    Darüber war das Burgfräulein so erbost, dass sie ihre Mägde mit den Worten "Werdet zu Stein" verfluchte. Die beiden erstarrten bei ihrer Flucht. …Noch in derselben Nacht brannte die Eselsburg vom Blitz getroffen nieder das „Burgfräulein ” starb. 1608 via www </b>

    .

    Beispiele von Homepages

    .

    Flechtzöpfe == http://kupferzopf-flechtfrisuren.de

    .

    Höhlen u.a. Fotos == http://www.schilling-wn.de

    .

Meine Werkzeuge