HTML

Aus AkiWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(HTML - die Sprache des Internet: 12.11.09 VHS UR)
(robots.txt)
(Der Versionsvergleich bezieht 31 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
.
 
-
 
== HTML - die Sprache des Internet ==
== HTML - die Sprache des Internet ==
Zeile 10: Zeile 8:
zu erstellen und zu formatieren.
zu erstellen und zu formatieren.
-
Vorkenntnisse: Interneteinführungskurs
 
-
Referent: [[Karl Dietz]]
 
-
 
-
12.10.09, 18.30 - 21.45 Uhr, [[VHS Esslingen]]
 
-
 
-
12.11.09, 18.00 - 21.00 Uhr, [[VHS Unteres Remstal]]
 
-
 
-
.
 
-
 
-
.
 
== HTML - Infos via Wikipedia ==
== HTML - Infos via Wikipedia ==
Zeile 49: Zeile 37:
  Dann auf: Seitenquelltext ansehen
  Dann auf: Seitenquelltext ansehen
-
.
+
Auskommentierten Text einsehen
 +
 
 +
zB
 +
 
 +
<!-- <img src="http://www.ekz.de/fileadmin/ekz/cms_old/DBImages/full/748.gif" border="0" width=150 hight=50></a><br> -->
 +
 
 +
 
-
== Überschriften mit h1 - h6 ==
+
== Überschriften in HTML mit h1 - h6 ==
<pre>
<pre>
Zeile 57: Zeile 51:
<h1 align="center">HTML - die Sprache des Web</h1>
<h1 align="center">HTML - die Sprache des Web</h1>
-
<h2 align="center">HTML - die Sprache des Web</h2>
+
<h2 align="right">HTML - die Sprache des Web</h2>
-
<h6 align="center">HTML - die Sprache des Web</h6>
+
<h6> HTML - die Sprache des Web</h6>
<h4 align="center">HTML - die Sprache des Web</h4>
<h4 align="center">HTML - die Sprache des Web</h4>
-
<h5 align="center">HTML - die Sprache des Web</h5>
+
<h5 align="right">HTML - die Sprache des Web</h5>
   
   
-
<h6 align="center">HTML - die Sprache des Web</h6>
+
<h6>HTML - die Sprache des Web</h6>
</pre>
</pre>
Zeile 76: Zeile 70:
  <i>Kursive Schrift (Beispiel: Der schiefe Turm von Pisa) </i>
  <i>Kursive Schrift (Beispiel: Der schiefe Turm von Pisa) </i>
-
 
-
<b> <i>Fette Schrift (Beispiel: fett und kursiv) </b> </i>
 
  <tt>Courier, also eine nicht-proportionale Schrift (Beispiel: Sehr geehrte Damen und Herren) </tt>
  <tt>Courier, also eine nicht-proportionale Schrift (Beispiel: Sehr geehrte Damen und Herren) </tt>
Zeile 83: Zeile 75:
.
.
-
== Vorformatierter Text ==
+
== Vorformatierter Text - pre ==
-
  <
+
  <p r e>
-
  pre
+
  das pre-tag ohne die blanks schreiben
-
  >
+
  und der text wird incl. zeilenumbrüche dargestellt.
-
  dies ist ein HTML-Kurs
+
  ohne das pre-tag müssen zeilenumbrüche per br-tag erzeugt werden.
  </ p r e>
  </ p r e>
 +
.
.
Zeile 106: Zeile 99:
== Listen im Dokument einfügen ==
== Listen im Dokument einfügen ==
 +
 +
Unnummerierte Liste ===
<pre>
<pre>
Zeile 113: Zeile 108:
     <li>zeile 3 der liste</li>
     <li>zeile 3 der liste</li>
  </ul>
  </ul>
 +
</pre>
 +
 +
 +
Nummerierte Liste ===
 +
 +
<pre>
 +
<ol>
 +
    <li>zeile 1 der liste</li>
 +
    <li>zeile 2 der liste</li>
 +
    <li>zeile 3 der liste</li>
 +
</ol>
</pre>
</pre>
Zeile 125: Zeile 131:
<pre>
<pre>
  Fotos: <img align="right" src="http://www.karldietz.de/2007/v1.jpg">
  Fotos: <img align="right" src="http://www.karldietz.de/2007/v1.jpg">
-
Ausrichtung per: align="right" align="left" align="center"
 
</pre>
</pre>
<pre>
<pre>
-
  <a href="mailto:fritz@url.org"> fritz@url.org</a>
+
  <a href="mailto:karl.dz@gmail.com"> karl.dz@gmail.com</a>
</pre>
</pre>
 +
 +
<a href="mailto:karl.dz@gmail.com"> karl.dz@gmail.com</a>
 +
 +
bzw. hier im Wiki einfach: mailto:karl.dz@gmail.com
.
.
 +
 +
== Ausrichtung - links, rechts, zentriert ==
 +
 +
per: align="right" align="left" align="center"
 +
 +
<pre>
 +
zB <img align="right" src="http://www.karldietz.de/2007/v1.jpg">
 +
</pre>
 +
 +
.
 +
 +
== Grösse in prozent oder pixel ==
 +
 +
<pre>
 +
Fotos: <img width="20%" heigth="20%" src="http://www.karldietz.de/2007/v1.jpg">
 +
</pre>
 +
 +
...
 +
 +
Fotos:
 +
<pre>
 +
<img width=100 heigth=100 src="http://www.karldietz.de/2007/v1.jpg">
 +
</pre>
 +
 +
...
== Sonderzeichen in HTML ==
== Sonderzeichen in HTML ==
Zeile 141: Zeile 175:
HTML-Zeichenreferenz in SelfHTML: http://de.selfhtml.org  
HTML-Zeichenreferenz in SelfHTML: http://de.selfhtml.org  
 +
 +
.
 +
 +
.
.
.
Zeile 160: Zeile 198:
== SelfHTML online / als Buch ==
== SelfHTML online / als Buch ==
-
DIE site zum thema ist: http://de.selfhtml.org
+
http://de.selfhtml.org
-
.
+
Addison-Wesley und Stefan Münz machen allen ein Geschenk: "Professionelle Websites" gibt es als kostenlosen Download (28 MB) ... 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
+
-
 
+
-
.
+
HTML Handbuch
HTML Handbuch
Von Stefan Münz, Wolfgang Nefzger
Von Stefan Münz, Wolfgang Nefzger
Veröffentlicht von Franzis Verlag, 2005
Veröffentlicht von Franzis Verlag, 2005
-
ISBN 3772366546, 9783772366543
+
3772366546, 9783772366543
1216 Seiten
1216 Seiten
-
http://books.google.de/books?id=8RQ9ov56FhYC
+
http://books.google.de/books?id=8RQ9ov56FhYC (keine Vorschau mehr am 12.10.09 in ES)
 +
 
 +
HTML und XHTML.
 +
Das umfassende Referenzwerk
 +
Autoren Chuck Musciano, Bill Kennedy
 +
Ausgabe 4
 +
Verlag O'Reilly Germany, 2003
 +
ISBN 3897213508, 9783897213500
 +
Länge 698 Seiten ... 0311
 +
 
 +
SELFHTML: Grafik / Techniken und Begriffe der Bildbearbeitung
 +
Der Alphakanal ist eine Erweiterung der Farbmodelle. Dabei wird für jeden Bildpunkt (Pixel) neben dessen Farbwert ein Alphawert gespeichert. ...
 +
de.selfhtml.org/grafik/techniken.htm ... 190311
-
.
 
== HTML erzeugen per ... ==
== HTML erzeugen per ... ==
Zeile 182: Zeile 227:
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 HTML-software, zB [[Dreamweaver]] oder [[Frontpage]] oder ...
mit HTML-software, zB [[Dreamweaver]] oder [[Frontpage]] oder ...
-
Incomedia WebSite X5 Evolution Evolution 8.0.9 - http://www.websitex5.com
+
Incomedia WebSite X5 Evolution 8.0.9 - http://www.websitex5.com
.
.
== HTML Einführungen ==
== HTML Einführungen ==
 +
 +
HTML4 - [http://www.rrzn.uni-hannover.de/buch.html?&no_cache=1&tx_rrznbuecher_pi1[showUid]=194 - ein herdt-buch. 0303]
http://www.lerneniminternet.de/htm/html_lernen_g.html
http://www.lerneniminternet.de/htm/html_lernen_g.html
Zeile 201: Zeile 246:
http://webdesign.crissov.de/Typographie
http://webdesign.crissov.de/Typographie
-
.
+
Dive into HTML5 Mark Pilgrim http://diveintohtml5.org
 +
 
-
.
 
== Zusatzinfos beim image tag ==
== Zusatzinfos beim image tag ==
Zeile 218: Zeile 263:
aus: http://netzwelt.gaming-hut.de/sections.php?op=viewarticle&artid=31
aus: http://netzwelt.gaming-hut.de/sections.php?op=viewarticle&artid=31
-
.
+
 
== Meta daten - engl. meta tags ==
== Meta daten - engl. meta tags ==
Zeile 231: Zeile 276:
  <meta name="author" content="Karl Dietz"> - ersteller der seite heisst: k.dz.
  <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 Metadaten sind ein wichtiger Part im [[Semantic Web]]. - s.a. [[Dublin Core]].
.
.
-
== Die steinernen Jungfrauen ==
+
        <meta name="geo.region" content="DE-GE" />
 +
        <meta name="geo.position" content="51.56; 7.048" />
-
Übungstext zum eigenen formatieren
+
    http://de.wikipedia.org/wiki/Geo-Tag
 +
    http://tools.themenrelevant.de/#GeoTag
-
.
 
-
Der Sage nach lebte auf der Eselsburg einst ein hübsches, aber
+
==robots.txt==
-
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.
+
-
&hellip;Noch in derselben Nacht brannte die Eselsburg vom
+
-
Blitz getroffen nieder das &bdquo;Burgfräulein &rdquo; starb.
+
-
1608 via www
+
-
.
+
wg. schloss horst in mu-t im april 2018 ...
-
== Beispiele von Homepages ==
 
-
.
 
-
Flechtzöpfe == http://kupferzopf-flechtfrisuren.de
 
-
.
+
Die eigene Website - eLearning-Kurs ab 1. September 2017 ==
-
 
+
Konzept, Installation, Design, Funktion - in fünf Wochen.  
-
Höhlen u.a. Fotos == http://www.schilling-wn.de
+
https://diewebagentin.de = Silke Buttgereit
-
 
+
-
.
+
-
 
+
-
http://commercial-service-melis.de/index.html
+
-
 
+
-
.
+
-
 
+
-
http://www.reitstallepple.de
+
-
 
+
-
.
+

Version vom 8. April 2018, 15:37 Uhr

Inhaltsverzeichnis

HTML - die Sprache des Internet

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.


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
Auskommentierten Text einsehen
zB



Überschriften in HTML mit h1 - h6


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

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

<h6> HTML - die Sprache des Web</h6>

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

<h5 align="right">HTML - die Sprache des Web</h5>
 
<h6>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

das pre-tag ohne die blanks schreiben und der text wird incl. zeilenumbrüche dargestellt. ohne das pre-tag müssen zeilenumbrüche per br-tag erzeugt werden. </ p r e> .

Zeilenumbrüche und Absätze

 

 <br> - Zeilenumbruch

 <p> - Absatz

.

Listen im Dokument einfügen

Unnummerierte Liste ===

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


Nummerierte Liste ===

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

.

Links und Fotos und Mailadressen

 Links: <a href="http://www.google.de">angezeigter text im browser - google</a>
 Fotos: <img align="right" src="http://www.karldietz.de/2007/v1.jpg">
 <a href="mailto:karl.dz@gmail.com"> karl.dz@gmail.com</a>
<a href="mailto:karl.dz@gmail.com"> karl.dz@gmail.com</a>
bzw. hier im Wiki einfach: mailto:karl.dz@gmail.com

.

Ausrichtung - links, rechts, zentriert

per: align="right" align="left" align="center"

 zB <img align="right" src="http://www.karldietz.de/2007/v1.jpg">

.

Grösse in prozent oder pixel

 Fotos: <img width="20%" heigth="20%" src="http://www.karldietz.de/2007/v1.jpg">

...

Fotos:

<img width=100 heigth=100 src="http://www.karldietz.de/2007/v1.jpg">

...

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 / als Buch

http://de.selfhtml.org

Addison-Wesley und Stefan Münz machen allen ein Geschenk: "Professionelle Websites" gibt es als kostenlosen Download (28 MB) ... http://aktuell.de.selfhtml.org/weblog/schenk_kultur_verlage

HTML Handbuch Von Stefan Münz, Wolfgang Nefzger Veröffentlicht von Franzis Verlag, 2005 3772366546, 9783772366543 1216 Seiten http://books.google.de/books?id=8RQ9ov56FhYC (keine Vorschau mehr am 12.10.09 in ES)

HTML und XHTML. Das umfassende Referenzwerk Autoren Chuck Musciano, Bill Kennedy Ausgabe 4 Verlag O'Reilly Germany, 2003 ISBN 3897213508, 9783897213500 Länge 698 Seiten ... 0311

SELFHTML: Grafik / Techniken und Begriffe der Bildbearbeitung Der Alphakanal ist eine Erweiterung der Farbmodelle. Dabei wird für jeden Bildpunkt (Pixel) neben dessen Farbwert ein Alphawert gespeichert. ... de.selfhtml.org/grafik/techniken.htm ... 190311


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 HTML-software, zB Dreamweaver oder Frontpage oder ...

Incomedia WebSite X5 Evolution 8.0.9 - http://www.websitex5.com

.

HTML Einführungen

HTML4 - [showUid=194 - ein herdt-buch. 0303]

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

Dive into HTML5 Mark Pilgrim http://diveintohtml5.org


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.

.

       <meta name="geo.region" content="DE-GE" />
       <meta name="geo.position" content="51.56; 7.048" />
   http://de.wikipedia.org/wiki/Geo-Tag
   http://tools.themenrelevant.de/#GeoTag


robots.txt

wg. schloss horst in mu-t im april 2018 ...



Die eigene Website - eLearning-Kurs ab 1. September 2017 == Konzept, Installation, Design, Funktion - in fünf Wochen.

https://diewebagentin.de = Silke Buttgereit

Meine Werkzeuge