Links im Content - Bereich öffnen von Gunnar Bittersmann, 27.01.2023 13:19

Links im Content - Bereich öffnen

Tackerharry 26.01.2023 16:42 (Versionen)

html

Hallo,

ich bin neu in diesem Forum. Ich habe im Netz folgendes Grundgerüst einer Webseite gefunden und möchte erreichen, dass die Seiten, welche durch die Links geöffnet werden im Content–Bereich geöffnet werden.

Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.

Ich bin absuluter Anfänger und hoffe ich habe mich verständlich ausgedrückt.

Hier der Code von 2 Seiten, oder kann man hier Dateien hochladen?

Vielen Dank fürs lesen und die Hilfe.

mfg, Andreas

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="UTF-8" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="robots" content="index, follow" />
        <script type="text/javascript">
        /**
         * HTML5-Fallback
         *
         * @param none
         * @return none
         */
                (function(d){
                        if(!d.createTextNode) return;
                        var elem = "header|nav|section|footer".split('|');
                        for(var i=0; i<elem.length; i++){
                                d.createElement(elem[i]);
                        }
                }
        )(document);
        </script>

        <style type="text/css">
                html, body {
                        height:100%;
                        margin:0;
                        padding:0;
                        overflow:hidden;
                        margin-left: 5%;
                        margin-right: 5%;

                        background-color:#82FA58;

                }
                header, nav, section, footer {display: block;}
                header {

                        font-family: Arial, Verdana, serif;
                        font-size: 1.2em;
                        font-weight: bold;
                        text-align:center;

                        top:10px;
                        position:fixed !important;
                        position:absolute;
                        height: 25%;
                        width:80%;

                        background-color:#14529a;
                        color: white;
                }
                nav {
                        bottom:0px;
                        left:0px;
                        height:50%;
                        width:100%;
                        position: absolute;

                        background-color: #088A08;
                }
                #Content {
                        top: 25%;
                        position:relative;
                        height:69%;
                        width:99%;
                        overflow:auto;

                                                background-color:#ccc;
                }
                footer {
                        bottom:0px;
                        position:absolute;
                        height: 5%;
                        width:80%;

                        background-color: #088A08;
                        color: white;

                }

                a {
                        color:#fff;
                }

                                #NavBsp {
                                list-style: none outside none;
                                /*margin: 0;*/
                                padding:0;

                                margin-left: auto;
                                margin-right: auto;

                                }

                                #NavBsp li{

                                font-family: Arial, Verdana, serif;
                                font-size: 0.8em;
                                font-weight: bold;
                                text-decoration:underline;
                                text-align:center;
                                margin: 0;
                                padding: 0;
                                display: block;
                                float:   left;     /*  */
                                width: 16%;
                                position: relative;  /* */
                                cursor: pointer;
                                background: #1e5799;
                                border-right: solid 0.0625em #666;
                                }

                                #NavBsp li a{
                                display: block;
                                padding: 0.5em 0;
                                color: #fff;
                                font-weight: bold;
                                text-decoration:none;
                                }

                                #NavBsp li a:hover, #NavBsp li a:focus, #NavBsp li a:active{
                                color: #fff;
                                background: #1b8ce2;
                                }
        </style>

</head>
<body>
        <header>
         Webseite
                <nav>

                         <ul id="NavBsp">
                         <li><a target="Content" href="startseite.html">Startseite</a></li>
                         <li><a href="seite2.html" title="Über uns" target="Content">Über uns</a></li>
                         <li><a href="#" title="Link zu Nav-Punkt 3">Mitteilungen</a></li>
                         <li><a href="#" title="Link zu Nav-Punkt 4">Test02</a></li>
                         <li><a href="#" title="Link zu Nav-Punkt 5">Test03</a></li>
                         <li><a href="#" title="Link zu Nav-Punkt 6">Test04</a></li>


                         </ul>

                </nav>
        </header>
        <section id="Content">
                Content Zeile 1<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content<br />
                Content letzte Zeile<br />
        </section>
        <footer>
                Footer
        </footer>
</body>
</html>

startseite.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de" dir="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="language" content="de">
  <meta name="robots" content="index, follow">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

 <body>
  <p>TText</p>


<h1>Dies ist Ihre Startseite.</h1>

<p></p>

<p></p>

<p></p>

<p></p>

Die Überschriften der verschiedenen Größen sehen wie folgt aus:

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>

<hr>

<h1>Überschrift</p>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Links im Content - Bereich öffnen
Rolf B 26.01.2023 17:21

html
– Informationen zu den Bewertungsregeln
Hallo Tackerharry,

wenn Du ein absoluter Anfänger bist, dann solltest Du nicht damit beginnen, Dir komplexe Anforderungen zu setzen und diese dann versuchen, durch mehr oder weniger umfangreiche Fragen oder Websuchen zusammenzukopieren.

Besser ist, erstmal Grundkenntnisse zu erwerben. Das dauert natürlich. Unser Wiki hat Einsteigertutorials für HTML und CSS. Nimm Dir dafür erstmal Zeit. Das schont deine und unsere Nerven 😉

Konkret zu Deiner Frage: das target-Attribut in einem Link bezieht sich auf ein Fenster oder einen iframe. Nicht auf eine beliebige ID eines HTML Elements. Du kannst eine andere HTML Datei nicht in eine Section hineinladen.^[1]

Für einfache Webseiten ist es einfacher, sich einen Seitenrahmen zu machen, den für jede neue Seite zu kopieren und den Inhaltsteil nach Wunsch zu gestalten. Folgt man einem Link, wird die Seite komplett neu geladen. Das geht normalerweise so schnell, dass man kein Flackern bemerkt.

Rolf

--
sumpsi - posui - obstruxi
1. Okay, kann man schon, aber nur mit Hilfe von JavaScript und mit einigen Fallstricken. Nichts für Neueinsteiger. ↩︎
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Links im Content - Bereich öffnen
  
  Andreas 26.01.2023 17:24
  
  html
  – Informationen zu den Bewertungsregeln
  Hallo,
  
  vielen Dank für die schnellen Antworten und Hilfe.
  
  Da werde ich es mal etwas einfacher beginnen.
  
  mfg, Andreas
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Links im Content - Bereich öffnen
Matthias Scharwies 26.01.2023 17:21 (Versionen)

html
– Informationen zu den Bewertungsregeln
Servus!

Hallo,

ich bin neu in diesem Forum.

Herzlich willkommen!

Ich habe im Netz folgendes Grundgerüst einer Webseite gefunden ...

Das sieht schon mal ganz gut aus, aber …
- die Zeile mit der Viewport-Angabe sollte lieber <meta name="viewport" content="width=device-width, initial-scale=1.0"> heißen, damit der Nutzer skalieren, sprich zoomen kann.
- den Script-Bereich mit dem HTML5-Fallback kannst Du rausschmeißen, das braucht keiner mehr
- die vielen br-Elemente stören.
- das CSS mit den fixed- und absolute-Positionierungen macht man heute mit Grid Layout
→ HTML/Tutorials/Grundgerüst

→ CSS/Tutorials/Grid/mehrspaltige_Layouts

und möchte erreichen, dass die Seiten, welche durch die Links geöffnet werden im Content–Bereich geöffnet werden.

Das habe ich nicht ganz verstanden. Wsl. meinst du, dass die neue Seite im gleichen Tab geöffnet werden soll, oder?

Die Angabe taget="content" ist eher überflüssig. Lies mal hier:

→ HTML/Attribute/target

→HTML/Tutorials/Navigation/Grundstruktur

Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.

Habe ich richtig vermutet?

Ich bin absuluter Anfänger und hoffe ich habe mich verständlich ausgedrückt.

Hier der Code von 2 Seiten, oder kann man hier Dateien hochladen?

Nein, es wäre aber sinnvoll, du würdest dir eine kostenlose Online-Umgebung organisieren.

→Grundlagen/Webprojekte/publizieren#Kostenloses_Webhosting

Herzliche Grüße

Matthias Scharwies

--
Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Links im Content - Bereich öffnen
  
  Rolf B 26.01.2023 18:14 (Versionen)
  
  html
  +1 Informationen zu den Bewertungsregeln
  Hallo Matthias,
  
  bzw. einfache Seiten in einem Weblabor ausprobieren. Mit Links kann man dort natürlich nicht arbeiten. Ich habe im Wiki mal ein paar Worte dazu verloren.
  
  Rolf
  
  --
  sumpsi - posui - obstruxi
  Beitrag melden
  
  +1
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Links im Content - Bereich öffnen
    
    Matthias Scharwies 26.01.2023 19:05
    
    html
    
    – Informationen zu den Bewertungsregeln
    Servus!
    
    Hallo Matthias,
    
    bzw. einfache Seiten in einem Weblabor ausprobieren. Mit Links kann man dort natürlich nicht arbeiten. Ich habe im Wiki mal ein paar Worte dazu verloren.
    
    Vielen Dank!
    
    Herzliche Grüße
    
    Matthias Scharwies
    
    --
    Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
Links im Content - Bereich öffnen
Gunnar Bittersmann Homepage des Autors 27.01.2023 08:13 (Versionen)

html
– Informationen zu den Bewertungsregeln
@@Tackerharry
index.html
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
```
Du wirst vermutlich niemals XHTML verwenden. Also weg mit xmlns und xml:lang! Bleibt übrig: <html lang="de"> (wenn deine Seite denn auf deutsch ist).
```
<head>
        <title></title>
```
Da muss natürlich noch ein sinnvoller Seitentitel rein.
```
        <link rel="stylesheet" type="text/css" href="style.css">
```
type="text/css" ist default, muss also nicht angegeben werden.
```
        <meta charset="UTF-8" />
```
Die Angabe der Zeichencodiereung gehört weiter nach oben als erstes im head.
```
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
```
Wie @Matthias Scharwies schon sagte: Nutzern unbedingt das Scrollen erlauben, d.h. user-scalable=no und maximum-scale=1 weg.
```
        <meta name="robots" content="index, follow" />
```
Das sollte default sein, kann also weg.
```
        <script type="text/javascript">
```
type="text/javascript" ist default, muss also nicht angegeben werden. Aber wie @Matthias Scharwies schon sagte: Das ganze Script ist überflüssig. Weg damit!
```
        <style type="text/css">
```
type="text/css" ist default, muss also nicht angegeben werden.

Außerdem: Du hattest oben bereits das externe Stylesheet style.css eingebunden. Warum stehen die Styleangaben dann hier im HTML-Dokument?

Wenn du nur eine Seite hast, dann ist es sinnvoll, ein internes Styelesheet zu verwenden. Wenn du mehrere Seiten hast, die gleich gestylt sein sollen, dann ist ein externes Stylesheet sinnvoll, auf das alle deine Seiten verweisen.

Beides, internes und externes Stylesheet, ist für dich vermutlich nicht sinnvoll.
```
                header {

                        font-family: Arial, Verdana, serif;
```
Arial ist keine gute Schriftart. „Sie wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen“, wie Erik Spiekermann zusagen pflegt. Verdana wurde für niedrigauflösende (Röhren-)Monitore entwickelt, ist also nicht mehr zeitgemäß. Und sie hat fürs Deutsche falsche Anführungszeichen. Verwende bessere Schriftarten.
```
                        position:fixed !important;
                        position:absolute;
```
Die doppelte Angabe von position ist sinnlos. Auch wäre sticky der geeignetere Wert – dann wäre zumindest sichergestellt, dass der übrige Seiteninhalt nicht unter dem Header verschwindet.

Man muss aber auch sicherstellen, dass Links (insb. bei Tastaturbedienung) nicht unter dem Header verschwinden. Da man die Höhe des Header i.A. nicht kennen kann, muss man sie mit JavaScript (ResizeObserver) auslesen und über eine custom property in CSS für scroll-padding-top verfügbar machen, so wie in diesem Beispiel.

Ein anderer Weg ginge über scrollBy() wie in jenem Beispiel.

Das ist nichts für Anfänger. Am einfachsten ist, den Header nicht per position zu fixieren, sondern die Seite mit Flexbox oder Grid aufzuteilen und nicht die ganze Seite zu scrollen, sondern nur den Hauptbereich, wie in diesem Beispiel gemacht.
startseite.html
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```
Nein. Verwende wie bei deiner index.html <!DOCTYPE html>, nichts anderes.
```
<html lang="de" dir="ltr">
```
dir="ltr" ist default, kann also weg.
```
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
```
Verwende niemals eine andere Zeichencodierung als UTF-8! Also alle HTML-Dateien als UTF-8 (bevorzugt ohne BOM) speichern und das angeben wie in deiner index.html: <meta charset="UTF-8"/>
```
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="language" content="de">
```
Interessieren diese Angaben noch die Bots von Suchmaschinen? Wenn ja, sinnvoll befüllen. Wenn nein, weg.
```
  <meta name="robots" content="index, follow">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
```
Siehe das oben bei index.html Gesagte.
```
<h1>Dies ist Ihre Startseite.</h1>
```
Üblicherweise ist die index.html die Startseite einer Website.

🖖 Живіть довго і процвітайте

--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
Beitrag melden

–
Informationen zu den Bewertungsregeln
Links im Content - Bereich öffnen
Gunnar Bittersmann Homepage des Autors 27.01.2023 13:19

html
+1 Informationen zu den Bewertungsregeln
@@Tackerharry

Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.

Genauer gesagt: in einem anderen Tab. Im Tab mit dem angebenen Namen …
```
<li><a target="Content" href="startseite.html">Startseite</a></li>
```
… bei dir also „Content“. Wenn schon ein Tab mit diesem Namen existiert, wird der genommen; wenn nicht, ein neuer. S.a. Martins Erklärung und meinen Codepen dazu. Dass man Links nicht in anderen/neuen Tabs öffnen sollte, steht auch dort nochmal.

Wie Rolf schon sagte, willst du das Menü auf jeder Seite einbinden. Was Rolf nicht sagte: Dabei solltest du die jeweils aktuelle Seite im Menü kennzeichnen – mit aria-current="page". Auf der Startseite also bspw.:
```
<nav>
  <ul>
    <li><a href="startseite.html" aria-current="page">Startseite</a></li>
    <li><a href="über-uns.html">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
```
Auf der Über-uns-Seite dann:
```
<nav>
  <ul>
    <li><a href="startseite.html">Startseite</a></li>
    <li><a href="über-uns.html" aria-current="page">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
```
Oder noch besser nicht die aktuelle Seite verlinken, sondern auf den Hauptinhalt verweisen:
```
<nav>
  <ul>
    <li><a href="#main" aria-current="page">Startseite</a></li>
    <li><a href="über-uns.html">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
<main id="main">
  
</main>
```
Auf der Über-uns-Seite entsprechend:
```
<nav>
  <ul>
    <li><a href="startseite.html">Startseite</a></li>
    <li><a href="#main" aria-current="page">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
<main id="main">
  
</main>
```
Das aria-current-Attribut kann dann auch zur visuellen Hervorhebung der aktuellen Seite im Menü genutzt werden. Make it so.

Das Menü kann auch in eine externe Datei ausgelagert und mit SSI oder mit PHP serverseitig in jede Seite eingebunden werden. Die Prüfung auf die jeweils aktuelle Seite müsste dann dort stattfinden.

🖖 Живіть довго і процвітайте

--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Tackerharry: Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen

Links im Content - Bereich öffnen