HTML erklärt #16 Sprungmarken und Anker

geschrieben von Felix Beuster am 26.11.2012

Dein Browser ist zu klein für den eingebetteten Player. Du kannst das Video hier auf YouTube ansehen.

Im heutigen Teil von HTML erklärt geht es um interne Links und Sprungmarken. Es bietet sich daher an, vorher bereits Teil 5 gesehen zu haben.

1<!DOCTYPE html>
2<html>
3 <head>
4  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5  <title>Sprungmarken</title>
6  <style>
7   body {
8    margin: 0;
9    padding: 0 0;
10    background: #efefef;
11    font-family: Calibri;}
12   h1 {
13    margin: 0;
14    padding: 1% 2%;
15    border-bottom: 1px solid #c4c4c4;
16    background: #e0e0e0;}
17   p {
18    margin: 5px 25px;}
19   img {
20    float: left;
21    margin: 5px 15px 10px 0;}
22   .clear {
23    clear: both;}
24   br.clear {
25    display:block;
26    height:1px;
27    margin:-1px 0 0 0;}
28  </style>
29 </head>
30 <body>
31  <a id="oben"></a>
32  <h1>Sprungmarken und Anker</h1>
33  <p>
34   <a href="#sonne">Gehe zum Bild</a><br>
35   Lorem ipsum dolor ...
36  <br>
37   Lorem ipsum dolor ...
38  <br>
39   Lorem ipsum dolor ...
40  </p>
41  <p>
42   Lorem ipsum dolor ...
43  <br>
44   Lorem ipsum dolor ...
45  <br>
46   Lorem ipsum dolor ...
47  </p>
48  <p>
49   <img src="sonne.jpg" alt="Sonne" id="sonne">
50   Lorem ipsum dolor ...
51  </p>
52  <br class="clear">
53  <p>
54   <a href="#oben">nach oben</a>
55  </p>
56 </body>
57</html>

< Zurück zu HTML erklärt

Mehr aus HTML erklärt

HTML erklärt #15.3 Mehrzeilige Textfelder

Hier klicken, um das Video zu sehen. Setzen wir die Formular-Videoreihe fort und schauen uns heute mal mehrzeilige Eingabefelder an. Das Video baut auf HTML erklärt #15.1 und #15.2 auf, Links dazu sowie allen anderen HTML-Videos...

HTML erklärt #10 Breiten und Höhen

Hier klicken, um das Video zu sehen. Hier wird euch gezeigt, wie ihr Absätze (oder jedes andere Element) in der Breite oder Höhe verändern könnt. Neue Attribute in diesem Teil: width, heightHier klicken, um den Quellcode zu sehen....

HTML erklärt #15.2 Input - Spezielle Eingaben

Hier klicken, um das Video zu sehen. Der Input tag bietet eine ganze Reihe an semantischen Unterschieden und eine ebenso lange Reihe an verschiedenen Unterstzüzungen der Brwoser. Ich zeige euch heute mal, welche Typen es alles...

HTML erklärt #7.1 Tabellen erstellen

Hier klicken, um das Video zu sehen. Dies ist das erste Tabellenvideo meiner Reihe, es kommen bestimmt noch andere. Hier zeige ich einfach Basics der Tabelle, quasi nur das Grundgerüst und ein wenig Inhalt. Weitere Video zu...

< Zurück zu HTML erklärt

Kommentare

Bisher keine Kommentare.

Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.

< Zurück zu HTML erklärt

Ein parr mehr Artikel

61MinutenSex - Perfekte Kanalwerbung dank #Millionärswahl

Am 09. Januar fand die erste Sendung der Millionärswahl auf ProSieben statt. Das Feedback im Netz war mäßig, wohl auch wegen des überraschenden Votings am Ende der Sendung. Aber auch mir persönlich erschloss sich der Sinn teils nicht wirklich....

Frohes Neues!

Ein gesundes neues Jahr wünsche ich allen, die sich hier auf meine Seite verirren! Achso, ihr wolltet hierher? Nun dann kann ich euch ja sagen, dass ich soeben mein erstes Unboxing auf Youtube hochgeladen habe. Was das ist, erfahrt ihr im Video unter...

be|namer

Dieses Tool ermöglicht euch große Mengen Dateien in einem Rutsch umzubenennen. Zwar geht das auch mit Windows, jedoch sind dann im Dateinamen Klammern und ein Leerzeichen. Das ist für die meisten Webserver ungeeignet, deshalb habe ih ein eigenes Tool...

be|namer

Heute ist das offizielle Release von be|namer! Was das ist? Nun das will ich euch sagen. be|namer ist mein erstes veröffentlichtes Programm, Freeware und hier bei mir erhältlich. :) Ich habe mich an der Windows eigenen Umbenennungsmethode vieler...

< Zurück zu HTML erklärt