htmlKnowhow

Tipps für den Homepage-Designer

Brauchen Sie Hilfe?

Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können.

Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Bevor Sie aber mit Ihrem Homepage-Projekt beginnen, sollten Sie sich über Grundsätzliches informieren, damit Sie wissen, was alles auf Sie zukommt. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.

Viele, die eine Webseite betreiben wollen, greifen auf vorgefertigt Seiten zurück. Die gibt es z.B. bei Ionos, Jamdo, Strato und vielen, vielen mehr. Aber wer etwas Individuelles haben möchte, der macht alles selber. Es lohnt sich garantiert. Ein Styling, das keinem anderen gleicht.

Ich möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können, bieten.

Alle hier dargestellten Modelle habe ich persönlich getestet und sie funktionieren hervorragend, wie Sie auf den folgenden Seiten feststellen werden.

Aber wie machen wir das am Besten?

Ich habe Ihnen hier ein paar ausgewählte, sehr praktische Abwendungen vorgestellt, die Sie bestimmt gut gebrauchen können.

Außerdem habe ich versucht, meta-tags und css-tags verständlich zu erklären, ohne viel Fachchinesisch.

Viel Spaß ...

☾ Dunkel ☼ Farbig

Beim aktivieren der Funktion wird ein Cookie gesetzt, dieses speichert den ausgewählten "Farbig- oder Dunkelmodus" für alle markierten Seiten. Mehr Infos dazu unter Tag/Nacht

Anwendungen

Bilder

Medien

Texte

Bildschirm

Tabellen

Buttons

Gestaltung

Hilfsmittel

Seite verlassen Button

Meine Sitemap

Mein Shop

Begriffserklärung

Guter Rat!

Verzichten Sie auf aufwendige Bild und Textgestaltung, vermeiden Sie Tabellen, Hovereffekte und sonstiges Schniko-Schnako.

Warum?

Sie möchten mit Ihrer Webseite Computer-, Laptop- und Smartphone-Benutzer erreichen. Das sind ganz unterschiedliche Bildschirmgrößen. Aber Ihre Seite sollte für jedes Gerät passen. Deshalb ist es auch wichtig, Bildergrößen nicht in px (Pixel) sondern in % (Prozent) anzugeben. 500px-Bildgröße bedeckt auf dem Computer nur etwa 1/3 der Bildschirms, auf Smartphones sprengt es das Bild. Aber 50 % bleiben immer 50 %!

Alle hier dargestellten Modelle habe ich persönlich getestet und sie funktionieren hervorragend, wie Sie auf den folgenden Seiten feststellen werden.

BODY-Tags

Rahmen/Rand

Rahmen <border>
Innenabstand <padding>
Außenabstand <margin>
Außenrahmen <outline>

Bilder

Einbindung <img>
Seitenaufruf <href>
Optimierung <alt>
Bildcontainer <figure>

Bildschirm

Bildschirm <@media>
Division <div>
Abschnitt <span>

Formulare/Listen

Formulare <form>
Formulare <textarea>
Formatierung <blockquote>
Listen <list>
Listendesign <ul><li>

Ausrichtung

Änderung <display>
Positionieren <position>
Änderung <float>

Seitenbeziehung

Textmarke <name>
Externer Aufruf <a>
Seitenöffnung <target> etc
Einbindung <frame>
WennElemente <on ...>

Seitenstruktur

Struktur <header> etc
Stile <style>
Seitenrahmen <container>
Gruppier Element <div>
Bereich Formatierung <span>
Überlagerung <z-index>
Programmierung <script>

Media

Vorzeichen <nix - # - . >
Autostyle <auto-style>

Medien <audio><video>

Tabellen

Tabellen <table>
Zellen/Spalten <td><tr><th>
Hintergrund <background>
Zellen/Spalten <div><span>

Text

Absatz <p>
Schriftart <font>
Wortabstand <spacing>
Text-Element <diverse tags>
Bereichshülle <container>
Textfeld <textarea>
Hervorhebung <strong>
Textrand <borderimg>
Texttrennung <hyphens>
Zeilenhöhe <line-height>

META-Tags

Kopfangaben <meta>

Hier legen Sie fest, wie ihre Seite nach außen hin erscheinen soll.

Seitenüberschrift <title>

Hiermit legen Sie fest, was für ein Text auf dem Tab im Browserkopf zu sehen ist

Seitenbeschreibung <description>

Ganz, ganz wichtiger Befehl. Dieser Text erscheint in den Suchergebnissen bei den Suchmaschinen.

Mein Solargarten

Bei MeinSolargarten erhalten Sie wichtige Hinweise zum Thema Garten. Mit aktuellen Tipps und Ratschlägen.

Seitensprache <language>

So legen Sie die Sprache fest.

Weiterleitung <canonical>

Dieser Link ist ganz wichtig, weil Sie damit Ihre Seite weiterleiten können, wie z.B. auf eine <https>, also sichere Seite.

Ovoice

Wer ist der Promi und wie spricht er in seiner Originalsprache! Hier bei Ovoice finden Sie Informationen zu den Darstellern und ihren Stimmen.

Seitenregistrierung <robots>

Super wichtig. Damit sagen Sie den Suchmaschinen, ob oder wie intensiv sie Ihre Webseite durchsuchen dürfen.

Bildschirmgrößen <viewport>

Super wichtig. Damit sagen Sie den Suchmaschinen, ob oder wie intensiv sie Ihre Webseite durchsuchen dürfen.

Webregistrierung <sitemap>

Ganz wichtig. In der Sitemap legen Sie fest, welche Seiten Google und Co. in ihren Suchergebissen anzeigen soll.

diedVIPs

Sie sehen einen Film, lesen eine Illustrierte oder hören von berühmten Leuten aus den Nachrichten und fragen sich. Lebt die oder der noch? Hier bei diedVIPs finden Sie Informationen zu verstorbenen prominenten Persönlichkeiten.

Seitenbild <icons>

Auch ganz wichtig. Damit legen Sie ihre Icons fest, die später oben im Browser zu sehen sind.

Facebook <property>

Diese Befehle sagen, wo und Wie Ihre Seite auf Ihr Facebook-Konto hochgeladen wird.

Schriften <fonts>

So binden Sie eine besondere Schrift in Ihrer Webseite ein.

HB Artgallery

Bei HBart erhalten Sie Reproduktionen von Originalbildern als Kapitalanlage und zum verschönern Ihrer Wände.

Schlüsselworte <keywords>

Der Meta Tag für Keywords wird heute kaum noch gebraucht. Google ignoriert die komplett. Und für alle anderen Suchmaschinen (wie Bing) ist es fraglich, ob der überhaupt zur Berechnung zum Einsatz kommt.

Programme <Scripte>

Ein Skript ist eine Liste mit Befehlen, die von einem bestimmten Programm ausgeführt werden. Sie können verwendet werden, um Prozesse auf einer Webseite zu generieren und darzustellen.

How do I look

Der Film ist ein mit Dr. Martin Luther King Preis preisgekrönter Film. Er handelt über die Boy- und Lesben-Scene in den USA.

Öffnungsbestimmung <base>

Damit legen Sie grundsätzlich fest, wie Ihre verlinkte Seite dargestellt wird. Befehle sind: Auf der gleichen Seite, im neuen Fenster oder einem von Ihnen festgelegten Wert, wie z. B. ein bestimmter Frame auf der gleichen Seite.

Seitenbeziehung <link>

Mit dem link-Tag binden Sie externe Ressourcen ein, kennzeichnen eine URL oder weist den Browser an, etwas nach dem Laden der Seite im Voraus (preload) zu laden.

MSG Shop

Im MSG-Shop erhalten Sie interessante Sachen.

Seitendarstellung <.htaccess>

Super wichtig. Damit weisen Sie den Browser an, die Webseite auf verschiedenen Geräten (Computer, Laptop, Smartphone) anders auszusehen hat.

Rechteschutz <copyright>

Bildschirmgrößen <@media>

Normalerweise wird die Größenanpassung an die verschiedenen Endgeräte mit "viewport" festgelegt. Wollen Sie aber auf einem Laptop oder Smartphone eine andere Darstellung müssen Sie @media arbeiten.

HTML-Blog:

Bei MeinSolargarten erhalten Sie wichtige Hinweise zum Thema Garten. Mit aktuellen Tipps und Ratschlägen. Unseren Ratgeber aktualisieren wir regelmäßig, sodass es sich lohnt, öfter vorbeizuschauen.	Sie sehen Spielfilme, hören berühmte Schauspieler in deutscher Synchronisation und fragen sich? Wie spricht er nur in seiner Originalsprache! Hier bei Ovoice finden Sie Informationen zu den Darstellern und ihren Stimmen.