====== LU03a - Anwendung von Block-Elementen ======
<WRAP center round info 60%>
Block-Elemente starten üblicherweise auf einer neuen Zeile.
Die Breite eines Block-Elements ist jeweils die maximal mögliche Breite.
</WRAP>

==== Beispiele von Block-Elementen ====

==== h1 bis h6-Element ====
{{ :modul:m293:learningunits:lu03:heading.png?200|}}
Die Tags ''<h1>'' bis ''<h6>'' werden zur Definition von HTML-Überschriften verwendet.
''<h1>'' definiert die wichtigste Überschrift. 
''<h6>'' definiert die unwichtigste Überschrift.

Hinweis: Verwenden Sie nur eine ''<h1>'' pro Seite - diese sollte die Hauptüberschrift/das Hauptthema für die gesamte Seite darstellen. 
Überspringen Sie auch keine Überschriftenebenen - beginnen Sie mit ''<h1>'', verwenden Sie dann ''<h2>'' und so weiter.

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers|Live Preview]]

==== div-Element ====
{{ :modul:m293:learningunits:lu03:div.png?400|}}
Der ''div''-Tag definiert eine Unterteilung oder einen Abschnitt in einem HTML-Dokument. 
Das ''<div>''-Tag wird als Container für HTML-Elemente verwendet, die dann mit CSS gestaltet oder mit JavaScript manipuliert werden. 
Jede Art von Inhalt kann in das ''<div>''-Tag eingefügt werden! 

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test|Live Preview]]


==== p-Element ====
{{ :modul:m293:learningunits:lu03:p.png?200|}}
Normale Texte werden auf Webseiten in Absätzen geschrieben. 
Für jeden Textabschnitt wird ein Absatz erzeugt und grosse Texte können so in sinnvolle Abschnitte unterteilt werden. 
Um mit HTML einen Absatz zu erzeugen, verwendet man den ''<p>''-Tag. 
Der Buchstabe **P** ist von Paragraph abgeleitet und das bedeutet Absatz.

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs1|Live Preview]]


==== table-Element ====
{{ :modul:m293:learningunits:lu03:table.png?300|}}
Eine Tabelle wird verwendet, um Daten in einem Tabellenformat darzustellen, das einen Tabellenkopf, einen Tabellenkörper mit einer Tabellenzeile und eine Tabellenspalte umfasst. 

Der ''<table>''-Tag definiert dazu eine HTML-Tabelle.
Darin können eines oder mehrere ''<tr>''-, ''<th>''- und ''<td>''-Elemente vorkommen.
Das <tr>-Element definiert eine Tabellenzeile, das ''<th>''-Element definiert eine Tabellenüberschrift, und das ''<td>''-Element definiert eine Tabellenzelle.

Weiter kann eine HTML-Tabelle kann auch ''<caption>''-, ''<colgroup>''-, ''<thead>''-, ''<tfoot>''- und ''<tbody>''-Elemente enthalten, mehr dazu bei [[https://www.w3schools.com/tags/tag_table.asp|w3school]]

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test|Live Preview]]


<WRAP center round tip 60%>
Die Liste der Block- und Inline Elemente ist noch sehr viel länger. Eine komplette Liste finden Sie bei der [[https://www.w3schools.com/html/html_blocks.asp|w3school]]
</WRAP>


---- 

{{tag>m293-LU03 m293-E1G m293-E1F}}

Frei nach den Beispielen von [[https://www.w3schools.com|w3school]]