Beschreibung: Html
HTML (Hypertext Markup Language) ist die Grundlage des World Wide Web's. Es folgt seit der Version 4.0 dem SGML (Standarded Generic Markup Languages) - Standard. Im Seminar verwende ich einen einen leistungsfähigen Freeware- HTML- Editor Phase5 Sie erlernen also das Arbeiten im Quelltext und die Zuhilfenahme einiger der geboteten Hilfsmittel. Ziel des Seminars ist es, Sie zu befähigen WebSeiten zu erstellen, HTML zu verstehen und weiter zu lernen.
Seminarinhalte Grundlagenseminar:
Einführung in HTML
§ HTTP / HTML
§ Titel, Überschriften, Absätze, Abschnitte, Zeilenumbrüche
§ Linien, Listen, Sonderzeichen
§ Links, Relative und absolute Adressierung
Werkzeuge
Tabellen
§ Die Table - Umgebung
§ Zeilen und Zellen
§ Daten- und Header-Zellen
§ Formatierung von Tabellen
Verschiedene Grafikformate
Framesets
§ Verwalten von Frames
§ Berücksichtigung der Frames bei Hyperlinks
Integration von WWW-Seiten im Netz
§ Adressierung im Server
§ Zugriffsrechte und Sicherheit
§ Übertragung der Seiten auf den Server
§ CGI - Scripte
§ Java - Applets
Rechtliche Fragen zum Internet
Fortgeschrittene Seminarinhalte
Die Hypertextsprache HTML
§ HTTP / HTML / SGML / XML
§ Erweiterungen des Dokumentgerüstes (MetaTag’s)
§ Verwendung von SSI
Formatierungen in HTML 4
§ HTML und CSS
§ Lokale und zentrale Stylesheets
§ Klassendefinitionen und Pseudoformate, Textbanner
Formulare
§ Die Form - Umgebung
§ Input - Felder, Auswahllisten
§ Auswertung von Formularen
Aktive Grafiken
§ Browserseitige Imagemaps
Die Integration von WWW-Seiten in das Netz
§ Zugriffsrechte und Sicherheit
§ Ausführungsverzeichnis für Scripte
Multimedia im Internet
§ Video- und Soundformate
§ Einbinden von Plug-Ins
§ Animierte Gif’s
Java - Script und DHTML
§ Ereignisgesteuerte Website
§ Darstellung
Vorstellung: Betrieb eines Servers
§ Server - Software
§ Installation, Administration
| <H1> |
</H1> |
Überschrift: H1 (groß)-H6 (klein) |
| <H1 Align="?"> |
</H1> |
Ausrichtung der Überschrift |
| "center" |
/ |
zentriert |
| "left" |
/ |
links |
| "right" |
/ |
rechts |
| "justify" |
/ |
Blocksatz |
| <P> |
</P> |
Absatz |
| <BR> |
/ |
Zeilenumbruch erzwingen |
| <NOBR> |
</NOBR> |
keinen Zeilenumbruch erzwingen |
| <FONT FACE="?"> |
</FONT> |
Schrifart, auch eine zweite zur Auswahl mit Komma verbinden |
| <FONT SIZE="?"> |
</FONT> |
Schriftgröße (1-7), auch für <H>; Schriftgröße verändern mit + / - 1,2,3... |
| <HR> |
/ |
Trennlinie mit 100% Länge, 2Pkt Breite, grau, zentriert |
| <HR Width="?"> |
/ |
Weite einstellen (in Prozent oder in Bildpunkten) |
| <HR Size="?"> |
/ |
Breite einstellen (in Bildpunkten) |
| <HR Color="?"> |
/ |
Farbe einstellen |
| <HR Align="?"> |
/ |
Ausrichtung bestimmen |
| <HR Noshade> |
/ |
Linie ohne Schatten (eindimensional) |
| <B> |
</B> |
Fette Schrift |
| <I> |
</I> |
Kursive Schrift |
| <U> |
</U> |
Unterstrichen |
| <Strike> |
</Strike> |
Durchgestrichen |
| <Sup> |
</Sup> |
Höhersetzen |
| <Sub> |
</Sub> |
Tiefersetzen |
| <Cite> |
</Cite> |
Zitat |
| <Blockquote> |
</Blockquote> |
mit <Cite> Zitat in Blocksatz, Einzug nach rechts versetzt |
| <TT> |
</TT> |
Schreibmaschinenschrift |
| <DFN> |
</DFN> |
Definitonen, z.B. von Abkürzungen |
| <Address> |
</Adress> |
Adressen einfügen |
| <Center> |
</Center> |
zentrierter Text |
| <Blink> |
</Blink> |
blinkender Text (Nur Netscape) |
| <Pre> |
</Pre> |
Ausgabe genau wie eingegeben |
| <KBD> |
</KBD> |
Tastenkombination |
| <Big> |
</Big> |
Schrift auffälliger |
| <Small> |
</Small> |
Schrift unauffälliger |
| <Banner> |
</Banner> |
Text hinter Bilder legen |
| <Font Color="?"> |
</Font> |
Farbeinstellung für alle Texte |
| <Body BGColor="?"> |
</Body> |
Hintergrundfarbe |
| <UL> |
</UL> |
einfache Aufzählung (Punkt, Kreis oder Quadrat) |
| <UL Type="?"> |
</UL> |
anderes Aufzählungszeichen (Punkt=disk, Kreis=circle, Quadrat=square) |
| <LI> |
/ |
Unterpunkt einer Aufzählung |
| <OL> |
</OL> |
nummerierte Aufzählung |
| <OL Start=?> |
</OL> |
Beginn einer nummerierten Aufzählung mit anderer Zahl |
| <OL Type="A"> |
</OL> |
Aufzählung mit Buchstaben A(groß), a(klein) |
| <OL Type="I"> |
</OL> |
Aufzählung mit römischen Zahlen I(groß), i(klein) |
| <OL Type="?" Start="?"> |
</OL> |
andere Aufzählung mit anderem Anfang |
| <OL Compact> |
</OL> |
reduzierter Einzug |
| <LI> |
</LI> |
Unterpunkt einer Aufzählung |
| <LI Value="?"> |
</LI> |
Aufzählung in anderen Schritten (z.B. 1, 3, 5, 8) |
| <DL> |
</DL> |
Definitionsliste |
| <DT> |
</DT> |
Begriff der Liste |
| <DD> |
</DD> |
Definition des Begriffs |
| <A HREF="?">? |
</A> |
Hyperlink im selben Fenster (1.?=Dateiname mit Endung [Name der Datei]) |
| <A HREF="?" Target="_blank" o."_new">? |
</A> |
Hyperlink in neuem Fenster (2.?=Name des Links [das wird ausgegeben]) |
| <A Name="?">? |
</A> |
Festlegung einer Textmarke (1.?=Name, 2.?=Ausgabe) |
| <A HREF="#?">? |
</A> |
Sprung zu einer Textmarke (1.?=gleicher Name der Textmarke, 2.?=Ausgabe) |
| <A HREF="?#?" >? |
</A> |
Link zu Textmarke anderer Seite (1.?=Dateiname,2.?=Markenname,3.?=Ausgabe) |
| <Marquee> |
</Marquee> |
Laufblaken (bewegter Text) auch für Hyperlinks (nur im Internet Explorer anzeigbar) |
| <Meta Content="?; URL=?"> |
/ |
direkter Sprung zu einer anderen Seite (Content= Verzögerungsdauer in Sekunden) im head angeben |
| <Table> |
</Table> |
Beginn einer Tabelle |
| <Table Border="?"> |
</Table> |
Tabelle mit bestimmter Rahmenstärke (0 für kein Rahmen) |
| <Table Width=?> |
</Table> |
Bestimmung der Weite in Pixel oder Prozent (mit " ") |
| <Table Bordercolor="?"> |
</Table> |
Rahmenfarbe |
| <Table Bordercolorlight="?"> |
</Table> |
Zweifarbiger Rahmen (helle Farbe) |
| <Table Bordercolordark="?"> |
</Table> |
Zweifarbiger Rahmen (dunkle Farbe) |
| <Table Cellpadding="?"> |
</Table> |
Abstand Text vom äußeren Rand |
| <Table Cellspacing="?"> |
</Table> |
Abstand Text vom inneren Rand |
| <TR> |
</TR> |
Zeile in der Tabelle festlegen |
| <TR Align="?"> |
</TR> |
Ausrichtung der gesamten Zeile |
| <TD> |
</TD> |
Spalte in der Zeile festlegen |
| <TH> |
</TH> |
Spalte in der Zeile, in fetter Schrift, festlegen |
| <TD o.TH width="?"> |
</TD o.TH> |
Weitenangabe der Spalte |
| <TD o.TH Align="?"> |
</TD o.TH> |
Ausrichtung der Spalte |
| <TD o.TH Rowspan=?> |
</TD o.TH> |
Verbinden von Zeilen |
| <TD o.TH Colspan=?> |
</TD o.TH> |
Verbinden von Spalten |
| <TD o.TH BGColor="?"> |
</TD o.TH> |
Hintergrundfarbe |
| <Caption Align="?"> |
</Caption> |
Hinweise zur Tabelle oben(top), unten(bottom), links(left), rechts(right) |
| <IMG SRC="file:///?"> |
/ |
Einbinden einer Grafik im lokalen Rechner (%20 für Leerzeilen) |
| <IMG SRC="?"> |
/ |
Einbinden einer Grafik im Web (?=Dateiname mit Endung [Groß/Klein beachten] |
| <IMG SRC="?/?"> |
/ |
Einbinden aus Unterverzeichnis (1.?=Ordner, 2.?=Datei) |
| <IMG Border="?" SRC="?"> |
/ |
Rahmen um Grafik, mit Angabe der Stärke |
| <IMG SRC="?" ALT="?"> |
/ |
Text anstelle der Grafik (z.B. bei langem Laden) |
| <IMG SRC="?" Width="?" Height="?"> |
/ |
Größe der Grafik bestimmen |
| <IMG SRC="?"Aling="?"> |
/ |
Ausrichtung der Grafik |
| <IMG SRC="?" Align="?" HSpace="?"> |
/ |
Ausrichtung mit horizontalem Abstand Grafik/Text in Pixeln |
| <IMG SRC="?" Align="?" VSpace="?"> |
/ |
Ausrichtung mit vertikalem Abstand Grafik/Text in Pixeln |
| <P><IMG SRC="?"><P> |
/ |
kein Text um die Grafik |
| <A HREF="?"><IMG SRC="?"> |
</A> |
Grafik als Hyperlink |
| <Body Background="?"> |
</Body> |
Hintergrundbild (Datei mit Endung) |
Kopierschutz mit Warnung:
<script language="JavaScript"> function click() {if (event.button==2) {alert('Hand ab')}} document.onmousedown=click </script>
Kopierschutz ohne Warnung:
<br> <script language=JavaScript> var message=""; function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu
=clickIE;} </script></br>
Markiersperre:
<br> <script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script></br>
Erstelle ein Hintergrundbild
für deinen Blog!
Kopiere diesen HTML code in einen neuen Blogeintrag!
<table border="0" width="100%"
background="die url der grafik"><tr>
<td width="100%">dein text</td>
</tr></table>
Ein Video im Blog abspielen lassen!
Bei diesem HTML code kannst du ein Video im Blog abspielen lassen...
Sobald man mit dem Mauszeiger drauf zeigt startet das video...
Mit der ESC- Taste lässt es sich wieder beenden...
Kopiere diesen HTML code in deinen Blogeintrag...
<CENTER><IMG start=mouseover height=250
alt=video dynsrc=url des videos width=350 border=2></CENTER>
Verbreitere deinen Space!
Wenn du deinen Space verbreitern möchtest
musst du dieses Layout wählen...
Als nächstes ziehst du einfach nur dein Custom Html Modul als
letztes Modul in die Mittlere Spalte... Dann gibst du noch diesen
HTML code in das Modul ein und fertig ist die Verbreiterung!
</table></table><table width=50><tbody><tr><td>
VISITOR TIMER
Leucht Schrift
Nimm die HTML Codes und ersetze die wörter " Dein Text hier" mit deinen Text, die einen Leucht Effekt haben sollen!!!
Codes:
Lila Glow:
<FONT style="FONT-SIZE: 8pt; FILTER: glow(color=purple); WIDTH: 100%; FONT-FAMILY: ????" color=#ffffff><B>"DEIN TEXT HIER"</B></FONT>
Grün Glow:
<FONT style="FONT-SIZE: 8pt; FILTER: glow(color=green); WIDTH: 100%; FONT-FAMILY: ????" color=#ffffff><B>"DEIN TEXT HIER"</B></FONT>
Gelb Glow:
<FONT style="FONT-SIZE: 8pt; FILTER: glow(color=yellow); WIDTH: 100%; FONT-FAMILY: ????" color=#ffffff><B>"DEIN TEXT HIER"</B></FONT>
Blau Glow:
<FONT style="FONT-SIZE: 8pt; FILTER: glow(color=blue); WIDTH: 100%; FONT-FAMILY: ????" color=#ffffff><B>"DEIN TEXT HIER"</B></FONT>
Rot Glow:
<FONT style="FONT-SIZE: 8pt; FILTER: glow(color=red); WIDTH: 100%; FONT-FAMILY: ????" color=#ffffff><B>"DEIN TEXT HIER"</B></FONT>
Kopiere einen HTML Code und befolge die Erklärung
-
Klick in deinen Blog auf
-
Füge den Code den du kopiert hast in deinen Blog ein, mit deinen text
-
Klick auf und schau dein Ergebnis an
-
Deinen eintrag veröffentlichen---->>> Fertig
Mehrere Clips im Player
<ASX Version="3.0">
<title>Hier kommt der Titel für die Playliste rein.</title>
<entry>
<title>Name des 1. Musiktitels</title>
<author>Name des 1. Interpretens</author>
<Ref href="Kompletter Link zum Musiktitel irgendwo im Web"/>
</entry>
<entry>
<title>Name des 2. Musiktitels</title>
<author>Name des 2. Interpretens</author>
<Ref href="Kompletter Link zum Musiktitel irgendwo im Web"/>
</entry>
</asx>
video im blog
<CENTER><IMG start=mouseover height=250 alt=video dynsrc=http://gload.de/preview.php?file-b47109b95952c4f0bdf25bafc.avi width=350 border=2></CENTER>
text mit bild im hintergrund
<div style="width: 150; height: 205" align=right>
<IMG src="URL der bild datei" align=right>
<div style="float: right" align=center>
<p align="center"><font face="Times New Roman">dein text</font>
</div>
bild datei mit verlinkung
<a title="Haas-Systemtech" href="http://spaces.msn.com/totoweise/"> <img src="Bildlink hier rein" border=0></a>
bild dateien im blog
<img src="url der bild datei" border=0>
Space verbreiterung mit custom html
</table></table><table width=50><tbody><tr><td>
Möchtest du deinen Messenger Status im Blog anzeigen lassen?
Dann kopiere dir diesen HTML code in deinen Blog!
<!-- Begin Online Status Indicator code -->
<!-- http://www.onlinestatus.org/ -->
<A HREF=http://snind.gotdns.com:8080/message/msn/deine email adresse">
<IMG SRC="http://snind.gotdns.com:8080/msn/deine email adresse"
align="absmiddle" border="0" ALT="MSN Online Status Indicator"
onerror="this.onerror=null;this.src='http://snind.gotdns.com
:8080/
image/msnunknown.gif';"></A>
<!-- End Online Status Indicator code -->
Kalender für die Space
|
|
|
|
| Mi |
Do |
Fr |
Sa |
So |
Mo |
Di |
| 1 |
2 |
3 |
4 |
5 |
6 |
7 |
| 8 |
9 |
10 |
11 |
12 |
13 |
14 |
| 15 |
16 |
17 |
18 |
19 |
20 |
21 |
| 22 |
23 |
24 |
25 |
26 |
27 |
28 |
| 29 |
30 |
31 |
T |
O |
T |
O |
|
|
|
|
|
|
|
<DIV align=center>
<TABLE cellSpacing=3 cellPadding=3 border=7>
<TBODY>
<TR>
<TD align=middle colSpan=7><B>K-Space January 2006<B></B></B></TD>
<TR>
<TD align=middle colSpan=7><I><A href=http://><IMG alt="Click 2 link SYSTEMTECH" src="http://x4.putfile.com/9/24516391529.gif" border=0></A></I></TD></TR>
<TR>
<TD align=middle>Sun</TD>
<TD align=middle>Mon</TD>
<TD align=middle>Tue</TD>
<TD align=middle>Wed</TD>
<TD align=middle>Thu</TD>
<TD align=middle>Fri</TD>
<TD align=middle>Sat</TD></TR>
<TR>
<TD align=middle>1</TD>
<TD align=middle>2</TD>
<TD align=middle>3</TD>
<TD align=middle>4</TD>
<TD align=middle>5</TD>
<TD align=middle>6</TD>
<TD align=middle>7</TD>
<TR>
<TD align=middle>8</TD>
<TD align=middle>9</TD>
<TD align=middle>10</TD>
<TD align=middle>11</TD>
<TD align=middle>12</TD>
<TD align=middle>13</TD>
<TD align=middle>14</TD></TR>
<TR>
<TD align=middle>15</TD>
<TD align=middle>16</TD>
<TD align=middle>17</TD>
<TD align=middle>18</TD>
<TD align=middle>19</TD>
<TD align=middle>20</TD>
<TD align=middle>21</TD></TR>
<TR>
<TD align=middle>22</TD>
<TD align=middle>23</TD>
<TD align=middle>24</TD>
<TD align=middle>25</TD>
<TD align=middle>26</TD>
<TD align=middle>27</TD>
<TD align=middle>28</TD></TR>
<TR>
<TD align=middle>29</TD>
<TD align=middle>30</TD>
<TD align=middle>31</TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD></TR>
<TR>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD>
<TD align=middle></TD></TR></TBODY></TABLE></DIV>
Tables
CODICE:
<TBODY><TR><TD>texto</TD></TR>
</TBODY></TABLE>
CODICE:
<TABLE borderColorDark=gray align=center borderColorLight=white border=10 width=150 height=100>
<TBODY><TR><TD>texto</TD></TR>
</TBODY></TABLE>
CODICE:
<TABLE height=100 borderColorDark=#4080ff width=150 align=center borderColorLight=#80ff40 border=10>
<TBODY><TR><TD>texto</TD></TR>
</TBODY></TABLE>
CODICE:
<TABLE borderColorDark=red align=center borderColorLight=white border=10 width=150 height=100>
<TBODY><TR><TD>texto</TD></TR>
</TBODY></TABLE>
CODICE:
TEXTO
<TABLE style="BORDER: red 2pt dotted" width=200 border=0>
<TBODY><TR><TD>
TEXTO
CODE:
TEXTO
<TABLE style="BORDER: red 3pt dotted" width=200 border=0>
<TBODY><TR><TD>
TEXTO
CODICE:
TEXTO
<TABLE style="BORDER: red 6pt dotted" width=200 border=0>
<TBODY><TR><TD>
TEXTO
</TD></TR></TBODY></TABLE>
CODICE:
TEXTO
<TABLE style="BORDER: red 2pt dashed" align=center border=0 width=200>
<TBODY><TR><TD>
TEXTO
</TD></TR></TBODY></TABLE>
CODICE:
TEXTO
<TABLE style="BORDER: red 4pt dashed" align=center border=0 width=200>
<TBODY><TR><TD>
TEXTO
</TD></TR></TBODY></TABLE>
CODICE:
TEXTO
<TABLE style="BORDER: red 6pt dashed" align=center border=0 width=200>
<TBODY><TR><TD>
TEXTO
</TD></TR></TBODY></TABLE
CODICE:
TEXTO
<TABLE cellSpacing=5 width=200 align=center border=10>
<TBODY><TR>
<TD vAlign=top>
TEXTO
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
Table 3:
Tabel 1
|
IT und msn Knowledge |
ihr könnt das
verschachteln wie ihr
wollt und alle cells
unabhängig
bestücken
|
The code:
<table cellPadding="5" border="1" id="table1">
<td>Text for Cell 1</td>
<td>Text here for Cell 2</td>
</table>
Taple 2
|
 |
 |
| IT und msn Infospaces |
The code:
<table cellPadding="5" border="1" id="table1">
<td>Text for Cell 1</td>
<tr>
<td>Text here for Cell 2</td>
</tr>
<tr>
<td>Text here for Cell 3</td>
</tr>
</table>
First Table:
The HTML CODE FOR THIS TABLE IS:
<DIV style="BORDER-RIGHT: #66cc66 8pt double; BORDER-TOP: #66cc66 8pt double; BORDER-LEFT: #66cc66 8pt double; WIDTH: 100%; BORDER-BOTTOM: #66cc66 8pt double; BACKGROUND-COLOR: #663333" align=center>
<TABLE cellSpacing=0 width=350 border=0>
<TBODY>
<TR>
<TD>
<DIV style="WIDTH: 300px; HEIGHT: 350px">
<P align=center><IMG style="FILTER: alpha(opacity=60, finishOpacity=0,style=3); WIDTH: 348px; HEIGHT: 355px" src="Your Image URL HERE" align=right></P>
<P><BR></P>
<DIV style="FLOAT: left; WIDTH: 350px; HEIGHT: 350px" align=center><B>Type Here Or Copy Your Text</B></DIV></DIV></TD></TR></TBODY></TABLE></DIV>
2 Table:
THIS ONE IS LIKE A IFRAME, But not, is just for one line, push enter and other like this will be created.
2
3
4
=)
HTML CODE For This ONE:
<P align=center><STRONG><FONT size=5></FONT></STRONG><FONT color=#333333> </P></FONT>
<DIV style="BORDER-RIGHT: red 2pt outset; BORDER-TOP: red 2pt outset; BORDER-LEFT: red 2pt outset; BORDER-BOTTOM: red 2pt outset" align=center></DIV
Table 3:
|
IT und msn Knowledge |
ihr könnt das
verschachteln wie ihr
wollt und alle cells
unabhängig
bestücken
|
Tables machen euch unabhängiger
beim gestallten von texten und bilder
Die Html Codes findet ihr hier im spaces unter den blog Tools
Table
HTML CODE:
<DIV><STRONG><FONT color=#ff0000>
<DIV style="BORDER-RIGHT: #333399 1px dashed; BORDER-TOP: #333399 1px dashed; BORDER-LEFT: #333399 1px dashed; BORDER-BOTTOM: #f08080 1px dashed; BACKGROUND-COLOR: #33cc66" align=center><FONT color=#333333> </FONT></DIV></FONT></STRONG></DIV>
toto
HTML CODE:
<DIV style="BORDER-RIGHT: 7pt ridge; BORDER-TOP: 7pt ridge; BORDER-LEFT: 7pt ridge; BORDER-BOTTOM: 7pt ridge; BACKGROUND-COLOR: #ffff66">
<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #cc0033">Type the Text Here</DIV></DIV>
|
Verantwortlich für den Inhalt ist der Autor der Homepage. Kontakt
Kostenlose Homepage von rePage.de
- w -
Flirten und Bilder bewerten - Lovemission.de
|
