HTML für Einsteiger

~~_Meister~~ · 07-14-2010, 19:48

Hallo,
Hier ein paar Tipps für HTML Anfänger

Die Themen

1.HTML Grundlagen
2.CSS
3.Grundgerüst einer Homepage

Einige Infos gleich am Anfang:

Ich schreibe in diesem Tutorial nur zu XHTML 1.0 Strict!

1.HTML Grundlagen

Zuerst mal was ist HTML:
Html ist eine "Programmiersprache" um Texte, Bilder,... im Internet darzustellen. Es kann mit Html nichts geskriptet werden. Also es existieren keine Schleifen, if Abfragen,... diese Sprache dient nur dazu Inhalte darzustellen. (Es ist eine sogenannte Tag-Sprache, da sie auf verscheidenen Tag's basiert, die immer geöffnet, und dann wieder geschlossen werden.)

Dann zum aufbau eine Html Datei:
Eine Html Datei hat eine der folgenden Endungen. (*.html, *.htm)
Dann im innern der Datei braucht es immer einen Doctype, dieser Teil der Datei gibt an welche Version von HTML in dieser Datei steht, und dient dem Browser, damit der Inhalt richtig Dargestellt werden kann.
Dannach kommt der <head> Tag, in diesem Tag werden Infos an den Browser gegeben, die der User später nicht/nur Teilweise angezeigt bekommt.
Dann kommt der <body> tag, in diesem tag befinden sich der gesamte Inhalt eurer Homepage.

Hier ein Beispiel der bisher besprochenen Aufbauelementen:

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     </head>
     <body>
     </body>
</html>

Weiter gehts mit verschiedensten Tags:
Hier zähle ich mal einige Tags auf:

Im Body Tag könnt ihr alle hier aufgezählten Tags brauchen. Aber einige Tags kann man nur innerhalb anderer Tags benützen und man kann sie nicht einfach in den Body schreiben.

Head
Im <head></head> Tag könnt ihr noch z.B. den Titel (<titel></titel>) angeben. Zusätzlich könnt ihr noch Meta Tags angeben. Hier ausführlich beschrieben:[Only registered and activated users can see links. ]

DIV
Das <div></div> ein Div tag steht für einen gewissen Bereich auf eine Html Page. Mit diesem Tag könnt ihr eure Page später dann in verschiedene Teile unterteilen.

a
Das <a></a> Tag ist ein sehr häufig verwendetes Tag, es enthält meistens Hyperlinks. Das sieht dann so aus:
<a href="euer link">Text/Bild</a>
beim draufklicken wird dan der link aktiviert

p
Das <p></p> Tag ist das Tag für Text. Also z.B. <p>Mein Hund ist voll komisch</p>

Hier findet ihr eine Komplette Sammlung von Elementen und Attributen, die ihr im Html benützen könnt. Dort ist auch beschrieben wo (in welchen Tags) ihr sie benützen dürft.
[Only registered and activated users can see links. ]

Wir kommen nun zu Punkt 2:

CSS:

CSS ist meiner Meinung nach das Tollste an Html!
In Html gibt man den Elementen meistens einen Style. Dort gibt man dann Grösse, Farbe,... usw. an.

Hier z.B. ein div mit Grössenangaben und Farbe usw.

Code:

<div style="height: 150px; width: 150px; color: blue; border:1px dashed blue;">
<p> Mein TEXT der jetzt per Style formatiert wurde</p>
</div>

Dies kann man nun auch in einen CSS Style schreiben, diesen kann man dann jedem Tag zuweisen. z.B. einem div :
hier die CSS Variante der obigen Beispiels:
Code:

Code:

<head>
<style type="text/css">
#div1{
height: 150px; width: 150px; color: blue; border:1px dashed blue;
}
</style>
</head>
<div id="div1">
<p> Mein TEXT der jetzt per CSS formatiert wurde</p>
</div>

Oder man kann gleich alle Divs auf der Page formatieren, das geht so:
div{
Angaben
}

Das ganze CSS kann man auch in eine externe Datei speichern und ins Html einbinden:
<link rel="stylesheet" type="text/css" href="formate.css">
oben in den head bereich schreiben und schon ist euer css in die formate.css Datei ausgelagert. Ihr könnt aber natürlich trotzdem noch direkt in der HTML Datei css Formate definieren.

Hier findet ihr eine Sammlung aller CSS Eigenschaften die ihr setzten könnt:
[Only registered and activated users can see links. ]

Dann zum 3ten Punkt:

Grundgerüst einer Homepage:

HTML CODE:

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="main">
<div id="top">
top
</div>
<div id="left">
left
</div>
<div id="inhalt">
inhalt
</div>
</div>
</body>
</html>

CSS CODE:
Code:

#main{
height: 600px;
background-color:#00FF00;
width: 800px;
}
#top{
background-color: #FF0000;
height: 150px;
width: 800px;
}
#inhalt{
height: 450px;
float: left;
background-color: #0000FF;
width: 650px;
}
#left{
float: left;
background-color: #99FF33;
height: 450px;
width: 150px;
}

So nun noch ein Paar hilfreiche Links:
CSS:
[Only registered and activated users can see links. ]
HTML
[Only registered and activated users can see links. ]
HTML/CSS/...
[Only registered and activated users can see links. ]

So das war es auch schon fürs erste, ev. schreibe ich zu einem späteren Zeitpunkt noch mehr. Nur Zurzeit fehlt mir die nötige Zeit.
Ich hoffe ich konnte einigen HTML Einsteigern helfen, und einige Fragen beantworten.
Ich denke besonders für Leute die noch nie was von HTML gehört haben und keine Ahnung haben, aber trotzdem HTML erlernen wollen hilft dieses Tutorial hoffentlich.

PS: PM's über Fehler die ich gemacht habe, oder Fragen oder,... sind immer Willkommen.

Mit Freundlichhen Grüßen

♫ Music ♫

Kanachri · 07-14-2010, 20:11

Ja ganz toll geleecht mein kleiner,ganz toll.
[Only registered and activated users can see links. ]