Web Publishing (with WordPress) - York University Libraries

bit.ly/mmcl-wp

Internet vs World Wide Web (HTTP)
- 1969: ARPAnet
- 1974: SQL
- 1989: World Wide Web, HTML
- 1995: MySQL, PHP, JavaScript
- 1996: CSS
- 2003: WordPress
Server vs client
- Host
- URL, domain
Front-end (client-side) languages
- HTML: Skeleton
- CSS: Skin
  - Singular file vs compartmentalized files
  - 'Reset' method
- JavaScript: Nerves
  - Barebones code vs frameworks (React.js, Angular.js, Node.js, ...)
Back-end (server-side) languages
- Processing languages: Brain
  - PHP, .NET
- Databases: Memory
  - MySQL, MongoDB, PostgreSQL ...
Analogy: Restaurant
Experience technologies
- Web browsers: Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge
- Devices (viewports): Desktop, mobile
W3C
- Consortium of influential stakeholders
- Code-validation tools
- Guidelines & initiatives (WCAG)

Overview of HTML (.HTML or .HTM)
- Purpose?
- Coding vs WYSIWYG
HTML elements
- Most are pairs of tags (<element> and </element>)
- Opening tags: Can have attributes with attribute values
- LIFO (nested) syntax
Attributes & attributes values
- id: One instance of any given value on page
- class: One or more instances of any given value
- Multiple values for same attribute separate by spaces
- Best practice: Values should convey general purpose, not specific appearance (class="highlight" vs class="yellow")
Anatomy of HTML document
1. <!DOCTYPE html> (no closing tag)
2. <html>
3. <head>
  1. <title>[Some title]</title>
  2. Metadata: meta (no closing tags)
  3. Links to CSS/font files: link (no closing tags)
  4. Links to JavaScript files and/or embedded JavaScript code (src)
4. </head>
5. <body>
  1. [Majority of code]
6. </body>
7. </html>
Block-level elements
- Containers: div (HTML5: header, nav, section, article, aside, footer)
- Headings: h1, h2, h3, etc
- Paragraphs: p
- Lists: ol, ul
  - List-items: li
- Tables: table, th, tr, td
Inline elements
- Images: img
  - Common attributes: src, alt, width, height
- Links: a
  - Common attributes: href, name
- Formatting: strong (not b), em (not i)

Overview of CSS (.CSS)
- Purpose?
- Inline styling (style HTML attribute) vs external stylesheet(s)
- 'C' in CSS is for cascading inheritance
CSS syntax
- Selector(s) {
  Property: Value;
  }
CSS selectors
- HTML element with or without HTML id/class value, only HTML id value, or only HTML class value
  - element
  - element#id
  - element.class
  - #id
  - .class
- Multiple selectors?
  - Different types of elements separated with commas (div, p { Property: Value;})
  - Different types of elements within hierarchy separated with spaces (div p { Property: Value})
- More specific = more precedence
Common CSS properties
- Colours: color, background-color
  - Hexadecimal format: #123456 (each digit/character can be 0-9 or A-F)
  - Always be mindful of appropriate contrast! (Adobe Color Accessibility Tools)
- Fonts:
  - Non-universal fonts require font-files on same server or reliable external server (Google)

Overview of WordPress
- Very customizable CMS (blog)
- Back-end framework
  - PHP files (snippets of code)
  - Created MySQL database (accessible through PHPMyAdmin)
- Front-end framework
  - HTML code (most in PHP files, some in HTML files)
  - CSS files
  - JavaScript files
  - Hosted on WordPress.com or WordPress package downloaded, the uploaded & set up on server
Directories (folders) of WordPress package
1. [root]
  1. wp-admin
  2. wp-content
    1. plugins
    2. themes
  3. wp-includes
Content constructs
- Posts vs Pages: Date-specific or persistent content?
- Categories vs Tags: General or specific topic?
Function constructs
- Themes: Sub-packages of files changing look/functionality
- Widgets: Customizable blocks included with themes
- Plugins: Functional enhancements

WP-Admin dashboard
- Side panel: Posts, Media, Pages, Comments, Appearance (Themes, Widgets), Tools, Settings
- Main panel: Depends on active (sub)item in side panel
WordPress Editor (posts/pages)
- Default editor:
  - WYSIWYG
  - Fluid blocks comparable to HTML elements
  - Contextual, floating toolbar & options panel
  - Elements can have HTML code

Use HTML headings
- One h1 per page
- Logical nesting of subheadings (h2, h3, etc)
Add text descriptors to images (alt attribute value for img element)
- Max 2 sentences
- No redundant text ("image of")
- alt="" for decorative images
Use unique hyperlink text for unique hyperlinks ("Read more about [...]" vs "Read more")
Ensure sufficient colour contrast
- WCAG 2.1: AA vs AAA
Use HTML elements as intended
- Tables for tabular data, not content structure (exception is HTML emails)
Explain abbreviations (use abbr element if not using parenthetical text)
- First instance on each page

Within-page links
1. Add id value to relevant HTML element (id="top" as HTML or top as HTML Anchor value in WordPress)
2. Create link with href value referencing id value (a href="#top" as HTML or #top in WordPress)
Google Analytics
1. Add generated code to universal page-template file (after HTML head element)
WordPress never-ending saving
1. Save manually and often
2. Close browser tab if "Saving..." loop happens
WordPress changes not showing
1. Clear site cache using built-in tool if applicable or third-party plugin
WordPress external View Page tab not loading
1. Close browser tab with WordPress editor