Braucht ihr einen neuen PC oder Hilfe beim (Web-)Programmieren? Stimmt etwas mit eurem Browser nicht? Themen rund um Hardware, Software, Internet sind hier herzlich willkommen.
Thema gesperrt

HTML- und CSS-Schule: Lektion 1 Programmierschule

Do 10. Jun 2010, 15:39

Was ist/ Woraus besteht HTML


HTML ist eine Programmiersprache mit der man ganz einfache Hompages machen kann. Ein HTML code besteht meistens aus einem öffnendem Tag und einem schließendem Tag. In diesen Tag kann man noch zusatz Codes machen kann, die den code bzw. das was in dem Code ist verschönert , ausrichtet oder weitere Sachen macht. Um überhaupt eine HTML Seite machen zukönnen braucht man oft den Code:
Code:
<html>(öffnen: gibt an das das was dadrin ist eine HTML Seite ist.)
<head>(öffnen: dadrin ist die Kopfzeile)

</head>(schließen: dadrin ist die Kopfzeile)
<body>(öffnen: hier kommt der inhalt rein den man auf der Seite sieht)

</body>(schließen: hier kommt der inhalt rein den man auf der Seite sieht)
</html>(schließen: gibt an das das was dadrin ist eine HTML Seite ist.)


Schritt 1 Die Vorbereitungen


Also das was ich euch jetzt erzähle müsst ihr nicht so machen ich finde es ist so am einfachsten aber jedermanns eigene Entscheidung.
Also ich über lege mir erst welche und wie viele Seiten ich mache dann welche in jeder seite verlinkt sein soll also so wie bei richtigen Home pages wenn da jetzt so ein Menü ist:
Home
Kontakt
Partnerseiten
Buch
Dann hat der der die Homepage gemacht hat aha ich will Home...(die sachen wie oben) überall verlinkt haben dass ich da jeder Zeit hin kann. Aber zb. Man kann nur im Buch auf eine andere seite gehen.Dann überlegt man sich wie die Seiten heißen sollen zb. Index.htm(ganz wichtig das die erste Seite index heißt) s1.htm... So das solltet ihr immer vorher machen aber müsst ihr nicht(Schreibt es euch am besten auf wie die Seiten heißen sollen usw.).
Um die Codes überhaupt schreiben zu können braucht ihr folgendes Programm(damit geht es leichter aber ihr könnt auch den Normalen Editor unter Start/Alle Programme zubehör und dann Editor benutzen):

Weaverslave
Um die Website später hochzuladen(braucht ihr für HA) braucht ihr das Programm:

Filezilla

Schritt 2 Das Menü und der Text


Ganz wichtig man kann Testen will wie eine Seite aussieht einfach die Datei speichern(sollte man eh zwischendurch machen) und einfach die Datei mit eurem Browser öffnen.
Also als erstes machen wir einen neuen Ordner für die Website und dort drin eine neue Datei namens "index.htm". In diese Datei schreiben wir erst einmal diesen Code:
Code:
<html>
<head>
<title>dar name der seite zb. Home – ShinyGlurak</title>
</head>
<body>
</body>
<html>

Dann können wir bei diesem Code das was man auf der Seite sehen soll in body reinschreiben zb. Für einen Link:
Code:
<p>(sozusagen für einen Neuen Absatz)<a href="den namen der datei zb. index.htm">Text den man sieht zb. Home</a> zwischen zeichen zwischen den Links b &bull; (für einen Punkt) <a href="den namen der datei zb. index.htm">Text den man sieht zb. Home</a>(nächster Link rechts daneben) usw.</p> Wenn es zu ende ist ein <br />(für umbruch das das was dahinter ist eine Reihe dadrunter ist) dann vieleicht eine Horizontale Linie mit <hr>

Oder wenn man noch ein Logo oder ein Bild oben drüber machen will:
Einen neuen Ordner namens images in dem Ordner der Seite anlegen.(da kommen alle Bilder rein) Und dann über den Code der Links diesen Code schreiben:
Code:
<p><img src="images/den namen der Datei(mit Dateiendung) zb. logo .png(auf Groß- Kleinschreibung beachten!)"><br /></p> vieleicht auch <hr>

Als nächstes machen wir den platz für den Text(aber auch nur den platz nicht den text):
Code:
<table>(das ist dazu da das es eine Tabelle wird)
<tr>(für Reihe)
<th>(für Überschriftenzelle)</th>
</tr>
<tr>
<td>für normale Zelle)</td>
</tr>
</table>

Nun speichern wir die Datei und kopieren sie so oft wie es Seiten gibt und benennen die dateien jeweils so wie sie heißen sollen.Dann öffnet man jeweils die Dateien zb. index.htm und schreiben in die Überschriftenzelle zb. Home und in die normale Zelle den Text der da sein soll. Und das macht man mit jeder Datei.


Schritt 3 Das Hochladen


Als erstes meldet man sich bei einem Hoster (wie zb. bplaced oder andere) an und gibt als Benutzername den namen der Homepage an zb. html-schule. Dann loggen wir uns ein und erstellen entweder eine neue Adresse oder gehen unter FTP-Verwaltung und schreiben da die sachen oben in FileZilla.Dann klicken wir auf verbinden und suchen unten auf der linken Seite unser erstellten Dateien und Ziehen sie in die rechte Seite. Nun müüste es in der Adresse zu sehen sein.
Falls ihr dies nicht versteht kuckt euch das Viedeo an(ich weiß am ende Funktioniert es nicht aber wenn man wartet geht es):

Video: Website ins Internet stellen.


Hausaufgabe


Erstellt 2 solcher Homepages.(aber min 1 muss auf dem Server in einem anderen Ordner sein und als Link müsst ihr dann zb. deineseite.de/Name des Ordners)
die ha muss bis zum 15.7 fertig sein(also hab ihr lange Zeit.


Falls ihr etwas nicht verstanden habt schreibt es in das Thema.(Falls ihr noch etwas lernen möchtet schreibt es mir per PN und ich kucke dann ob ich das mal durchnehmen werde)
MfG
MLu

Do 10. Jun 2010, 15:39

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 16:12

ich habe eine frage: wie sollen wir die hausaufgabe abgeben,per pn? oder wird dafür noch ein extra thema erstellt?

edit: noch eine: müssen wir alle von dir beschriebenen sachen einbauen?

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 16:42

1. es wird ein neues thema gemacht
2. ja

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 16:53

Hmm, eine Frage, darf man auch schon CSS benutzen, für die Website? Und Tags,
die noch nicht hier genannt wurden? Würde das gern vorher wissen, damit ich anfangen kann.

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 16:59

ne nur das was genannt wurde

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 17:13

Äm LOL, wenn man ne Webseite nur mit HTML erstellt kommt nur mist raus...da besteht ja alles nur aus so noob Tabellen. Man braucht unbedingt CSS Codes.

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 18:07

ehm das hier ist eine schule hier lernt man schritt für schritt ! wenn du schon weiter vorran bist musst du dich eben zurückhalten oder aussteigen!

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 18:30

Orange Dragon hat geschrieben:Äm LOL, wenn man ne Webseite nur mit HTML erstellt kommt nur mist raus...da besteht ja alles nur aus so noob Tabellen. Man braucht unbedingt CSS Codes.

MasterLugia hat geschrieben:ehm das hier ist eine schule hier lernt man schritt für schritt ! wenn du schon weiter vorran bist musst du dich eben zurückhalten oder aussteigen!

Ist auch nur damit Neueinsteiger auch alles mitbekommen, und nicht hinterherrennen müssen. Außerdem
darfst du dich bei Gelegenheit auch gerne etwas freundlicher fassen, das Wort Schule hat schon so seinen
Sinn hier O_D. Falls es dir zu langsam geht kannst du aussteigen, bei Bedarf.

LG. Terra

Re: Lektion 1 Programmierschule

Do 10. Jun 2010, 18:34

ich merke gerade dass du garnicht mitmachst Orange Dragon also musst du dich nicht beschweren dass es hier zu einfach ist.

Re: Lektion 1 Programmierschule

So 13. Jun 2010, 13:52

Sry aber mein inet funkt net.Befreist du für diese hausaufgabe?

Re: Lektion 1 Programmierschule

So 13. Jun 2010, 14:43

Schreib mir dein script ich korrigiere es...

Re: Lektion 1 Programmierschule

Mo 21. Jun 2010, 16:03

Wenn du noch einmal sagst, dass HTML eine Programmiersprache ist, ist das wirklich erbärmlich ...
Thema gesperrt



Bei iphpbb3.com bekommen Sie ein kostenloses Forum mit vielen tollen Extras
Forum kostenlos einrichten - Hot Topics - Tags
Beliebteste Themen: Forum, Erde, Pokemon, Spiele, NES

Impressum | Datenschutz