HTML erklärt #16 Sprungmarken und Anker
geschrieben von Felix Beuster amDein 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>
Kommentare
Bisher keine Kommentare.Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.