How To "Webseiten Programmieren"

Thema: How To "Webseiten Programmieren" Do Nov 29, 2012 10:54 pm

Grüß euch!
Ich hätte mir gedacht, das ich hier ein Kleines Tutorial poste wie man sich seine Eigene Webseite programmieren kann.
Die Programmiersprache Html (später auch CSS) ist nicht schwer zum erlernen.

Was du brauchst:

Einen Editor (Der Standarteditor reicht vollkommend aus)
Einen Webbrowser (z.b. Google Chrome)

Öffnet den Editor und erstellt das Grundgerüst

Code:: <html>
<head>
<title>Meine Erste Webseite</title>
</head>
<body>
Hallo Welt!
</body>
</html>

Wie wir hier am Beispiel sehen, sagen wir mit den Befehlen in <> was der Browser machen soll

<html> Man sagt den Browser "das sollst du darstellen", dieser Befehl wird vom internet Explorer 7 übersprungen, jedoch MUSST du diesen hinschreiben
<head> Dort sind alle Wichtigen Informationen gespeichert wie z.b. der Titel, der ganz oben angezeigt wird
<body> Dort schreiben wir alles hinein, was dargestellt wird
<h1> Überschrift, es gibt 6 arten davon: <h1>,<h2>,<h3>,... Wobei <h1> die größte und <h6> die kleinste ist
nachdem wir alles aufgemacht haben, müssen wir die Befehle beenden. Wir beenden sie in dem wir den selben "Tag" nocheinmal schreiben, nur nach der < einen /

Wenn wir im Body was hineinschreiben, das keine Bedeutung für den Browser hat, wird das ganz normal dargestellt, ohne Formatierung

Thema: Re: How To "Webseiten Programmieren" Do Nov 29, 2012 10:56 pm

[quote="weini"]Grüß euch!
Ich hätte mir gedacht, das ich hier ein Kleines Tutorial poste wie man sich seine Eigene Webseite programmieren kann.
Die Programmiersprache Html (später auch CSS) ist nicht schwer zum erlernen.

Was du brauchst:

Einen Editor (Der Standarteditor reicht vollkommend aus)
Einen Webbrowser (z.b. Google Chrome)

Öffnet den Editor und erstellt das Grundgerüst

Code:: <html>
<head>
<title>Meine Erste Webseite</title>
</head>
<body>
<h1>Meine erste Homepage</h1>
Hallo Welt!
</body>
</html>

Wie wir hier am Beispiel sehen, sagen wir mit den Befehlen in <> was der Browser machen soll

<html> Man sagt den Browser "das sollst du darstellen", dieser Befehl wird vom internet Explorer 7 übersprungen, jedoch MUSST du diesen hinschreiben
<head> Dort sind alle Wichtigen Informationen gespeichert wie z.b. der Titel, der ganz oben angezeigt wird
<body> Dort schreiben wir alles hinein, was dargestellt wird
<h1> Überschrift, es gibt 6 arten davon: <h1>,<h2>,<h3>,... Wobei <h1> die größte und <h6> die kleinste ist
nachdem wir alles aufgemacht haben, müssen wir die Befehle beenden. Wir beenden sie in dem wir den selben "Tag" nocheinmal schreiben, nur nach der < einen /

Wenn wir im Body was hineinschreiben, das keine Bedeutung für den Browser hat, wird das ganz normal dargestellt, ohne Formatierung.

Das Dokument speicherst du ab als index.html in einen Ordner namens htmlUebung
Bitte als Speicherformat nicht Textdatei auswählen!
Nach dem du das gespeichert hast, kannst du das Dokument öffnen, und dein Browser öffnet sich mit der Homepage, die du erstellt hast.

Thema: Re: How To "Webseiten Programmieren" Do Nov 29, 2012 11:03 pm

2. Part - Attribute der Tags
Attribute sind Eigenschaften der Einzelnen Elemente, wie z.b. der Überschrift.
Ein Vollständiger Tag schaut so aus:

Code:: <tag attribut="wert"> </tag>

Jetzt fragst du dich sicher, wie du z.b. in cyan schreiben kannst.
Wenn du einen Tag bearbeiten willst (z.b. Überschrift), kannst du das machen indem du

Code:: <h1 color="red">

Hier funktionieren manche Englische Namen.
Wenn du einen Normalen Text in Farbe schreiben willst, benützte bitte:

Code:: <font color = "red"> dies ist ein Roter text ohne weitere Formatierungen</font>

Wenn du eine bestimmte Farbe willst, gehe auf die Seite Colorpicker und wähle die Farbe aus.
Nachdem du die Farbe ausgewählt hast, kopiere das, was im Textfeld steht (oberhalb der auswahl) und ersetzte es mit red
Würde dann so aussehen

Code:: <font color = "00E5FF"> dies ist ein Roter text ohne weitere Formatierungen</font>

Thema: Re: How To "Webseiten Programmieren" Do Nov 29, 2012 11:14 pm

Hier eine kleine Übersicht (fast) aller html tags:

<p> </p> Paragraf – bildet einen Absatz
<br> Harter Umbruch – Text geht in nächster Zeile weiter
<h1> </h1> Überschrift

<b> </b> fett hervorgehoben
<i> </i> kursiv
<sup> </sup> hochgestellter Text
<sub> </sub> tiefgestellter Text

<hr> Trennlinie

Code:: <ul> Start einer Aufzählung (durch ul mit Spiegelstrichen)
<li> </li> Aufzählungspunkt
<li> </li> nächster Aufzählungspunkt
</ul>Ende einer Aufzählung

Code:: <ul>
<li>Hallo</li>
<li>Test</li>
</ul>

Hallo
Test

Code:: <ol> im Gegensatz zu <ul> Aufzählungen mit Nummerierung
<li> </li> Aufzählungspunkt
<li> </li> nächster Aufzählungspunkt
</ol> Ende einer Aufzählung

Code:: <table> Tabelle
<tr> Startet eine neue Zeile
<td> Neue Spalte
</td> Spaltenende
<td> Nächste Spalte
</td> Spaltenende
</tr> Zeilenende
<tr> Startet eine neue Zeile
<td> Neue Spalte
</td> Spaltenende
<td> Nächste Spalte
</td> Spaltenende
</tr> Zeilenende
</table>

Code:: <table>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</table>

1	2
3	4

Ps. Die Befehle können verschachtelt werden!
Attribute bitte Googlen

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:07 pm

Ohhh... das verstehe ich nicht, und was ist ein Editor?

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:14 pm

Eglantine schrieb:: was ist ein Editor?

Wenn du unter Start-> Zubehör gehst, dort ist ein editor halt mit dem du dokumente bearbeitest Wink

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:16 pm

Ah! Oke, habs gefunden. ich habe mal die Codes kopiert und eingefügt, doch was jetzt?

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:17 pm

Soll ich Videos erstellen, wie du eine Webseite programmierst?
Dann is es glaub ich ein bisschen einfacher für dich Smile

Oder sonst:
Datei->Speichern unter: "name.html"
dateiformat: alle formate

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:26 pm

Oh ja! Ein Video^^ Dann kapiere ich es glaub ich auch Very Happy

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:47 pm

Ich hoffe es passt so Smile

Habe mich ziemlich oft verredet, bin ein Österreicher noch dazu, wird dann nochmal ein bisschen schwierieger^^ aber egal Smile

Wird in ca. 30-60min upgeloadet sein

weini

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 9:52 pm

Hier noch ein paar Attribute:
Format:
attribut - beschreibung - beispiel
<font>

color - farbe - color="cyan"
size - größe - size="18px"

<body>

bgcolor - hintergrundfarbe des bildschirms - bgcolor="cyan"
background - hintergrundurl - background="images/owl.jpg"

<table>

bgcolor - hintergrundfarbe der Table - bgcolor="cyan"
border - rahmengröße - border="1px"

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 10:53 pm

Video wird sich ein bisschen verspäten, morgen is es aber on Smile

habe einen Fehler beim erstellen des Videos gemacht

weini

Thema: Re: How To "Webseiten Programmieren" Fr Nov 30, 2012 11:05 pm

Nicht schlimm XD Ich kann wrten Wink

Thema: Re: How To "Webseiten Programmieren" Sa Dez 01, 2012 12:03 am

Hier das Video ^^

Wenn es nicht funktioniert:
https://youtu.be/SMtMMhe_upM

Thema: Re: How To "Webseiten Programmieren" Sa Dez 01, 2012 11:15 am

Hmmm... Ich werde es ml in rue anschauen Wink

» Programmieren?