INT

Internet-Technik

Corona Edition

Arno Richter

Gruppe A + B 9:00–10:30
Gruppe B 11:30–13:00

Verwendeter Browser: Chrome

https://www.google.com/chrome

Dropbox

https://arnorichter.de/hsma/dropbox

d.sign@mailman.hs-mannheim.de

mail@arnorichter.de

Dateinamen

Dateinamen

Immer die Zuordnung ermöglichen, zB.

name_matrikel_projekt.zip
richter_arno-220577-uebung1.zip

Ablauf des Kurses

20%
 Präsentation und Besprechung der Aufgabe der vorhergehenden Stunde
30%
 Vorstellung des neuen Themas
50%
 Praktische Arbeit am neuen Thema
Hausarbeit für nächste Stunde

Fragen

Was bedeutet Webdesign?

Youtube

StackOverflow

Tagesschau

Jason Santa Maria

Jason Santa Maria with Dev Tools open

Webkit Devtools
HTML CSS
Wofür wird HTML benutzt?

Struktur

Wofür wird CSS benutzt?

Gestaltung

Der Unterricht vermittelt eine Reihe von HTML-Elementen und wie diese eingesetzt werden.

HTML and CSS - design and build websites

HTML und CSS

Affliliate-Links (Amazon)

HTML and CSS - design and build websites Deutsch http://arnorichter.de/hsma/html-de
Englisch http://arnorichter.de/hsma/html-en

HTML-Seiten sind
Textdokumente.

HTML verwendet Elemente,
so genannte Tags.

Tags fungieren als Container und sagen etwas über die Information aus, die dazwischen steht.

How HTML Tags are made

How HTML Tags are made

Tags bestehen in der Regel immer aus einem Opening Tag und einem Closing Tag.

Der Opening Tag markiert den Beginn eines Inhaltsbereichs, der Closing Tag das Ende.

		
			<p>Hello World!</p>

Tags können ineinander verschachtelt werden.
Zur Übersicht rückt man dann oft zeilenweise ein.

Das kann man wahlweise mit Leerzeichen oder Tabulator-Zeichen tun. Man sollte nur konsistent bleiben.

Opening Tags können Attribute tragen.

		
			<html>

html Element

Opening Tags können Attribute tragen.

		
			<html lang="de">

Tag-Name Attribut-Name Attribut-Wert

Attribute beschreiben ein Element/Tag genauer.

Sie bestehen immer aus Paaren von Name="Wert"

Elemente können beliebig viele Attribute tragen:

		
			<img src="bild1.jpg" width="600">

HTML-Dokumente lassen sich in jedem Texteditor bearbeiten.

Es gibt allerdings einige spezialisierte Programme.

Win Mac Sublime Text $80 sublimetext.com
Win Mac VS Code free code.visualstudio.com
Mac Textmate free macromates.com
Win Mac Atom free atom.io
Mac BBEdit $50 barebones.com/products/bbedit
Mac Nova $99 nova.app
Win Notepad++ free notepad-plus-plus.org
Mac SubEthaEdit free subethaedit.net
Plain Text Editor

vorher

 Code Editor

nachher



Verwendeter Editor: Sublime Text

https://www.sublimetext.com

Dateien bitte nach dem Öffnen im Editor nicht mehr von Hand verschieben, sondern zuerst schließen!

Informationen zu einzelnen Elementen lassen sich gut online, zB. unter http://wiki.selfhtml.org nachschlagen. W3Schools ist in der Szene nicht hoch angesehen.

Aufgaben werden auf Github bereitgestellt:

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

Github Repo

Beginne mit Aufgabe 1.

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