Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > General Coding > Coding Tutorials
You last visited: Today at 22:06

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



HTML Tutorial by Cpt.Cock

Discussion on HTML Tutorial by Cpt.Cock within the Coding Tutorials forum part of the General Coding category.

Reply
 
Old   #1
 
Cpt.Cock's Avatar
 
elite*gold: 1
Join Date: Dec 2012
Posts: 315
Received Thanks: 28
HTML Tutorial by Cpt.****

Hey und herzlich wilkommen zu diesem reinem HTML Tutorial,

ich habe festgestellt, dass es in diesem Forum noch kein richtiges HTML Tutorial zu geben scheint (klärt mich bitte auf wenn ich mich irre). Also beschloss ich, selber eines zu schreiben. Das Tutorial wird in mehrere Abschnitte eingeteilt sein, damit man sich besser zurecht findet. Außerdem werde ich so viele Bilder und Erklärungen zur Verfügung stellen wie nur geht. Aber jetzt soll es erstmal mit dem 1. Part losgehen:

Grundlagen :

Zuerst benötigen wir einen guten Editor, der euch mit Farbmarkierungen hilft, den Durchblick zu behalten, ich empfehle euch hier , ihr könnt allerdings auch andere benutzen. Wenn ihr dann euren Editor gestartet habt (in meinem Fall Notepad++), sollte es ungefähr so aussehen :



Jetzt wollen wir als erstes mit unserem Editor ein HTML Dokument erstellen, dies tuen wir in dem wir auf "Speichern unter" klicken, und das Dokument, unter einem beliebigen Namen speichern (es empfiehlt sich index). Wichtig ist nur, dass ihr als Dateiendung .html drin habt. Ungefähr so:



Nun kommen wir zum eigentlichen HTML-Code...

Ein HTML-Code ist immer in ein bestimmtes Grundgerüst eingeteilt. Das sieht so aus:
PHP Code:
<html>
<
head>

</
head>
<
body>

</
body>
</
html
Ihr könnt sehen, dass alles in sogenannte "Tags" eingeteilt ist. Das ist fast ausnahmslos bei jedem HTML Befehl so.

Tags werden IMMER so geöffnet :
PHP Code:
<beispiel
und so geschlossen :
PHP Code:
</beispiel
Der Unterschied besteht in dem "/" vor dem Tag. Der Tag ohne "/" öffnet einen Tag und der mit "/" schließt ihn wieder. Alles was zwischen der Öffnung und der Schließung des Tags steht, wird in ihn mit einbezogen.

Nun zur Erklärung des Grundgerüsts:
  • Der HTML Tag gibt einfach nur an, dass es sich um ein HTML Dokument handelt.
  • Im HEAD Bereich findet man hauptsächlich Dinge, dir für die Funktionalität der Seite zuständig sind. Der HEAD macht also wie beim Menschen die "Denk-Arbeit".
  • Der BODY Bereich ist der Körperbereich, in ihm finden sich Dinge wie Bilder, Links oder Texte zur Seite.
So sieht das ganze dann im Editor aus :




Nun wollen wir unseren ersten Tag angeben, und zwar im HEAD Bereich, den Tag.
Dieser gibt den Titel der Seite an, dass ist der Text der nachher bei euch oben im Tab steht. Das ganze sieht dann so aus:
PHP Code:
<title>Meine erste Website</title
Auch hier könnt ihr wieder das System mit den Tags erkennen, alles was zwischen den beiden Tags steht, ist der tatsächliche Titel.

Insgesamt sollte euer Dokument bisher so aussehen:




Textformatierung :

Nun wird es langsam ernst. Wir wollen unsere Seite in dieser Episode mit Texten aller Art füllen. Dafür gibt uns HTML etliche verschiedene Möglichkeiten an die Hand. Die wichtigsten möchte ich euch nun vorstellen.

Einen ganz normalen Text könnt ihr einfach in den BODY Bereich schreiben, also einfach zwischen die beiden BODY-Tags euren Text, ungefähr so:

PHP Code:
<body>

Hallo ich bin ein normaler Text

</body
Das reicht uns aber natürlich nicht. Als erstes wollen wir eine Überschrift machen, dass funktioniert mit dem Tag "<h1>", "<h2>", "<h3>", "<h4>"..., die Zahl hinter dem "h" steht für die Größe der Überschrift, dabei ist 1 die größte und 6 die kleinste Möglichkeit. Ein Beispiel?

PHP Code:
<h1>Ich bin die größte Überschrift</h1
Jetzt stellen wir aber fest, dass die Überschrift noch in die Mitte gerückt werden muss, was mit dem Tag "<center>" funktioniert. Außerdem soll die Überschrift fett sein, was wir mit dem Tag "<b>" erledigen. Unsere Überschrift sieht jetzt so aus :

PHP Code:
<h1><center><b>Ich bin die größte Überschriftin der Mitte und Fett</b></center></h1
Uns gefällt die Überschrift aber immer noch nicht so ganz, sie soll eine andere Farbe haben, dass funktioniert über den Tag "<font>" der auch noch ein paar andere Funktionen besitzt. Wir wollen, dass unsere Überschrift rot ist, also sieht der Code so aus :

PHP Code:
<h1><center><b><font color "red">Ich bin die größte Überschriftin der Mittefett und rot</font><b></center></h1
Wie ihr sehen könnt müssen wir bei dem "<font>" Tag noch ein paar Angaben machen. Nähmlich dass wir die Farbe verändern möchten, und das in rot.


Wir wollen aber auch noch eine andere Schriftart verwenden, dafür machen wir noch einen weiteren "<font>" Tag auf, der jetzt aber die Schriftart verändert :

PHP Code:
<h1><center><b><font color "red"><font face "Comic Sans MS">Ich bin die größte Überschriftin der Mittefettrot und im Schriftstil Comic Sans MS</font></font><b></center></h1
Wenn wir uns nun die Seite anschauen stellen wir fest, dass alle ü´s, ö´s, usw. als ziehmlich krüppelige Zeichen dargestellt werden. Dies beheben wir so :
  • Alle ö´s duch ö erstzen
  • Alle ü´s duch ü erstzen
  • Alle ä´s duch ä erstzen
  • Alle ß´s duch &szlig; erstzen

Wenn ihr einen Buchstaben groß schreiben wollt mach ihr einfach anstatt ö , &Ouml;.

Jetzt noch kurz ein Beispiel wie das alles im Editor aussehen könnte :




Bilder :

Klar muss eine Seite möglichst informativ sein, aber wenn man einfach nur einen ewig langen Text vorgesetzt bekommt, mag man den dann doch nicht wirklich lesen. Also brauchen wir Bilder in unserer Seite um diese ein wenig auf zu lockern. Dafür gibt es in HTML einen eigenen Tag, er heißt "<img>" und ist ein Ausnahme Tag, da er nicht mit einem </img>" wieder geschlossen werden muss. Der Code an sich sieht so aus (zur Erklärung dann später) :

PHP Code:
<img src "pic/lol.png" alt "LOL" height "500" width "500"
Mit "src = " geben wir die Quelle an, in diesem Fall ein Bild in einem Unterordner. Wenn sich euer Bild ganz woanders auf eurem PC versteckt, müsst ihr den gesamten Pfad angeben. Ihr könnt alternativ auch eine URL als Source benutzen. "alt = " legt fest, was an der Position des Bildes stehen soll, falls dieses nicht verfügbar ist (alt kurz für alternative). Mit den Befehlen height und width gebt ihr die Höhe und Breite des Bildes in Pixeln an.

So sieht das ganze im Editor aus:




Design :

Nun kennen wir die Text- und Bildmöglichkeiten, die es in HTML gibt. Doch was nutzt uns das alles, wenn es kaum strukturiert und designed ist? Richtig, nähmlich fast nix. Um das zu ändern müssen wir uns mit einer weiteren Programmiersprache vertraut machen : CSS. Diese wir verwendet um HTML Dokumente zu designen. Ich möchte euch heute zeigen wie das funktioniert.

Es gibt zwar verschiedene Möglichkeiten (bei Bedarf einfach googlen), aber es empfiehlt sich doch die Methode ein externes CSS Dokument anzulegen und im HEAD Bereich des HTML Dokuments darauf zu verweisen. Das geht so :

PHP Code:
<link rel="stylesheet" type="text/css" href="design.css" /> 
Das mag jetzt kompliziert aussehen, wichtig ist allerdings nur der Tag "href = ", denn das ist der Pfad zu eurem CSS Dokument. Beim Pfad gelten die selben Regeln wie bei "<img>". In diesem Falle, liegt das CSS Dokument im selben Ordner wie das HTML Dokument und heißt "design.css". Wie ihr in CSS programmiert zeige ich euch jetzt.

Wir haben z.B. eine Überschrift mit der Größe "h2". Um uns den Code im HTML Dokument zu ersparen, können wir jetzt auch einfach in CSS schreiben.

PHP Code:
h2 {
  
colorred;

CSS ist ein wenig anders aufgebaut als HTML, daher hier kurz eine Erklärung. Alles designbare in eurem HTML Dokument hat einen Namen, bei einer Überschrift wie "h2" ist es einfach "h2". Also schreiben wir das an den Beginn. Nun öffnen wir mit den geschweiften Klammern den Bereich in dem wir arbeiten wollen. Hinein schreiben wir in unserem Falle "color : red;". In CSS benutzt man nicht so wie in HTML das "=" sondern den ":". Außerdem müsst ihr jeden Befehl mit einem Apostroph wieder beenden.

So, wir wollen auch die Zentrierung, und die Schriftart in CSS festlegen. Also :

PHP Code:
h2 {
  
colorred;
  
text-aligncenter;
  
font-familyComic Sans MS;

Nun ist unsere Überschrift rot, mittig zentriert und ist im Schriftstil Comic Sans MS geschrieben. Dass ist zwar im Grunde das selbe wie im HTML Dokument, allerdings um ein wesentliches einfacher.

Ich hoffe ihr habt bis her alles verstanden, ich würde mich über ein Thanks freuen wenn es euch gefallen hat.

Bis dann

Der Captain
Cpt.Cock is offline  
Thanks
4 Users
Old 07/15/2013, 17:16   #2
 
lnqlorlouz's Avatar
 
elite*gold: 0
Join Date: Jun 2013
Posts: 405
Received Thanks: 84
Das war nun wirklich einfach. Wäre cool wenn du noch viel mehr bringst.
lnqlorlouz is offline  
Old 07/15/2013, 18:36   #3
 
Cpt.Cock's Avatar
 
elite*gold: 1
Join Date: Dec 2012
Posts: 315
Received Thanks: 28
Ja da kommt noch ganz viel
Cpt.Cock is offline  
Old 07/15/2013, 22:08   #4
 
elite*gold: 43
Join Date: Aug 2011
Posts: 497
Received Thanks: 66
Ich würde eher empfehlen, Scriptly zu benutzen, da man sich direkt per Hotkey anschauen kann, wie seine Website bis jetzt aussieht
MfG
Unlocked., is offline  
Old 07/16/2013, 20:30   #5
 
ThoughtfulDev's Avatar
 
elite*gold: 28
Join Date: Aug 2012
Posts: 2,335
Received Thanks: 471
könntest ja noch HTML 5 "erklären" bzw die neuen tags dort.
ThoughtfulDev is offline  
Old 07/16/2013, 20:34   #6
 
elite*gold: 0
Join Date: Jul 2013
Posts: 768
Received Thanks: 199
Da fehlt der Zeichensatz, die "codeart" <- ka wie ichs grad beschreiben soll, und vieles mehr
.BlueExorcist is offline  
Old 07/16/2013, 21:40   #7
 
P3enguin's Avatar
 
elite*gold: 0
Join Date: Jun 2009
Posts: 154
Received Thanks: 53
nicht schlecht aber ne Erklärung zu den neuen tags in HTML5 wär echt ganz cool und vll solltest du euch nen DOCTYPE verwenden wenn es valide werden soll
P3enguin is offline  
Old 07/28/2013, 16:34   #8

 
elite*gold: 0
Join Date: May 2009
Posts: 438
Received Thanks: 338
Quote:
PHP Code:
<img src "pic/lol.png" alt "LOL" height "500" width "500"
Warum machst du hinter jeder Property ein Leerzeichen?

Richtig:
(du hast ebenfalls vergessen den <img> Tag zu schließen, dabei hast du das extra erklärt

PHP Code:
<img src="pic/lol.png" alt="LOL" height="500" width="500" /> 
f1Nn is offline  
Old 08/03/2013, 15:25   #9
 
elite*gold: 0
The Black Market: 134/0/2
Join Date: Dec 2012
Posts: 1,140
Received Thanks: 229
In CSS wird jeder Befehl mit einem Semikolon abgeschlossen, nicht mit einem Apostroph.
Acin™ is offline  
Old 08/04/2013, 16:18   #10
 
Croco™'s Avatar
 
elite*gold: 235
Join Date: Jan 2012
Posts: 920
Received Thanks: 377
Ich denke es ist kontraproduktiv mit Notepad++ an zu fangen.
Es gibt zahlreiche gute Editoren die einige Funktionen wie das einbinden von Dateien, Farbcodes, Tag schliesung und vieles mehr beinhalten.
Scriptly, Netbeans, Eclipse und Natürlich für die mit zu viel Geld, Dreamviewer sind da wohl Vorreiter.
Croco™ is offline  
Old 08/04/2013, 16:28   #11

 
Alexeus10's Avatar
 
elite*gold: 0
The Black Market: 332/0/0
Join Date: Feb 2011
Posts: 3,622
Received Thanks: 229
Finde es persönlich blöd mit Editoren anzufangen, die einem direkt alles komplettieren und alle Fehler autmatisch korrigieren etc.
Habe selber mit Notepad++ angefangen und auch wenn man oft lange Zeit die Fehler suchen muss, wirkt sich das als Erfahrungswert positiv aus.

Zum Tut. : Finde es sehr schön gemacht für Anfänger und auch übersichtlich gestaltet

Hastn Thanks

Mfg
Alexeus10 is offline  
Old 08/13/2013, 20:38   #12
 
elite*gold: 10
Join Date: Aug 2012
Posts: 813
Received Thanks: 106
Habe auch erst vor einiger Zeit mir dem Schreiben von Websites mit HTML, CSS, PHP angefangen und es ebenfalls mit Notepad++ geschrieben und muss sagen, dass es wirklich gut ist. Man lernt schnell seine Fehler zu erkennen und macht diese mit der Zeit nicht mehr so oft. Natürlich sollte man in Notepad++ die Sprache (z.B. HTML) auswählen, damit eigentlich alles wichtige, farbig markiert (und somit hervorgehoben wird).


*Bei PHP werden nicht alle Möglichen Kommentar-Zeichen farbig markiert, also nicht wundern, wenn solche Sachen, wo es mehrere Möglichkeiten für gibt, nicht markiert werden.
GodHacker is offline  
Old 08/23/2013, 16:44   #13
 
Yasunai's Avatar
 
elite*gold: 159
Join Date: Sep 2010
Posts: 3,001
Received Thanks: 595
Ich würde dir empfehlen statt ü etc. oben einfach folgendes einzufügen:
HTML Code:
<!--?xml version="1.0" encoding="UTF-8"?-->
Dann hast du später auch mit Javascript Funktionen kein Problem, denn sollte man irgendwann mal vor haben einen Umlaut auszugeben, dann würde er durch Javascript als Text angezeigt werden ( ü / ö / ...)

Quote:
Originally Posted by Croco™ View Post
Ich denke es ist kontraproduktiv mit Notepad++ an zu fangen.
Es gibt zahlreiche gute Editoren die einige Funktionen wie das einbinden von Dateien, Farbcodes, Tag schliesung und vieles mehr beinhalten.
Nein, sich die Dinge von Anfang an selber einzuprägen ist wesentlich sinnvoller. So lernst du auch eher eigene Fehler zu erkennen o.ä. Wenn du alles ein Programm machen lässt, dann lernst du kaum dabei.

LG
Yasunai is offline  
Thanks
2 Users
Old 08/24/2013, 06:23   #14



 
yazzn.biz's Avatar
 
elite*gold: 0
Join Date: Jan 2012
Posts: 1,019
Received Thanks: 979
Quote:
A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879]).
The global structure of an HTML document

Außerdem empfehle ich sich von Anfang an eine sinnvolle Einrückung anzugewöhnen.

Quote:
Originally Posted by Croco™ View Post
Ich denke es ist kontraproduktiv mit Notepad++ an zu fangen.
Quatsch!
yazzn.biz is offline  
Old 08/24/2013, 17:00   #15
 
Beni's Avatar
 
elite*gold: 0
The Black Market: 171/0/0
Join Date: Jul 2009
Posts: 3,268
Received Thanks: 784
Gutes Tutorial. Kenne Html schon von meinem Vater, aber auch mal Cool wieder alles "von klein auf" nochmal anzuschauen..

Seit dem du in deinem Tutorial die Rote Überschrift hast, hast du jedesmal am Ende des Codes ....</b>... den Dash [Oder wie mans auch nennt..:P] vergessen.. :P

Sonst nur über die Codes drübergeflogen..^^


Lg
Beni is online now  
Reply

Tags
beginner, html, html tutorial, tutorial


Similar Threads Similar Threads
HTML Tutorial by Cpt.Cock
07/19/2013 - Web Development - 8 Replies
Hey und herzlich wilkommen zu diesem reinem HTML Tutorial, ich habe festgestellt, dass es in diesem Forum noch kein richtiges HTML Tutorial zu geben scheint (klärt mich bitte auf wenn ich mich irre). Also beschloss ich, selber eines zu schreiben. Das Tutorial wird in mehrere Abschnitte eingeteilt sein, damit man sich besser zurecht findet. Außerdem werde ich so viele Bilder und Erklärungen zur Verfügung stellen wie nur geht. Aber jetzt soll es erstmal mit dem 1. Part losgehen: Grundlagen...



All times are GMT +1. The time now is 22:06.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.