Links im Content - Bereich öffnen bearbeitet von Gunnar Bittersmann 27.01.2023 08:13 @@Tackerharry > index.html > > ```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">`{:.language-html.good} (wenn deine Seite denn auf deutsch ist). > ```html > <head> > <title></title> > ``` Da muss natürlich noch ein sinnvoller Seitentitel rein. > ```html > <link rel="stylesheet" type="text/css" href="style.css"> > ``` `type="text/css"` ist default, muss also nicht angegeben werden. > ```html > <meta charset="UTF-8" /> > ``` Die Angabe der Zeichencodiereung gehört weiter nach oben als erstes im `head`. > ```html > <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`{:.bad} und `maximum-scale=1`{:.bad} weg. > ```html > <meta name="robots" content="index, follow" /> > ``` Das sollte default sein, kann also weg. > ```html > <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! > ```html > <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. > ```css > header { > > font-family: Arial, Verdana, serif; > ``` [Arial ist keine gute Schriftart.](https://forum.selfhtml.org/self/2020/sep/12/fragenkatalog/1775572#m1775572) *„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.](https://forum.selfhtml.org/self/2022/sep/13/dropdownmenu-automatisch-erweitern-lassen/1802077#m1802077) > ```css > 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*{:@en} in CSS für `scroll-padding-top` verfügbar machen, so wie in diesem [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjMeOep). Ein anderer Weg ginge über `scrollBy()` wie in jenem [Beispiel](https://codepen.io/gunnarbittersmann/pen/KGoyON). 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](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ) gemacht. --- > startseite.html > > ```html > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > ``` Nein. Verwende wie bei deiner index.html `<!DOCTYPE html>`{:.language-html}, nichts anderes. > ```html > <html lang="de" dir="ltr"> > ``` `dir="ltr"` ist default, kann also weg. > ```html > <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"/>`{:.language-html} > ```html > <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. > ```html > <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. > ```html > <h1>Dies ist Ihre Startseite.</h1> > ``` Üblicherweise ist die index.html die Startseite einer Website. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter
Links im Content - Bereich öffnen bearbeitet von Gunnar Bittersmann 28.01.2023 09:18 @@Tackerharry > index.html > > ```html > <!DOCTYPE html> > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> > ``` Du wirst vermutlich niemals XHTML verwendenen. Also weg mit `xmlns` und `xml:lang`! Bleibt übrig: `<html lang="de">`{:.language-html.good} (wenn deine Seite denn auf deutsch ist). > ```html > <head> > <title></title> > ``` Da muss natürlich noch ein sinnvoller Seitentitel rein. > ```html > <link rel="stylesheet" type="text/css" href="style.css"> > ``` `type="text/css"` ist default, muss also nicht angegeben werden. > ```html > <meta charset="UTF-8" /> > ``` Die Angabe der Zeichencodiereung gehört weiter nach oben als erstes im `head`. > ```html > <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`{:.bad} und `maximum-scale=1`{:.bad} weg. > ```html > <meta name="robots" content="index, follow" /> > ``` Das sollte default sein, kann also weg. > ```html > <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! > ```html > <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. > ```css > header { > > font-family: Arial, Verdana, serif; > ``` [Arial ist keine gute Schriftart.](https://forum.selfhtml.org/self/2020/sep/12/fragenkatalog/1775572#m1775572) *„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.](https://forum.selfhtml.org/self/2022/sep/13/dropdownmenu-automatisch-erweitern-lassen/1802077#m1802077) > ```css > 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*{:@en} in CSS für `scroll-padding-top` verfügbar machen, so wie in diesem [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjMeOep). Ein anderer Weg ginge über `scrollBy()` wie in jenem [Beispiel](https://codepen.io/gunnarbittersmann/pen/KGoyON). 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](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ) gemacht. --- > startseite.html > > ```html > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > ``` Nein. Verwende wie bei deiner index.html `<!DOCTYPE html>`{:.language-html}, nichts anderes. > ```html > <html lang="de" dir="ltr"> > ``` `dir="ltr"` ist default, kann also weg. > ```html > <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"/>`{:.language-html} > ```html > <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. > ```html > <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. > ```html > <h1>Dies ist Ihre Startseite.</h1> > ``` Üblicherweise ist die index.html die Startseite einer Website. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter
nicht angemeldet nicht angemeldet
