Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Regarding tag capitalization, a little history may help in understanding why the trend has shifted from uppercase to lowercase: In HTML4 elements were typically written in uppercase, however according to W3Schools, the <a href="http://www.w3schools.com/html/html_elements.asp" rel="nofollow">W3C recommended they be written in lowercase</a> (although I can't find a reference). Then, XHTML became popular; but <a href="http://www.w3.org/TR/xhtml1/diffs.html#h-4.2" rel="nofollow">the specification stipulated elements and attributes <strong>must</strong> be lowercase</a>. And the <a href="http://dev.w3.org/html5/html-author/#elements" rel="nofollow">HTML5 specification says you can go either way, but lowercase is recommended</a>.</p> <p>Regarding internal and external CSS, it really depends. If multiple pages are accessing the same CSS, <a href="https://developers.google.com/speed/docs/best-practices/caching" rel="nofollow">then the browser will likely cache it</a>, meaning it is wise to put all your CSS into a separate file. I like this just for code abstraction too. However, if it is a single page, you may choose to go inline.</p> <p>Regarding the navigation bar, it is a matter of preference. I like to load a template file, run it through the DOM, and just insert the elements I need. For performance you may choose to go with another method, but I like this for code abstraction.</p> <p>Something like the following:</p> <pre><code>&lt;?php class Webpage { private $document; function __construct() { $this-&gt;document = new DOMDocument(); if($this-&gt;document-&gt;loadHTMLFile("template.html")){ $this-&gt;createHeaderMenu(); }else{ trigger_error("Webpage-&gt;__construct() failed to load template.html", LOG_ERR); } } protected function createHeaderMenu() { $headerMenu = $this-&gt;document-&gt;getElementById("header-menu"); $li = $this-&gt;document-&gt;createElement("li"); $a = $this-&gt;document-&gt;createElement("a", "Homepage"); $a-&gt;setAttribute("href", "/"); $a-&gt;setAttribute("target", "_self"); $a-&gt;setAttribute("title", "Homepage"); $li-&gt;appendChild($a); $headerMenu-&gt;appendChild($li); } public function output() { return (string) $this-&gt;document-&gt;saveHTML(); } } $page = new Webpage(); echo($page-&gt;output()); ?&gt; </code></pre> <p>Of course, template.html would be your template, and there would need to be a ul element in there with an id attribute set to header-menu.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload