< Zurück zu HTML erklärt

HTML erklärt #16 Sprungmarken und Anker

geschrieben von Felix Beuster am

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

< Zurück zu HTML erklärt

Kommentare

Bisher keine Kommentare.
Schreib etwas neues

Noch 1500 Zeichen übrig.

Mit * makierte Felder sind Pflichtfelder. Mit dem Absenden des Formulars eklären Sie sich mit den Datenschutzerklärung einverstanden.

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

< Zurück zu HTML erklärt < Zurück zu HTML erklärt