HTML gute Tutorials für den kompletten Neueinsteiger
- Ersteller DLSBlocky
- Erstellt am
![[ChAoZ]](https://pics.computerbase.de/forum/avatars/m/491/491529.jpg?1618073566){kind=avatar}
Sieh zu, dass dein Dokument zumindest folgende Struktur aufweist:
Bei deinem Dokument fehlt der Doctype, hier <!DOCTYPE html> für HTML5 und das wichtigste Element von allen - der Titel <title></title> der Seite.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
...
</body>
</html>
- Registriert
- Sep. 2012
- Beiträge
- 690
Mein Ziel ist es eigentlich, ein Layout für die Webseite zu erstellen. Ich möchte halt erst mal mit den Boxen Ordnung und ein System schaffen, nur ich habe das Problem, dass wenn ich noch eine Box erstelle und die, dann vom aussehen (Farbe,Größe,Umrandung usw.) verändere, das sich dann meine 1 Box auch verändert und genauso wie die 2 Box aussieht. Ich hoffe ihr könnt mir folgen^^
Ja, das kannst du umgehen, indem du dem 2. <div> eine class oder id zuweist. id ist eindeutig und einmalig und class kannst du für beliebig viele <div> verwenden. Einfach <div class="einebox">BOX</div> bzw id="". Im stylebereich wird die box dann mit .einbox {width:5px;} angesprochen, bzw #einebox wenn du id="einebox" verwendest. Also .einebox für class="einebox" und #einebox für id="einebox"
Zuletzt bearbeitet:
S
Smartass
Gast
#25 Eine CSS-Regel setzt sich aus dem Selektor, einer Eigenschaft sowie dem zugewiesenen Wert zusammen.
Selektor { Eigenschaft:Wert }
Das hast Du richtig erkannt.
Wenn man allerdings eine id vergibt, beginnt dieser CSS-Selektor mit dem Gatterzeichen # und ist ein dateiweit eindeutiger Bezeichnername für ein Element - btw. - wenn Du Elemente damit auszeichnest, solltest Du diese id-Namen innerhalb der HTML-Datei dann auch nur einmal verwenden.
Siehe: Fiddle
Selektor { Eigenschaft:Wert }
Das hast Du richtig erkannt.
Wenn man allerdings eine id vergibt, beginnt dieser CSS-Selektor mit dem Gatterzeichen # und ist ein dateiweit eindeutiger Bezeichnername für ein Element - btw. - wenn Du Elemente damit auszeichnest, solltest Du diese id-Namen innerhalb der HTML-Datei dann auch nur einmal verwenden.
Siehe: Fiddle
Zuletzt bearbeitet von einem Moderator:
(Typo)
Du kannst Dir das hier mal anschauen und daraus etwas bauen.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of document</title>
<style type="text/css">
div { }
.zwei {position: relative; background-color:#22cffb; margin-left: 100px;}
.drei {position: relative; background-color:#22cf0b; margin-left: 150px; margin-top:1.1em;}
#vier {position: relative; background-color:#efb; margin-left: 50px; height: 150px; }
#funf {position: relative; background-color:#f0b; margin-left: 100px; font-size: 3em;}
#sechs {position: relative; background-color:#22c; margin-left: 20px;}
</style>
</head>
<body>
<div>eins</div>
<div class="zwei">zwei</div>
<div class="drei">drei</div>
<div id="vier">vier</div>
<div id="funf">fünf</div>
<div id="sechs">sechs</div>
</body>
</html>
Zogo
Cadet 3rd Year
- Registriert
- Juni 2010
- Beiträge
- 60
Ich möchte dir www.codecademy.com empfehlen. Der Kurs für HTML legt die "Basics", geht auf die wichtigsten Syntaxbefehle ein, gibt eine gute Einführung in CSS und bietet eine aktive Community für Fragen.
Nach dem Kurs bist du auf jeden Fall in der Lage eine eigene Webseite zu entwerfen. :-)
Jedoch sollte man solide Englischkenntnisse mitbringen - Die Kurse sind ausschließlich in Englisch gehalten.
Nach dem Kurs bist du auf jeden Fall in der Lage eine eigene Webseite zu entwerfen. :-)
Jedoch sollte man solide Englischkenntnisse mitbringen - Die Kurse sind ausschließlich in Englisch gehalten.
Zuletzt bearbeitet:
(Fehlerkorrektur)
- Registriert
- Sep. 2012
- Beiträge
- 690
Danke Zogo, mal schauen wieweit ich das verstehe und Smartass danke für den Hinweis.
smallwall ich danke dir für die Vorlage aber ich versuch gerade meine Fehler zu korrigieren, nur irgendwie klappts grad nicht.
Vielleicht habe ich es auch falsch verstanden aber es verändern sich immer noch beide Boxen, obwohl ich nur eine bearbeiten möchte.
smallwall ich danke dir für die Vorlage aber ich versuch gerade meine Fehler zu korrigieren, nur irgendwie klappts grad nicht.
Vielleicht habe ich es auch falsch verstanden aber es verändern sich immer noch beide Boxen, obwohl ich nur eine bearbeiten möchte.
Anhänge
Zuletzt bearbeitet:
Rossie
Rear Admiral
- Registriert
- Dez. 2010
- Beiträge
- 5.315
DLSBlocky schrieb:
Du definierst den Stil für <div> Elemente. Dies wirkt sich natürlich auf alle solchen Elemente aus. Die zweite Definition überschreibt die erste.
@smallwall hat ein entsprechendes Beispiel bereits geliefert. Nutze #abc zur Definition für ein bestimmtes Element (per id="abc"). .class für Definitionen für beliebige Element (mittels class="class").
jetzt muss ich nur noch schauen, wie ich die Boxen verschieben kann und wie ich sie nebeneinander bekomme^^Nebeneinander bekommst Du die Boxen mit float:left; float:right; etc.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Das kannst Du kurz lesen, da wird das in etwa erklärt.
Oder hier gibt es noch Tips:
http://www.html.de/threads/3-div-boxen-nebeneinander-mitte-variable-groesse.41706/
Mein Beispiel war nicht optimal, hier nochmal das gleiche in grün, nur besser:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Das kannst Du kurz lesen, da wird das in etwa erklärt.
Oder hier gibt es noch Tips:
http://www.html.de/threads/3-div-boxen-nebeneinander-mitte-variable-groesse.41706/
Ergänzung ()
Mein Beispiel war nicht optimal, hier nochmal das gleiche in grün, nur besser:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of document</title>
<style type="text/css">
div { margin:3px; }
div.zwei {position: relative; background-color:#22cffb; margin-left: 100px;}
div.drei {position: relative; background-color:#22cf0b; margin-left: 150px; margin-top:1.1em;}
div#vier {position: relative; background-color:#efb; margin-left: 50px; height: 150px; }
div#funf {position: relative; background-color:#f0b; margin-left: 100px; font-size: 3em;}
div#sechs {position: relative; background-color:#22c; margin-left: 20px;}
</style>
</head>
<body>
<div>eins</div>
<div class="zwei">zwei</div>
<div class="drei">drei</div>
<div id="vier">vier</div>
<div id="funf">fünf</div>
<div id="sechs">sechs</div>
<div class="zwei">sieben</div>
<div class="drei">acht</div>
<div class="drei">neun</div>
</body>
</html>
Zuletzt bearbeitet:
Wie wäre es mit einem Kompletttutorial von Webdesign, (X)HTML und CSS: http://jendryschik.de/wsdev/einfuehrung/ Schritt für Schritt, fande ich sehr wertvoll.
Oder ein bisschen einfacher geschrieben: http://little-boxes.de/little-boxes-teil1-online.html
oder da: http://www.peterkropff.de/site/html/html.htm
Oder ein bisschen einfacher geschrieben: http://little-boxes.de/little-boxes-teil1-online.html
oder da: http://www.peterkropff.de/site/html/html.htm
Holy Grail Layout
Du solltest dich wirklich erstmal ein wenig in die Materie einlesen, bevor du einfach wild drauf los startest. Das kann fast nur in einem Chaos enden.
Du solltest dich wirklich erstmal ein wenig in die Materie einlesen, bevor du einfach wild drauf los startest. Das kann fast nur in einem Chaos enden.
...und warum ist dein erster Schritt dabei ein Code-Editor?DLSBlocky schrieb:
Dein erster Schritt sollte Papier und Bleistift sein. Das Zauberwort heißt Screen Raster. Skizziere dir Element-Anordnungen für die verschiedenen Auflösungen/Bildschirmgrößen, die du unterstützen willst. Willst du brauchbare Darstellung auf Smartphones & Co? Willst du Touch-Support? Wo soll deine Navigation sitzen? Wie soll deine Navigation aussehen? Hast du spezielle interaktive Inhalte, z.B. ne Box mit ner Übersicht über einen TS-Server. Sortier erst einmal deinen Kram mit Bleistift, Lineal und evtl. ein paar farbigen Markern auf stinknormalem karierten Papier, damit du ein Feeling dafür kriegst, was wo hin soll.
Der nächste Schritt führt dich zu kuler.adobe.com, um dir ein vernünftiges Farbschema für deine Seite zusammen zu setzen.
Jetzt darfst du langsam darüber nachdenken, einfach pure Semantik zu schreiben. Deine Inhalts-Struktur von deinem Screen-Raster ergibt, wo du im HTML-Code was zu schreiben hast.
Wenn die Semantik dann steht, dann darfst du langsam über CSS nachdenken.
