HTML: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Dezember 2020, 11:17 Uhr

Seitenübersicht

Zur Seite "Netzwerke und Internettechnologien"

Zur Seite "Programmiersprachen im Internet und in Netzwerken"

Zur Seite "Webprogrammierung"

Zur Seite "CSS"

Allgemeines

HTML: Hypertext Markup Language

Programmiersprache zur Darstellung von Internetseiten.

HTML wird von Browsern verstanden – es wird kein weiterer Compilierer benötigt.

Aufbau einer HTML-Datei

Grundgerüst

Grundgerüst mit viewport

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Meine Webseite</title>
	</head>
	
	<body>
		
		<h1>Überschrift</h1>
		<p>Ein Absatz</p>
		<p>Noch ein Absatz</p>
		
	</body>
</html>

Grundgerüst mit Liste und Tabelle

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Mein Titel</title>
</head>
<body>
   <p>Absatz mit Zeilenumbrüchen<br>
      2. Zeile<br>Dritte Zeile</p>
   <p>Ein <a href="einbetten.htm">Hyperlink</a></p>
   <p>Ein Bild: <img src="im_garten.jpg" alt="Garten"></p>

   <p>Liste:</p>
   <ul>
      <li>1. Eintrag</li>
      <li>2. Eintrag</li>
   </ul>

   <p>Tabelle:</p>
   <table border="1">
      <tr>
         <td>Zelle A</td>
         <td>Zelle B</td>
      </tr>
      <tr>
         <td>Zelle C</td>
         <td>Zelle D</td>
      </tr>
   </table>
</body>
</html>

Bestandteile des Dokuments:

<!DOCTYPE html>	Steueranweisung
<html> und </html>	bilden das Wurzelelement des Dokuments und teilen dem Browser mit, dass es sich um ein HTML-Dokument handelt.
<head> und </head>	umschließen den Dokumentkopf
<title> und </title>	enthalten den Dokumenttitel für die Titelleiste des Browsers, die Favoritenliste und Ergebnisdaten der Suchmaschinen.
<body> und </body>	umschließen den eigentlichen, sichtbaren Inhalt des Dokuments.

Metatags

Metatag "Generator"

Das Metatag "Generator" umschreibt das Programm, mit dem die Seite gemacht wurde:

    <meta name="Generator" content="iWeb 3.0.4" />

Meta Description

Eine Meta Description ist ein kurzer Beschreibungstext, der den Inhalt eines HTML-Dokuments für Suchmaschinen zusammenfassend beschreiben soll. Meta-Descriptions sind Meta-Tags von Webdokumenten und werden im Head-Bereich eines HTML-Dokumentes hinterlegt. Google kann sie wie andere Suchmaschinen mit dem Meta Title für das Snippet verwenden. Eine gute Description kann im Snippet für eine bessere CTR in den SERPs sorgen.Die maximal empfohlene Länge für Meta-Descriptions beträgt 175 Zeichen.[1]

<head>
<meta name="description" content="Dieser Beschreibungstext soll den Inhalt dieses Dokumentes erläutern.">
</head>

Weitere Bauelemente

<!doctype html> 
 
<head> 
   <title>Titel</title>
</head> 
<body> 
  <h2>Überschrift </h2>
  
  <p> Hier folgt der Inhalt </p>
  <p> <b><i>Fett</i></b> </p>
  <p> <i> kursiv </i> </p>

  <ul>
   <li> Element 1 </li>
   <li> Element 2 </li>
  </ul> 

   <ol>
      <li> Element 3 </li>
   </ol>

   <a href="http://www.google.de">Link
   
     <img src="http://sofitel.com/imagerie/destinations/city/new-york-overview-1400x788-1.jpg">
   </a> 

 </body>
</html>

<!DOCTYPE html>	Steueranweisung
<h2> und </h2>	formatieren eine Überschrift.
<p> und </p>	steht für paragraph, Abschnitt
<b> und </b>	stehen für bold, fett
<i> und </i>	stehen für italics, kursiv.

Liste aller HTML-Elemente

Übersicht Tags

Datei:Html tags.png

Links und Verweise auf andere Dateien

Einfacher interner Link:

<a href="befehlsuebersicht.htm">HTML Befehle Übersicht</a>

[2]

Einfacher externer Link:

<a href="https://www.example.com">link text</a>

[3]

Link zu neuem Fenster oder Tab:

<a href="https://www.example.com/" target="_blank" rel="noopener" >Visit W3Schools!</a>

[4]

Bilder einbinden:

<img src="images/bild01.png"  alt="Das erste Bild">

CSS-Einbindung (im head-Bereich): siehe externes Stylesheet

Javascript-Einbindung:

<script src="beispiel.js"></script>

[5]

Weiterleitung auf eine andere Datei mit Refresh:

<meta http-equiv="refresh" content="5; URL=new-page.html">

Aktualisierung nach 5 Sekunden mit Weiterleitung auf 'new-page.html'.[6]

Mit folgendem Link öffnet sich das E-Mail-Programm des Nutzers:

<a href="mailto:mein.name@servername.de">mein.name@servername.de</a>

Anker

Vom Verweis

<a href="#anker1">HyperlinkWort</a>

springt man zum Anker:

<a id="anker1">Sprungziel</a>

oder

<a id="anker1"></a>

Als Anker ist jedes id-Attribut in jedem beliebigen Element geeignet.

Favicon

Mit einem Grafikprogramm eine Datei favicon.ico erstellen: 32 x 32 Pixel und
in das Verzeichnis, wo index.html liegt, hochladen.
Standardmäßig sucht der Browser hier das Favicon.
Für Browserversionen, die das Favicon nicht eigenständig suchen, kann man in das head-Element der HTML-Seiten folgendes link-Element hinzufügen:

<link rel="icon" type="image/x-icon" href="favicon.ico">

1&1 macht die Vorgabe favicon.png und 16x16 Pixel. Ein Eintrag in der HTML-Datei würde dann lauten:

<link rel="icon" type="image/png" href="favicon.png">

https://www.hosteurope.de/blog/favicon-einbinden/

Typografie / Sonderzeichen

Die Zeichen werden maskiert (escaped), indem man das & mit & ersetzt.

Gedankenstrich:

&ndash;

Geschütztes Leerzeichen (nbsp = non-breaking space = Leerzeichen ohne Umbruch):

&nbsp;

Geschützter Bindestrich (non-breaking hyphen = Bindestrich ohne Umbruch)) dezimal:

&#8209;

oder hexadezimal:

&#x2011;

[7]

Spitze Klammer < ("kleiner als") öffnen:

&lt;

Spitze Klammer > ("größer als") schließen:

&gt;

 &copy;

Weitere Sonderzeichen:

&  = &amp; 
€ = &euro; 
@ = &#64;
® = &reg;
‰ = &permil;
¼ = &frac14;
½ = &frac12;
¾ = &frac34;
² = &sup2;
³ = &sup3;
µ = &micro;
π = &pi;

https://de.wikipedia.org/wiki/Typografische_Zeichen_in_HTML

ASCII-, DOS-Latin-1-, Windows-1252- und HTML-Zeichencodes sowie deutsche Tastatur-Scancodes

Bilder

Bilder sollten in Absätze (<p>) oder vergleichbare Elemente integriert werden.

Bilder einbinden

<img src="images/bild01.png"  alt="Das erste Bild">

Der Alternativtext ist wichtig für

Sehbehinderte
den Fall, dass die Bilder auf dem Server nicht verfügbar sind
Suchmaschinen

Bilder mit Mouseover:

 <img src="images/bild01.png"  alt="Das erste Bild" title="Hier ist der Mouseover-Text.">

Bilder mit Link auf das Bild in Originalgröße:

 <a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Bild mit Bergen"></a>

Figure

<figure>
    <img src="bilder/notepad.png" alt="Notepad" />
    <figcaption>Editor Notepad</figcaption>
</figure>

Hintergrundbilder

https://www.toptal.com/designers/subtlepatterns/

Links

Pixabay

Free Images

PhotoPin

https://www.pixelio.de/

iframe

iframe dient zum Einbinden von Dokumenten und anderen Webseiten.

Beispiel:

<h1>Fenstergucker</h1>

<p>Gucken Sie mal SELFHTML im Fenster an:</p>

<iframe
   src="https://wiki.selfhtml.org/wiki/Startseite"
   width="90%" 
   height="400" 
   name="SELFHTML_in_a_box">

<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
<a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a>
</p>
</iframe>

[8]

Menü

Menü als Liste:

<nav id="menu">        
    <div class="element_menu">
        <h3>Titre menu</h3>
        <ul>
            <li><a href="page1.html">Lien</a></li>
            <li><a href="page2.html">Lien</a></li>
            <li><a href="page3.html">Lien</a></li>
        </ul>
    </div>    
</nav>

Formulare

Zur Seite "Formulare"

Grundgerüst

<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<p>Bitte tragen Sie Ihren Vornamen und Ihren Nachnamen ein.<br>
Senden Sie anschließend das Formular ab.</p>
<form action = "eingabe.php" method = "post">
    <p><input name = "vor"> Vorname</p>
    <p><input name = "nach"> Nachname</p>
    <p><input type = "submit">
    <input type = "reset"></p>
</form>
</body></html>

und hier das anwortende PHP-Programm:

<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<?php
   echo "Guten Tag, " . $_POST["vor"] . " " . $_POST["nach"];
?>
</body></html>
[9]

Formular mit Fieldset

<!DOCTYPE html>
<html>
<body>
<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>
</body>
</html>

[10]

oder

<!DOCTYPE html>
<html>
<body>
		<form class="kontaktformular" method="post" enctype="text/plain" action="mailto:ihr.name@ihresite.de">
			<fieldset>
				<legend>Ihre Frage an uns</legend>
				<label for="Name">Name:</label>
				<input type="text" name="Name" value=""><br>
			
				<label for="email" class="bold">E-Mail-Adresse:</label>
				<input type="text" name="email" value=""><br>
			
				<label for="Nachricht" class="bold">Ihre Nachricht:</label>
				<textarea name="Nachricht"></textarea><br>
				
				<input type="submit" name="Submitbutton" id="submitbutton" value="Abschicken">
			</fieldset>
		</form>
</body>
</html>

Kontaktformular

Beispieldateien für ein Kontaktformular
Auf der genannte Seite sind die Dateien Kontakt.html und Formular-Feedback.php relevant.

Cascading Style Sheet CSS

Zur Seite "CSS"

Internes Stylesheet

Das CSS liegt hier im selben Verzeichnis wie die HTML-Datei.

<head>
...
<style>
p {
  color: #eee; line-height: 20;
}

img {
  height: 100px;
}

#Name {
  margin-top: 2000px;
  background-color:#0000FF;
  height :200px; 
}

#Name b {
  color:#eee;
} 
</style>
</head>

Externes Stylesheet

CSS-Einbindung (im head-Bereich):

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

[11] 'type="text/css" ' kann in der Regel weggelassen werden.

Browserweiche (bedingter Kommentar/conditional comment):

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie-alt.css">
<![endif]-->

Inhalt wird nur von Internet Explorern mit einer Versionsnummer unter 9 angezeigt.

HTML Responsive Web Design

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any Screen. [12]

When making responsive web pages, add the following <meta> element in all your web pages:

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

If the width property is set to 100%, the image will be responsive and scale up and down:

<img src="img_girl.jpg" style="width:100%;">

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Javascript-Elemente

Copyright-Bildunterschrift

<p class="imgcopyright" id="copyright-hidden"> </p>
                    <script>
                        document.getElementById("copyright-hidden").innerHTML = "© Max Mustermann";
                    </script>

Notizen


Headerbereich: Zusatzinfos für bestimmte Funktionen

<!DOCTYPE html>

<p>-tag hat Voreinstellungen


<meta charset="utf-8"> oder encode in UTF-8-BOM


-----------------


<ul> unsortierte liste, listenelement li

Definition Container div
 dient zum Strukturieren

Namen geben 

in div Text eingeben

Links

https://www.mediaevent.de/tutorial/

w3schools HTML

selfhtml

HTML-Seminar

HTML5 UP

https://www.freeformatter.com/html-formatter.html

| |

HTML: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Dezember 2020, 11:17 Uhr

Inhaltsverzeichnis

Allgemeines

Aufbau einer HTML-Datei

Grundgerüst

Grundgerüst mit viewport

Grundgerüst mit Liste und Tabelle

Bestandteile des Dokuments:

Metatags

Metatag "Generator"

Meta Description

Weitere Bauelemente

Übersicht Tags

Links und Verweise auf andere Dateien

Anker

Favicon

Typografie / Sonderzeichen

Bilder

Bilder einbinden

Figure

Hintergrundbilder

Links

iframe

Menü

Formulare

Grundgerüst

Formular mit Fieldset

Kontaktformular

Cascading Style Sheet CSS

Zur Seite "CSS"

Internes Stylesheet

Externes Stylesheet

HTML Responsive Web Design

Javascript-Elemente

Copyright-Bildunterschrift

Notizen

Links

Navigationsmenü

Suche