Donkey Kong
What the fuck did you just fucking say about me, you little bitch? I’ll have you know I graduated top of my class in the Navy Seals, and I’ve been involved in numerous secret raids on Al-Quaeda, and I have over 300 confirmed kills. I am trained in gorilla warfare and I’m the top sniper in the entire US armed forces. You are nothing to me but just another target. I will wipe you the fuck out with precision the likes of which has never been seen before on this Earth, mark my fucking words. You think you can get away with saying that shit to me over the Internet? Think again, fucker. As we speak I am contacting my secret network of spies across the USA and your IP is being traced right now so you better prepare for the storm, maggot. The storm that wipes out the pathetic little thing you call your life. You’re fucking dead, kid. I can be anywhere, anytime, and I can kill you in over seven hundred ways, and that’s just with my bare hands. Not only am I extensively trained in unarmed combat, but I have access to the entire arsenal of the United States Marine Corps and I will use it to its full extent to wipe your miserable ass off the face of the continent, you little shit. If only you could have known what unholy retribution your little “clever” comment was about to bring down upon you, maybe you would have held your fucking tongue. But you couldn’t, you didn’t, and now you’re paying the price, you goddamn idiot. I will shit fury all over you and you will drown in it. You’re fucking dead, kiddo.

Donkey Kong


 
HomePortalMemberlistSearchRegisterLog in
Die besten Seiten im Netz


free forum







My Body Is Ready
Stöhn deine IP


*stöhnte
Shoutbox

Share | 
 

 HTML Tut für Anfänger

Go down 
AuthorMessage
SomeSeriousShit
Faggots


Female Anzahl der Beiträge : 1516
Aktivitätspunkte : -32354896
Anmeldedatum : 19/01/2010

PostSubject: HTML Tut für Anfänger   2010-07-04, 20:44

Dieses Tutorial ist auschließlich für finalbrawl.com geschrieben und darf nicht ohne meine Genehmigung oder entsprechendes Hinweisen darauf, dass es mein Tutorial ist, auf anderen Webseiten verbreitet werden. Finde ich es unerlaubt kopiert in einem anderen Forum oder sonstwo, werde ich den entsprechenden Administrator kontaktieren.

So falls es jemanden interessiert, dann schreib ich mal ein HTML Tut für Anfänger, die wenig bis gar keinen Plan haben, aber gerne was können würden. Mit HTML und anderen Programmiersprachen zu arbeiten kann Spaß wenn mans kann, weil man einfach die geilsten random Sachen machen kann.

So was ihr wissen müsst:
- Was ist HTML
- Aufbau eines HTML Dokuments
- Kleiner Test eures Dokuments
- Textformatierungen
- Grafiken
- Links
- Ausrichtung von Objekten
- Farben
- Hintergrund
- Tabellen

1. Was ist HTML:
Bei HTML handelt es sich um die Hypertext Markup Language. Sie ist sehr einfach zu lernen und zusammen mit CSS für das Design einer Webseite zuständig. Für die Funktionalität einer Webseite sorgen andere Sprachen. Wer eine Webseite selbst erstellen will muss mindestens HTML, CSS und PHP beherrschen. Im Idealfall noch (My)SQL und Javascript, zusätzlich manchmal auch noch Ajax und was es noch so gibt Rolling Eyes

2. Aufbau eines HTML Dokuments:
Jedes HTML Dokument wird von dem html-Tag eingeleitet und wird auch damit geschlossen. Dazwischen stehen verschiedenste Tags für alles mögliche. So steht z.B zwischen dem body-Tag ein Text der dann auf der Webseite so angezeigt wird.
Ein kleines HTML Dokument für Anfänger wäre:
Code:
<html>
<body>
Hier ein kleiner Testsatz.
</body>
</html>
Das html-Tag zeigt dem Browser, dass es sich um ein HTML-Dokument handelt. body leitet einen sichtbaren Bereich ein.

Jedes Tag das ihr beginnt, muss auch geschlossen werden. Es gibt zwar so genannte Standalone-Tags, aber die kommen selten vor. Das Tag schließt ihr indem ihr nochmal das Angangstag schreibt, aber zwischen dem Kleiner-als-Zeichen und dem Befehl einen Schrägstrich macht.

Auf jeder Webseite ist nur das Sichtbar, was zwischen den Tags steht.

3. Test eures Dokuments:
Um ohne großartiges Hochladen auf einen Webserver eure Seite zu testen, nehmt den Editor der Standardmäßig auf jedem PC ist. Ihr findet ihn unter Start > Alle Programme > Zubehör. Da fügt ihr am besten ein, was ich oben hingeschrieben habe. Abspeichern müsst ihr das ganze als Dateiname.htm oder Dateiname.html, damit euer PC erkennt, dass es sich hierbei um ein HTML-Dokument handelt. Speichert eure Datei auf dem Desktop ab, damit ihr sie einfach wiederfindet.

Sucht auf dem Desktop das Dokument und öffnet es mit dem Internet-Explorer (nicht empfohlen), Opera, FireFox oder anderen Browsern. Es sollte eine komplett weiße Seite angezeigt werden, wo oben links der Satz: "Hier ein kleiner Testsatz" steht.

4. Textformatierungen:
Einen Text fett schreiben:
Code:
<b>Text</b>
Das b steht für "Bold", also quasi "fett".

Einen Text kursiv schreiben:
Code:
<i>Text</i>
Das i steht für "italic" was nicht "italienisch", sondern "kursiv" bedeutet.

Einen Text unterstreichen:
Code:
<u>Text</u>
Das u steht für "underlined", auf Deutsch also "unterstrichen".

Einen Zeilenumbruch erzeugen:
Code:
<br>
Hier seht ihr eines der wenigen Standalone-Tags. br könnte man als sowas wie "Break" deuten, was "Bruch" bedeutet. In dem Falle würde es zu seiner Wirkung passen.

Die b-, i-, und u-Tags können in jeder Kombination auftreten.
Code:
<b><i>Text</i></b>
Das bewirkt also einen fetten, kursiven Text.

5. Grafiken
Eine Webseite ohne Grafiken ist wie Schokolade ohne Kakao: Einfach nur weiß.

Ein normales Bild bindet man über folgenden Befehl ein:
Code:
<img src="Grafikadresse">
Das ist die Standard Variante.
img steht für das englische Wort "image" und bedeutet "Bild". src bedeutet "source" was englisch für "Quelle" ist. Die Grafikadresse, ist der Link, der zum Bild führt.
Auch der Befehl img ist ein Standalone-Tag.

Nun könnt ihr euer eingebundenes Bild aber noch weiter spezifizieren, indem ihr dem img Angaben wie z.B Bildbreite oder Bildhöhe beifügt. Ein richtiger Befehl sieht also so aus:
Code:
<img src="Grafikadresse" width="200" height="200" border="1" alt="">
width ist englisch und bedeutet "Breite", height bedeutet "Höhe". border ist englisch für "Rand" und alt steht für "alternative" was so viel wie "alternativ" bedeutet. Zwischen den Anführungszeichen hinter dem alt steht im Grunde nur ein Text der beim Neuladen der Seite angezeigt wird, während das Bild noch am Laden ist.

6. Links
Auch ohne Links ist eine Webseite nichts. Sie muss ja intern zu ihren verschiedenen Templates linken.
Code:
<a href="http://www.finalbrawl.com">http://www.finalbrawl.com</a>
Würdet ihr da drauf klicken, würdet ihr zu diesem Forum hier geleitet werden. Ihr könnt aber auch ein Wort mit einem Link unterlegen z.B so:
Code:
<a href="http://www.finalbrawl.com">Test</a>
Würdet ihr also auf "Test" klicken, würdet ihr ebenfalls zum Final Brawl Forum geleitet, denn im Tag ist ja festgelegt, dass egal was zwischen dem Tag steht, ihr immer zu finalbrawl.com gelangt wenn ihr da drauf klickt.

Doch nun was die Bestandteile bedeuten: a steht für "anchor", dem englischen Wort für "Anker". href steht für "Hypertext Reference".

7. Ausrichtung von Objekten
Alle Texte und Grafiken, müssen ja irgendwo stehen und deren Ort kann man unter anderem durch die Ausrichtung bestimmen.

Rechtsbund:
Code:
<div align="right">Text oder Bild</div>
Linksbund:
Code:
<div align="left">Text oder Bild</div>
Zentrieren:
Code:
<div align="center">Text oder Bild</div>
Blocksatz:
Code:
<div align="justify">Text oder Bild</div>
div ist ein vielseitiges Tag und kann so gut wie überall vorkommen. Es hat keine feste Bedeutung. align bedeutet "Ausrichtung". right, left, center und justify stehen jeweils für "rechts", "links", "zentriert" und "Blocksatz".

8. Farben
Farben bestehen aus Hex Codes. Jeder Hex Code besteht aus 6 Stellen. Schwarz ist 000000, Weiß ffffff. Der Hex Code ist so geteilt: ff ff ff.
Die ersten beiden Stellen geben den also roten Anteil der Farbe an, die zweiten 2 Stellen den grünen, die letzten beiden den blauen. Es gibt von 00 über 11, 22 usw. bis 99, danach gehts mit aa weiter, bis ff. Und so müsst ihr eben eure Farben mischen. Z.B 99aaff. Vor dem Hex Code der Farbe muss stets ein # stehen.

Hier eine Farbentabelle.

Doch wie fäbrt ihr damit eure Texte?
Code:
<span style="color:#00ff00;">Text</span>
span leitet hier also die Formatierung ein. style ist sehr vielseitig und dahinter stehen alle Formatierungsbefehle. color sagt eben aus, dass die Farbe geändert wird, dahinter eben der Hex Code der Farbe.

Code:
<div style="color:#00ff00;">Text</div>
Das ist ebenfalls möglich. div enthält allerdings einen automatischen Zeilenumbruch, was span eben nicht tut. Wer also keinen Zeilenumbruch will benutzt hierfür span.

9. Hintergrund der Webseite
Eine Webseite mit weißem Hintergrund geht natürlich gar nicht. Das muss geändert werden.

Code:
<body style="background-color:#0000ff>
Auch das hier ist ein Standalone-Tag. Zu erklären gibts denk ich nicht mehr viel. background-color gibt eben an, dass ihr die Hintergrundfarbe verändern wollt.

Code:
<body style="background-image:url(Grafikadresse);">
Dieser Befehl ändert das Hintergrundbild, zu erkennen an background-image. Danach kommt url was eben angibt, dass ihr eine url angeben wollt, in Klammern dahinter steht die Grafikadresse.

10. Tabellen
Eine normale Tabelle:
Code:
<table border="0">
<tr>
<td>1.</td>
<td>2.</td>
</tr>
</table>
table leitet die Tabelle ein, border gibt die Randbreite an. Mit tr definiert ihr eine Zeile, mit td die jeweiligen Spalten.

So das ist das HTML Basics Tutorial. Wie ihr seht ist HTML wirklich einfach, und es zu lernen kann eig. nicht verkehrt. Für weiterführende Elemente empfehle ich Tuorials wie das von selfthtml oder von Michael Jendryschik, da das hier den Rahmen sprengen würde.


Last edited by Garma on 2011-01-18, 22:47; edited 15 times in total
Back to top Go down
Adolf
Faggots
avatar

Male Anzahl der Beiträge : 2043
Aktivitätspunkte : -31774260
Anmeldedatum : 12/04/2010
Alter : 129
Ort : Berlin

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 01:09

Nice gemacht, ich seh keine Fehler, außer hin und wieder mal Rechtschreibung. Ich hatte auch schon überlegt, ob ich mal n Tut für Anfänger machen soll. Razz Naja bei Gelegenheit kann ich vielleicht mal JS machen. PC

卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐
Back to top Go down
SomeSeriousShit
Faggots


Female Anzahl der Beiträge : 1516
Aktivitätspunkte : -32354896
Anmeldedatum : 19/01/2010

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 03:05

Wär cool, JS beherrsch ich selbst nicht, ich blick da nicht durch xD Vielleicht mach ich noch CSS da gibts ja als grundlage nicht viel zu wissen.
Back to top Go down
Valiant
Faggots
avatar

Male Anzahl der Beiträge : 2054
Aktivitätspunkte : -32644155
Anmeldedatum : 31/12/2009

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 03:08

Schöner Guide : )

Da ich GFX betreibe, fehlen mir noch die Skills fürs Webdesigning Wink

卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐
Back to top Go down
SomeSeriousShit
Faggots


Female Anzahl der Beiträge : 1516
Aktivitätspunkte : -32354896
Anmeldedatum : 19/01/2010

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 03:17

Joa im Grunde musst du nur wissen wie man tabellen anlegt, bilder einfügt und links schreibt, denn so sind designs aufgebaut xD natürlich fehlt ein wenig css, aber es gibt auch designs die ohne css funktionieren.
Back to top Go down
Valiant
Faggots
avatar

Male Anzahl der Beiträge : 2054
Aktivitätspunkte : -32644155
Anmeldedatum : 31/12/2009

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 03:19

Ok danke =)

Aber erst müsst ich mal schauen, ob ichs auch draufhab xD Bei manchen Dingen kann ich nämlich echt ein hoffnungsloser Fall sein.

卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐卐
Back to top Go down
SomeSeriousShit
Faggots


Female Anzahl der Beiträge : 1516
Aktivitätspunkte : -32354896
Anmeldedatum : 19/01/2010

PostSubject: Re: HTML Tut für Anfänger   2010-07-05, 03:23

HTML is kaum schwer.

Code:
<html>
<body>
<table border="0">
<tr>
<td><a href="chat.php"><img src="includes/designs/designname/chat.png"></a></td>
<td><a href="news.php"><img src="includes/designs/designname/news.png"></a></td>
</tr>
</table>
</body>
</html>

Ist ein wenig anders aber auch nicht schwer wenn man weiß wies funzt xD das wär so genannte index.htm die immer in designs dabei is.

Letztendlich hab ich das tut für leute geschrieben die das interessiert (muss ja niemand hier ausm forum sein, gäste könnens ja auch sehen) und ob ihn das interessiert muss jeder selbst wissen. imerhin hat mein tut ja schon 90 aufrufe und ich habs heute morgen geschrieben also interessierts ja einige x)
Back to top Go down
Sponsored content




PostSubject: Re: HTML Tut für Anfänger   

Back to top Go down
 
HTML Tut für Anfänger
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Donkey Kong :: Computerecke :: Programmieren und Webdesign-
Jump to: