[QT] HTML Basics ✤

HTML. Oft gehe ich davon aus, dass es eine Selbstverständlichkeit ist. Dennoch gibt es viele, die davon bisher noch nichts gehört haben, oder zumindest keine Ahnung haben, wie sie so etwas schreiben sollten. In diesem QuickTip möchte ich einfach auf die wichtigsten Tags eingehen, die man so kennen sollte. Einfachste Formatierung, Bilder, Links, Listen, Spans und Absätze, sowie Div-Container.


HTML. Most of the time I just assume that people know it. But still there are a lot of people who've never heard of HTML or at least no idea how to write it. In this QuickTip I wanna show you the most important tags, that you should know. Rudimentary styling, images, links, lists, spans and paragraphs as well as div-container.




Okay. HTML. Hypertext Markup Language beschreibt ganz einfach gesagt die Struktur einer Website. Es ist das Gerüst und mithilfe von CSS formatieren wir das Ganze dann noch.

Und wie schreibt man das?

Nun, HTMl Tags sehen eigentlich immer so aus:

Okay, HTML. Hypertext Markup Language gives us the structure of a website, if you wanna put it simply. It is the frame and with the help of CSS we can transform it into something beautiful. Like the bone of a site.

And how do you write that?
Well, HTML-Tags basically look like this.

<TAGNAME></TAGNAME>

Tags umschliessen meistens etwas. Für gewöhnlich Text.

Tags are written around something, text mostly

Bold, Italic, Headings, Spans & Paragraphs

Okay, grundsätzlich wird ein Text immer irgendwo reingepackt.
Titel werden beispielsweise in sogenannte h-Tags gepackt, Headings. Und dann gibt es Titel verschiedenen Grades, die alle unterschiedliche Grössen haben.
Fliesstext hingegen lässt sich in einzelne Textabschnitte (spans) oder ganze Absätze (paragraphs) packen.

Sehen wir uns das an einem Beispiel an.

Okay, bascically you always wrap up your text.
Headings for example are put between h-tags, with different numbering. Normal Text is put between spans or paragraphs.
Let's have a look at an example.

<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>

<span>Just some Text</span>
<p>Paragraph: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Another Paragraph</p>

Aussehen tut das dann so:

This would look like that:



Wollen wir nun einen Zeilenumbruch haben, können wir den aber auch manuell einbauen. Das sähe so aus:

To add a line-break it'd look like this:

<br>

Und eine horizontale Linie sähe so aus

A horizontal line would look like that

<hr>

Und hier noch in Bild
And here the result

Links and Images

Das wohl wichtigste, oder bei mir meist genutzte sind Links und Bilder. Die Codes dafür sehen einfach aus:

Ein Link ist ein a-Tag, dem wir mit href="URL" sagen, wo er hinführen soll. Zwischen dem öffnendem und schliessenden Tag, kommt der Text, den man anklicken kann. Weiter kann man dem Link mit target sagen, ob er in einem neuen Tab geöffnet werden soll oder nicht. Falls er sich im gleichen Fenster öffnen soll, müssen wir das nicht extra sagen.

The tags I use most in HTML are links and images.

A link is an a-Tag with an hre="URL" attribute wraped around our linktext. You could also add a target-attribute to it, to tell the link if you want it to open in another tab. By default the link opens in the same window.

<a href="URL">Linktext</a>

<a href="#" target="_blank">Link that opens in a new window </a>

Ein Bild-tag ist eines dieser Tags, das kein schliessendes Tag hat. Es ist ein img-tag, dem man mit src einen Bildlink zuordnet, den der Tag dann anzeigt.

An image tag is one of those tags that don't have a closing tag. It's an img-tag, to which you give an image link through src. The tag does then show you the image.

<img src="IMG_URL" />

Listen

Listen sind toll. Man kann damit nicht nur Aufzählungen, sondern auch Menüs machen.
Es gibt ungeordnete und nummerierte Listen. Aussehen tun sie so.

Lists are great. Especially because you can built menus and other things with them.
There are unordert and ordered (numbered) lists. And that's what they look like.

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>

Div-Container

Div-Container sind die Boxen für unseren Inhalt. Mit ihnen lässt sich alles zusammenpacken.

Div-containers are our boxes and wrappers. You wrap them around content to keep everything in place