Html Grundfragen?
Hallo,
ich habe ganz kleine unterschiedliche Fragen.
Erstmal wollte ich folgendes Fragen. Es gibt ja eine grobe Struktur bei Html Seiten:
header
Article
Footer ....
Ist es aber auch dann so, dass wenn ich die sachen in die jeweiligen Bereiche reinschreibe, die auch von ihrem Platz her angepasst werden, also, alle Elemente, die dann im footer stehen, sind ganz unten zum Beispiel.
2 Frage.
Wie genau richte ich Abstände zueinander ein. Also ich brauche ja css. Aber angenommen ich habe eine überschrift h1 und h2
Wie kann ich jetzt sagen, h2 soll 30cm von h1 entfernt sein. Geht das überhaupt( oder wird der Abstand immer von den Rändern gemessen?
Dann wollte ich fragen, wie man dann definiert, wie die Abstände zwischen einzelnen Wörtern sind.
Angenommen ich schreibe bei h1 Hallo Welt und möchte das Welt mit etwas mehr Abstand versehen. Benutze ich dann padding? Und wie unterscheide ich jetzt genau, ob ich ein Abstand zwischen Wörtern oder ein Abstand (von der Position her) einrichte?
Ich danke vielmals!
5 Antworten
Ist es aber auch dann so, dass wenn ich die sachen in die jeweiligen Bereiche reinschreibe, die auch von ihrem Platz her angepasst werden, also, alle Elemente, die dann im footer stehen, sind ganz unten zum Beispiel.
Nicht dass ich wüsste. Das dürfte wie ein DIV funktionieren im wesentlichen.
Wie genau richte ich Abstände zueinander ein. Also ich brauche ja css. Aber angenommen ich habe eine überschrift h1 und h2
Wie kann ich jetzt sagen, h2 soll 30cm von h1 entfernt sein. Geht das überhaupt( oder wird der Abstand immer von den Rändern gemessen?
Das sind derart grundlegende Fragen, dass ich dazu raten würde, ein CSS-Tutorial zu machen.
Da sollte schon einmal einiges dazu erklärt werden.
An und für sich möchtest du aber sowieso eher sleten einen festen Abstand zwischen zwei Elementen haben. Und wenn doch, dann gibt es verschiedene Möglichkeiten, die passenden hängt vom konkreten Anwendungsszenario ab.
Dann wollte ich fragen, wie man dann definiert, wie die Abstände zwischen einzelnen Wörtern sind.
Irgendein font-Attribut:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
Konkret dürfte das wohl mit "letter-spacing" und "word-spacing" gehen.
Verstehe, also generell die unterteilungen wie div article ... sinf einfach container.
Im wesentlichen schon. Manche Elemente haben aber auch besondere Eigenschaften.
aber wie genau kann ich sagen, dass ich jeweuls die über und unterschrift zueinander trennen und dass nicht plötzlich alles nebeneinander steht (also auch due Beschreibungen)?
Du konntest beispielsweise beides in jeweils getrennte Container packen. In den Containern dann sagen, sollen die Dinge untereinander stehen. Und die Zwei Container sollen nebeneinander sein.
Dürfte z.B. mit "text-align" oder "justify-content" umsetzbar sein. Aber auch wieder Anwendungsfallabhängig.
also Cm schonmal gar nicht, wenn dann px, em oder rem
Aber angenommen ich habe eine überschrift h1 und h2
Auch das legt man via CSS fest.
Dafür gibt es die Eigenschaften wie line-height, margin, padding, letter-spacing, word-spacing, ...
Wie kann ich jetzt sagen, h2 soll 30cm von h1 entfernt sein.
wie groß ist denn der Monitor bei 30cm Abstand?
Entweder erledigst du das wie oben beschrieben über die CSS-Eigenschaften des entsprechenden Tags <h1> bzw. <h2> oder du fügst in deinem Text eine entsprechende Anzahl Zeilenumbrüche ein....
Dann wollte ich fragen, wie man dann definiert, wie die Abstände zwischen einzelnen Wörtern sind.
bereits oben mit word-spacing genannt. Für Buchstaben gibt es dann letter-spacing. Alternativ bleibt dir auch die Verwendung des Non-Breaking-Space im Text "&nbrsp;"
Angenommen ich schreibe bei h1 Hallo Welt und möchte das Welt mit etwas mehr Abstand versehen. Benutze ich dann padding?
Padding ist für den inneren Abstand zum Rand des Elementes <h1>. Damit beeinflusst du den gesamten Text im <h1>-Element.
HTML dient der Strukturierung, CSS sorgt für die Formatierung der Webseite.
Die Tags, die im HTML-Teil der Webseite stehen, können wie Container behandelt werden, die noch formatiert werden müssen (durch CSS).
Eine Webseite kann auch ohne CSS-Formatierung erstellt werden, dann greifen minimalistische "Grundformatierungen" und die Seite sieht mehr wie ein Stück Schreibmaschinenpapier aus. (vgl. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_article)
Überschriften (h1, h2, ...) sind unterschiedlich groß von "Natur" aus, können aber ebenso an die eigenen Bedürfnisse angepasst werden.
Die Tags wie "<article>" wurden mit HTML 5 implementiert. Für Container nahm man davor hauptsächlich "<div>" Tags. Die neuen Tags dienen auch der semantischen Verbesserung des Quellcodes sowie für Mensch als auch Maschine. Sie erleichtern z.B. Suchmaschinen, die Webseiten inhaltlich besser zu verstehen.
Ist es (...) so, dass wenn ich die sachen in die jeweiligen Bereiche reinschreibe, die auch von ihrem Platz her angepasst werden, (...)
Nein, das musst du selbst (mit CSS) bestimmen. Die Elemente geben zumeist zwar an, wie ihr Inhalt eingeordnet werden kann, doch das hat keine direkte Verknüpfung mit der äußerlichen Darstellung.
Es gibt nur einige Ausnahmen, bei denen Browser bestimmten Elementen vordefinierte Styles zuordnen (bspw. Außen-/Innenabstände für Paragraphen, Listen oder Zitatblöcke).
Wie kann ich jetzt sagen, h2 soll 30cm von h1 entfernt sein. (...)
Gib einen von beiden Elementen einen Außenabstand (margin) in die entsprechende Richtung.
HTML:
<h1 class="title">...</h1>
<h2 class="subtitle">...</h2>
CSS:
.subtitle { margin-top: 30cm }
Die Einheit cm kann zwar verwendet werden, doch würde ich davon abraten. Je nach Bildschirm kann es sein, dass sich der Wert relativ zu Pixelwerten berechnet und somit nicht dem entspricht, was du als Einheit erwarten würdest. Verwende für das Web besser Einheiten wie px.
(...) oder wird der Abstand immer von den Rändern gemessen? (...)
An welchem Ankerpunkt sich ein zu positionierendes Element ausrichtet, hängt von seinem Positionsmodell ab (s. CSS-Property position). Gewöhnlicherweise ist die Ausrichtung relativ zu den Nachbarelementen, die Platz im Seitenflow einnehmen. Man kann ein Element allerdings auch absolut zu einem Elternelement positionieren.
Dann wollte ich fragen, wie man dann definiert, wie die Abstände zwischen einzelnen Wörtern sind.
Mittels word-spacing-Property (CSS).
Wenn der Abstand nur für ein bestimmtes Wort innerhalb eines Textes gelten soll, würde ich es in ein span-Element kapseln, welches via CSS einen entsprechenden Abstand zugeordnet bekommt.
HTML:
<h1>I say hello to the <span class="special-word">world</span></h1>
CSS:
.special-word { margin: 0 5px }
Da ein Abstand zu anderen Elementen geschaffen werden soll, ist an dieser Stelle margin die passendste Wahl. Einen Innenabstand würde ich nur für die Eigenverwaltung eines Elements verwenden (Bsp.: Text innerhalb eines Containers soll verschoben werden). Bedenke zudem, dass ein definierter Innenabstand die Größe des Elements beeinflusst, was bei einem Außenabstand definitiv nicht der Fall ist.
Und wie unterscheide ich jetzt genau, ob ich ein Abstand zwischen Wörtern oder ein Abstand (von der Position her) einrichte?
Wie oben geschrieben: Wenn du ein Element im Bezug zu seinen Nachbarelementen positionieren möchtest, ziehe margin vor. Im Bezug zum Elternelement eignet sich padding. Für generelle Wortabstände kannst du word-spacing verwenden und es dir somit ersparen, extra (span-)Elemente einbauen zu müssen.
Verstehe, also generell die unterteilungen wie div article ... sinf einfach container. Und nochmal zum abstand. Angenommen ich schreibe Hallo und da drunter einen Text und nochmal Tschüß und darunter einen Text wie kann ich jetzt genau die beiden Elemente nebeneinander platzieren, also ich müsste ja logischerweise erstmal alles in einen container packen aber wie genau kann ich sagen, dass ich jeweuls die über und unterschrift zueinander trennen und dass nicht plötzlich alles nebeneinander steht (also auch due Beschreibungen)?