www-commits
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

www/server/standards gnu-website-guidelines.html


From: Ineiev
Subject: www/server/standards gnu-website-guidelines.html
Date: Tue, 27 Apr 2021 08:18:33 -0400 (EDT)

CVSROOT:        /web/www
Module name:    www
Changes by:     Ineiev <ineiev> 21/04/27 08:18:33

Modified files:
        server/standards: gnu-website-guidelines.html 

Log message:
        Revert uncoordinated changes.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/standards/gnu-website-guidelines.html?cvsroot=www&r1=1.32&r2=1.33

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /web/www/www/server/standards/gnu-website-guidelines.html,v
retrieving revision 1.32
retrieving revision 1.33
diff -u -b -r1.32 -r1.33
--- gnu-website-guidelines.html 26 Apr 2021 18:58:32 -0000      1.32
+++ gnu-website-guidelines.html 27 Apr 2021 12:18:33 -0000      1.33
@@ -3,8 +3,7 @@
 <title>Website Guidelines - GNU Project - Free Software Foundation</title>
 <style type="text/css"><!--
   .skiptoc { position: absolute; top: -2.5em; left: 0; }
-  #content .toc {
-    display: block;
+  .toc {
     position: relative;
     text-align: center;
     padding: 1em 0 1.1em;
@@ -13,6 +12,7 @@
     margin: 3em auto 1.5em;
   }
  .toc { width: 55em; width: max-content; }
+
  .toc ul {
     display: inline-block;
     text-align: left;
@@ -33,44 +33,22 @@
     padding: .2em;
     margin-bottom: .1em;
   }
-  .toc li { list-style: none; }
   .emph-box { margin: .7em 0; }
   dl dt { font-size: 1.125em; }
-  .pict.left { display: none; }
-  .example { margin: 1.5em 0; }
 
 @media (min-width: 45em) {
    .columns { column-count: 2; }
-   .pict.left {
-     display: block; float: left;
-     width: 14em; width: max-content;
-     padding: .5em; border: 1px dotted;
-     margin: .4em 2em .4em 0;
-  }
-}
-
-@media (min-width: 55em) and (orientation: landscape) {
-  .flex { display: flex; flex-direction: row; }
-  .flex > * { width: 49%; }
 }
 --></style>
  <!--#include virtual="/server/standards/po/gnu-website-guidelines.translist" 
-->
 <!--#include virtual="/server/banner.html" -->
-<div class="c">
 <h2>GNU Website Guidelines</h2>
 
 <p>
-  <em>Our goal is to get information to people.<br />
-  Keeping the site design simple<br />helps&nbsp;accomplish&nbsp;that.</em>
+  <em>Our goal is to get information to people.
+  Keeping the site design simple helps accomplish that.</em>
 </p>
 
-<p style="max-width: 58em; margin: auto">
-We want to share our ideas and web resources with the largest public, in the
-most efficient and professional way.
-Bookmark these guidelines for future reference, and don't hesitate to report
-oversights or outdated paragraphs.</p>
-</div>
-
 <div class="toc">
 <p class="skiptoc">
 <small><a href="#GeneralGuidelines">[Skip the table of 
contents]</a></small></p>
@@ -81,16 +59,17 @@
     <ul>
       <li><a href="#gnu-policies">GNU policies</a></li>
       <li><a href="#CopyrightGuidelines">Copyright guidelines</a></li>
-      <li><a href="#HTMLGuidelines">Web and Accessibility Standards</a></li>
+      <li><a href="#HTMLGuidelines">HTML guidelines</a></li>
     </ul></li>
   <li><a href="#new-page"><b>Creating a New Page</b></a>
     <ul>
       <li><a href="#filenames">Naming the file</a></li>
       <li><a href="#html-required">Doctype and required HTML elements</a></li>
+      <li><a href="#page-footer">Page footer</a></li>
       <li><a href="#templating">Using our page template</a></li>
     </ul></li>
   <li><a href="#writing"><b>Writing and Editing</b></a>
-    <ul style="display: inline-block">
+    <ul>
       <li><a href="#page-contents">Page contents</a></li>
       <li><a href="#orthography">Spelling and punctuation</a></li>
       <li><a href="#urls">URLs - local links</a></li>
@@ -104,7 +83,6 @@
     <ul>
       <li><a href="#styling-templated">Styling of templated pages</a></li>
       <li><a href="#other-stylesheets">Other stylesheets</a></li>
-      <li><a href="#text-only">Text-only browsers</a></li>
     </ul></li>
   <li><a href="#UseofGraphics"><b>Use of Graphics</b></a>
     <ul>
@@ -117,8 +95,8 @@
     <ul>
       <li><a href="#cvs">Basic CVS commands</a></li>
       <li><a href="#symlinks">Symbolic links</a></li>
-      <li><a href="#refresh">Meta refresh (don't use)</a></li>
-      <li><a href="#scripts">Server-side scripts</a></li>
+      <li><a href="#htaccess">.htaccess and redirections</a></li>
+      <li><a href="#scripts">Scripts</a></li>
       <li><a href="#sysadmins">System administrators</a></li>
     </ul></li>
   <li><a href="#UsefulResources"><b>Useful Resources</b></a>
@@ -134,53 +112,49 @@
 <h3 id="GeneralGuidelines" class="subheader">General Guidelines</h3>
 
 <p>Please be considerate of all who access our web pages, and accommodate
-them, including those who use low-end hardware, as well as those with slow
-Internet connections. We wish to prevent web designs that look
+them, including those who use text-only browsers or old browsers, as well
+as those with slow connections.  We wish to prevent web designs that look
 great under one version of one browser, and ugly under many others.  Of
 course, please don't install any of the proprietary web browsers
-available if you don't already use them anyway. This website keeps the ideas
-of a community: before updating or publishing a page, don't forget to consult
-these guidelines and your peers.</p>
+available if you don't already use them anyway.</p>
 
 
 <h4 id="gnu-policies">GNU policies</h4>
 
 <ul class="para">
-<li><p>The GNU web server has only <a href="/philosophy/free-sw.html">free
+<li>The GNU web server has only <a href="/philosophy/free-sw.html">free
 software</a> available.  We prefer that only free software be used to
-prepare pages for the GNU web server.</p></li>
+prepare pages for the GNU web server.</li>
 
-<li><p>The GNU website lists and links
+<li>The GNU website lists and links
 <strong>only</strong> to free software.  The software's source code and
 executables have to be freely redistributable and modifiable to and by
 all people and organizations.  If in doubt, ask <a
-href="mailto:gnu@gnu.org";>&lt;gnu@gnu.org&gt;</a>.</p></li>
+href="mailto:gnu@gnu.org";>&lt;gnu@gnu.org&gt;</a>.</li>
 
-<li><p>The GNU website gives priority to software covered by either
-the <a href="/licenses/gpl-3.0.html">GNU General Public License</a> or the
-<a href="/licenses/lgpl-3.0.html">GNU Lesser General Public 
License</a>.</p></li>
-<!-- What does this mean exactly? -->
+<li>The GNU website gives priority to software covered by either
+the GNU General Public License or GNU Lesser General Public
+License.</li>
 
-<li><p>Before you take any graphics or text from another website,
+<li>Before you take any graphics or text from another website,
 please ask for permission to use it.  It's polite to do so.  It is also
-essential for us to avoid copyright infringement.</p></li>
+essential for us to avoid copyright infringement.</li>
 
-<li><p>Before adding a link, check that it follows our <a
-href="#pollinking">linking criteria</a>.</p></li>
+<li>Before adding a link, check that it follows our <a
+href="#pollinking">linking criteria</a>.</li>
 
-<li><p>Do not list an address of an individual, including the
+<li>Do not list an address of an individual, including the
 maintainer of a GNU package, unless explicitly asked to have it
 listed.  Most GNU maintainers do not want a lot of extra mail and prefer
 to get bug reports and other messages from the relevant <a
-href="/prep/mailinglists.html">mailing lists</a>.</p></li>
+href="/prep/mailinglists.html">mailing lists</a>.</li>
 
-<li><p>Pages should not load CSS from servers other than those run
-by the FSF.</p></li>
+<li>Pages should not load CSS from servers other than those run
+by the FSF.</li>
 
-<li><p>Generally, the use of JavaScript is not allowed.  Exceptions to
-this need to be reviewed and approved by the
-<a href="/people/webmeisters.html"> Chief GNUisance</a> on a
-case-by-case basis.</p></li>
+<li>Generally, the use of JavaScript is not allowed.  Exceptions to
+this need to be reviewed and approved by the Chief GNUisance on a
+case-by-case basis.</li>
 </ul>
 
 
@@ -188,24 +162,25 @@
 
 <ul class="para">
 
-<li><p>Every page should have a copyright notice listing the copyright
-holder(s) and copyright year(s).</p></li>
+<li>Every page should have a copyright notice.  See the <a
+href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/boilerplate.html?root=www&amp;content-type=text%2Fplain">
+boilerplate</a>, referred below.</li>
 
-<li><p>Every page should have a notice giving everyone permission
+<li>Every page should have a notice giving everyone permission
 to distribute it.  If you cannot get such a permission from the author,
 please discuss the issue with the webmasters before posting it.  This
-applies to CSS as well as to HTML.</p></li>
+applies to CSS as well as to HTML.</li>
 
-<li><p>Normally you shouldn't post a page that isn't copyright FSF unless
+<li>Normally you shouldn't post a page that isn't copyright FSF unless
 we have permission to modify the version we publish.  If you cannot
 get such a permission from the author, please discuss the issue with
-the FSF before posting it.  This applies to CSS as well as to HTML.</p></li>
+the FSF before posting it.  This applies to CSS as well as to HTML.</li>
 
-<li><p>If ultimately we decide to post a new page we don't have permission to
+<li>If ultimately we decide to post a new page we don't have permission to
 modify, put the text &ldquo;Posted in 20XX without FSF permission to
-modify&rdquo; inside an HTML comment, just after the copyright notice.</p></li>
+modify&rdquo; inside an HTML comment, just after the copyright notice.</li>
 
-<li><p>All pages that explain how to do something, such as how to use
+<li>All pages that explain how to do something, such as how to use
 certain programs, are documentation.  This includes all the pages in
 <code>/software/</code> that describe specific programs.  By our
 principles, <a href="/philosophy/free-doc.html"> documentation must be
@@ -213,26 +188,18 @@
 a <a href="/licenses/license-recommendations.html">free
 license</a>.  If such a page doesn't have a free license, please report the
 problem to <a
-href="mailto:webmasters@gnu.org";>&lt;webmasters@gnu.org&gt;</a>.</p></li>
+href="mailto:webmasters@gnu.org";>&lt;webmasters@gnu.org&gt;</a>.</li>
 
-<li><p>For other pages, use the same license as some other page that serves
-a similar kind of purpose.</p></li>
+<li>For other pages, use the same license as some other page that serves
+a similar kind of purpose.</li>
 </ul>
 
 
-<h4 id="HTMLGuidelines">Web and accessibility standards</h4>
+<h4 id="HTMLGuidelines">HTML guidelines</h4>
 
 <ul class="para">
-<li><p>All public pages of the GNU website should be strictly compliant with
-<a href="https://www.w3.org/TR/?status=rec";>W3C Recommendations (REC)</a>,
-as opposed to Working Drafts (WD), Candidate Recommendations (CR),
-Proposed Recommendations (PR) or Retired Recommendations (RET).</p></li>
-
-<li><p>HTML 5 and CSS3 are target for upgrade from older standards.</p></li>
-
-<li><p>Regardless of the web standards used, all pages should meet the 
-<a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/";>Web Content
-Accessibility Guidelines (WCAG)</a>.</p></li>
+<li>All public pages of the GNU website should be strictly compliant with
+<a href="//www.w3.org/standards/">W3C standards</a>.</li>
 </ul>
 
 
@@ -243,58 +210,52 @@
 <h4 id="filenames">Naming the file</h4>
 
 <ul class="para">
-<li><p>To make simultaneous edition of many files easier,
+<li>To make simultaneous edition of many files easier,
 try and give each HTML file a unique and descriptive name; the special filename
 <code>index.html</code> should only be used as a symbolic link, as
-explained next.</p></li>
+explained next.</li>
 
-<li><p>Each directory in the web server tree should have a
+<li>Each directory in the web server tree should have a
 symbolic link named <code>index.html</code> to the top-level HTML file
 for that directory.  Use the <a
 href="#symlinks"><code>.symlinks</code></a>
-file to handle this.</p></li>
+file to handle this.</li>
 
-<li id="NamingTranslations"><p>If you translate your web page (say,
+<li id="NamingTranslations">If you translate your web page (say,
 <code><var>page</var>.html</code>) in different languages, please
-name the translations <code><var>page.lang</var>.html</code>&mdash;
-<code><var>lang</var></code> should contain the relevant two-letter code
-from <a href="https://www.loc.gov/standards/iso639-2/php/code_list.php";
-rel="noopener">ISO 639-1</a>,
-and optionally a hyphen followed by the two-letter <i>Alpha-2</i> country
-code from <a href="https://www.iso.org/obp/ui/#search/code/";
-rel="noopener">ISO 3166-1</a> (converted to lowercase).
-For example, the German translation of <code>not-ipr.html</code>
+name the translations <code><var>page</var>.<var>lang</var>.html</code>&mdash;
+<code><var>lang</var></code> should contain the two-letter language code from 
<a
+href="//www.loc.gov/standards/iso639-2/php/code_list.php">ISO 639</a>,
+and optionally an hyphen followed the two-letter country code given in
+ISO 3166 (lowercase).  For example, the German translation of 
<code>not-ipr.html</code>
 should be named <code>not-ipr.de.html</code>; the Brazilian Portuguese
-translation should be named <code>not-ipr.pt-br.html</code>.</p></li>
+translation should be named <code>not-ipr.pt-br.html</code>.</li>
 </ul>
 
 
 <h4 id="html-required">Doctype and required HTML elements</h4> 
 
 <ul class="para">
-<li><p>Please follow the above mentioned web standards strictly, even when you 
are
-forced to follow superseded W3C recommendations: don't neglect
-<a href="https://www.w3.org/TR/html401/struct/global.html#h-7.1";>required
+<li>Please follow the above mentioned web standards strictly.  Don't
+neglect <a
+href="//www.w3.org/TR/html401/struct/global.html#h-7.1">required
 elements</a> such as <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>,
-<code>&lt;title&gt;</code> and <code>&lt;body&gt;</code>,
-and always include the appropriate DTD or Schema reference in all markup
-standards older than HTML 5.
-This appeases overly pedantic web browsers.</p></li>
-
-<li><p>Do not add <code>&lt;!-- comments --&gt;</code> at the top of a
-document.  Old web browsers expect the doctype, XML declaration, or Schema to 
be
-at the top.  Comments will confuse them, and often cause them to
-incorrectly interpret your markup.<br />
-If you <i>must</i> add a comment before <code>&lt;!DOCTYPE html></code>, then
-use <code>&lt;!--[if !IE]> comments &lt;![endif]--></code>.</p></li>
+<code>&lt;title&gt;</code> and <code>&lt;body&gt;</code>, etc. when using 
(X)HTML,
+and always include the appropriate DTD or Schema reference.
+This appeases overly pedantic web browsers.</li>
+
+<li>Do not add comments at the top of a document.  Web browsers
+expect the doctype, XML declaration, or Schema to be at the top.
+Comments will confuse them, and often cause them to
+incorrectly interpret your markup.</li>
 
-<li><p>The <code>&lt;head&gt;</code> element should contain this line:</p>
+<li>The <code>&lt;head&gt;</code> element should contain this line:
 <p class="emph-box">
 <code>&lt;link rel="author" href="mailto:webmasters@gnu.org"&gt;</code></p>
-<p>Some browsers use this information to allow users to easily report
-problems they find on a page.</p></li>
+Some browsers use this information to allow users to easily report
+problems they find on a page.</li>
 
-<li><p>The first header element, generally <code>&lt;h1&gt;</code> or 
<code>&lt;h2&gt;</code>, should have
+<li>The first header element, <code>&lt;h[n]&gt;</code>, should have
 its text duplicated at the start of the <code>&lt;title&gt;</code> element.
 The latter
 is used by many browsers in menus like the history and bookmarks lists,
@@ -303,66 +264,62 @@
 users click on an item in these menus, they get a page with the expected
 heading.  Please properly use your headers in numerical order: 1, 2,
 etc.  These are not used for looks, but for the organization of the
-document.</p></li>
+document.</li>
 
-<li><p>The <code>&lt;title&gt;</code> element should include the
+<li>The <code>&lt;title&gt;</code> element should include the
 phrases <i>&ldquo;GNU Project&rdquo;</i>
 and <i>&ldquo;Free Software Foundation&rdquo;</i> so the pages can be better
 indexed by external search engines.  The default is to add this at the
-end: <code> - GNU Project - Free Software Foundation</code>.</p></li>
+end: <code> - GNU Project - Free Software Foundation</code>.</li>
 </ul>
 
 
 <h4 id="page-footer">Page footer</h4>
 
 <ul class="para">
-<li><p>All pages should have a footer. See the <a
+<li>All pages should have a footer. See the <a
 href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/
 boilerplate.html?root=www&amp;content-type=text%2Fplain">
-boilerplate</a>, referred below.</p></li>
+boilerplate</a>, referred below.</li>
 
-<li><p>The footer should include the <a
+<li>The footer should include the <a
 href="#CopyrightGuidelines">copyright and license notices</a> for the
 <em>page itself</em>. The copyright and license notices for material that
 is part of the page (such as images) should normally be placed in the
 main text.<br />
 The rules for listing copyright holders and  years are detailed in
 the <a href="/prep/maintain/html_node/Copyright-Notices.html">GNU
-Maintainers' guide</a>.</p></li>
+Maintainers' guide</a>.</li>
 
-<li><p>The Copyright Infringement Notification is a legal requirement.</p></li>
+<li>The Copyright Infringement Notification is a legal requirement.</li>
 
-<li><p>In addition, the footer should have contact info for both the FSF (or
+<li>In addition, the footer should have contact info for both the FSF (or
 responsible party) and the address for bug reports (webmasters for
 general pages, but project-specific addresses otherwise).
 The reason to note this in the footer is so the user
-always finds this information at the same place on each page.</p></li>
+always finds this information at the same place on each page.</li>
 </ul>
 
 
 <h4 id="templating">Using our page template</h4>
 
 <ul class="para">
-<li><p>To help people follow the above guidelines, a page template (or
+<li>To help people follow the above guidelines, a page template (or
 &ldquo;boilerplate&rdquo;) is provided for both the main part of the GNU
 website, and the software projects.  Its use is mandatory for new pages in
 www.gnu.org, and highly recommended for software pages.  Please don't start
 out with an existing page to create a new one; use the <a
-href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/
-boilerplate.html?root=www&amp;content-type=text%2Fplain">
+href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/boilerplate.html?root=www&amp;content-type=text%2Fplain">
 original source</a> of the boilerplate instead, and follow the instructions
-in it.</p></li>
+in it.</li>
 
-<!-- Impact on the transition toward HTML 5 and WCAG? -->
-<li><p>The templated pages must follow the <a
-href="https://www.w3.org/TR/xhtml1/";>XHTML-1.0 guidelines</a>.
+<li>The templated pages must follow the <a
+href="//www.w3.org/TR/xhtml1/">XHTML-1.0 guidelines</a>.
 Well-formedness is essential for translatable pages that need to be
-converted to POT files by the PO4A/Gettext tools.</p></li>
+converted to POT files by the PO4A/Gettext tools.</li>
 
-<li><p>Our <abbr title="Server-Side Include">SSI</abbr>s declare UTF-8 as the
-character encoding; using any other encoding is problematic.<br />See the
-<a href="https://httpd.apache.org/docs/current/howto/ssi.html";>
-Introduction to Apache SSIs</a> to learn more on this topic.</p></li>
+<li>Our server-side includes declare UTF-8 as the character encoding, so
+using any other encoding is problematic.</li>
 </ul>
 
 
@@ -372,36 +329,36 @@
 <h4 id="page-contents">Page contents</h4>
 
 <ul class="para">
-<li><p>On pages with dated entries (e.g., /philosophy/latest-articles.html),
+<li>On pages with dated entries (e.g., /philosophy/latest-articles.html),
 the newer entries should be first; in other words, preserve reverse
-chronological order.</p></li>
+chronological order.</li>
 
-<li><p>Offer a document in as many formats as the GNU Project has it.
+<li>Offer a document in as many formats as the GNU Project has it.
 For an example, see <a href="/licenses/fdl.html">The GNU Free
 Documentation License</a>.  This lets users get the document in the
-format most useful to them.</p></li>
+format most useful to them.</li>
 </ul>
 
 
 <h4 id="orthography">Spelling and punctuation</h4>
 
 <ul class="para">
-<li><p>English pages should follow the standard American spelling,
-hyphenation and punctuation conventions.</p></li>
+<li>English pages should follow the standard American spelling,
+hyphenation and punctuation conventions.</li>
 
-<li><p>Since these conventions are not always very specific, especially as
+<li>Since these conventions are not always very specific, especially as
 regards hyphenation and quotes, gnu.org adds its own rules for the sake of
-consistency:</p>
+consistency:
   <ul>
-  <li><p>The term &ldquo;nonfree&rdquo; is preferred over 
&ldquo;non-free&rdquo;;
-  likewise, &ldquo;noncommercial&rdquo; over 
&ldquo;non-commercial.&rdquo;</p></li>
-  <li><p>In ordinary text, HTML entities
+  <li>The term &ldquo;nonfree&rdquo; is preferred over &ldquo;non-free&rdquo;;
+  likewise, &ldquo;noncommercial&rdquo; over &ldquo;non-commercial.&rdquo;</li>
+  <li>In ordinary text, HTML entities
   &ldquo;<code>&amp;ldquo;</code>&hellip;<code>&amp;rdquo;</code>&rdquo; and
   &ldquo;<code>&amp;lsquo;</code>&hellip;<code>&amp;rsquo;</code>&rdquo;
   are preferred over straight quotes ("..." and '...').
-  This doesn't apply to script-generated documents.</p></li>
-  <li><p>Where they exist, the double spaces after sentence breaks should be
-  preserved.  They enable Emacs sentence commands to do the right 
thing.</p></li>
+  This doesn't apply to script-generated documents.</li>
+  <li>Where they exist, the double spaces after sentence breaks should be
+  preserved.  They enable Emacs sentence commands to do the right thing.</li>
   </ul>
 </li>
 </ul>
@@ -410,22 +367,21 @@
 <h4 id="urls">URLs - local links</h4>
 
 <ul class="para">
-<li><p>Hand-written URLs that refer to other files on www.gnu.org should be
+<li>Hand-written URLs that refer to other files on www.gnu.org should be
 absolute, starting from the root page.  That is, paths should start
 with <code>/</code> (e.g., <code>/gnu/about-gnu.html</code>; <em>not</em>
-<code>http://www.gnu.org/gnu/about-gnu.html</code> nor
-<code>https://gnu.org/gnu/about-gnu.html</code>, and <em>not</em>
+<code>http://www.gnu.org/gnu/about-gnu.html</code>, and <em>not</em>
 <code>about-gnu.html</code>).  This makes it easier to copy and paste
 links from other pages.  Besides, links like
 <code>http://www.gnu.org/</code> will be wrong when the visitor uses
-HTTPS.</p></li>
+HTTPS.</li>
 
-<li><p>Collections of files produced automatically from Texinfo source
+<li>Collections of files produced automatically from Texinfo source
 contain links with relative file names.  They always refer to another
 file in the same directory.  These relative links are to be
-tolerated.</p></li>
+tolerated.</li>
 
-<li><p>Don't use just a directory name in a URL; always include the
+<li>Don't use just a directory name in a URL; always include the
 specific filename.  For instance, use <code>/gnu/gnu.html</code>, not just
 <code>/gnu/</code>.  Never use <code>index.html</code> in a URL.  Both of
 these are kindnesses to the user, as browsers change the highlighting on
@@ -433,9 +389,9 @@
 different URLs, the URLs that haven't been explicitly referenced will
 not be highlighted as visited.  So the user goes to pages he/she has
 already seen, which is irritating.  Also, this eases maintenance of the site
-as things get moved around.</p></li>
+as things get moved around.</li>
 
-<li><p>When embedding static resources, such as videos that are not in
+<li>When embedding static resources, such as videos that are not in
 the <code>www</code> CVS repository along with the rest of the
 www.gnu.org pages, it's important that the URL used to embed the asset
 be a subdomain of gnu.org, so that the Third-party Request Blocker
@@ -444,84 +400,80 @@
 embedding videos from FSF campaigns on www.gnu.org, use
 <code>static.gnu.org</code> rather than <code>static.fsf.org</code>.
 Both of these addresses have been set to point to the same machine, so
-they can be used interchangeably.</p></li>
+they can be used interchangeably.</li>
 </ul>
 
 
 <h4 id="anchors">URLs - page anchors</h4>
 
 <ul class="para">
-<li><p>Be sure to omit the filename entirely when linking to an anchor in
-the same file, and double-check that the anchor actually works.</p></li>
+<li>Be sure to omit the filename entirely when linking to an anchor in
+the same file, and double-check that the anchor actually works.</li>
 
-<li><p>Consider others linking to your page when either removing an element
+<li>Consider others linking to your page when either removing an element
 that carries an <code>id</code> attribute, or changing an <code>id</code>.
 Place the old one on a block element nearby. If there is no suitable
-element, add one. Here is an example from the Philosophy main page:</p>
+element, add one. Here is an example from the Philosophy main page:
 
 <pre class="emph-box">
-<samp>&lt;!-- please leave both these ID attributes here. ... --&gt;
-[...]
-&lt;div id="TOCFreedomOrganizations"&gt;
-&lt;p id="FreedomOrganizations"&gt;We also keep a list of
-&lt;a href="/links/links.html#FreedomOrganizations"&gt;Organizations
-that Work for Freedom in
-Computer Development and Electronic Communications&lt;/a&gt;.&lt;/p&gt;
-&lt;/div&gt;</samp>
+ <samp>&lt;!-- please leave both these ID attributes here. ... --&gt;
+ [...]
+ &lt;div id="TOCFreedomOrganizations"&gt;
+ &lt;p id="FreedomOrganizations"&gt;We also keep a list of
+ &lt;a href="/links/links.html#FreedomOrganizations"&gt;Organizations
+ that Work for Freedom in
+ Computer Development and Electronic Communications&lt;/a&gt;.&lt;/p&gt;
+ &lt;/div&gt;</samp>
 </pre>
 
-<p>Please avoid moving the old <code>id</code> to a translatable string,
+Please avoid moving the old <code>id</code> to a translatable string,
 unless there is no other way to keep the markup valid. Translators will
-thank you!</p></li>
+thank you!</li>
 </ul>
 
 
 <h4 id="external-links">URLs - external links</h4>
 
 <ul class="para">
-<li><p><em>Reminder:</em>&nbsp; before adding a link, check that it follows 
our <a
-href="#pollinking">linking criteria</a>.</p></li>
+<li><em>Reminder:</em>&nbsp; before adding a link, check that it follows our <a
+href="#pollinking">linking criteria</a>.</li>
 
-<li><p>Check if the linked host supports HTTPS and always prefer HTTPS over 
HTTP
-when the former is supported and has a valid certificate (this is expressed by
-a locked/green lock on most web browsers).</p></li>
-<!--
-<li><p>Protocol-relative URLs (e.g., <code>//www.example.org</code>) are not
-recommended when linking to external, third-party domains.</p></li>
--->
+<li>Check whether the linked host supports HTTPS and has a valid certificate
+(this is expressed by a locked/green lock on most web browsers). If it
+does, <em>and HTTP is also available</em>, preferably use protocol-relative
+URLs (e.g., <code>//www.example.org</code>).</li>
 </ul>
 
-
 <h4 id="mailto">URLs - email links</h4>
 
 <ul class="para">
-<li><p>Place angle brackets around <code>mailto:</code> anchors (which will
+<li>Place angle brackets around <code>mailto:</code> anchors (which will
 bring up a mail form to fill out and send, if the visitor has installed a
 standard email client) to clearly distinguish them from hypertext anchors.
 See <a href="https://tools.ietf.org/html/rfc6068#section-6";>RFC 6068</a> for
 advanced examples of how to use mailto URIs to specify a subject, the
-body, etc.</p></li>
+body, etc.</li>
 
-<li><p>When citing people, place the <code>mailto:</code> anchor next to
+<li>When citing people, place the <code>mailto:</code> anchor next to
 their name, so that the email address is retained in printed copies of
-the page; for example,</p>
+the page; for example:
 
   <ul>
-     <li><p>If the person owns a website:</p>
+     <li>If the person has a website:
         <pre class="emph-box">
-<samp>&lt;a href="https://www.stallman.org/"&gt;Richard 
Stallman&lt;/a&gt;</samp>
-<samp>&lt;a 
href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;</samp></pre>
+ <samp>&lt;a href="//www.stallman.org/"&gt;Richard Stallman&lt;/a&gt;
+ &lt;a 
href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;</samp></pre>
         <p>&hellip; rendered like</p>
         <p class="emph-box" style="background-color: inherit">
-                <a href="https://www.stallman.org/";>Richard Stallman</a>
+                <a href="//www.stallman.org/">Richard Stallman</a>
                 <a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
         </p>
      </li>
      <li>
-        <p>If the person doesn't own a website:</p>
+        <p>If the person doesn't have a website:</p>
         <pre class="emph-box">
-<samp>Richard Stallman</samp>
-<samp>&lt;a 
href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;</samp></pre>
+ <samp>Richard Stallman
+ &lt;a 
href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;</samp></pre>
         <p>&hellip; rendered like</p>
         <p class="emph-box" style="background-color: inherit">
                 Richard Stallman
@@ -529,46 +481,45 @@
         </p>
      </li>
    </ul>
-  </li>
+</li>
 </ul>
 
 
 <h4 id="abbreviations">Acronyms and abbreviations</h4>
 
 <ul class="para">
-      <li><p>Never use <code>&lt;acronym&gt;</code>: HTML&nbsp;5 obsoletes it 
in
-      favor of <code>&lt;abbr&gt;</code>. The latter must be expanded in a
-      <code>title</code> attribute.</p></li>
+      <li>Never use <code>&lt;acronym&gt;</code>: HTML&nbsp;5 obsoletes it in
+      favor of <code>&lt;abbr&gt;</code>.</li>
+
+      <li>Don't use <code>&lt;abbr&gt;</code> unless for a really
+      compelling reason.  Browsers render it in an ugly way.</li>
 
-      <li><p>When an abbreviation may be unfamiliar to a reader, give its
+      <li>When an abbreviation may be unfamiliar to a reader, give its
       expansion <i>only the first time</i> it is used in a document.<br />
       Example: <code>&lt;abbr title="Expanded
       Abbreviation"&gt;EA&lt;/abbr&gt;</code> or <code>EA
-      (Expanded Abbreviation)</code>.</p></li>
+      (Expanded Abbreviation)</code>.</li>
 
-      <li><p>Make sure <code>&lt;abbr&gt;</code> is styled via CSS to meet the
-      accessibility guidelines.  By default some browsers render it in an
-      ugly way.</p></li>
-
-      <li><p>For common-enough initialisms, such as GNU, FSF, BSD, RAM, HTML,
+      <li>For common-enough initialisms, such as GNU, FSF, BSD, RAM, HTML,
       DVD, and so on, no markup is needed at all.
-      Use your judgment.</p></li>
+      Use your judgment.</li>
 </ul>
 
 
 <h4 id="tables">Tables and menus</h4>
 
 <ul class="para">
-<li><p>Please use tables to organize data (<a
-href="https://www.w3.org/WAI/WCAG21/Techniques/html/H51";><i>data</i> 
tables</a>),
-not the presentation of the web page (<i>layout</i> tables).<br />
-If you <em>must</em> use layout tables, be sure that the table <a
-href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F49";>makes sense
-when linearized</a>, and has <a
-href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F91";>appropriately
-marked up headers</a>.</p></li>
+<li>Please use tables to organize data, not the presentation of the
+web page.</li>
+
+<li>Screen reader software used by most blind people reads the text
+from left to right, ignoring any tables that you make.  If you use
+tables, you should make sure that reading a whole
+page left to right doesn't confuse such software.  Please follow the
+<a href="//www.w3.org/WAI/">W3C web accessibility guidelines</a>
+to ensure that tables are properly marked for accessibility.</li>
 
-<li><p>Some people like to organize links as a menu to
+<li>Some people like to organize links as a menu to
 the left or right of the main text when using graphical browsers.  That
 does not work very well with text browsers since they will make the
 menu appear either on top of the page or at the bottom.  If you have
@@ -579,7 +530,7 @@
 visible on the first page when viewing it with a text browser.  A
 menu bar of one or two horizontal lines might accomplish your
 purpose as well.  Providing a &ldquo;skip link&rdquo; to the main text
-is another option (see the table of contents above for an example).</p></li>
+is another option (see the table of contents above for an example).</li>
 </ul>
 
 
@@ -589,56 +540,49 @@
 <h4 id="styling-templated">Styling of templated pages</h4>
 
 <ul class="para">
-<li><p>Generic styling for desktops and smartphones is provided by <a
-href="/layout.css"><code>layout.css</code></a>; it covers most of our use 
cases.</p></li>
+<li>Generic styling for desktops and smartphones is provided by 
+<code>/layout.css</code>; it covers most of our use cases.</li>
 
-<li><p>Mobile devices with very limited resources use <a
-href="/mini.css"><code>mini.css</code></a>.
-This stylesheet is just the Yahoo User Interface (version&nbsp;2) <a
-href="https://yui.github.io/yui2/docs/yui_2.9.0_full/reset/index.html";>reset</a>
-and <a
-href="https://yui.github.io/yui2/docs/yui_2.9.0_full/base/index.html";>base</a>
-stylesheets, as these devices typically have minimal need for various
-fonts and no need for fancy layouts.</p></li>
-
-<li><p>Printers use <a href="/print.css"><code>print.css</code></a>.  Note
-that the header, navigation
-bars and footer (except copyright and license) are unprintable.</p></li>
-
-<li><p>In addition to <code>layout.css</code>, some pages have specialized
-stylesheets: <a
-href="/graphics/graphics.css"><code>graphics.css</code></a> for the GNU
-Art section, and <a
-href="/side-menu.css"><code>side-menu.css</code></a> for the Malware and
-Education sections.</p></li>
+<li>Mobile devices with very limited resources use <code>/mini.css</code>.
+This stylesheet is just the Yahoo User Interface (version&nbsp;2) reset and
+base stylesheets, as these devices typically have minimal need for various
+fonts and no need for fancy layouts.</li>
+
+<li>Printers use <code>/print.css</code>.  Note that the header, navigation
+bars and footer (except copyright and license) are unprintable.</li>
+
+<li>In addition to <code>/layout.css</code>, some pages have specialized
+stylesheets: <code>/graphics/graphics.css</code> for the GNU
+Art section, and <code>/side-menu.css</code> for the Malware and
+Education sections.</li>
 
-<li><p>If some special styling is needed for a specific page, it should be 
added
+<li>If some special styling is needed for a specific page, it should be added
 to the page itself in a &lt;style&gt; element, between the SSI directives
 that include <code>header.html</code> and <code>banner.html</code>.  If the
-style applies to a single element, it should normally be added as an 
attribute.</p></li>
+style applies to a single element, it should normally be added as an 
attribute.</li>
 
-<li><p>If you specify any color attribute in the HTML, you should specify all 
of
+<li>If you specify any color attribute in the HTML, you should specify all of
 them that are allowed for that element.  This is because some browsers
 allow users to specify defaults for the color attributes, and the
 user's choices could conflict with your choices, as your choices
 override the user's choices.  In the worse case, the foreground and
 background could end up the same.  Please use a stylesheet for
 this, and not HTML 3.2 (HTML 4 Transitional) deprecated
-markup.</p></li>
+markup.</li>
 </ul>
 
 
 <h4 id="other-stylesheets">Other stylesheets</h4>
 
 <ul class="para">
-<li><p>Historical pages (unmaintained translations for the most part) refer
-to <a href="/gnu.css"><code>gnu.css</code></a>, which in turn loads
-<code>mini.css</code>, as these pages are
-usually very basic, plain pages with little or no formatting.</p></li>
+<li>Historical pages (unmaintained translations for the most part) refer
+to <code>/gnu.css</code>, which in turn loads <code>/mini.css</code>,
+as these pages are
+usually very basic, plain pages with little or no formatting.</li>
 
-<li><p>There are dedicated stylesheets for software manuals.  The main ones 
are:</p>
+<li>There are dedicated stylesheets for software manuals.  The main ones are:
   <ul>
-  <li><a href="/style.css"><code>style.css</code></a>;</li>
+  <li><code>/style.css</code>;</li>
   <li><a href="/software/gnulib/manual.css"><code>gnulib.css</code></a>,
   which imports <code>style.css</code> and adds a few more definitions;
   it is used by <code>gendocs.sh</code> to <a
@@ -647,101 +591,14 @@
   </ul>
 </li>
 
-<li><p>Translators maintain stylesheets 
(<code>/style.<var>lang</var>.css</code>)
-that modify <code>layout.css</code> according to
+<li>Translators maintain stylesheets (<code>/style.<var>lang</var>.css</code>)
+that modify <code>/layout.css</code> according to
 their own needs.  The RTL languages (Arabic, Persian, and Hebrew) use
-<a href="/style.rtl.css"><code>style.rtl.css</code></a>. Please don't
-forget to update <code>style.rtl.css</code> if you make LTR-specific
-changes to <code>layout.css</code>.</p></li>
-</ul>
-
-
-<h4 id="text-only">Text-only browsers</h4>
-
-<p>The text-only web browsers are a class of web browsers which can be executed
-in a terminal, without the benefits of a graphical environment. They represent
-the lightest kind of web browser and at their minimal can be viewed as a
-combination of <code>less</code>, <code>wget</code>, <code>ncurses</code>
-with a html-to-text transformation engine.</p>
-
-<p>Even if the main web development target is composed by modern graphical
-browsers, browsability through terminal web browsers is an indication of good
-accessibility: they behave similarly to some accessibility tools and may not
-ignore CSS, trying to approximate the graphic render as much as possible.  It
-isn't necessary to use dedicated stylesheets, because its always
-possible to safely insert conditional feature-sensitive or agent-sensitive
-blocks inside the existing ones, to hold the style fragments which should be
-rendered exclusively on the <i>grid</i> devices (the text terminals).</p>
-
-<ul class="para">
-<li><p>The webpages which are meaningful without media files (videos, graphics,
-photos, animations, etc.) may be tested on modern, stable text-only browsers
-and should be accessible by text-only users.</p></li>
-
-<li><p>The subset of text-only browsers for compatibility testing is composed 
by
-stable and modern text mode browsers such as Lynx, Elinks and w3m, executed
-on the latest stable xterm, with <i>at least</i> support for 24-bit color,
-italic/bold fonts and UTF-8 enabled.</p></li>
-
-<li><p>The CSS media queries can be used to detect graphical web browsers and 
their
-capabilities, but may be ignored (always return <var>true</var>) on text-only
-browsers.</p>
-
-<p>The correct way to prevent graphical browsers from parsing
-a CSS fragment dedicated to text-only browsers is:</p>
-
-<div class="flex">
-    <pre class="emph-box">
-<code>/* Discarded by GUI-based web browsers */
-@media only screen and (grid: 1) {
-    exp { prop: value; }
-    &hellip;
-}</code></pre>
-    <pre class="emph-box">
-<code>/* Not downloded by GUI-based web browsers */
-@import url('tty.css') screen and (grid: 1);
-/* or, alternatively: */
-/* Not downloded by GUI-based web browsers */
-@import "tty.css" screen and (grid: 1);</code></pre>
-</div>
-
-<p>&hellip;for in-page block embedding:</p>
-
-<div class="flex">
-    <pre class="emph-box">
-<code>&lt;-- Discarded by GUI-based web browsers --&gt;
-&lt;style media="only screen and (grid: 1)">
-    exp { prop: value; }
-    &hellip;
-&lt;/style></code></pre>
-    <pre class="emph-box">
-<code>&lt;style &hellip;&nbsp;>
-    /* Discarded by GUI-based web browsers */
-    @media only screen and (grid: 1) {
-        exp { prop: value; }
-        &hellip;
-    }
-&lt;/style></code></pre>
-</div>
-
-<p>&hellip;and for external resource (direct) inclusion:</p>
-
-<pre class="emph-box">
-<code>&lt;!-- Not downloded by GUI-based web browsers --&gt;
-&lt;link href="tty.css" rel="stylesheet" media="only screen and (grid: 1)">
-</code></pre>
-
-<p>Always double-check the result on different web browsers.</p>
-</li>
+<code>/style.rtl.css</code>. Please don't
+forget to update <code>/style.rtl.css</code> if you make LTR-specific
+changes to <code>layout.css</code>.</li>
 </ul>
 
-<p>To maximize compatibility, assume the terminal buffer has 80 to 132 columns
-with no word-wrap and unlimited rows.  In each screen the user can "scroll" in
-various ways and the terminal can always display at least 23 lines; moreover,
-the user can instantly jump from one link to another and from one end of the
-page to another.  In some particular cases forced word-wrap is advantageous and
-you can use use <code>fold</code> from the GNU coreutils to ease the task.</p>
-
 
 <h3 id="UseofGraphics" class="subheader">Use of Graphics</h3>
 
@@ -749,25 +606,13 @@
 <h4 id="caveats">Caveats</h4>
 
 <ul class="para">
-<li><p>The use of graphics should be minimized, so pages load fast
-over slow links, especially animations.<br />
-Ideally, the <i>average</i> page loading time should remain under 3000&nbsp;ms
-(with caching and proxying disabled). So, when it exceeds this limit, consider
-using lossless compression or smaller images.  Modern web browser do implement
-network speed throttling as a development functionality, natively or via
-extensions; a local transparent HTTP/S proxy can serve the same purpose; the
-GNU/Linux kernel <abbr title="Traffic Control">TC</abbr> implements
-<abbr title="Hierarchical Token Bucket">HTB</abbr>, which can be used to create
-advanced testing environments with throttled network interfaces.</p></li>
-
-<li><p>We do not use background images on our pages, as they make text
-significantly harder to read.<br />
-If you are forced to add a background, ensure there is <a
-href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83";>sufficient
-contrast</a> with text, graphs, &hellip; and remember that CSS gradients may
-not be rendered by accessibility tools.</p></li>
+<li>The use of graphics should be minimized, so pages load fast
+over slow links, especially animations.</li>
 
-<li><p>In the past, GIFs have had patent problems.  However, now that
+<li>We do not use background images on our pages, as they make text
+significantly harder to read.</li>
+
+<li>In the past, GIFs have had patent problems.  However, now that
 the IBM and Unisys patents (and other patents worldwide that are
 relevant to LZW compression) have expired, GIFs that are based on the
 87a or 89a standard are acceptable.  Please be wary of proprietary
@@ -780,89 +625,42 @@
 Other formats are also allowed, though JPEG is the one most widely
 recognized by web browsers (avoid JPEG 2000, and be careful with PNG
 alpha channels; the former is not widely supported, and the latter are
-not fully supported by some older browsers).</p></li>
+not fully supported by some older browsers).</li>
 </ul>
 
 
 <h4 id="image-basics">Basic recommendations</h4>
 
 <ul class="para">
-<li><p>All images that are not purely decorative should provide <a
-href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83";>sufficient
-contrast</a> between informative parts (text, graphs, etc.) and
-background.</p></li>
 
 <li><p>Always have a textual alternative for in-line images, to ensure
 indexability by search engines and accessibility.  For instance:</p>
 
-<div class="pict left">
-    <p>Loaded in graphic browser:<br />
-    <img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
-         title="BRIEF TEXT"
-         alt="&nbsp;[DESCRIPTIVE TEXT]&nbsp;"
-         style="width: 5em; height: auto; border: 2px solid gray"
-         width="80" height="80" />
-    </p>
-    <p>Loading failed or text reader:<br />
-      <samp>
-        <img src="/graphics/gnu-post/Alternative-GNU-stamp.invalid"
-             title="BRIEF TEXT"
-             alt="&nbsp;[DESCRIPTIVE TEXT]&nbsp;"
-             style="width: 5em; height: auto; border: 2px solid gray"
-             width="80" height="80" />
-      </samp>
-    </p>
-</div>
-
 <pre class="emph-box">
-&lt;img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
-     title="BRIEF TEXT"
-     alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"&gt;
-</pre>
+ <code>&lt;img src="/graphics/*.jpg"
+      alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;" /&gt;</code></pre>
 
 <p>We add the non-breaking spaces (&amp;nbsp;) and square brackets to
 separate the DESCRIPTIVE TEXT from adjacent text, and help the user
 realize that this is a stand-in for an image.  The point of using
 non-breaking spaces rather than normal ones is to make sure they find
 their way to the translatable strings that are extracted by the
-PO4A/Gettext tools.</p>
-<div style="clear: both"></div>
-</li>
+PO4A/Gettext tools.</p></li>
 
 <li id="image-size"><p>Check that the image doesn't look too big or too small
 when displayed at its original size, using the browser's default font
-size. If it is too big and you can't make a smaller version, adjust the
-size with the width and height attributes.<br />
-Specifying both width and height will reserve the space required for the
-image during the page loading phase. Loading will thus be faster and
-smoother, especially on low-end machines with poor connectivity.</p></li>
+size.</p></li>
 
-<li><p>Also adjust image width or height in a style attribute, using scalable
+<li><p>Adjust image width or height in a style attribute, using scalable
 units such as <code>em</code> or <code>%</code>; for instance:</p>
-<div style="clear: both"></div>
-
-<img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
-     title="GNU stamp"
-     alt="&nbsp;[Stamp with an abstract GNU head]&nbsp;"
-     style="width: 10em; height: auto; float: right; margin: .5em 0 .5em 1.5em"
-     width="160"
-     height="160" />
 
 <pre class="emph-box">
-&lt;img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
-     title="GNU stamp"
-     alt="&amp;nbsp;[Stamp with an abstract GNU head]&amp;nbsp;"
-     style="width: 10em; height: auto; float: right; margin: .5em 0 .5em 1.5em"
-     width="160"
-     height="160" /&gt;
-</pre>
+ <code>&lt;img src="/graphics/*.jpg"
+      alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"
+      style="width: 10em; height: auto;" /&gt;</code></pre>
 
 <p>This way, the page will look the same if the reader increases or
-decreases font size.<br />Specifying both <code>width</code> and
-<code>height</code> will reserve the space required for the image during
-the page loading phase, preventing incremental <a
-href="https://developers.google.com/speed/docs/insights/browser-reflow";>
-layout reflows</a>.</p></li>
+decreases font size.</p></li>
 
 <li><p>Link all images that are displayed throughout the website to the
 relevant page, usually in <code>/graphics/</code>.
@@ -875,65 +673,55 @@
 
 <ul class="para">
 <li><p>If you are adding a small floating image to a page that uses
-<a href="/layout.css"><code>layout.css</code></a> (the stylesheet for <a
-href="#templating">templated pages</a>), you may want to use the
-<code>imgright</code> or <code>imgleft</code> class
+<code>layout.css</code> (the stylesheet for <a
+href="#templating">templated pages</a>),
+you may want to use the <code>imgright</code> or <code>imgleft</code> class
 (defined in the IMAGES section of the stylesheet).  This will ensure that
 the floating direction is reversed if the page is translated into an RTL
-language. Here is an example:</p>
-
-<p class="imgleft">
-<a href="/graphics/gnu-post/"><img
-   src="/graphics/gnu-post/GNU-stamp.png"
-   title="GNU stamp"
-   alt="&nbsp;[Stamp with a GNU head]&nbsp;"
-   style="width: 8em; height: auto"
-   width="128" height="128" />
-</a></p>
-
-<pre class="emph-box">
-&lt;p class="imgleft"&gt;
-  &lt;a href="/graphics/gnu-post/"&gt;
-    &lt;img src="/graphics/graphics/gnu-post/GNU-stamp.png"
-         title="GNU stamp"
-         alt="&amp;nbsp;[Stamp with a GNU head]&amp;nbsp;"
-         style="width: 8em; height: auto"
-         width="128" height="128" /&gt;
-  &lt;/a&gt;
-&lt;/p&gt;
-</pre>
-<div style="clear: both"></div>
-</li>
+language.</p></li>
 
 <li><p>If the image you are adding is 12em wide or more, and the page is
 templated, you may find it convenient to use one of the responsive
 <code>pict</code> classes that are defined in the IMAGES section of
-<code>layout.css</code>. You can adjust the width in a style attribute if none
-of the predefined ones fits your needs; for instance:</p>
+<code>layout.css</code> (you can adjust the width in a style
+attribute if none of the predefined ones fits your needs); for instance:</p>
 
-<div class="pict medium" style="width: 15em">
-    <img src="/graphics/gnu-post/GNU-stamp.png"
-         title="GNU stamp"
-         alt="&nbsp;[Stamp with a GNU head]&nbsp;"
-         width="225" height="225" />
-</div>
+<pre class="emph-box">
+ <code>&lt;div class="pict wide" style="width: 25em"&gt;
+  &lt;img src="/graphics/*.jpg"
+       alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;" /&gt;
+ &lt;/div&gt;</code></pre>
+
+<p>Note that the <code>div</code> container is necessary because some browsers
+(e.g., NetSurf) don't know how to apply <code>max-width</code> to 
images.</p></li>
+
+<li><p>Link all images that are displayed throughout the website to the
+relevant page, usually in <code>/graphics/</code>.  This can be done with
+code similar to this, which corresponds to the image:</p>
+
+<p class="imgleft">
+ <a href="/graphics/agnuhead.html">
+ <img src="/graphics/gnu-head-sm.jpg"
+      alt="&nbsp;[Image of the Head of a GNU]&nbsp;"
+      style="width: 8em" /></a>
+</p>
 
 <pre class="emph-box">
-&lt;div class="pict wide" style="width: 15em"&gt;
-    &lt;img src="/graphics/gnu-post/GNU-stamp.png"
-         title="GNU stamp"
-         alt="&amp;nbsp;[Stamp with a GNU head]&amp;nbsp;"
-         width="225" height="225" /&gt;
-&lt;/div&gt;
+ &lt;p class="imgleft"&gt;
+  &lt;a href="/graphics/agnuhead.html"&gt;
+  &lt;img src="/graphics/gnu-head-sm.jpg"
+       alt="&amp;nbsp;[Image of the Head of a GNU]&amp;nbsp;"
+       style="width: 8em" /&gt;&lt;/a&gt;
+ &lt;/p&gt;
 </pre>
-
-<p>Please note that the container (<code>div</code> in this case) is necessary 
for
-retrocompatibility with some browsers which cannot apply <code>max-width</code>
-to images; in addition, be aware that a nested <code>table</code> may not
-inherit <code>max-width</code> on all web browsers (i.e., always test for
-compatibility when you need to put a table beside a picture).</p>
 <div style="clear: both"></div>
-</li>
+
+<p>This will allow users to quickly go to pages related to the pictures they
+are interested in.</p>
+
+<p><em>Note:</em>&nbsp; This example also demonstrates that it's a bad
+idea to place a non-responsive image next to a fixed-width element such
+as &lt;pre&gt;. Just try to read the HTML code in a narrow window.</p></li>
 
 <li><p><a href="/graphics/graphics.css"><code>graphics.css</code></a> has
 some other layouts.</p></li>
@@ -1108,21 +896,18 @@
 <h4 id="cvs">Basic CVS commands</h4>
 
 <ul class="para">
-<li><p>For the offline reference manual, execute <kbd>info cvs</kbd>.</p></li>
+<li><p>For the offline reference manual, execute 
<kbd>info&nbsp;cvs</kbd>.</p></li>
 
-<li><p>
-Before the initial checkout, set the environment variable
-<kbd>CVS_RSH=ssh</kbd>.<br />Alternatively, you can replace
-<code>:ext:</code> with
-<a href="/software/trans-coord/manual/cvs/cvs.html#Connecting-with-rsh-or-ssh">
-<code>:extssh:</code></a> to use an external ssh program.</p></li>
+<li>
+<p>Before the initial checkout, set the environment variable
+<kbd>CVS_RSH=ssh</kbd>.</p></li>
 
 <li>
 <p>If you have write access to the main repository of www.gnu.org, check
 it out with your Savannah login username:</p>
 
 <pre class="emph-box">
-<kbd>cvs -z3 -d:ext:<var>username</var>@cvs.savannah.gnu.org:/web/www co 
www</kbd>
+ <kbd>cvs -z3 -d:ext:<var>username</var>@cvs.savannah.gnu.org:/web/www co 
www</kbd>
 </pre>
 
 <p>You will get a working directory, <code>www</code>, with the same
@@ -1134,7 +919,7 @@
 check it out anonymously:</p>
 
 <pre class="emph-box">
-<kbd>cvs -z3 -d:pserver:anonymous@cvs.savannah.gnu.org:/web/www co www</kbd>
+ <kbd>cvs -z3 -d:pserver:anonymous@cvs.savannah.gnu.org:/web/www co www</kbd>
 </pre>
 </li>
 
@@ -1142,7 +927,7 @@
 <p>Check out the <strong>web</strong> repository of the 
<var>fooproject</var>:</p>
 
 <pre class="emph-box">
-<kbd>cvs -z3 
-d:ext:<var>username</var>@cvs.savannah.gnu.org:/web/<var>fooproject</var> \
+ <kbd>cvs -z3 
-d:ext:<var>username</var>@cvs.savannah.gnu.org:/web/<var>fooproject</var> \
          co <var>fooproject</var></kbd>
 </pre>
 
@@ -1162,7 +947,7 @@
 <p>Add a file or directory:</p>
 
 <pre class="emph-box">
-<kbd>cvs add <var>foo</var></kbd>
+ <kbd>cvs add <var>foo</var></kbd>
 </pre>
 </li>
 
@@ -1170,7 +955,7 @@
 <p>Update before you edit a file:</p>
 
 <pre class="emph-box">
-<kbd>cvs update -P <var>foo</var></kbd>
+ <kbd>cvs update -P <var>foo</var></kbd>
 </pre>
 </li>
 
@@ -1178,16 +963,16 @@
 <p>Check the changes you are going to commit:</p>
 
 <pre class="emph-box">
-<kbd>cvs diff -U2 <var>foo</var></kbd>
+ <kbd>cvs diff -U2 <var>foo</var></kbd>
 </pre>
 </li>
 
 <li>
-<p>Perform the commit (no need for <kbd>cvs add</kbd> if the file is
+<p>Perform the commit (no need for <kbd>cvs&nbsp;add</kbd> if the file is
 already in the repository):</p>
 
 <pre class="emph-box">
-<kbd>cvs commit <var>foo</var></kbd>
+ <kbd>cvs commit <var>foo</var></kbd>
 </pre>
 
 <p>This will open a text editor where you should enter a log message.  The
@@ -1242,13 +1027,12 @@
 ignored.</li>
 </ul>
 
-<p>Here is an example of <code>.symlinks</code>, which redirects a file to
-another file in the same directory:</p>
+<p>Here is an example of <code>.symlinks</code>:</p>
 
 <pre class="emph-box">
-# Make a link named l.html to a target t.html.
-# Strictly equivalent to ln -s t.html l.html:
-t.html l.html
+ # Make a link named l.html to a target t.html.
+ # Strictly equivalent to ln -s t.html l.html:
+ t.html l.html
 </pre>
 
 <p>On each line the first file name must be a relative path name to an
@@ -1259,7 +1043,7 @@
 <code>/<var>dir</var>/.symlinks</code> should contain a line like this:</p>
 
 <pre class="emph-box">
-<var>dir</var>.html index.html
+ <var>dir</var>.html index.html
 </pre>
 
 <p>The <code>ln -s</code> analogy accounts for only part of the story.
@@ -1291,31 +1075,17 @@
 access to it.</p>
 
 
-<h4 id="refresh">Meta refresh</h4>
-
-<p>Please avoid the redirects as much as possible, because they are known
-to harm both accessibility and public search engine ranking.</p>
-
-<ul class="para">
-<li><p>Some old pages are still redirected via a meta refresh such as this:</p>
-
-<p class="emph-box"><code>
-&lt;meta http-equiv="refresh" content="0"
-  url="https://www.gnu.org/<var>target</var>"&gt;
-</code></p>
+<h4 id="htaccess">.htaccess and redirections</h4>
 
-<p>Please don't use this method for new redirections, as some browsers (e.g.,
-Firefox) prevent the redirection from happening without user input. This
-is a security feature, but many people find it annoying, and it can
-disorient some impaired users.</p></li>
+<p>You may want an actual redirection in some cases.  You can do this
+either in the top-level control file <code>.htaccess</code>, or by using
+something like this as the file to be redirected:</p>
 
-<li><p>Automatic refresh should be avoided too, because of its <a
-href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41";>accessibility
-issues</a>. If updating is necessary, provide a
-<a href=""><button style="cursor:pointer">Reload page</button></a> 
button.</p></li>
-</ul>
+<pre class="emph-box">
+ <code>&lt;meta http-equiv="refresh" content="0; 
url=https://www.gnu.org/<var>target</var>"&gt;
+</code></pre>
 
-<h4 id="scripts">Server-side scripts</h4>
+<h4 id="scripts">Scripts</h4>
 
 <p>A <a href="/server/source/source.html">description of scripts and
 software</a> used on www.gnu.org is available.  Please read it before
@@ -1338,34 +1108,20 @@
 <p>This section contains references managed by third parties.</p>
 
 <ul>
-    <li><p>The technical specifications to implement the web standards can be
-    found at <a href="https://www.w3.org/";>The World Wide Web
-    Consortium</a>, including the <a
-    href="https://www.w3.org/TR/2018/SPSD-xhtml1-20180327/";>XHTML&nbsp;1.0</a>,
-    <a href="https://www.w3.org/TR/html52/";>HTML&nbsp;5.2</a>, and
-    <a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/";>WCAG&nbsp;2.1</a>
-    recommendations.</p></li>
-    
-    <li><p>The <abbr title="Mozilla Developer Network">MDN</abbr>
-    <a href="https://developer.mozilla.org/en-US/docs/Learn";>Learning Area</a>
-    provides reliable specifications, guides and tutorials for beginners. It
-    cannot replace the aforementioned official W3C specifications but it often
-    provides useful clarifications.</p></li>
-    
-    <li><p>The <a
-    href="https://www.anybrowser.org/campaign/"; rel="noopener"
-    style="text-decoration: none;">
-    <!-- You may use this icon on the pages which are intentionally simple -->
-      <img src="/graphics/icons/anybrowser.png" width="96" height="18"
-      title="Visit the 'Best Viewed on Any Browser' campaign website"
-      alt="Best Viewed on Any Browser"
-      style="vertical-align: middle; width: 6em; height: auto"  /></a>
-    campaign and the old
-    <a href="https://w3.org/Provider/Style/Overview.html";>W3C Style Guide</a>
-    provide <em>informal tips</em> to ensure that a website is able to convey
-    information to the largest audience possible.  If a page does not obtain a
-    satisfying positioning on public search engines then dedicated
-    <abbr title="Search Engine Optimization">SEO</abbr> becomes 
necessary.</p></li>
+  <li>We follow the guidelines of the <a
+  href="//www.anybrowser.org/campaign/">Best Viewed with Any
+  Browser</a> campaign.</li>
+
+  <li>Basic info on the web and its technical specifications can be
+  found at <a href="//www.w3.org/">The World Wide Web
+  Consortium</a>.</li>
+
+  <li>The GNU web server follows the w3.org <a
+  href="//www.w3.org/Provider/Style/Overview.html">Style
+  Guide</a>.</li>
+
+  <li>Use of <a href="//w3.org/TR/WCAG21/">WCAG 2.1</a> helps
+  ensure accessibility for a wide range of people with disabilities.</li>
 </ul>
 
 <h4 id="internal-resources">Internal resources</h4>
@@ -1373,40 +1129,40 @@
 <p>This section contains references managed by us.</p>
 
 <ul>
-    <li><p><a href="#content">The GNU Website Guidelines</a> (this 
page);</p></li>
+    <li><a href="#content">The GNU Website Guidelines</a> (this page);</li>
 
-    <li><p>Guidelines for
+    <li>Guidelines for
     <a href="/server/standards/README.editors.html">Web Page Creation</a> at
-    www.gnu.org;</p></li>
+    www.gnu.org;</li>
 
-    <li><p><a href="/software/texinfo/manual/texinfo/html_node/Tips.html">
+    <li><a href="/software/texinfo/manual/texinfo/html_node/Tips.html">
     Appendix B Tips and Hints</a>, and other style tips in the <a
-    href="/software/texinfo/manual/texinfo/">Texinfo Manual</a>;</p></li>
+    href="/software/texinfo/manual/texinfo/">Texinfo Manual</a>;</li>
 
-    <li><p><a href="/accessibility/accessibility.html">GNU Accessibility
-    Statement</a>;</p></li>
+    <li><a href="/accessibility/accessibility.html">GNU Accessibility
+    Statement</a>;</li>
 
-    <li><p><a href="/server/standards/README.webmastering.html">GNU
-    Webmastering Guidelines</a>;</p></li>
+    <li><a href="/server/standards/README.webmastering.html">GNU
+    Webmastering Guidelines</a>;</li>
 
-    <li><p>Guide to
+    <li>Guide to
     <a href="/server/standards/README.translations.html">translating</a> GNU
-    web pages into other languages;</p></li>
+    web pages into other languages;</li>
 
-    <li><p><a 
href="/software/trans-coord/manual/gnun/html_node/Webmaster-Tips.html">
-    Tips for webmasters</a> to make translators' job easier;</p></li>
+    <li><a 
href="/software/trans-coord/manual/gnun/html_node/Webmaster-Tips.html">
+    Tips for webmasters</a> to make translators' job easier;</li>
 
-    <li><p><a href="//savannah.gnu.org/maintenance/FrontPage/">Documentation 
for
-    Savannah</a>, the SourceForge clone dedicated to the GNU Project;</p></li>
+    <li><a href="//savannah.gnu.org/maintenance/FrontPage/">Documentation for
+    Savannah</a>, the SourceForge clone dedicated to the GNU Project;</li>
 
-    <li><p><a href="/prep/gnumaint/README">
+    <li><a href="/prep/gnumaint/README">
     README</a> for the <code>/prep/gnumaint/</code> directory (those files
     are primarily used by <a href="/prep/maintain/">GNU maintainer
     administrators</a>, and occasionally by GNU webmasters, to update
-    the <code>/*/allgnupkgs.html</code> files in <code>www</code>);</p></li>
+    the <code>/*/allgnupkgs.html</code> files in <code>www</code>);</li>
 
-    <li><p><a href="/server/tasks.html">How to help</a> with our
-    <a href="/server/server.html">web server</a>.</p></li>
+    <li><a href="/server/tasks.html">How to help</a> with our
+    <a href="/server/server.html">web server</a>.</li>
 </ul>
 
 </div><!-- for id="content", starts in the include above -->
@@ -1467,7 +1223,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/04/26 18:58:32 $
+$Date: 2021/04/27 12:18:33 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->



reply via email to

[Prev in Thread] Current Thread [Next in Thread]