INT

Internet-Technik

Elemente

Das anchor-Element <a> für eine Verknüpfung

		
			<a href="kontakt.html">etwas Text</a>
		
	

Tag href
"Hypertext
reference"
URL
Link-Zielort
Angezeigter Link-Text

Interner Link

			
				<a href="kontakt.html">etwas Text</a>
			
		

relative URL

Externer Link

			
				<a href="https://www.google.com/">etwas Text</a>
			
		

absolute URL

URL

Uniform Resource Locator

3 Themen

Doctype
Encoding
Textstruktur
Doctype
Encoding
Textstruktur

Der Doctype wird zu Beginn eines HTML-Dokuments angegeben.

Er definiert die mögliche Struktur eines Dokuments, sowie erlaubte Elemente/Tags.

Der Doctype für HTML5 ist <!DOCTYPE html>

Einige Unterschiede von HTML5 zu 4:

Neue Elemente <section> <article> <header> <footer> <mark> <nav> <figure>
Entfernte Elemente <basefont> <big> <center> <font> <strike> <tt>
Neue Attribute required autofocus placeholder async reversed
Entfernte Attribute target usemap align bgcolor noshade border

Referenz

Doctype
Encoding
Textstruktur

Wie kann ich sicherstellen, dass Umlaute und Sonderzeichen korrekt dargestellt werden?

Im <head> notiert man

		
			<meta charset="utf-8" />
		
	

Element/Tag Attribut-Name Attribut-Wert/Value

Referenz

Doctype
Encoding
Textstruktur

Zur Strukturierung von Texten gibt es eine Reihe von Tags.

Grundlegende Elemente

<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>

<em> <strong> <a> <abbr> <time>
<span>

Block-Elemente

<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>

<em> <strong> <a> <abbr> <time>
<span>

Block-Elemente erzeugen einen eigenen Absatz im Textfluss.

Inline-Elemente

<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>

<em> <strong> <a> <abbr> <time>
<span>

Inline-Elemente erzeugen keinen Absatz im Textfluss. Sie stehen nur innerhalb von Block-Elementen.

Sie werden verwendet, um Inhalte innerhalb von Block-Elementen zu strukturieren.

<h1> <h2> <h3> <h4> <h5> <h6>

Überschriften verschiedener Ebenen

		
			<h1>Nachrichten</h1>
			<h2>Obamas Vize muss punkten</h2>
			<h2>Japan ertrinkt in Schulden</h2>
		
	

<p>

Textabsätze, Abschnitte

		
			<p>In seiner Heimat sind die Meinungen
			geteilt. Georg Blume beschreibt, wie
			es Mo Yan gelang, sich inmitten der 
			kommunistischen Öffentlichkeit den 
			Nobelpreis zu erschreiben</p>
		
	

<ul> <ol> <li>

Listen und Listeneinträge

		
			<ul>
				<li>Amerika verliert den Glauben</li>
				<li>Der Nazi in Hörsaal 10</li>
				<li>Freiwillig ist niemand Prostituierte</li>
			</ul>
		
	

<ul> <ol> <li>

Listen und Listeneinträge

		
			<ol>
				<li>The Fellowship of the Ring</li>
				<li>The Two Towers</li>
				<li>The Return of the King</li>
			</ol>
		
	

<ul>

  • Amerika verliert Glauben
  • Nazi in Hörsaal 10
  • Freiwillig Prostituierte

<ol>

  1. Fellowship
  2. Two Towers
  3. Return o. t. King

Innerhalb von <li>-Elementen kann weiterer HTML-Code stehen, zB. Links (Navigation), oder Bilder und Text (Instagram)

<div>

Ein generischer Container, der für die Gruppierung von Elementen genutzt werden kann.

		
			<div>
				<h1>Über das DIV-Element</h1>
				<p>Jede Art von Inhalt ist erlaubt.</p>
				<p>Text, Bilder, Listen, Tabellen, etc.</p>
			</div>
		
	

Inline-Elemente

<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>

<em> <strong> <a> <abbr> <time>
<span>

<em> <strong>

Betonung und Semantik

		
			<p>In seiner Heimat sind die Meinungen
			geteilt. Georg Blume beschreibt, wie
			es Mo Yan gelang, sich <strong>inmitten
			der kommunistischen Öffentlichkeit</strong>
			den <em>Nobelpreis</em> zu erschreiben</p>
		
	

<a>

Verknüpfungen, Links, Navigation

		
			<p>Knöterich wächst im
			Freien. Die Schlingpflanze wird auch
			<a href="http://en.wikipedia.org/wiki/
			Persicaria">Architektentrost</a> genannt</p>
		
	

<abbr>

Abkürzungen

		
			<p>Rückschlag, das ist ein Begriff, den die
			<abbr title="Central Intelligence Agency">CIA</abbr>
			für die unbeabsichtigten Folgen amerikanischer
			Politik am 12. Oktober geprägt hat.</p>
		
	

<time>

Zeitangaben

		
			<p>Rückschlag, das ist ein Begriff, den die
			CIA für die unbeabsichtigten Folgen amerikanischer
			Politik am <time datetime="2012-10-12">12.
			Oktober</time> geprägt hat.</p>
		
	

<span>

Wie das <div> ein generischer Container, allerdings für die Gruppierung von Inline-Elementen.

		
			<p><span lang="de">Und dann sagte Stackoverflow
			zu Goldlöckchen:</span>
			<span lang="en">"Your html file will
			be saved as a new document."</span></p>
		
	

Referenz

Github Repo

Beginne mit Aufgabe 2.

https://arnorichter.de/hsma/int/aufgaben