Hi, ich bin erst ein Anfänger mit html und überhaupt mit der Homepage und wollte mir ein eigenes Design machen, ich habe aber keine Ahnung von sowas. Könntet ihr mir vielleicht erklären wie sowas geht und par hilfestellungen geben, weil ich möchte ein Design über Anime oder Naruto haben. Wäre nett wenn mir jemand helfen könnte, Danke:|
Html Frage
- Ersteller Sasuke
- Erstellt am
Witschi262
Blogger
Uff, das würde mich auch interessieren.Erst designen dann Coden.
Brauch ich dafür Photoshop?
Brauch ich dafür Photoshop?
Klar gerne erklähr ich das.
Websiten schreibt man mit Xhtml.
Mit Xhtml zeichnet man den Text der Website sematisch aus. SO werden Absätze in
gegliedert, listen wie Navigationen in
und Überschriften in
Dazu wird im Xhtml Grundgerüst im <head></head> bereich mittels
eine Datei namens style.css eingebunden. In dieser Datei steht das komplette Layout der Website.
So kann man Beispielsweiße mit classen oder ids Arbeiten.
Beispielsweise im xhtml dokument steht
Kann man dies in der style.css mit
ansprechen.
Und so, durch verschiedene Style regeln im css, und eine SINNVOLLE auszeichnung des Textes entsteht eine Website.
Mache als anfänger bitte nicht den Fehler Xhtml als Layoutsprache zu nutzen, Tabellen zu nutzen um eine Website zu designen, oder frames.
Das sind alte Methoden die nichtmehr genutzt werden sollten!
Websiten schreibt man mit Xhtml.
Mit Xhtml zeichnet man den Text der Website sematisch aus. SO werden Absätze in
Code:
<p>Absatz</p>
Code:
<ul>
<li></li>
<li></li>
</ul>
Code:
<h1>Überschrift rang 1</h1>
<h2>Überschrift rang 2</h2>
<h3>Überschrift rang 3</h3>
<h4>Überschrift rang 4</h4>
<h5>Überschrift rang 5</h5>
<h6>Überschrift rang 6</h6>
Code:
<link href="style.css" type="text/css" rel="stylesheet" media="screen" />So kann man Beispielsweiße mit classen oder ids Arbeiten.
Beispielsweise im xhtml dokument steht
Code:
<ul id="navigation">
<li><a href="link">Link</a></li>
</ul>
Code:
#navigation {
hier die Styles dafür
}Und so, durch verschiedene Style regeln im css, und eine SINNVOLLE auszeichnung des Textes entsteht eine Website.
Mache als anfänger bitte nicht den Fehler Xhtml als Layoutsprache zu nutzen, Tabellen zu nutzen um eine Website zu designen, oder frames.
Das sind alte Methoden die nichtmehr genutzt werden sollten!
Und wie baut man eine Homepage seite/design auf? z.B.: (links ein großes fenster für alle Ordner, für Linkliste usw. , oben eine Zeile für die Überschrift, rechts vielleicht noch ein längliches Fenster für Informationen und dann noch Farbe usw.)
Und wenn es geht noch ein beispiel für ein Design??? Danke schon im vorraus
Und wenn es geht noch ein beispiel für ein Design??? Danke schon im vorraus
Du kannst dir auch mal meine Homepage anschauen, die ist ja noch in bearbeitung kannst trotzdem mal reinschauen:
Meine Hompage : www.watch-anime-video.de
Meine Hompage : www.watch-anime-video.de
Das ist doch schon eine ordentliche Webseite, aber du möchtest das alles selbst "bauen", oder?
Da kann ich dir folgendes empfehlen:
homepage vorlagen, homepagevorlagen ( templates )
ganz unten auf dieser Webseite kannst du dir (mehrere Seiten!) Designs aussuchen und kostenlos herunterladen. Dort sind auch Designs, die einfach gehalten sind und dennoch gut aussehen.
Beispiel-Nr.: 19, 31, 39, 45, 46, usw.
Viele dieser Designs kannst du farblich anpassen. Die entsprechende Datei für sämtliche Farb- und Designeinstellungen lädst du automatisch mit runter. In der Regel heißt diese Datei format.css. Du musst diese mit einem Texteditor öffnen (z. b. Notepad). In CSS gibts verschiedene Bezeichnungen für entsprechend verschiedene Bereiche, die du Farbig machen möchtest. So zum Beispiel:
"background-color: #FFFFFF" = Hintergrund-Farbe: Hexadezimalzahl für weiß
"color: #000000" = Textfarbe: Hexadezimalzahl für schwarz
Du könntest einfach erstmal herumprobieren, in dem du verschiedene Farbwerte einsetzt und dir dann das Ergebnis in der heruntergeladenen HTML-Datei anschaust. So lernst du gleich, welche Stelle in der CSS-Datei für welchen Bereich in der HTML-Datei zuständig ist :)
Eine Auswahl an Farbcodes (Hexadezimalzahlen) findest du bspw. hier:
Hexadezimal-Codes
Hoffe, konnte dir schon ein wenig weiterhelfen.
Viele Grüße
Kizura
homepage vorlagen, homepagevorlagen ( templates )
ganz unten auf dieser Webseite kannst du dir (mehrere Seiten!) Designs aussuchen und kostenlos herunterladen. Dort sind auch Designs, die einfach gehalten sind und dennoch gut aussehen.
Beispiel-Nr.: 19, 31, 39, 45, 46, usw.
Viele dieser Designs kannst du farblich anpassen. Die entsprechende Datei für sämtliche Farb- und Designeinstellungen lädst du automatisch mit runter. In der Regel heißt diese Datei format.css. Du musst diese mit einem Texteditor öffnen (z. b. Notepad). In CSS gibts verschiedene Bezeichnungen für entsprechend verschiedene Bereiche, die du Farbig machen möchtest. So zum Beispiel:
"background-color: #FFFFFF" = Hintergrund-Farbe: Hexadezimalzahl für weiß
"color: #000000" = Textfarbe: Hexadezimalzahl für schwarz
Du könntest einfach erstmal herumprobieren, in dem du verschiedene Farbwerte einsetzt und dir dann das Ergebnis in der heruntergeladenen HTML-Datei anschaust. So lernst du gleich, welche Stelle in der CSS-Datei für welchen Bereich in der HTML-Datei zuständig ist :)
Eine Auswahl an Farbcodes (Hexadezimalzahlen) findest du bspw. hier:
Hexadezimal-Codes
Hoffe, konnte dir schon ein wenig weiterhelfen.
Viele Grüße
Kizura
Bei den komplexen Designs, wie die mit den Bildern im Hintergrund, hat der Designer mit einem Ordner gearbeitet, in dem alle Bilder (z. B. als Bildformat jpeg, gif, png) liegen.
Am Beispiel von Vorlage Nr. 18 (das mit der Frau): In der heruntergaldenen WinRAR-Datei findest du unter anderem die Dateien
~ Der Ordner "images"
~ format.css
~ index.html
Wenn du die Datei index.html mit einem Texteditor öffnest (Rechtsklick / Öffnen mit ... / Editor) und dir den Quellcode anschaust, wirst du hier und da den Code für das Einfügen von Bildern finden
<img src="http://www.html.de/images/1.jpg" width="22" height="22" border="0" alt="" />
src = Source = Quelle, was bedeutet es ist die Adresse zu deiner Bildquelle. In diesem Fall wird auf den Ordner "images" und auf das Bild "1.jpg" verwiesen. Du kannst die Bilder nach belieben ersetzen. Du fügst einfach dein entsprechendes Bild in den Ordner "images" ein und änderst den Code in der <img src ...> Zeile entsprechend dem Namen deines Bildes. Wenn du nicht weißt, welches Bild du wo einfügen musst, probier es aus - so wie bei den Farben!
Learning by Doing (und ein bisschen Geduld). Wichtig bei Bildern ist, achte unbedingt auf die richtige Endung der Bilddatei. Es ist leider sehr wichtig, dass man die Endung richtig schreibt: jpg, JPG, jpeg, JPEG sind alles andere Endungen, die genau so geschrieben werden müssen!
Viele Grüße
Kizura
Am Beispiel von Vorlage Nr. 18 (das mit der Frau): In der heruntergaldenen WinRAR-Datei findest du unter anderem die Dateien
~ Der Ordner "images"
~ format.css
~ index.html
Wenn du die Datei index.html mit einem Texteditor öffnest (Rechtsklick / Öffnen mit ... / Editor) und dir den Quellcode anschaust, wirst du hier und da den Code für das Einfügen von Bildern finden
<img src="http://www.html.de/images/1.jpg" width="22" height="22" border="0" alt="" />
src = Source = Quelle, was bedeutet es ist die Adresse zu deiner Bildquelle. In diesem Fall wird auf den Ordner "images" und auf das Bild "1.jpg" verwiesen. Du kannst die Bilder nach belieben ersetzen. Du fügst einfach dein entsprechendes Bild in den Ordner "images" ein und änderst den Code in der <img src ...> Zeile entsprechend dem Namen deines Bildes. Wenn du nicht weißt, welches Bild du wo einfügen musst, probier es aus - so wie bei den Farben!
Learning by Doing (und ein bisschen Geduld). Wichtig bei Bildern ist, achte unbedingt auf die richtige Endung der Bilddatei. Es ist leider sehr wichtig, dass man die Endung richtig schreibt: jpg, JPG, jpeg, JPEG sind alles andere Endungen, die genau so geschrieben werden müssen!Viele Grüße
Kizura
Also, wenn du selber Websiten machen willst dann Lerne Xhtml und css.
Da gibts gute Tutorials. Einfach mal nach Sematischen und Validen Webdesign googlen.
Die Templates wo du da siehst und auch deine bisherige Website bestehen aus Tabellen. Wie ich oben schon sagte diese form von Websitebau ist schon einige Jahre veraltet.
Wieso sollte man eine Tabelle zum Aufbau eines Designs nutzen?
In eine Tabelle gehören Tabellatische Daten.
Sollte man nichtmehr nutzen, ist schwer zu pflegen und wer soetwas benutzt hat den Sinn von Html nicht verstanden.
Wenn du selber Websiten schreiben willst Lerne Xhtml und css Sematisch und valide zu schreiben.
Wenn nicht nimm diese fertig Layouts. Doch wundere dich nicht wenn fehler auftreten oder sonst was.
Achja noch als Tipp, hier auf der Free Template website steht:
Sonst solltest du lieber dafür bezahlen.
Allerdings für mistlayouts zu zahlen ist... naja fragwürdig xD
Edit:
Da gibts gute Tutorials. Einfach mal nach Sematischen und Validen Webdesign googlen.
Die Templates wo du da siehst und auch deine bisherige Website bestehen aus Tabellen. Wie ich oben schon sagte diese form von Websitebau ist schon einige Jahre veraltet.
Wieso sollte man eine Tabelle zum Aufbau eines Designs nutzen?
In eine Tabelle gehören Tabellatische Daten.
Sollte man nichtmehr nutzen, ist schwer zu pflegen und wer soetwas benutzt hat den Sinn von Html nicht verstanden.
Wenn du selber Websiten schreiben willst Lerne Xhtml und css Sematisch und valide zu schreiben.
Wenn nicht nimm diese fertig Layouts. Doch wundere dich nicht wenn fehler auftreten oder sonst was.
Achja noch als Tipp, hier auf der Free Template website steht:
sicher das du eine Private seite hast? Keine Werbung von anderen die eingeblendet wird? Keine Dienstleistungen usw usw usw.?
Sonst solltest du lieber dafür bezahlen.
Allerdings für mistlayouts zu zahlen ist... naja fragwürdig xD
Du musst, wenn du deinen Text richtig ausgezeichnet hast, den Xhtml Tags ids und classen zuweisen und im css diesen dan Breiten, farben, höhen geben. Du kannst links und deren farben verändern und vieles mehr.
Edit:
Auf dein Webspace hochladen. Per ftp mit beispielsweise filezilla.
_Thor_
Aktives Mitglied
Ratsam ist es, die Links von oben nach unten durchzulesen.
Einführung | Webdesign mit XHTML und CSS
Erlernen Sie HTML und CSS - Kostenlose Tutorials - Erstellen Sie Ihre eigene Webseite | HTML.net
CSS 4 You - The Finest in Stylesheets
Einführung | Webdesign mit XHTML und CSS
Erlernen Sie HTML und CSS - Kostenlose Tutorials - Erstellen Sie Ihre eigene Webseite | HTML.net
CSS 4 You - The Finest in Stylesheets
Schön das meine Tipps gleich wieder niedergebuht und abelehnt werden. Wenn es ihm hilft, davon zu lernen, was ich hier zuerst schrieb - wieso ist das schon wieder falsch?
Dann ist das eben veraltet - na und? Es ist aber nicht unwichtig zu wissen, wie es auch gehen kann. Und für einen "blutigen" Anfänger ist die einfache (wenn auch veraltete) Methode vielleicht die lehrreichste. CSS zu lernen ist nicht einfach für jemanden, der noch nicht mal von HTML richtig Ahnung hat! Könnte man mal drüber nachdenken ..
Wollte nur helfen und ich hoffe, Sasuke, ich konnte dir trotzdem helfen!
Viele Grüße
Kizura
Dann ist das eben veraltet - na und? Es ist aber nicht unwichtig zu wissen, wie es auch gehen kann. Und für einen "blutigen" Anfänger ist die einfache (wenn auch veraltete) Methode vielleicht die lehrreichste. CSS zu lernen ist nicht einfach für jemanden, der noch nicht mal von HTML richtig Ahnung hat! Könnte man mal drüber nachdenken ..
Wollte nur helfen und ich hoffe, Sasuke, ich konnte dir trotzdem helfen!
Viele Grüße
Kizura
Für Anfänger sollte man also gleich die prozigen PHP-Java-Seite anbieten, achso, verstehe - hm, könnte ich auch sofort draus schlau werden :evil:!
Ihr steckt eure Prioritäten viel zu hoch, ihr dürft nicht immer von eurer "Professionalität" auf andere schließen. Ja, auch in diesem Jahrhundert gibt es noch Menschen, die keine Ahnung von der Materie haben und beim Urschleim anfangen müssen!
Grüße
Kizura
Danke an alle (auch Kizura) eure Beiträge waren sehr hilfreich, aber ich denke das Design was ich jetzt werde ich beibehalten, weil ehe ich was falsch mache oder das ich das nicht hinbekomme lass ich das lieber sein. Aber meine Frage ist noch nicht beantwortet: Wie kann man seine Homepage veröffentlichen?
eure Beiträge waren sehr hilfreich, aber ich denke das Design was ich jetzt werde ich beibehalten, weil ehe ich was falsch mache oder das ich das nicht hinbekomme lass ich das lieber sein. Aber meine Frage ist noch nicht beantwortet: Wie kann man seine Homepage veröffentlichen?