You are currently browsing all posts tagged with 'HTML'.
Displaying 1 - 4 of 4 entries.

Hyper-Links – Erklärt für Anfänger

  • Posted on November 11, 2010 at 09:02

Als ich die Buttons hier eingestellt habe, ist mir wieder mal aufgefallen, dass man ständig irgendwelche Links setzen oder verändern möchte. Dabei ist es eigentlich erst mal egal ob Textlinks oder Bilder.

Leider kann dies nicht jeder, deshalb versuche ich jetzt mal eine absolut einfache Anleitung zur Verfügung zu stellen:

1. Linksetzung in WordPress

WordPress macht es uns hier wirklich einfach (genauso wie Joomla). Einfach mit der gedrückten linken Maustaste das Wort markieren, was man verlinken möcht und das kleine Kettensymbol anklicken. Meist öffnet sich dann ein eigenes kleines Fenster, bei dem man nach der URL gefragt wird. URL ist das lange Gebilde oben in Eurem Browser und fängt mit http:// an. Dieses einfach kopieren und in das Feld einfügen. Bei WordPress kommt dann in der nächsten Zeile Target. Hier kann man dann auswählen, was passiert, wenn auf diesen Link geklickt wird. Entweder wird ein neues Fenster geöffnet oder Eure Seite verlassen.

Dann noch bestätigen und fertig. Der Link ist gesetzt.

Doch manchmal klappt es nicht und es wird der HTML-Modus nötig, oder es werden weitere Zusätze verlangt (nofollow)

2. Aufbau eines HTML-Links

im HTML-Modus sieht ein Link schon komisch aus. Fangen wir mal an:

Beginnen tut ein HTML-Befehl immer mit <

dann kommt beim Link ein kleines a kann man sich gut mit “Achtung Link” merken

Jetzt folgt ein Leerzeichen und href= - als Eselsbrücke hilft mir hier referenz = - also jetzt das Ziel wohin.

damit keine Verwechslung für den Browser auftritt setzen wir alles in.

Den HTML-Befehl mit > beenden

Nun kommt der wichtige Teil, nämlich der der später zu sehen ist: Linktext oder Bild Auf das Bild gehe ich später noch ein. Beim Linktext könnt ihr reinschreiben was ihr wollt. Doof ist allerdings ein Text, der nicht verrät wohin ihr verlinkt. Also wie etwa Homepage. Damit weiß keiner was anzufangen.

Damit jetzt noch der Browser weiß, wann den der Linktext zuende ist, braucht es noch die Zeichenfolge </a> Wenn Ihr die nicht setzt, ist der ganze nachfolgende Text de Link.

Also zusammengesetzt: <a href=”die url aus dem Browser”> der verlinkte Text </a>

3. Zusätze in HTML -Links

Das Target habe ich ja schon vorher kurz angesprochen. Wenn es nicht gesetzt wird, öffnet sich der Link in dem Fenster, bei dem Eure Seite offen ist und der Besucher ist erst mal weg. Das kann man umgehen indem man ein Target setzt. Dies wird nach den Gänsefüßchen der url getrennt mit einem Leerzeichen gesetzt:

target=”_blank”

Manchmal wird auc No-follow verlangt oder ist nötig. Das bedeutet, daß die Suchmaschinen den Link nicht folgen, sondern ignorieren. Zumindest sollen sie das so tun.

Dafür muss das Nofollow-Attribut gesetzt werden und zwar so:

rel=”nofollow”

Unser Link mit den beiden Ergänzungen sieht dann so aus:

<a href=”die url aus dem Browser” target=”_blank” rel=”nofollow”> der verlinkte Text </a>

4. Statt einem Linktext ein Bild

Wenn Ihr nun jetzt keinen Text habt, sondern ein Bild, wie z.B. bei den Buchwichtel-Button braucht ihr noch einen HTML-Befehl:

Er fängt wieder mit einem < an.

Dann kommt img für Image. Jetzt weiß der Browser, dass ein Bild kommt.

Damit er weiß, welches er zeigen soll geht es mit src= weiter. Eselsbrücke: src steht für bei mir für “Screen” Ich weiß, die Brücke hängt, weil das SRC und das scr -een verdreht sind.

Der nächste Teil sitzt wieder in Anführungszeichen und sagt dem Browser, wo das Bild liegt. Also z. B. bei WordPress geht ihr in die Mediathek, sucht das Bild und dann steht da unten ein ewig langer Text wo das bild ist. Dieses dann wieder kopieren und wie bei der URL reinsetzen.

Das geht übrigens auch mit fremden Bildern. Da einfach den Link von dem Bild kopieren. Bei FireFox mit der Rechten Maustaste auf das Bild klicken und entsprechend “Grafikadresse” kopieren. Doch Achtung, nur bei erlaubten Bildern so machen, wie etwa bei meinem Button. Da will ich die Verbreitung, andere mahnen ab und das kostet!

Jetzt muss nur noch der Befehl beendet werden. Da bei Bildern kein Anfang und Ende markiert werden muss, endet der Befehl gleich mit einem />. So jetzt weiß der Browser, daß das Bild zuende ist.

Das alt=” sinnvolle Beschreibung” ist eine Erweiterung des Bild-HTML-Befehls, in dem ein Ersatztext hinterlegt werden kann. Dies ist immer dann sinnvoll und nötig, wenn ein Browser keine Bilder anzeigen (soll). Wie etwa bei Handys?! Oder bei sehbehinderten Nutzern. Und auch für Suchmaschinen, denn die sind in erster Linie auch blind. Also bei sinnvoller Beschreibung ist “Bild” nicht so ideal

So, nun der zusammengesetzte Bild-Befehl:

<img src=”URL des Bildes” alt=”sinnvolle Beschreibung “ />

Nun ganz einfach statt dem Linktext dieses Konstrukt einfügen und Ihr habt ein verlinktes Bild.

Wie einbauen?

Ich beschreibe das ganze mal bei WordPress, dies gilt aber eigentlich immer dann, wenn man in einen HTML-Modus wechseln kann.

Am einfachsten jetzt mal in einen Blog-Beitrag.

Einfach in den HTML-Modus wechseln und da die HTML-Befehle an gewünschter Stelle einfügen.

In der Sidebar einfach in das Design- Widget wechseln. Dort das Text-Widget auswählen und an den entsprechenden Ort schieben. Wenn es dann aufgeht einfach den HTML-Code einfügen.

Wenn alles gut gegangen ist, dann ist Euer Link nun fertig!

Eventuelle Probleme bei Bildern

auf das Rechtliche gehe ich jetzt nur noch ganz grob ein: Bilderklau ist unerwünscht und kann Ärger machen.

Okay, nun das technische. Wenn das Bild zu groß für z.B. die Sidebar ist, kann es vorkommen, dass es nicht angezeigt wird, oder nur abgeschnitten. Geht dann bitte dahin, dass ihr das Bild verkleinert. Das geht z.B. ganz leicht mit der Windows-Life-Fotogallerie. Das Bild mit der rechten Maustaste anklicken und Größe ändern wählen. (dazu muss es aber bei Euch auf dem Rechner liegen). Oder in Worpress in der Mediathek das Bild auswählen und auf Bearbeiten klicken. Dann steht rechts bei mir Bild skalieren. Das rechnet dann das ganze Bild kleiner.

Übrigens, die meisten Sidebars sind etwa zwischen 120 bis maximal 300 Pixel groß, nur mal so am Rande und die Meisten haben ihren Text in etwa 500 bis 700 Pixel Breite untergebracht. Also so ungefähr als Richtlinie.

Ich hoffe, Euch somit eine kleine Einleitung an die Hand gegeben zu Haben und vielleicht somit den oft geschimpften Linkgeiz an der Wurzel gepackt zu haben. Denn ich glaube nicht an den Linkgeiz an sich, sondern eher an Faulheit oder besser noch Unwissenheit!

HTML für Kids

  • Posted on Januar 27, 2010 at 07:47

Vor gut einem Jahr habe ich angefange mich mit Webseiten - Erstellung auseinander zu setzen. Dafür habe ich erst mal spaßeshalber mit HTML über eine Internet-Lernseite angefangen.

Doch mir fehlte irgendwie das Papier und die Möglichkeit zum Nachschauen etc. Ein Buch musste her.

Doch haben mich die meisten HTML-Bücher irgendwie abgeschreckt. Als Anfänger habe ich oft schon nach den ersten Seiten den Überblick verloren.

Durch Zufall bin ich dann auf HTML für Kids gestoßen .

Wenn das Kinder können, kann ich das auch. Jawoll. Und tatsächlich, ich habe die Anleitungen richtig verstanden und bin mit genügend Hintergrundwissen gefüttert worden. Meine erste Webseite (reines Tabellenlayout brrr) habe ich nach dem Buch erstellt. Der nächste Schritt ging dann auch ganz schnell Richtung CSS, wo ich mir auch CSS für Kids zulegte. Mit diesen beiden Büchern war ich dann recht schnell in der Lage, meine eigenen Webprojekte modern und ordentlich zu erstellen. Auch sind die Quellcodes nach W3C fehlerfrei.

Doch warum schreibe ich erst jetzt darüber????

Immerhin handelt es sich um Bücher für Kinder. Mein Großer hat sich nun auch durch das HTML-Buch gewühlt. Anfangs viel es ihm etwas schwer, da er erst die Grundlagen aufbauen musste und ihm die Geduld dazu gefehlt hat. Doch nun hat er eine Webseite mit Hilfe dieses Buches fertig gestellt und ich muss sagen, dass ich schwer begeistert bin!

Unter bleigiessen.org hat er die Seite mit einem Tabellenlayout selbst programmiert. Wir haben absichtlich das Thema Bleigiessen gewählt, da für die einzelnen Bedeutungen sowieso eine Tabelle Sinn macht.

Eigentlich sollte sie ja bereits zu Silvester fertig sein, nun ist sie für Silvester 2010 bereit. Er hatte ja wie gesagt teilweise Motivationsprobleme, da es ihm mit den Grundlagen zu lange gedauert hat. Doch nun ist er irrsinnig stolz nicht aufgegeben zu haben und freut sich über das nun vorhandene Wissen.

Ja, dieses Buch (HTML) ist auf jeden Fall für 10-jährige geeignet. CSS für Kids hat er sich bereits geholt und ist schon fleißig am lesen.

Weboton-Scriptly - komplette Editor für Homepageerstellung

  • Posted on Juli 5, 2009 at 14:18

Als ich mit meinen ersten Webseiten angefangen habe, bin ich zum Glück sofort auf das Weboton-Scriptly gestoßen.

Dies war ein großes Glück, denn dieser Editor kann

HTML-Seminar

  • Posted on Juni 14, 2009 at 11:52

Jeder kennt wohl www.selfhtml.org. Doch ich bin damit nicht klar gekommen. Zu umfangreich, gleich extremer Einstieg in die Materie, wo ich doch hinten und vorne keine Ahnung hatte.

Zum Glück bin ich auf Html-Seminar.de gestoßen. Hier wurde mir der Einstieg in die Webseitenerstellung super einfach gemacht.

Es wird Schritt für Schritt erklärt, wie sich die HTML-Seite aufbaut und jeder Befehl wird auführlich mit Beispielen erklärt. Auch kommt CSS nicht zu kurz.

Abschließend kann man sein neues Können an einer eigenen Homepage ausprobieren und dem Autor alle Schritte einfach nachmachen. Was soll ich sagen - So habe ich es lockerst innerhalb eines Monats (neben meinem alten Job und den Kindern rund um Weihnachten herum) es geschafft meine ersten Projekte zu erstellen und diese sind bestimmt nicht schlecht geraten. - Zumindest bekomme ich Lob dafür.

Das Angebot vom HTML-Seminar wird mit vielen Tipps, Tricks, Sofwarevorschlägen und einem tollem Forum ergänzt, bei dem die noch offenen Fragen schnell und freundlich erklärt werden und bei Fehlern geholfen wird.

Ich möchte mich an dieser Stelle herzlich bei den Machern von HTML-Seminar für diese tolle Seite bedanken!

Switch to our mobile site