HTML-Anfängerfragen

[Think.Different]

Hallo,
Ich benötige Hilfe bei einer Lektion:
Ich verstehe halt momentan einfach den Sinn der einzelnen Tags nicht.
Könnte mir Vl. das ganze jemand aufschlüsseln welcher Tag was verursacht und was diese bedeuten und den Sinn ?

 

[giesbert]

Was genau verstehst du denn nicht?

 

[Think.Different]

Hallo,
Ich benötige Hilfe bei einer Lektion:
Ich verstehe halt momentan einfach den Sinn der einzelnen Tags nicht.
Könnte mir Vl. das ganze jemand aufschlüsseln welcher Tag was verursacht und was diese bedeuten und den Sinn ?

Anhang anzeigen 119012

Was genau verstehst du denn nicht?

Die ersten Schritte von CSS. (ich weiß hier steht HTML )
dort steht:

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

Ich habe jetzt einige Videos angeschaut und gesehen das ich bei CSS beine Befehle verknüpfen muss.
Jetzt habe ich auch gesehen das es wohl egal ist in welcher Reihenfolge ich das schreibe bsp:

<link rel="stylesheet" href="stylesheet.css" type="text/css"/>

Wofür stehen halt die einzelnen Tags ?
<Link type rel href

und wozu führen diese ?
bzw wie kommt man auf die Werte ?

text/css stylesheet stylesheet.css


also href="stylsheet.css ist mir denke ich klar das ist der Ort auf den verlinkt werden soll wie bei Webseiten etc. nur hier geht es auf ein anderes "Blatt" wenn man es so nennt ?

Muss ich diese befehle immer geben ?

beim CSS ist es so das man erst den Sektor hat und dann die Eigenschaft und dann den Wert.
Wenn ich bsp <p> habe wird alles im Bereich h1 nach meinen wünschen geändert bsp. color:red etc.
Aber was ist wenn ich später unten wieder ein <p> habe und der soll aber color:blue sein ?
dieser wird doch dann automatisch in der Farbe wie zu erst geändert red oder nicht ?
wie schreibe ich das der erste Absatz rot ist aber weiter unten der zweite blau ?

 

[giesbert]

link = Element (Tag) es wird eine Datei mit der aktuellen HTML-Datei verknüpft
type = Attribut: von welchem Typ ist die verknüpfte Datei?
rel = Attribut: In welcher Relation steht die verknüpfte Datei zur HTML-Datei?
href = Attribut: Wo liegt die verknüpfte Datei?

Für den Rest fehlt mir jetzt die Zeit, nur soviel: CSS-Anweisungen gliedern sich in SELEKTOR und DEKLARATION. Der Selektor legt das WAS fest (was soll gestylt werden?), die Deklaration das WIE (wie soll das gewählte/die gewählten Element(e) gestylt werden?). Die Deklaration teilt sich auf in EIGENSCHAFT und WERT: Welche Eigenschaft soll welchen Wert bekommen? Notation: Selektor {Deklaration} also: Selektor {Eigenschaft: wert}. Mehrere Deklarationen werden mit einem Komma getrennt.

 

[Think.Different]

link = Element (Tag) es wird eine Datei mit der aktuellen HTML-Datei verknüpft
type = Attribut: von welchem Typ ist die verknüpfte Datei?
rel = Attribut: In welcher Relation steht die verknüpfte Datei zur HTML-Datei?
href = Attribut: Wo liegt die verknüpfte Datei?

Leider nicht zu 100% verstanden...
link = ok verstehe ich als Tag das man dort die HTML-Datei verknüpfen will.
type = Ist das wie eine Beschreibung für mich oder ein fixer wert bzw tag den ich dort schreibe ? (wenn ja welche typen gibt es noch)
rel = Wie oben...
href = ok ja wie halt das verlinken zur Seite. muss ich dann denke ich so nennen wie ich mein Blatt genannt habe.

Verstehe ich also so diesen Befehl das dort von meinem HTML Blatt zu meinem neuen CSS Blatt verknüpft wird damit das HTML Blatt immer weiß worauf es zugreifen muss.
Also verstehe ich es so das ich das ich es dann auch nur einmal eintragen muss in den <head< Bereich da es ja einmal reicht auf das CSS Blatt zu verweisen.

Das "Stylesheet" ist das ebenfalls ein Begriff den man immer dafür benutzt oder kann ich es auch anders nennen ?

 

[ThomasN]

CSS = Cascading Stylesheet
Heißt also immer so und kannst du nicht anders nennen

Mit dem Link Tag in deinem Beispiel bindest du den Stylesheet ein. Das funktioniert immer gleich. Wenn du mehrere Stylesheets in eine HTML Datei einbinden willst, gleiche Zeile nochmal kopieren und href Inhalt ändern. Der Rest bleibt gleich.
Da es sich grundsätzlich um XML handelt, ist die Reihenfolge der Attribute (href, type, ...) egal. Das hast du auch schon richtig erkannt.
Wenn du jetzt in deinem Stylesheet den p Tag formatierst, gilt das für die komplette HTML Seite. hast du ja auch schon erkannt.
Und als nächstes wirst du dann zu id und class kommen. Das sind Attribute die du beinahe allen HTML Elementen zuweisen kannst. Anhand der Werte dieser Attribute kannst du dann im Stylesheet die Absätze unterschiedlich selektieren und dann formatieren.

 

[Think.Different]

CSS = Cascading Stylesheet
Heißt also immer so und kannst du nicht anders nennen

Mit dem Link Tag in deinem Beispiel bindest du den Stylesheet ein. Das funktioniert immer gleich. Wenn du mehrere Stylesheets in eine HTML Datei einbinden willst, gleiche Zeile nochmal kopieren und href Inhalt ändern. Der Rest bleibt gleich.
Da es sich grundsätzlich um XML handelt, ist die Reihenfolge der Attribute (href, type, ...) egal. Das hast du auch schon richtig erkannt.
Wenn du jetzt in deinem Stylesheet den p Tag formatierst, gilt das für die komplette HTML Seite. hast du ja auch schon erkannt.
Und als nächstes wirst du dann zu id und class kommen. Das sind Attribute die du beinahe allen HTML Elementen zuweisen kannst. Anhand der Werte dieser Attribute kannst du dann im Stylesheet die Absätze unterschiedlich selektieren und dann formatieren.

Super danke dir
Habe es Dank den Übungen auch schon besser verstanden. gefällt mir gut

Was ist XML ?
Achse also gibt es dann später bsp <p1> <p2> <p3> etc so das man es halt auseinander halten kann ?
wenn ich nicht auf so eine Lektion komme schreibe ich dich mal an

Bin Bald Fertig mit den HTML & CSS Aufgaben was sollte man denn danach anfangen zu lernen ?
Also ich fange ja wirklich bei 0 an.

 

[giesbert]

Bin Bald Fertig mit den HTML & CSS Aufgaben was sollte man denn danach anfangen zu lernen ?

HTML und CSS. Ernsthaft. Du tummelst dich da noch in den absoluten Anfängergründen. Nach CodeAcademy kannst du es ja mal bei W3Schools versuchen: http://www.w3schools.com.

Vor allem solltest du jede Menge Webseiten bauen, ohne Praxis ist das alles eher sinnlos .

Achse also gibt es dann später bsp <p1> <p2> <p3> etc so das man es halt auseinander halten kann ?

Nein, es gibt nur P (und als neutrales Block-Element noch DIV). Sollen Absätze unterschiedlich markiert werden, dann weist man den Absätzen entsprechende CSS-Klassen zu, zB

<p class="ersterAbsatz">BlaBlubb</p>
<p class="standardAbsatz">BlaBlubb</p>

Im CSS definert man dann zB, dass die Klasse "ersterAbsatz" ohne Einzug ist, ein "standardAbsatz" aber mit Einzug.

 

[giesbert]

Leider nicht zu 100% verstanden...
type = Ist das wie eine Beschreibung für mich oder ein fixer wert bzw tag den ich dort schreibe ? (wenn ja welche typen gibt es noch)
rel = Wie oben...

Die Attribute sind nicht für dich gedacht, sondern für die Rendering-Engine des Browsers, damit die weiß, was wie zusammenhängt .

Also: type="text/css" und rel="stylesheet" müssen genau so heißen und nicht anders.

 

[Think.Different]

HTML und CSS. Ernsthaft. Du tummelst dich da noch in den absoluten Anfängergründen. Nach CodeAcademy kannst du es ja mal bei W3Schools versuchen: http://www.w3schools.com.

Vor allem solltest du jede Menge Webseiten bauen, ohne Praxis ist das alles eher sinnlos .


Nein, es gibt nur P (und als neutrales Block-Element noch DIV). Sollen Absätze unterschiedlich markiert werden, dann weist man den Absätzen entsprechende CSS-Klassen zu, zB

<p class="ersterAbsatz">BlaBlubb</p>
<p class="standardAbsatz">BlaBlubb</p>

Im CSS definert man dann zB, dass die Klasse "ersterAbsatz" ohne Einzug ist, ein "standardAbsatz" aber mit Einzug.

Mir ist natürlich bewusst dass dies erst der Absolute Anfang ist aber jeder fängt mal bei Null an
Werde weiter erst mal Schritt für Schritt die Grundlagen lernen.
Meinst du Bauen mit Templates oder von einer Weißen Seite ?
Wie Baut ihr es ?

Ja so meinte ich es auch ich kenne halt nur noch nicht wie man das ganze unterschiedlich markiert aber Danke jetzt weiß ich es

 

[Think.Different]

Die Attribute sind nicht für dich gedacht, sondern für die Rendering-Engine des Browsers, damit die weiß, was wie zusammenhängt .

Also: type="text/css" und rel="stylesheet" müssen genau so heißen und nicht anders.

Ja genau das habe ich nun verstanden das es ein Wert ist den man nicht ändert.

Danke dir.

 

[giesbert]

Meinst du Bauen mit Templates oder von einer Weißen Seite ?

From scratch, also von <!doctype html > bis </html >: Übung macht den Meister

Ich selbst schreibe meine Webseiten komplett mit Textmate (reiner Texteditor). Für Blogs benutze ich Wordpress mit eigenen Templates, die ebenfalls in Textmate geschrieben werden.

 

[Think.Different]

Benötige mal wieder hilfe.
Ich verstehe momentan nicht wie differenzieren kann welchen Absatz ich benutzen möchte.
In der Erklärung steht irgendwas von nem Baum den man sich vorstellen soll aber so verstehe ich es leider nicht.

Wie muss ich vorgehen um die Absätze zu verändern ?
welchen div ul li etc muss ich auswählen das verstehe ich nicht wie ich darauf komme.
Was bedeutet das > ?


Die Aufgabe ist zwar richtig habe es aber dennoch nicht wirklich verstanden.

 

[seaker]

Html besitzt eine Baumstruktur. Die "siehst" du im Grunde auch in deiner Index.html. (Warum spricht man von Baum ? Schau dir mal dieses vereinfachte Bild einer HTML Struktur einer Webseite an. Daran erkennt man eine Baum-artige Struktur... http://javascript-workshop.de/buch/abb/abb_9_1.gif

Was heisst das: Html gliedert sicht, vereinfacht gesprochen, in verschiedene Elemente die ineinander verschachtelt sind. Oberste Ebene ist <html></html>. Da drin befindet sich irgendwann der <body> indem alle deine Deklarationen und Texte stehen die auf der Webseite dargestellt werden.

Nach diesem "Schachtelprinzip" ist jede Seite aufgebaut. Und natürlich muss dann auch das CSS darauf reagieren.

Da, gerade bei Paragraphen "<p>" und allgemeinen Containern "<div>" nur eben diese allgemeinen Bezeichnungen existieren gibt es hilfsmethoden bzw CSS Selektoren wie man eben gezielt bestimmte Paragraphen oder Container beeinflussen kann ohne separate Kennzeichnungen. (wie beispielsweise von giesbert mit "<p class="erster Absatz">" genannt wurde).

Zu deiner Fragestellung: Was tut das ">". DIes ist im Grunde ein Selektor der sagt "die nachfolgenden Deklarationen wirken nur auf die enthaltenen Elemente". Schreibst du also "div > p" so wirken die Definitionen nur auf alle P-Elemente die in einem DIV - COntainer liegen. Nicht aber auf die die ausserhalb liegen wie beispielsweise das erste P-Elemente was direkt im Body angesiedelt ist (Index.php Zeile 8.

Die CSS sowie sie da gerade in deinem Screenshot aufgebaut ist styled generell erstmal alle P-Elemente mit einer bestimmten Schriftart. (Zeile 1-4). Danach werden diejenigen P-Elemente fett geschrieben die innerhalb des Body Tags liegen (Zeile 6-9). Diese werden danach noch einmal spezifizierter betrachtet und verändert. Zum einen diejenigen P-Elemente welche innerhlab eines Div-Container liegen (Zeile 11-14) sowie die , die innerhalb eines List-Elements angesiedelt sind (Zeile 16-20).

Durch die entsprechenden Anweisungen kannst du also gezielt auf den Aufbau deiner Html-Datei Bezug nehmen ohne separate Class-Deklarationen in die index.html zu schreiben.

 

[Think.Different]

Html besitzt eine Baumstruktur. Die "siehst" du im Grunde auch in deiner Index.html. (Warum spricht man von Baum ? Schau dir mal dieses vereinfachte Bild einer HTML Struktur einer Webseite an. Daran erkennt man eine Baum-artige Struktur... http://javascript-workshop.de/buch/abb/abb_9_1.gif

Was heisst das: Html gliedert sicht, vereinfacht gesprochen, in verschiedene Elemente die ineinander verschachtelt sind. Oberste Ebene ist <html></html>. Da drin befindet sich irgendwann der <body> indem alle deine Deklarationen und Texte stehen die auf der Webseite dargestellt werden.

Nach diesem "Schachtelprinzip" ist jede Seite aufgebaut. Und natürlich muss dann auch das CSS darauf reagieren.

Da, gerade bei Paragraphen "<p>" und allgemeinen Containern "<div>" nur eben diese allgemeinen Bezeichnungen existieren gibt es hilfsmethoden bzw CSS Selektoren wie man eben gezielt bestimmte Paragraphen oder Container beeinflussen kann ohne separate Kennzeichnungen. (wie beispielsweise von giesbert mit "<p class="erster Absatz">" genannt wurde).

Zu deiner Fragestellung: Was tut das ">". DIes ist im Grunde ein Selektor der sagt "die nachfolgenden Deklarationen wirken nur auf die enthaltenen Elemente". Schreibst du also "div > p" so wirken die Definitionen nur auf alle P-Elemente die in einem DIV - COntainer liegen. Nicht aber auf die die ausserhalb liegen wie beispielsweise das erste P-Elemente was direkt im Body angesiedelt ist (Index.php Zeile 8.

Die CSS sowie sie da gerade in deinem Screenshot aufgebaut ist styled generell erstmal alle P-Elemente mit einer bestimmten Schriftart. (Zeile 1-4). Danach werden diejenigen P-Elemente fett geschrieben die innerhalb des Body Tags liegen (Zeile 6-9). Diese werden danach noch einmal spezifizierter betrachtet und verändert. Zum einen diejenigen P-Elemente welche innerhlab eines Div-Container liegen (Zeile 11-14) sowie die , die innerhalb eines List-Elements angesiedelt sind (Zeile 16-20).

Durch die entsprechenden Anweisungen kannst du also gezielt auf den Aufbau deiner Html-Datei Bezug nehmen ohne separate Class-Deklarationen in die index.html zu schreiben.

Ich Danke dir sehr für diesen Ausführlichen Beitrag

 

[giesbert]

Zu deiner Fragestellung: Was tut das ">". DIes ist im Grunde ein Selektor der sagt "die nachfolgenden Deklarationen wirken nur auf die enthaltenen Elemente". Schreibst du also "div > p" so wirken die Definitionen nur auf alle P-Elemente die in einem DIV - COntainer liegen. Nicht aber auf die die ausserhalb liegen wie beispielsweise das erste P-Elemente was direkt im Body angesiedelt ist (Index.php Zeile 8.

Jein; "div p" ist das, was du beschreibst: alle p innerhalb eines div. "div > p" meint aber: "alle p's, die ein direktes Kindelement eines div's sind. Konstruieren wir mal ein wildes Beispiel - den Unterschied zwischen "div > p" und "div p" erkennt man, wenn man die entsprechende CSS-Anweisungen wechselseitig auskommentiert:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS-Test</title>
    <style type="text/css">
      body {
        font-family: Arial;
      }
      td  {
        border: 1px solid black;
        padding: 5px;
      }
      caption{
        background-color: black;
        color: white;
        padding: 5px;
      }
   
      /* betrifft alle p's innerhalb eines div
      div p {
        background-color: red;
        color: white;
        font-weight: bold;
      }
      */
   
      /* betrifft nur p's als direktes Kind-Elemente von div */
      div > p {
        background-color: red;
        color: white;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div>
      <p>Ein p als direktes Kind-Element eines div</p>
      <table>
        <caption>Eine blödsinnige Tabelle ;-)</caption>
        <tr>
          <td><p>Ein p innerhalb eines td, <em>kein</em> direktes Kind-Element eines div</p></td>
        </tr>
      </table>
      <p>Noch ein p als direktes Kind-Element eines div</p>
    </div>
  </body>
</html>

 

[seaker]

Ja da hast du recht. Unklar ausgedrückt. Ich meinte diejenigen die auf erster Ebene unter dem DIV stehen. Nicht diejenigen die noch tiefer verschachtelt sind.