Journalism 435 Course Site

Resources

HTML

XHTML 1.0 Strict Skeleton

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">

<head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title></title>

</head>

<body>  

</body>

</html>

HTML5 Skeleton

The skeleton is below and here is a handy list of HTML5 semantic tags.

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title></title>

  </head>

  <body>

  </body>
</html>

Comment Syntax for HTML

 
<!-- This is an HTML comment -->

Robots Meta Tag

An alternative to a robots.txt document on server spaces that won't except them, this tag will control whether search engines can index pages of your site. The following code snippet will keep an HTML page out of search results. More fine-grained control over search engines' treatment of your pages can be obtained by tweaking it with options explained here.

<meta name="robots" content="noindex,nofollow">

Social Media Meta Tags

 
<!-- for search engines -->

<meta name="description" content="A description of your site or page." />
<meta name="keywords" content="comma-separated, keywords, that, reflect, the, topic, of, your, site" />
<meta name="author" content="Your Name" />

<!-- for social media crawlers; use absolute URLs -->
<!-- for more info, see https://ogp.me/ -->

<meta property="og:image" content="https://url/of/an/image/to/appear/on/social/media.jpg" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:alt" content="alt text for your image" />
<meta property="og:url" content="https://urlofyourpage/" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="A description of your site or page." />

<!-- for Twitter/X's crawler; use absolute URLs -->
<!-- for more info, see https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started-->

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@your_twitter_handle" />
<meta name="twitter:description" content="A description of your site or page." />
<meta name="twitter:image" content="https://url/of/an/image/to/appear/on/social/media.jpg" />
<meta name="twitter:image:alt" content="alt text for your image" />

Server-Side Include (SSI) Comment Syntax

If the file to be included (e.g., header.html) is in the same folder as the HTML document into which the comment is inserted:

<!--#include file="header.html"-->

If the file to be included (e.g., header.html) is in a different folder from the HTML document into which the comment is inserted:

<!--#include virtual="relative/url/of/header.html"-->

Remember, server-side includes only work when your file is on a web server that supports them. And the files into which these comments go will need to be renamed with a .shtml file extension.

CSS

HTML Markup for Including an Internal Style Sheet

 
<style type="text/css">

    /* Your CSS code goes here. */

</style>

HTML Tag for Linking to an External Style Sheet

 
<link rel="stylesheet" type="text/css" media="screen" href="relativeURLofYourStylesheetFile.css" />

Comment Syntax for CSS

 
/* This is a CSS comment. It can be a single line or multiple lines. */

JavaScript

HTML Markup for Including Internal JavaScript

<script>

    /* Your JavaScript code goes here. */

</script>

HTML Tag for Linking to an External JavaScript File

 
<script type="text/javascript" src="relativeURLofYourJavaSriptFile.js"></script>

Comment Syntax for JavaScript

 
// This is a single-line JavaScript comment.

/* This is a multiple-line comment.
   It can have as many lines in it as you want. */

jQuery Library

jQuery Document Ready Function

 
$( document ).ready(function() {
    /* Your JavaScript/jQuery code goes in here. */
});

WordPress enqueue_styles Function

This is the code that needs to be added to your child theme's functions.php file in order for it to work. Make sure to change the line where the parent-style is defined to point to your parent theme. In most cases, it's simply the folder name of the parent theme with -style tacked onto the end.

<?php

//This code snippet is from https://developer.wordpress.org/themes/advanced-topics/child-themes/

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

?>

If you're creating a child theme, remember, too to add a Template: parentthemefoldername line to your child theme's style.css document. In the same document, you'll also want to change the Text Domain line to point to your new child theme's folder.

Contents