Web Publishing for Adults and Teens

The Mamakating Library welcomes all adults and teens interested in learning how to build a basic website.

Have you ever wanted to understand the basic building blocks and modern methods of publishing to the World Wide Web? This workshop will take you through the basics of HTML and CSS and how they combine to form web pages. We will be using Github Pages to serve our website to the world.

The is free in-person class will take place on Tuesday, July 6 and Tuesday, July 13 from 6:30 to 8:00 p.m. with instructor Mark Tourtellott. Participants should plan to attend both sessions.

What you need: A laptop to bring with you, ability to work with files and applications, and an understanding of how to change your system settings.

Part 1 | Web Publishing Toolkit

The Web Survival Guide

Browsers are the main method of interacting with the World Wide Web, we are going to use them as both a viewer and as a development tool.

    Browsers - SYSTEM

  • Edge (replacing Internet Explorer)
  • Safari Apple
  • Chrome Android|ChromeOS Chrome help

    • INDEPENDANT

  • *Firefox Developer Edition Mozilla
  • Firefox Mozilla
  • Brave all about security and privacy
  • Opera very different, been around forever.

    • Text Editors

    Sometimes referred to as code editors, they can be dedicated to just HTML or many different forms of code. Notepad comes built-in to Microsoft Windows. It does not provide any help when coding. TextEdit comes built-in to Apple macOS also does nothing much to help you, but they are there if you just need something. We don't use Google Docs or MS Word, neither can or does a good job of creating web code.

    • Atom Editor Created by the people from GitHub it is available for all 3 operating systems* and is free.
    • Visual Studio Code is Microsoft's entry into free code editors, available to all.
    • Brackets is Adobe's Opensource editor focused more on HTML than general coding. Available to all.
    • Sublime Text is commercial software with an endless free trial. Currently one of the most popular editors in use.

    There are other choices, if you are a die hard Linux user you can try using VI or VIM. Windows users like Notepad++ and for Macintosh people there is BBedit. I am currently using Nova from Panic software that is a brand new replacement for CODA.

    OTHER TOOLS

  • An article that explains taking screenshots of everything
  • Plug-in EFF Privacy badger
  • Adobe Acrobat reader sometimes you just need the original
  • Google Docs help
  • adding monitor keyboard and mouse to laptop
  • multiple monitors Windows, Macintosh

The Web

To publish to the web you have to have a basic understanding of how it works.

  • Client & Server
  • DNS Domain Name System
  • Connectivity, IP and Internet

HTML

We are using MDN and W3Schools as our reference guides.

  • CODE is fun to say, but not helpful. Markdown, Stylesheet and Script.
  • What is MARKDOWN?
  • What is a semantic tag?

STARTING POINT

  • Always create a folder/directory and work inside it
  • Every text editor has a project system, use it to make things easier
  • Test in a browser

Here are 2 text-files with content to play with: jabberwocky and Ozzymandias.

This is a plain html template for you to grab if you need it.

This is a mostly complete template of all the html tags

Part 2 | Web Publishing Toolkit

We talked about hyperlinks in HTML and the 'stupid web poetry' exercise. I will show you an example of mine.

HTML is fine on its own, but eventually you are going to want to add more to your page. To work with an image like spot here. We use the img tag. Images for the web is its own talk, but the most common formats are .jpg .png .svg and .gif

Spot the turtle

Style Sheets

HTML is a markup language for designating form, CSS is a Cascading Style Sheet language for designating appearance. We use 

 link rel="stylesheet" type="text/css" href="style.css"
in the head of the html file as a link. We can also use 2 other methods of adding styles to our page. using the style tag in the head, and use an inline style.

CSS layout is too much to talk about here, just know that this is a golden age for webpage design, stuff that was hard for 20 years just got so much easier with CSS Flex and Grid. We now only think about responsive design, in other words making a webpage that can flow into almost any form factor.

You don't have to make your css from scratch there are lots of templates and examples for you to use. Here is one based on Edward Tufte's design principles.

Color

The 2 best ways to find colors for the web are web colors and Adobe Color.

Fonts/Type

Web fonts are relatively new by web-time, the easiest way to get started is Google Fonts it will give you a link to add to the head of your page and the css styles for that font.

MARKDOWN

Markdown is a way of writing HTML as shorthand and using a program or script to render it out to full HTML. All text editors have the ability to work with markdown but I find them fiddly. So I have a couple programs that make it easier. I will also add that many of the new writing tools and editors have the ability to do markdown like: Scriviner, Drafts, Devonthink, Ulysses etc.

Macintosh

Windows has a free open source clone of IA Writer called Ghostwriter. I use it on my Windows and Linux machines.