Template.html: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Simple ==
== Simple ==


Template for a modern HTML5 page.


<source lang="html4strict">
<source lang="html4strict">
Line 7: Line 8:
<head>
<head>
   <meta charset="utf-8" />
   <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <title>Untitled</title>
   <title>Untitled</title>
  <style type="text/css">
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      span.underline{text-decoration: underline;}
      div.column{display: inline-block; vertical-align: top; width: 50%;}
  </style>
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="style.css" />
</head>
</head>
Line 25: Line 19:
</source>
</source>


The DOCTYPE is important to specify. When it's missing, many browsers (Internet Explorer in particular) will format the using "quirks mode" -- or using exceptions to modern CSS rules to support the historical (and deprecated) behavior of web browsers.  
The DOCTYPE is important to specify. When it's missing, many browsers (Internet Explorer in particular) will format the using "quirks mode" -- or using exceptions to modern CSS rules to support the historical (and deprecated) behavior of web browsers.
 
NB: When using in PHP, the character set cannot be set with the <?xml> tag -- as this kind of tag conflicts with the PHP parser.
 
== Scripting & CSS ==
 
Example with placeholders for Javascript and CSS Stylesheets (both inline and external).
 
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<!-- external style sheet -->
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- external javascript -->
<script language="JavaScript" type="text/javascript" src="prototype.js">
</script>
<!-- inline stylesheet -->
<style type="text/css">
body {
font-family: Arial,Verdana,Helvetica,sans-serif;
}
</style>
<!-- inline javascript -->
<script type="text/javascript">
function init() {
alert("javascript says hello as well");
}
</script>
</head>
 
<!-- body with javascript hook (call function when page is finished loading -->
<body onload="init()">
<p style="font-size: 14px">Hello</p>
</body>
 
</html>
</source>

Latest revision as of 11:52, 15 December 2020

Simple

Template for a modern HTML5 page. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>Untitled</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>

The DOCTYPE is important to specify. When it's missing, many browsers (Internet Explorer in particular) will format the using "quirks mode" -- or using exceptions to modern CSS rules to support the historical (and deprecated) behavior of web browsers.

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Template.html&oldid=186944"