Zurück   HTML Forum > Programmierung > HTML

HTML In dem Forum bekommst du nützliche Tipps und schnelle Hilfe zu deinen Fragen rund um HTML und XHTML.

Neues Thema erstellen  Antwort
 
Themen-Optionen Thema durchsuchen
Alt 06.07.2011, 00:20   #1
Neuer Benutzer
 
Registriert seit: 06.07.2011
Beiträge: 3
Standard Website erstellen für anfänger.

So ich werde euch den Grundbeustein jeder HomePage erklären und Zeigen wie man damit Arbeiten kann um Pages zu erstellen.

Also erstes solltet ihr euch einen Vernünftigen Editor besorgen.
Dazu empfehle ich Proton, aus dem Grund da er Syntaxschmene hat und
Zeilenangaben.
Also fangen wir dann mal an.

Schritt 1 - Der Grundbaustein

Jede Homepahe fängt mir diesen Bausteinen an:
Code:
<html>  <head> <title>Hallo!</title> </head> <body> Seiteninhalt </body> </html>
Wenn ihr das in Proton habt speichert die Datei.
Da Proton ein Editor zum schreiben vo Programmen/Pages ist weiß er nicht welche Datenendung er geben soll.
Ihr könnt euch entscheiden Entweder .html oder .htm es kommt afs gleiche herraus. Also Speichern unter -> Dateiname: ersteseite.htm
Ich empfehle euch die Seite immer neu aufzurufen im Browser um zu schauen ob alles bei euch klappt.
Diese Befehle dürften den Meisten Nutzern hier nicht unbekannt sein.
Es geht wie in einem Forum ein Bereich zu öffnen und zu schließen.
Jede Seite fängt mit <html> an. Das zeigt dem Browser das eine HTML Seite gespartet wird. Danach kommt der Head (Kopf bereich) Eigendlich nur geeignet um CSS Datein einzubinden aber dazu später mehr. Im Headbereich kommt auch der Titel der Seite der oben am Fensterrand des Browsers Angezeigt wird.Nun den Head schließen da wir ihn nichtmehr brauchen.
Nun der eigendliche Bereich - Der Body. Im Body kommt alles was so für die Seite wichtig ist rein. Es spielt sich alles hier ab (Sogut wie).
Man kann hier seine Bilder einbauen, Tabellen erstellen oder nur einfache Texte schreiben.


Schritt 2 - Bilder und Links einfügen:

Bilder und Links sind sehr einfach einzufügen.


Bilder haben diesen HTML Code

Code:
<img src="http://www.google.de/intl/de_de/images/logo.gif">
Ein Bildbereich muss nicht geschlossen werden!
Dieser Befehl zeigt nun Das Googlelogo.

wenn du grafiken verwenden möchtest die im gleichen verzeichnis liegen wie deine HTML Seite brauchst du lediglich den Namen und die Endung des Bildes

Bsp: logo.jpg oder Foto.gif

Dann lautet der Befehl so

Code:
<img src="Logo.jpg">
Einfache Sache.

Kommen wir zu den Links ohne denen eh nichts geht.
Im Grunde genommen sind Links nichts weiter schweres aber sehr sehr wichtig!

Ein Link geht so:
Code:
<a href="http://www.google.de">Google besuchen</a>
Nehmen wir den Befehl auseinander.
Also Das Href steht für Hyperreferend (keine ahnung was da nochmal heißt ^^) danach wie bei der IMG SRC die Seitenangabe machen. Hier wird Google verlinkt. Nach der Spitzklammer kommt der Name den der Link ahben soll der dann im Browser angezeigt wird. Hier wird dann im Browser Google besuchen stehen. nach dem Linktext wird der Link geschlossen mit </a>

Wenn ihr den den Link in einem neuen Fenster öffnen wollt sieht ein Befehl so aus

Code:
<a href="http://www.google.de" target="_blank">Google besuchen</a>
Nun sollte bei einem Klick google in eigenständigen Fenster erscheinen.
Das hat den Vorteil das der Besucher weiterhin auf eurer Seite bleibt.
Verlinkung ohne target sollten ausschließlich genutzt werden um eine eurer 2.ten Seiten auszurufen. Sprich Ihr ahbt die Startseite von euch und Wollt beispielsweiße auf eure Fotos. Dann lasst target weg.

Man kann auch Bilder verlinken das sehe dann so aus

Code:
<a href="http://google.de" target="_blank"><img src="Bilderlink"></a>
Schritt 3 -Schriftgröße und Dekorationen:

Fangen wir an mit der Deko!
Immoment sollte der Hintergrund der seite noch weiß sein aber das können wir schnell ändern.

Zurück zum Body

Code:
<body bgcolor="red">
Das sollte euren Hintergrund Rot machen.
man kann genau so gut Farbcodes verwenden.

Code:
<body bgcolor="#FF0033">
Das amcht den Hintergrund auch rot aber in einem anderen Ton.
Hier findet ihr viele HTML Farcodes
http://www.html-php-mysql.de/generatoren/colors.php
Kommen wir zu den Balken.
Ein Balken geht sehr einfach.

Code:
<hr>
das wars schon. Man kann einen Balken nehmen um die Überschrift vom Restlichen Seitenteil zu "trennen"

Nun die Schriftfarbe.

Code:
<font color="red">Test</font>
Das wird eure Schrift Rot machen

Nun Die Schrift größe.
Dazu einfach <hX> nehmen (X Steht füreine Zahl zwischen 1 und 10)
und </hX> zum Schließen.

Schritt 4 - Tabellen

So nun kommen wir zu dem Teil wo es langsam Intressanter wird!
Tabellen sind für alles mögliche Geeignet wie eine Reihe von Links oder einfach mal euren Stundenplan in HTML zu schreiben.

Tabellen sehen so aus
Code:
<table border="X"> (X Ist für 0 oder 1. Bei 0 ist kein Rand da bei 1 ja) <tr> Zeilenangabe <td> Spaltenangabe </td> </tr> </table>
Ein einfaches Beispiel.
Ihr möchtet euren Stundenplan erstellen.

So würde es dann aussehen

Code:
<table border="1"> <tr>  <- Für die 1 Zeile <td> Montag </td> <td> Dienstag </td> <td> Mittwoch </td> <td> Donnerstag </td> <td> Freitag </td> </tr> <- Erste Zeile Schließen und neue Öffnen <tr> <td> Deutsch </td> <- Die Tabelle würde nun unter Montag Deutsch schreiben. Ein neues                 TD legt sich nun unter Dienstag! <td> Mathe </td> <td> Englisch </td> <td> Englisch </td> <td> Französisch </td> <td> Sport </td>
Das ist jetzt der Code für die Tagzeile und die ersten Stunden.

Geändert von tmthebess (06.07.2011 um 00:22 Uhr)
tmthebess ist offline   Mit Zitat antworten
Neues Thema erstellen  Antwort
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bestell Formular erstellen Jan HTML 0 07.01.2011 15:33
Kontakt Seite erstellen LOeschy HTML 0 28.06.2010 14:57
Intranet erstellen maxdebe HTML 1 28.01.2010 20:05
Ne Seite erstellen Mixer7 PHP 3 17.09.2009 15:58
Cursor in Website einbinden developr CSS 0 07.03.2009 19:56