audio Playlist: ▼

.mp3/wav:

► Dr.Hook "Sylvias mother"

► Dire Straits "Sultans ..."

► James Last "Biscaya"

0 Mitglieder und 4 G�ste sind derzeit online:
(Als registrierter User sieht man hier nat�rlich etwas mehr.)
Sei dabei! Es macht Spa�, kostet nix und tut �berhaupt nicht weh !

03.02.2019 01:351549154124
cirrus minor hat das Thema Soundeffekt bei Bild-Mouseover erstellt.
19.01.2019 19:101547921434
cirrus minor hat das Thema Gruppen über DropDown Menüs verwalten erstellt.

4 Aktive User
0 Mitglieder und 4 G�ste sind Online

Besucherrekord
100 Benutzer gleichzeitig online (13.06.2024 02:29)

Besucherz�hler
Heute waren 60 G�ste , gestern 6 G�ste online

auch hier! -->> ...unsere Facebookseite besuchen.

Foreninformationen:

Forenthemen	47
Textbeitr�ge	2352
Mitglieder	5
Neuestes Mitglied

Letzte Foren-Beitr�ge:

HTML,CSS & Co. leicht gemacht f�r Einsteiger �

HTML ... mit kleinen Dingen anfangen

� HTML Seite, Aufbau, Einbindungen, Meta Tags usw. � Wie ist eine HTML Seite aufgebaut?

Themen-Einstellungen

Thema drucken

Bereich wechseln

CSS ... kein Hexenwerk ! CSS allgemein Schriften stylen per CSS Elemente stylen per CSS � Fragen zur Auswahl von Elementen (Selektoren) � � hover Effekte �ber CSS hinzuf�gen �� Effekte �ber keyframes per CSS hinzuf�gen HTML ... mit kleinen Dingen anfangen HTML Seite, Aufbau, Einbindungen, Meta Tags usw. Java-Script ... im Anf�ngermodus Gro�e Ver�nderungen mit kleinen, einfachen Scripten herbeif�hren Xobor - Foren - Hilfe administrative Einstellungen der Xobor Software Einbindungen von Codes und Scripten in die Xobor Software "User - Ecke" "G�ste - Stube" G�ste schreiben uns, Mitglieder antworten

#1 | Wie ist eine HTML Seite aufgebaut? datum

16.04.2018 12:13 (zuletzt bearbeitet: 06.05.2018 15:08)

cirrus minor

Informationen anzeigen

Beitr�ge:	1193
Punkte:	426
Registriert seit:	10.04.2018

Der Grundlegende Aufbau einer eigenen HTML Seite sieht wie folgt aus:

1
2
3
4
5
 
<!DOCTYPE html> 
<head>...</head>
<body>...</body>
</html>
 
 

In den head tag sollte man einige Metadescriptions aufnehmen, wie Zeichenverschl�sselung, den Seitentitel, eventuelle Keywords und eine viewport-Einstellung, damit die Seite von unterschiedlichen Endger�ten richtig dargestellt wird. Im Beispiel sind das die Zeilen 6 - 9 .
Wenn man nach diesem Schema vorgeht, kann man recht schnell eine erste eigene Seite erstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 

<!DOCTYPE html>  <!-- hier wird der Typ des Documentes festgelegt --> 
 
<head>  <!--  in den Head kommen die Metadescriptions und die Stylanweisungen -->
 
<meta charset="utf-8">
<title>HTML,CSS & Co. leicht gemacht für Einsteiger</title>
<meta name="keywords" content="Schriftschatten,Schriftfarben,Effekte,Glow,Neonschrift,HTML,CSS,Java Script,Einsteiger,Anfänger" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
<style type="text/css">
 
body {background: white;} /* mein Body soll weiss sein */
h1 {color: red; margin-bottom: 5%;} /* meine Überschrift soll rot sein und einen Abstand zum folgenden Text haben */
#my_Div {color: green; text-align: center; background: white;} /* meine Anzeige soll grün und zentriert sein */
a {color: blue !important;} /* die Farbe meiner Links soll blau sein */
 
.sitemap {margin-top: 5%; border: 1px solid black;} /* ich füge meiner neuen Seite ein Map hinzu */
.sitemap a {color: green !important;}  /* die Links in meiner Sitemap sollen grün sein */
 
</style>  <!-- Styleanweisung abschließen -->
 
</head> <!-- Head schließen -->
 
<body>  <!-- der Body der Seite wird eröffnet -->
 
<h1> Dies ist meine Überschrift </h1>
 
<div id="my_Div">
 
Hier steht die Anzeige meines Seitenbodys. Ich kann nun hier meinen Text schreiben und /oder auch Links und Grafiken einfügen
<br>
<br>
<p style="color: yellow; background: grey;"> oder verschiedene Abschnitte in verschieden Styles </p>
<br>
<p style="color: red; background: black; float: left; padding: 10px;"> oder verschiedene Abschnitte in verschieden Styles </p>
<p style="color: white; background: black; float: right; padding: 10px;"> oder verschiedene Abschnitte in verschieden Styles </p>
<br>
<br>
<img src="http://files.homepagemodules.de/b626647/resize/320x50/a_2_fab0daf9.png" alt="Bild" />
<br>
<br>
<img style="float: left;" src="http://files.homepagemodules.de/b626647/resize/320x50/a_2_fab0daf9.png" alt="Bild" /> <img style="float: right;" src="http://files.homepagemodules.de/b626647/resize/320x50/a_2_fab0daf9.png" alt="Bild" />
<li><a href="http://frapefo-test.xobor.de/calendar.php"> Link 1 </a></li>
<li><a href="http://frapefo-test.xobor.de/calendar.php"> Link 2 </a></li>
<li><a href="http://frapefo-test.xobor.de/calendar.php"> Link 3 </a></li>
<br>
<br>
Die entsprechenden Linkadressen müssen natürlich den eigenen Bedürfnissen angepasst werden.
<br>
Am Ende platziere ich noch eine kleine Sitemap.
<br>
Und schon ist meine erste eigene HTML Seite fertig !
 
</div>  <!-- mein Anzeigecontainer wird geschlossen -->
 
<div class="sitemap"> <!-- meine Sitemap wird geöffnet -->
<table>
<tr>
<td>
<a href="http://frapefo-test.xobor.de/calendar.php"> über uns </a>
</td>
<td>
<a href="http://frapefo-test.xobor.de/calendar.php"> Kontakt </a>
</td>
<td>
<a href="http://frapefo-test.xobor.de/calendar.php"> Mitglied werden </a>
</td>
</tr>
</table>
 
</div> <!-- meine Sitemap wird geschlossen -->
 
 
</html>   <!-- Das Document wird geschlossen -->
 
 

Das Ergebnis seht Ihr hier: --> *Einfache HTML Seite*

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#2 | RE: Wie ist eine HTML Seite aufgebaut? datum

16.04.2018 15:19

Danke für die Erklärung, cirrus minor!

Bei phpbb konnte man sämtliche Styles (Themes und Template)
bearbeiten, allerdings hatte ich damals den Support gelöchert, um
in den Jahren vieles zu verändern!

Template-Auswahl
[[File:Template.png|none|auto]]

antworten

HTML Bild und Link einbinden �

�hnliche Themen

Antworten

Letzter Beitrag

Soundeffekt bei Bild-Mouseover
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von cirrus minor 0 03.02.2019 01:35
cirrus minor • Zugriffe: 184
Drehende Smileys per Iconbar
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von cirrus minor 1 09.05.2018 23:37
Jeanie • Zugriffe: 1077
Farbpalette
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von Jeanie 6 05.05.2018 20:51
cirrus minor • Zugriffe: 1027
verlinkte Grafiken/Fotos "vor" der Forenübersicht
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von cirrus minor 34 27.04.2018 03:41
cirrus minor • Zugriffe: 1962
@ einfügen per Iconbar
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von cirrus minor 2 26.04.2018 21:41
cirrus minor • Zugriffe: 862
Schriftgrößen für die Iconbar
Erstellt im Forum Einbindungen von Codes und Scripten in die Xobor Software von cirrus minor 3 24.04.2018 17:16
Jeanie • Zugriffe: 847
HTML Bild und Link einbinden
Erstellt im Forum HTML Seite, Aufbau, Einbindungen, Meta Tags usw. von cirrus minor 1 27.04.2018 20:51
Jeanie • Zugriffe: 1070
Beispiel für Elemente per CSS stylen
Erstellt im Forum Elemente stylen per CSS von cirrus minor 4 17.04.2018 18:06
cirrus minor • Zugriffe: 957

HTML, CSS & Co. = leicht gemacht !

HTML ... mit kleinen Dingen anfangen