If I've been too selective here, you're welcome to browse my bookmarks that are tagged HTML, XHTML, CSS, web_design, or semanticweb.
First workshop: Introduction to (X)HTML
Software we're using
If possible, you should install these programs before you come to the workshops … but don't let installation woes or lack of time keep you from attending!
The Firefox web browser will be our go-to browser for these workshops — you should install it even if you usually use another browser, because it offers specific features that we'll eventually depend on. Available for basically every operating system you might ever consider using.
Demoroniser is a Perl script for more technically savvy users and can also help to clean up some of the awful cruft that Word shoves into the HTML that it exports. French speakers will appreciate the pun in the script's name.
Useful, free graphics software
If you already have graphics software you like, why, by all means, you should use it. If you're looking for good free software, though, I have some suggestions.
The GNU Image Manipulation Program (GIMP) is a free graphics editor that is nearly as powerful as Photoshop. Available for Windows, Mac OS X, and Linux.
The GIMP Plugin Registry has a large number of plugins that make the GIMP even more useful.
Inkscape is a free, powerful vector graphics creation program for Windows, Mac OS X, and Linux.
Dia is a useful diagram-creation program for Windows, Mac OS X, and Linux.
Scribus is a powerful (and free) page-layout program that can also be used to create vector graphics. Available for Windows, Mac OS X, and Linux.
Hosting providers for non-HTML external content
There are a lot of upsides to hosting many types of content externally: you can leverage other peoples' work in preparing a functional user interface, you don't have to (or, at least, may not have to) pay for storing your content or the bandwidth involved in transferring it, and the external host may have tied social network–sharing functions to your content at no additional work on your part. However, there are also downsides: you're relying on someone else to hold on to and serve your content, so you need to ensure that they're reliable and likely to continue providing the service, and you need to abide by someone else's terms of service, which may or may not have hidden gotchas or prohibit certain types of content or otherwise restrict you. (A case in point: in February 2016, I discovered that ImageShack had changed their terms of service without even bothering to notify me, and that images I'd used them to host had silently disappeared from my website. Hey ImageShack: silently dumping all of my content with no warning is a poor way to get me to convert to a paid account, or to get me to continue recommending you.)
That being said, I tend to find it worthwhile to save money and gain other benefits by hosting large files elsewhere, provided that I keep my own local copy. Here are some service providers who will store and serve content for you, presented with the caveat that you should read the fine print and make decisions about who is a trustworthy provider on your own.
For word processing documents: Scribd or Slideshare. (Google Docs is also a popular option, but it has not always worked as smoothly as I would like when I relied on it.)
If possible, you should install these programs before you come to the workshops … but don't let installation woes or lack of time keep you from attending!
You'll probably still want to use a good text editor — I still recommend Bluefish (installation instructions are here), which is available for Windows, Mac OS X, Linux, and other Unix-like OSes. If you don't like Bluefish or it won't work for you, Wikipedia has a comparative list of text editors. Really, any plain-text editor (and not a full-featured word processor) will work, and you'll probably benefit from picking one that's focused on the needs of coders.
The Firefox web browser will be our go-to browser for these workshops — you should install it even if you usually use another browser, because it offers specific features that we'll start to depend on in this workshop. Available for, probably, every operating system you've ever considered using.
You'll eventually want to transfer your files to a web server, and will probably want to do so with an FTP program. I recommend one of …
CSS Structure and Rules provides a terse overview of how CSS selectors work. It's not a great introduction simply because it is so terse, but might be a good quick reference once you're already familiar with the rules. One point in its favor: its last section provides the shortest good explanation I've seen of how CSS parsers resolve competing definitions when multiple selectors apply to a single element.
Gridlover helps you generate pleasing ratios of text sizes and element spacing in websites, and writes some of your CSS for you.
Where do you go when you have a good grasp of CSS and want to work around some of its weaknesses? You might plausibly learn a more complex stylesheet language, such as SASS or its extension SCSS. (This might especially make sense if you're a coder or have coding experience.)
CSS Frameworks
Once you've gotten some basic experience with CSS, you can save a lot of time by starting with an existing framework that sets up a cohesive and attractive set of CSS declarations that you can then modify, so that you don't have to be a designer and build up an attractive setup from scratch.
Skeleton is a free set of CSS boilerplate that can get you started building websites quickly.
Though this very website that you are looking at right now is not built with Skeleton, in its current incarnation, as of this writing (18 September 2015), it draws a fair amount of its design aesthetic from the framework.
FontSquirrel lets you convert your existing font files to a web-friendly format so that you can use them on web pages. (But remember that fonts are creative works, too, and take a huge amount of time to design well; they're subject to copyright. You shouldn't do this unless you've licensed the fonts in a way that allows you to do so.)
Butterick's Practical Typography is probably the best comprehensive introduction to the subject — and definitely the best-written one I've encountered.
So You need a Typeface is a humorous flowchart guiding you through choosing between about fifty commonly used typefaces by project type.
For reasons we'll discuss during the workshop, you may also want to set up at least a minimalist Google Plus profile. (You are also welcome to connect to me on G+, if you'd like.)
Google's recent blog post about how they want their rate page quality raters to manually rate page quality.
Dear Rick Santorum: 6 Ways to Fix Your Google Problem. A good, short blog post about search engine optimization (or SEO). (I think anyone who knows me already knows that I'm glad Santorum didn't effectively take this advice.)
Breadcrumbs are a way of semantically marking up user-visible navigation elements.
COinS (ContextObjects in Spans) provides a way to embed citation information in your HTML documents. Zotero can both read and generate COinS that can be embedded in a web page; those not using Zotero will be comforted to know that other software can also understand COinS (a [partial?] list is here), and there is a web-based COinS generator so that you don't have to write them yourself.
XFN, the XHTML Friends Network, provides a way to indicate relationships between you and other people to whose content you link.
The W3C's Checkpoints for Web Content Accessibility gives advice, both general and specific, about making sure your content is accessible to as many users as possible.
Markup for social networks
The Open Graph protocol, a standard for indicating meta-information about your pages to Facebook, Google+, LinkedIn, and other social networks.
About Twitter Cards explains how to get started including metadata to enhance the presentation of a site when it's shared on Twitter. Note that, once you've set this up, Twitter has to approve your site.
Rich Pins for Pinterest. Explains how to enhance what Pinterest users see when they pin your content. As with Twitter, Pinterest has to approve your content before the markup starts working.
Schema.org is a community-driven vocabulary for rich data led by a consortium consisting of Google, Yahoo!, Microsoft, and others. This vocabulary can be used through several different implementations (not via microformats, though). It also requires the use of HTML5 as the markup language.
RDFa (Resource Description Framework in Attributes), a system for using URLs as identifiers to classify and point to locations of data embedded in web pages. Widely used by publishers and libraries, and notably understood rather well by search engines in many cases (here is Google's write-up on how they use it); more sophisticated and nuanced than microformats.
Microdata (not the same thing as microformats) is another system for annotating text that aims to be simpler than RDFa and microformats. (Here's Google's write-up on how they use microdata.)
Validators and parsers for semantic information
Google's structured data testing tool not only helps to show how your page will appear in Google search results, but displays parsing results for a wide variety of semantic markup.
Barnaby Walters's Microformats Parser, which parses microformat-based semantic data and outputs JSON. (JSON is perhaps not a data format you're familiar with if you're not a technical person, but it's clearer than the semantic HTML itself, and is quite readable for those familiar with it.)
Aaron Parecki's Microformats Parser, which also parses microformat-based semantic data and outputs JSON.
Webmaster Guidelines from Google, about how your site should be structured and managed to promote is search rank listing.
[Infographic] Google's 200 Ranking Factors includes information — some certain, some conjectural — about how Google decides on page ranking factors.
The robots.txt exclusion protocol, which can be used to keep search engines and other automated site crawlers from retrieving (and thereby indexing, processing, etc.) your web pages.
Sitemaps.org, explaining how to construct a machine-readable site map so that web crawlers can find all parts of your site.
Exposing metadata to Zotero [using COinS] explains a technique for embedding metadata so that Zotero (and other bibliographic software, and other software of other types) can understand it as a bibliographic entity. Zotero is great free bibliographic software that lives in your web browser, and you may already be familiar with it; if not, their introductory video provides a quick overview.
How to create a favicon.ico with GIMP shows you how to create that little icon that appears in the address bar of your browser. Targeted at Linux users but adaptable to Mac and Windows people with a bit of effort.
Favicon from Pics provides a way to generate the necessary graphics file online (though you still need to do a bit of HTML coding to get it to work).
Optimizing Animated GIFs gives a detailed overview of how you can keep these files as small as possible (and is totally unnecessary to use if you're following the previous tutorial on creating animated GIFs with The GIMP).
