⬛️ lukas.stockinger ui/ux designer

verfügbar 🟢

⬛️ lukas.stockinger 

Grundlagen .html

HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) sind zwei grundlegende Technologien im Bereich der Webentwicklung.

 

Grundgerüst Metadaten

Im <head> werden Informationen für den Server und die Suchmaschinen festgelegt. Das geht über die sogenannten Meta-Daten. 

Charset=“UTF-8″ sagt dem Browser, dass Deutsch als Sprache verwendet wird. Damit weiß der Browser, dass auch Buchstaben wie ä, ö, ü, ß gebraucht werden.

Keywords: helfen dem Browser unsere Website zuzuordnen. Wenn wir zum Beispiel als Keywords „Fahrrad, Shop, Salzburg“ festlegen, werden wir leichter gefunden wenn jemand nach „Fahrrad Reparatur Shop Salzburg“ googelt.

Description: hier kann eine ausführlichere Beschreibung des Shops erfolgen. Sie wird ebenfalls ausgewertet.

Author: hier kann nach dem Ersteller des Textes auch gesucht werden. 

Struktur

Überschriften werden mit <h1> bis <h6> zugeordnet. Dabei ist h1 wichtiger als h2 und h2 wichtiger als h3 usw.

Paragraphen werden mit <p> erstellt

Listen werden entweder mit <ol>  oder <ul> erstellt:

<ul> = Auflistung z.B. mit  ○ oder  ◘

<ol> = Auflistung z.B. nach 1. 2. 3. oder I II II usw.

 

Hervorhebungen

Auch in Word gibt es Möglichkeiten Text hervorzuheben. Z. B. fett,
kursiv, unterstrichen. In HTML gibt es dafür eigene Tags:

<i>=italic (kursiv)

<b>=bold (fett)

<em>=emphasis (wichtig!!, bedeutend) -> der Browser entscheidet darüber wie es ausschaut

<strong>= fett (oft noch fetter als <b>, aber es kommt hier auch wieder auf den Browser an)

 

Bilder, Links, Formulare

Das a-Tag verlinkt uns auf eine gewünschte Seite. Dabei muss ein Link mit einer jeweiligen Adresse angegeben werden! Die Adresse ist immer unter Anführungszeichen und beginnt mit „https://“ Ein Link kann auf eine Seite im Internet zeigen, oder auf eine eigene Seite bzw. innerhalb eines Dokuments sein.

So schaut das aus:

<a href=“https://www.lukas-stockinger.com/“ target=“_blank“>lukas stockinger</a

Bilder werden auch mit href eingefügt, doch bei Bildern muss man auch die Maße „width & height“ festlegen, aber auch der genaue Name des Elements das gesucht ist. alt macht eine Bildbeschreibung

<a href=“http://www.lukas-stockinger.com/“><img src=“IMG/lukas_stockinger_logo.jpeg“ width=“222″ height=“32″ alt=“das ist das Logo von Lukas Stockinger“></a>

Formulare funktionieren ganz anders als Bilder und Links. Und zwar mit <input type=““>. type sagt welches Formular genau wir haben wollen. Beispiele sind:

<input type=“text“>

<input type=“radio“

<input type=“checkbox“

<input type=“submit“

<input type=“button“>

 

 

Fazit

HTML ist von fundamentaler Bedeutung für das World Wide Web und bildet das Rückgrat der meisten Webseiten. Als Auszeichnungssprache ermöglicht es die Strukturierung und Organisation von Inhalten im Internet. Ohne HTML wäre die Darstellung von Texten, Bildern, Links und anderen Elementen auf einer Webseite praktisch unmöglich. Es ist die Grundlage, auf der andere Technologien wie CSS für das Styling und JavaScript für die Interaktivität aufbauen. Insgesamt ist HTML unverzichtbar für die Schaffung einer konsistenten und zugänglichen Benutzererfahrung im Online-Bereich.