HTML Einstieg

Written By :

Chicky

Category :

Allgemein

Posted On :

25. Feber 2024

Share This :

Die erste Unterrichtslektion




    
    
    Einstieg


    Hier ist OBEN ab nach UNTEN

    
    
    
Heute ist Freitag

    
Heute ist Freitag

    
Heute ist Freitag

    
Heute ist Freitag

    
Heute ist Freitag

    
Heute ist Freitag

    
    

    
Absatz

    
    
Dies ist ein Absatz

    
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae aperiam nam libero amet iste, reiciendis
        fugiat, ipsum vitae sunt totam maiores distinctio necessitatibus sint fugit assumenda omnis minima in
        voluptates!

    
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, fuga.

    

    
HTML-Formatirungen

    
    Lorem ipsum FETT.
    
    

    
    Lorem ipsum Kursiv.
    

    
    Lorem ipsum unterstrichen.
    

    Lorem ipsum Feett, Kursiv und unterstrichen
    

    
    lorem ipsum
    

    
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, eligendi.
    

    
    
Normaltiefgestellt

    
    
m2

    
    Lorem, ipsum dolor.
    

    
Listen

    
sortierte Listen

    
    
    
    
        
  1. Wien
    2. 
        
  2. Linz
    3. 
        
  3. Graz
    4. 
        
  4. Salzburg
    5. 
    

    

    
unsortierte Listen

    
    
        
  • Wien
    • 
        
  • Linz
    • 
        
  • Graz
    • 
        
  • Salzburg
    • 
    

    
Definitionsliste

    

        
Microsoft

        
produziert: Windows, Office, Word

        
Apple

        
produziert: iPhone, iMack, iPad,

    

    

    
verschahtelte Liste

    
    
        
  • Limondae
    • 
        
      Cola
    
        
      Fanta
    
        
      Sprite
    
        
  • Kaffe
            
      
                
    1. Grosser brauner
      2. 
                
    2. Melange
      3. 
                
    3. Mokka
      4. 
            
    
        
  • Biere
        
      
            
    • Gösser
      • 
            
    • Hirter
      • 
            
    • Puntigamer
      • 
            
    • Stiegl
      • 
            
    • Zipfer
      • 
        
    
        
    • 
    

    

    
    
Hyperlinks

    
Links zur Webseiten/HTML-Dateien

    Zur Sammelsurium-Datei im selben Tab
    Zur Sammelsurium-Datei im neuen Tab
    
    

    
Mail-Links

    
    Sende mir eine eMail

    
    Sende mir und Mitzi eine eMail

    
    Sende mir Mitzi und MAx (in BCC) eine eMail

    
    Partyeinladung mit Betreff

    
    Partyeinladung mit
        Betreff und Text

    

    
Bilder

    
    Bild einer Insel
    
Verlinkungen auf die selbe Seite

    Hier ist OBEN ab nach UNTEN

    

    Hier ist UNTEN ab nach OBEN
    

    

    
23.02.24

    
    
Verlinkungen auf andere Seiten

    Tabellen.html
    

    Übungen

<!DOCTYPE html>

<html lang=“de“>

<head>

    <meta charset=“UTF-8″>

    <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

    <title>Einstieg</title>

</head>

<body>

    <a href=“#unten“ id=“oben“>Hier ist OBEN ab nach UNTEN</a><br>

    <!–Dies ist ein HTML Kommentar, dieser wird in VS Code mit STRG + # eingefügt  –>

    <!– h1 bis h6 sind Überschriften, wobei die h1 die grösste und h6 die kleinste ist –>

    <h1>Heute ist Freitag</h1>

    <h2>Heute ist Freitag</h2>

    <h3>Heute ist Freitag</h3>

    <h4>Heute ist Freitag</h4>

    <h5>Heute ist Freitag</h5>

    <h6>Heute ist Freitag</h6>

    <!– hr fügt eine Trennlinie ein –>

    <hr>

   

<h2>Absatz</h2>

    <!– p-Element ersterllt einen Absatz –>

    <p>Dies ist ein Absatz</p>

    <!– p>lorem => ertellt einen Absatz mit einem Lorem ipsum text –>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae aperiam nam libero amet iste, reiciendis

        fugiat, ipsum vitae sunt totam maiores distinctio necessitatibus sint fugit assumenda omnis minima in

        voluptates!</p>

    <!– p>lorem 10 erstellt einen Absatz mit Lorem ipsum Text mit 10 Wörtern –>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, fuga.</p>

    <hr>

   

<h2>HTML-Formatirungen</h2>

    <!– b-Element formatiert den Text FETT dargestellt –>

    <b>Lorem ipsum FETT.</b>

    <!– br-Tag fügt einen Zeilenumbruch ein –>

    <br>

    <!– i-Element formatiert den Text Kursive dargestellt –>

    <i>Lorem ipsum Kursiv.</i>

    <br>

    <!– u-Element unterstreicht den text –>

    <u>Lorem ipsum unterstrichen.</u>

    <br>

    <u><b><i>Lorem ipsum Feett, Kursiv und unterstrichen</u></b></i>

    <br>

    <!– ins – Element => eingefügter Text –>

    <ins>lorem ipsum</ins>

    <br>

    <!–del – Element => gelöschter Text  –>

    <del>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, eligendi.</del>

    <br>

    <!– sub – Element => tiefgestellter Text –>

    <p>Normal<sub>tiefgestellt</sub></p>

    <!– sup – Element => hochgestellter Text –>

    <p>m<sup>2</sup></p>

    <!– mark => hervorgehobener Text –>

    <mark>Lorem, ipsum dolor.</mark>

    <hr>

   

<h2>Listen</h2>

   

<h3>sortierte Listen</h3>

   

<!– ol>li*4 –>

    <!– type=a,A,1,I,i –>

   

<ol>

        <li>Wien</li>

        <li>Linz</li>

        <li>Graz</li>

        <li>Salzburg</li>

    </ol>

    <hr>

   

<h3>unsortierte Listen</h3>

    <ul>

        <li>Wien</li>

        <li>Linz</li>

        <li>Graz</li>

        <li>Salzburg</li>

    </ul>

   

<h3>Definitionsliste</h3>

    <dl>

        <dt>Microsoft</dt>

        <dd>produziert: Windows, Office, Word</dd>

        <dt>Apple</dt>

        <dd>produziert: iPhone, iMack, iPad,</dd>

    </dl>

   

<hr>

    <h3>verschahtelte Liste</h3>

   

<ul>

        <li>Limondae</li>

        <ul>Cola</ul>

        <ul>Fanta</ul>

        <ul>Sprite</ul>

        <li>Kaffe

            <ol>

                <li>Grosser brauner</li>

                <li>Melange</li>

                <li>Mokka</li>

            </ol>

        <li>Biere

        <ul>

            <li>Gösser</li>

            <li>Hirter</li>

            <li>Puntigamer</li>

            <li>Stiegl</li>

            <li>Zipfer</li>

        </ul>

        </li>

    </ul>

   

<hr>

    <!– 19.02.24 –>

   

<h2>Hyperlinks</h2>

    <h3>Links zur Webseiten/HTML-Dateien</h3>

    <a href=“HTML-Sammelsurium.html“>Zur Sammelsurium-Datei im selben Tab</a>

    <a href=“HTML-Sammelsurium.html“ target=“_blank“>Zur Sammelsurium-Datei im neuen Tab</a>

    <a href=“http://www.bbrz.at“ target=“_blank“></a>

    <hr>

    <h3>Mail-Links</h3>

    <!– Normale eMail –>

    <a href=“mailto:mail@one.rs“>Sende mir eine eMail</a><br>

    <!– eMail mit zwei Empfänger –>

    <a href=“mailto:mail@one.rs?cc=mitzi@huber.at“>Sende mir und Mitzi eine eMail</a><br>

    <!– eMail mit drei Empfänger, BCC kann nicht sehen wer alles die eMail bekommen hatt –>

    <a href=“mailto:mail@one.rs?cc=mitzi@huber.at&bcc=max@muster.at“>Sende mir Mitzi und MAx (in BCC) eine eMail</a><br>

    <!– eMail mit Einladung (Überschrifft) –>

    <a href=“mailto:mail@one.rs?subject=Einladung%20zur%20Party“>Partyeinladung mit Betreff</a><br>

    <!– eMail mit Einladung, Überschrifft und Text –>

    <a href=“mailto:mail@one.rs?subject=Einladung%20zur%20Party&body=Ich%20komme%20zur%20Party“>Partyeinladung mit

        Betreff und Text</a><br>

    <hr>

    <h2>Bilder</h2>

    <!–PFUI so nicht

    <img src=“../images/Landschaft_Klein.bmp“ alt=“Bild einer schönen Insel“ wight=“300px“>  –>

    <img src=“../images/Landschaft_Klein.bmp“ alt=“Bild einer Insel“>

    <h3>Verlinkungen auf die selbe Seite</h3>

    <a href=“#unten“ id=“oben“>Hier ist OBEN ab nach UNTEN</a><br>

    <div style=“margin-bottom: 2000;“></div>

    <a href=“#oben“ id=“unten“>Hier ist UNTEN ab nach OBEN</a>

    <div style=“margin-bottom: 2000;“></div>

    <br>

    <h5>23.02.24</h5>

    <!– 23.02.24 –>

    <h3>Verlinkungen auf andere Seiten</h3>

    <a href=“../html/HTML-Tabellen.html“ target=“_blank“>Tabellen.html</a>

    <br>

    <a href=“../html/HTML-Übungen.html“ target=“_blank“>Übungen</a><br>

</body>

</html>