Heute lernen wir Ionic Komponenten zu nutzen. Am Ende gibts es auch noch ein paar Übungen und Fragen

Erste Schritte

Die nachfolgenden Beispiele setzen auf eine vorhandene Ionic App auf. Als Beispiel wir einen App verwendet, die mit der Vorlage tabs erstellt wurde.

ionic start sidemenu sidemenu --type angular --no-link

Titel ändern

Wir ändern den Titel der Seite home. Die Änderung erfolgt in der Datei home.page.html:

<ion-title>Arbeiten mit CSS</ion-title>

Farbe des Titels

Den geänderten Titel formatieren wir nun mit einer individuellen Farbe. Die Änderung erfolgt in der Datei home.page.css:

ion-title {
	color: #3880ff;
}

Farbe des Hintergrund

Jetzt setzen wir den Hintergrund des Titels:

ion-title {
	color: #ffffff;
	background-color: #ff0000;
}

Weiterer Text und Formatierung

In nächsten Schritt fügen wir weiter Überschriften in die Seite ein:

<ion-content padding>
	<h1>Überschrift H1</h1>
	<h2>Überschrift H2</h2>
</ion-content>

Überschrift H1

Überschrift H2

Für diese Überschriften passen wir nun auch die Formatierung an:

h1 {
    color: #ff0000;
    background-color: #000000;
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    color: #000000;
    background-color: #ff0000;
    font-style: italic;
}

Überschrift 1

Überschrift 2

Weitere Beispiele

Und zum Abschluss weiter Textelemente und Formatierungen:

<ion-content padding>
  <h1>Überschrift 1</h1>
  <h2>Überschrift 2</h2>
  <h3>Überschrift 3</h3>
  <h4>Überschrift 4</h4>

  Normaler Text
  Die Welt ist <b>rund</b> und gross.
</ion-content>

ion-title {
    color: #ffffff;
    background-color: #00ff00;
}
h1 { color: greenyellow;}
h2 { color: red;}
h4 {
    background-color: aqua;
    font-family: 'Courier New';
}

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Normaler Text Die Welt ist rund und gross.

Grundlagen HTML

Detaillierte Informationen zur den HTML-Tags gibt es hier und hier:

HTML Elemente

Grundlegende HTML Tags

<div>Block element</div>

Block element

<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>

Page title

Subheading

Tertiary heading

Quaternary heading

<p style="text-align: center;">text</p>

text

<img src="http://blog.via-internet.de/wp-content/uploads/2018/03/logo-toolbox.png" alt="description" height="48" width="100" />

<a href="https://htmlg.com/" target="_blank" rel="nofollow">Click here</a>

Click here

<a href="mailto:info@http://ionicteam.de/?Subject=Hi%20mate" target="_top">Send Mail</a>

Send Mail

Sprung an eine andere Stelle
<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Sprungstelle

Sprung an eine andere Stelle

Jump to footnote

Sprungstelle

<strong>Bold text</strong>

Bold text

<em>Italic text</em>

Italic text

<span style="text-decoration: underline;">
    Underlined text
</span>

Underlined text

<abbr title="Hypertext Markup Language">
    HTML
</abbr>

HTML

<!-- HTML
Comment -->

Vorher<hr />Nachher

Vorher

Nachher

Vorher<br />Nachher

Vorher
Nachher

<q>Success is a journey not a destination.</q>

Success is a journey not a destination.

<blockquote cite="https://ruwix.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote>

The Rubik’s Cube is the World’s best selling puzzle toy.

Gliederungen und Textformatierungen

<table>
    <tr>
        <td>1.1</td><td>1.2</td>
    </tr
    <tr>
        <td>2.1</td><td>2.2</td>
    </tr>
</table>

1.1	1.2
2.1	2.2

Tabelle mit Überschrift und mehreren Spalten

<table><caption><b>Telefonnummern</b></caption>
<thead>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Mustermann</td>
        <td>1234567</td>
        <td>577855</td>
    </tr>
    <tr>
        <td>Musterfrau</td>
        <td>0789</td>
        <td>98765</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td> </td>
        <td>Vorwahl</td>
        <td>Rufnummer</td>
    </tr>
</tfoot>
</table>

**Telefonnummern**
Name	Phone
Mustermann	0123	1234567
Musterfrau	0789	98765
	Personal	Office

Tabellen mit verbundenen Spalten und Zeilen

<table border="1">
 <tr>
  <td colspan="2">Row 1 - Col 1 & Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td>Row 2 - Col 2</td>
 </tr>
</table>

Row 1 – Col 1 & Col 2
Row 2 – Col 1	Row 2 – Col 2

<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td rowspan="2">Row 1 & Row 2 - Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
 </tr>
</table>

Row 1 – Col 1	Row 1 & Row 2 – Col 2
Row 2 – Col 1

<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td>Row 1 - Col 2</td>
  <td>Row 1 - Col 3</td>
  <td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
 </tr>
 <tr>
  <td>Row 3 - Col 1</td>
 </tr>
 <tr>
  <td>Row 4 - Col 1</td>
 </tr>
 <tr>
  <td colspan="2">Row 5 - Col 1 & 2</td>
  <td colspan="2">Row 5 - Col 3 & 4</td>
 </tr>
 <tr>
  <td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
 </tr>
</table>

Row 1 – Col 1	Row 1 – Col 2	Row 1 – Col 3	Row 1, 2, 3 & 4 – Col 4
Row 2 – Col 1	Row 2, 3 & 4 – Col 2 & 3
Row 3 – Col 1
Row 4 – Col 1
Row 5 – Col 1 & 2		Row 5 – Col 3 & 4
Row 6 – Col 1, 2, 3 & 4

Listen

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets </dd>
</dl>

HTML: Hypertext Markup Language
CSS: Cascading Style Sheets

Listen

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

First
Second
Third

Grundlagen CSS

Detaillierte Informationen zur den HTML-Tags gibt es hier und her:

Einbinden von CSS

Es gibt verschiedene Arten, CSS-Definitionen in eine Webseite oder eine ganzen Web-App einzubinden.

Inline CSS

Hier wird die CSS-Definition direkt im HTML-Code eingefügt. Eine einfache Möglichheit mit dem Nachteil, das sie nu an dieser Stelle und für das verwendete Element gültig ist.

<h1 style="color: blue">
    Hello world!
    </h1>

Internal CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

CSS Selectors

Element

Der erste Möglichkeit, ein HTML Element zu formatieren ist, den Namen des HTML-Elementes selbst zu verwenden. Die Formatierung gilt dann nur für das angegebene Element, im nachfolgenden Beispiel also h1 und p:

h1 {
    font-size: 50px;
}

Überschrift 1

p {
    color: green;
}

Dies ist der Tag p

div {
    background-color:red;
}

Tag div

Class

Eine andere Möglichkeit ist die Verwendung einer CSS Klasse. Hier wird über einen Namen (dem Namen der Klasse) die Formatierung zusammengefasst. Der Name der Klasse wird dann im HTML-Element verwendet.

Vorteil: Die Formatierung kann mehreren, auch unterschiedlichen HTML-Elementen zugewiesen werden:

<h1 class='container'>
    Beispiel 1
</h1>
<h1>
    Beispiel 1
</h1>
<p class='container'>
    Beispiel 3
</p>

.container {
    background-color: #F39C12;
}

Beispiel 1

Beispiel 2

Beispiel 3

ID

Eine weitere Möglichkeit der Zuweisung von CSS-Formatierung ist die Verwendung einer ID. Diese erfolgt ebenfalls wie bei einer Klasse über den Namen der ID.

Im Unterschied zu einer Klasse darf eine ID nur einmal in einer HTML Seite verwendet werden:

<div>
<p>Paragraph</p>
<p id='para1'>Paragraph</p>
<p>Paragraph</p>
</div>

#para1 {
    color: green;
    font-size: 16px;
}

Paragraph

Fonts & Colors

<div class='container'>
    <h1 class='heading1'>
        CSS ist toll!
    </h1>
</div>

.container {
    width: 200px;
    height: 100px;
    background-color: red;
    text-align: center;
}
.heading1 {
    font-family: 'Courier New';
    color: white;
}