GuxDu Forum
GuxDu Forum
 
Re: HTML- Grundkurs
Neuer Beitrag   Antwort/Ergänzung
 
Autor
Beitrag
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:14   HTML- Grundkurs Zitieren


Das Grundgerüst einer HTML Datei sieht wie folgt aus:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

..dies gilt es auswendig zu lernen.. . Zur Erklärung:

<html> -> ab hier beginnt die HTML Datei
<head> -> hier beginnt der Kopftel einer HTML Datei
<title></title> -> zwischen <title> und </title> steht der Titel der Webseite. Dieser wird oben im Browser angegeben
</head> -> Kopfteil Zuende
<body> -> ab hier steht der Inhalt, der später auf der Homepage zu sehen ist.
</body> -> .. und hier endet er
</html> -> HTML Datei ist ab hier zuende

Anmerkung: Jeder Tag wo geöffnet wird, muss auch geschlossen werden: zb <body> da wird geöffnet und mit </body> wirds geschlossen. Ausnamen werden später gezeigt...

Beispiel einer einfachen HTML Datei:

<html>
<head>
<title>Dies ist meine Erste Homepage</title>
</head>
<body>
Hier ensteht eine Neue Homepage
</body>
</html>



Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:15   Re: HTML- Grundkurs Zitieren


Zuerst stell ich den "Überschriften" Tag vor:

<h1> und <h1>
<h2> und <h2>
<h3> und <h3>
<h4> und <h4>
<h5> und <h5>
<h6> und <h6>

Hierbei wird eine Überschrift ausgegeben: 1 für Sehr Groß und 6 für Klein.
also zb: <h1>Test</h1> sieht ungefähr so aus: Test
und <h6>Test</h6> sieht ungefähr so aus: Test

Textausrichtung:
schreibt man einfach drauflos, wird der Text "Linksbündig" ausgerichtet.
Möchte man den Text Zentriert im Browser angzeigt bekommen, macht man dies mit: zb: <h3 align="center">Dieser Text wäre Zentriert</h3>
Möchte man den Text Rechtsbündig im Browser angezeigt bekommen, macht man dies mit: zb: <h3 align="right">Dieser Text wäre Rechtsbündig</h3>

Alternativ, um eine Text zentriert anzuzeigen könnte man es auch so formulieren: <center>Dieser text steht auch zentriert</center>

um im Browser eine neue Zeile zu "erzwingen" nimmt man folgenden Tag:
<br>
hierbei wird eine neue Zeile angefangen.
Beispiel: Dies ist ein Test<br>für eine neue Zeile
würde so im Browser angezeigt werden:


Dies ist ein Test
für eine neue Zeile

Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:15   Re: HTML- Grundkurs Zitieren


weitere nützliche Tags sind noch:
<b>Test</b> = Test (fett schrift)
<i>Test</i> = Test (kursive schrift)
<sub>Test</sub> = hier würde die Schrift tiefer gestellt ( hier im forum leider nicht möglich )
<sup>Test</sup> = hier würde die Schrift höher gestellt ( hier im forum leider nicht möglich )
<u>test</u> = test ( unterstrichener text )
<s>test</s> = hier würde der text durchgestrichen sein ( hier lim forum leider nicht möglich )

Beispielprojekt:

<html>
<head>
<title>Ein Test für verschiedene tags</title>
</head>
<body>
<h1>Willkommen</h1>
<br>
<br>
Schön das du auf meine <b>Homepage</b> gefunden hast. <br>
Ich hoffe sie gefällt <s>dir</s> <b>Ihnen</b> <br>
<center>
Viel Spaß<br>
wünscht euch <u><b><i>OdinsRabe</i></b></u>
</center>
</body>
</html>


Erklärung:
Zuerst mit dem <h> tag die Überschrift
Dann folgen 2 leere Zeilen durch <br>
das Wort Homepage wird fett ausgegeben, dannach wieder der Zeilenumbruch ( <br> )
"dir" wird durchgestrichen, und "Ihnen" wieder fett.
dannach steht <center> alles was hier steht, ist im Browser Zentriert. Und zwar solange bis wieder </center angegeben wird.
Zudem ist OdinsRabe noch unterstrichen <u></u> , fett <b></b> und Kursiv <i></i>




Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:16   Re: HTML- Grundkurs Zitieren


Listen erstellen:

<ul>
<li>Kapitel1</li>
<li>Kapitel2</li>
<li>Kapitel3</li>
<ul>
<li>Kapitel4</li>
<li>Kapitel5</li>
<li>Kapitel6</li>
</ul>
</ul>

Zur Erklärung:

mit <ul> fängt die Liste an mit </ul> hört sie auf
alles was in der Liste steht wird mit <li> eingeleitet und hört mit </li> auf
die Tabelle kann beliebig fortgeführt werden..

Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:16   Re: HTML- Grundkurs Zitieren


Text einfärben, Schriftgrößen verändern, Textschrift:

Schriftfarbe kann man ändern mit <font color="Farbe">Text</font>
Statt "Farbe" kann man einen Hex Code eingeben.. oder Englische Farbennamen wie zb: green, yellow, gray, red, blue, pink, darkgreen, darkblue, ... usw

Schrift vergrößern mit <font size="Größe">Text</font>
Statt "Größe" nimmt man die Größen 1 für klein bis 6 für Groß

Eine andere Schrift kann man so machen: <font face="SchriftStil">Text</font>
statt "SchriftStil" nimmt man beispielsweise: verdana, comic sans ms, times new roman, switzerland, old english, ... usw
Achtung: Der Benutzer muss die Schrift bei seinem Betriebssystem installiert haben die gezeigt werden soll, sonst wird die Standartschrift genommen

So zb könnte das aussehen:

<html>
<head>
<title>Textfarben Größen und Stile</title>
</head>
<body>
<h3>Überschrift</h3>
<br>
<font color="darkgreen" size="4" face="comic sans ms">Dies ist eine <b>Testseite</b> um zu Demonstrieren was alles möglich ist</font>
<br>
<font color="red">Ich hoffe dieser <font size="5">Workshop</font> macht euch spaß !!</font>
</body>
</html>

Erklärung: Zuerst wird dunkelgrün mit größe 4 in dem Stil : comic sans ms geschrieben, dann wird die farbe geschlossen mit </font> dann wird eine neue Farbe angegeben: nämlich rot und das wort "Workshops" wurde größe "5" genommen und am schluss wieder geschlossen mit </font>

Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:18   Re: HTML- Grundkurs Zitieren


Hyperlinks

ein link gibt man zwischen <body> und </body> ein (also den inhalt..)

der Code für einen Link ist wie folgt:
<a href="URL">NAME</a>

zb:
<a href="http://www.odinsrabe.com">Meine Homepage</a>



Erweiterungen dazu (target) :

<a href="URL" target="_blank">NAME</a>

durch den target="_blank" <- befehl, wird der link wenn man auf ihn klickt in einem neuen Fenster geöffnet.
da gibt es noch:
target="_top" <- hier würde bei klick die Homepage im Selben Fenster Aufgerufen werden
target="_self" <- zielseite wird im selben frame angezeigt in dem sich der link befindet
target="_parent" <- zielseite wird in dem frame wo er sich befindet, in einem übergeordneten frame angezeigt

wenn man auf seine E-Mail adresse leiten möchte gibt man ein:
<a href="mailto:odinsrabe1860( at )yahoo( Punkt )de">Meine Email-Adresse</a>
würde so aussehen href="mailto:odinsrabe1860( at )yahoo( Punkt )de">Meine Email-Adresse


Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:18   Re: HTML- Grundkurs Zitieren


Anker

Wenn man einen langen Text hat, ist es sinnvoll ihn zu Gliedern, und am Anfang Überschriften finden, so das wenn man auf eine Draufklickt.. ans untere Ende springen kann per mausklick.. ( das verhindert das lange suchen desjenigen der sich deine HP anschaut )...

<a name="Irgendwas">Verweisziel</a>
hier kommt weiter text für die homepage.. bla bla
<a href="#Irgendwas">Verweistext</a>
würde man jetzt auf den Verweistext link klicken.. würde der Browser zu dem Verweisziel hinführen... ein beispiel dazu ist hier in diesem Forum die
F.A.Q wenn man auf eine überschrift klickt kommt man hier schnell zum gewünschten ergebnis...

Downloads durch Links:
wenn man was zum Runterladen anbieten möchte tut man die Datei am Besten in eine .zip Datei ( auf dem desktop : rechte maustaste - neuer ordner - zip datei ) und läd sie hoch ins I-net...
<a href="URL.zip">Download Datei</a> würde man jetzt auf die Download Datei klicken, würde man sie runterladen können...

Farben , größen etc ändern:

Im Kapitel Textstrukturen 2 Kapitel 2 wurden text farben und größen verändern angezeigt.. diese kannst du selbstverständlich auch für die links benutzen. Das könnte dann so aussehen:
<a href="http://www.odinsrabe.com" target="_blank"><font color="red" size="4">Meine homepage</font></a> das würde "Meine Homepage" in rot und größe 4 anzeigen...

Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:19   Re: HTML- Grundkurs Zitieren


Tabellen

Eine Tabele beginnt mit <table> und endet mit </table>
eine Zeile öffnet man mit <tr> und schließt man mit </tr>
eine Spalte fügt man hinzu mit <td> und schließt man mit </td>
eine Überschrift könnte man mit <th> und mit </th> schließen.. muss man aber nicht..
:idea:

Demnach könnte Beispielsweise eine Tabelle mit 3 Zeilen und 2 Spalten so aussehen:

<table>
<tr>
<td>Name:</td>
<td>OdinsRabe</td>
</tr>
<tr>
<td>Alter:</td>
<td>19</td>
</tr>
<tr>
<td>Heimat:</td>
<td>Unterfranken</td>
</tr>
</table>





dazu könnte man es noch erweitern :
border="Zahl" könnte man die Rahmenstärke von 1 - 6 anzeigen lassen
background="Bild Url" könnte man ein hintergrundbild bestimmen lassen, und mit bgcolor eine Farbe
bordercolor="farbe" könnte man die Tabellenrahmen farbe bestimmen lassen
width="zahl" könnte man die breite angeben der Tabelle in Pixel
height="zahl" könnte man die höhe angeben der Tabelle in Pixel
... usw

Beispielsweise könnte eine Tabelle in einer Seite so aussehen:

<html>
<head><title>Tabelle</title></head>
<body>
<table border="2">
<tr>
<th bgcolor="grey" width="100"><font color="white">Name</font></font></th>
<th bgcolor="grey" width="50"><font color="white">Alter</font></th>
<th bgcolor="grey" width="150"><font color="white">Herkunft</font></th>
</tr>
<tr>
<td bgcolor="grey"><font color="white">Manuel</font></td>
<td bgcolor="grey"><font color="white">19</font></td>
<td bgcolor="grey"><font color="white">Unterfranken</font></td>
</tr>
<tr>
<td bgcolor="grey"><font color="white">Luciae</font></td>
<td bgcolor="grey"><font color="white">16</font></td>
<td bgcolor="grey"><font color="white">Niedersachsen</font></td>
</tr>
<tr>
<td bgcolor="grey"><font color="white">Nicole</font></td>
<td bgcolor="grey"><font color="white">22</font></td>
<td bgcolor="grey"><font color="white">...</font></td>
</tr>
</table>
</body>
</html>

Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:22   Re: HTML- Grundkurs Zitieren


Grafiken

eine Grafik bindet man ein mit:
<img src="Bildurl.dateiformat">
zb für Bildurl.dateiformat -> http://www.odinsrabe.com/mein-bild.jpg oder http.....haus.gif oder etc.

weitere Attributte:

alt = alternativer text, kurze beschreibung (sieht man wenn man mit der maus kurz auf dem bild hängen bleibt)
border = rahmenstärke
name = bezeichung der grafik
width = breite
..

zb : <img src="BildUrl" alt="Das bin ich im Sommer 2002">

um einen Text das Bild zb Rechts umfließen zu lassen, macht man:

<img src="BildUrl" align="right">
damit der text links neben dem bild angezeigt wird macht man align="left"

Grafik als Link

<a href="LinkUrl"><img src="BildUrl"></a>
sobald man auf das Bild klickt, wird man auf die Seite weitergeleitet, wo LinkUrl steht...


Hintergrundgrafik
für eine Farbe als Homepagehintergrund nimmt man:
<body bgcolor="Farbe"> zb: red, yellow, darkblue, white, ....

für ein Bild als Homepagehintergrund nimmt man:
<body background="BildUrl">

für einen statischen hintergrund erweitert man das ganze auf zb:
<body background="BildUrl" backproperties="fixed">


Ein Stein muss sein die Bohne die sich lohne
 
phantasie
Hpverrückter und Forenbetreibe
avatar

Posts: 35
Member

--> Guxdu-Website
09.05.2008 - 21:22   Re: HTML- Grundkurs Zitieren


hier ist noch ein code für Laufschriften von rechts nach links

<marquee> +++ ist das nicht toll +++ </marquee>

Die Schrift kann auch Farblich und in de Höhe angepasst werden

bei size die höhe
bei color die farbe

<marquee><font size="3"><font color="#003366"> Hie kommt der Text</font></marquee>


Ein Stein muss sein die Bohne die sich lohne
 
Neuer Beitrag   Antwort/Ergänzung
Forum wechseln: 
 


Adwords Alternative Keyword-Advertising | Homepage erstellen & phpBB | Kostenlose Homepage