Foundational Coding Syntax

CSS File Import: <link rel="stylesheet" type="text/css" href="globalstyles.css" />

<style>
@import url(globalstyles.css);
[STYLE DIRECTIVES]
</style>

Complex CSS File Import: <link rel="stylesheet" type="text/css"
href="globalstyles.css media="all" />
<link rel="stylesheet" type="text/css"
href="onlinestyles.css media="screen" />
<link rel="stylesheet" type="text/css"
href="printoutstyles.css media="print" />
<link rel="stylesheet" type="text/css"
href="dumbphonestyles.css media="handheld" />

<link rel="alternate stylesheet" title="Snazzy"
type="text/css" href="differentlook.css" />

File Paths ~ one folder up | same folder | one folder down: href="../sitefolder/higherpage.html"
href="samelevelpage.html"
href="subfolder/lowerpage.html"

Font Embedding: @font-face {font-family:"Bembo";
            src:url(assets/bembo.ttf);}

@font-face {font-family:"Bembo";
            src:url(assets/bembobold.ttf);
            font-weight:900;}

Google Fonts: <link href="https://fonts.googleapis.com/css?family=Euphoria Script" rel="stylesheet">; <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i" rel="stylesheet">

Icon Affiliation: <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

Javascript Import: <script type="text/javascript" src="excode.js"> [NOTHING INSIDE THE TAGS]</script>

jQuery Files: <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"> [NOTHING INSIDE THE TAGS]</script>

<script type="text/javascript" src="scripts/jquery-3.3.1.js">
[NOTHING INSIDE THE TAGS]</script>

Keywords: <meta name="keywords" content="HTML, head, meta" />
<meta name="description" content="head syntax" />
<meta name="author" content="Kathleen H" />

Media Queries: @media only screen and (max-device-width:700px) {[STYLE DIRECTIVES]}

@media only screen and (max-height:700px) and (orientation:portrait) {[STYLE DIRECTIVES]}

@media only print {[STYLE DIRECTIVES]}

Pop-Ups: <a href="javascript:location='inclusions.html'; window.open('tangentialinfo.html', 'littlewindow', 'width=600, height=400, status=no, location=no, toolbar=no, menubar=no, resizable=no');">Info</a>

Redirects: location = "idx.html";

location.replace("idx.html");

window.onload = function() {location = "idx.html";};

Refresh Page Automatically: <meta http-equiv="refresh" content="60">

location.reload();

Sizing for Devices: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Version of HTML: <!doctype html>
<html>
... <meta charset="utf-8">

<!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">
... <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

XML and XSL: <?xml version="1.0" encoding="utf-8"?>; <?xml-stylesheet type="text/xsl" href="xtemp.xsl"?>