Creating Websites Using Notepad [or any plain text editor]



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

Welcome to the Creating Websites course for the Still Plugging Away crowd!

Here we explore how the web actually works (in general terms) and how you can code HTML to create web pages then use CSS to add style, and how to code JavaScript to make your pages more interactive. [All acronymns will be defined inside the course, of course.]

We also describe how to test using just your browser on your local computer, so you don't have to invest in extensive setup (ISP provider, FTP client, more) until you've decided this is really what you want to do.

Then, if you decide to go ahead, you can study the lesson on setting up the necessary infrastructure (it's not too hard, but why spend the money before you're sure?).

A few words for users of Apple Mac computers, Linux / Unix, and z/OS users as well.

Available lessons:


1. Introduction to the web
    Two videos
    Link to paper on standards organizations
    The one minute web page
    Define 'client', 'server'
    Flow of data on the web
    URL structure
    Domain names
    Exercise: download files, create index.html

2. Introducing HTML
    Two videos + an accent piece
    Link to paper on Web vs Internet
    Link to paper on Unicode
    Structure of HTML documents
    doctype statement
    Elements and Attributes
    Comments, blank lines, whitespace
    Global attributes: class, hidden, id, lang
    Global attributes: style, title
    Elements: HTML, HEAD, TITLE, META
    Exercise: create unirpt1.html
    Accent piece: writing poetry and code

3. Marking up text elements
    One video
    Link to paper on character entity references
    Link to standard: character entity references
    Link to standard: color specifications
    Elements: BODY, P, H1-H6, BR, PRE
    Introduction to the style attribute
    Style properties: background-color, color
    How to specify color values
    Introduction to events
    Event handlers
    Non-breaking space:  
    Exercise: marking up text

4. Setting Up Web Infrastructure - optional
    One video
    Survey of decisions to make
    Decision: objectives of site
    Decision: company or organization name
    Decision: register name
    Decision: motto or slogan
    Decision: logo
    Decision: domain name
    Decision: secure site (https)
    Decision: public or private (need password)
    Decision: FTP client program
    Decision: merchant account
    Exercise: formalizing decisions

5. FTP and FileZilla - optional
    One video
    Locating and downloading FileZilla
    Installing and tailoring FileZilla
    Uploading files and directories
    How to test pages using FileZilla
    Exercise: Installing and setting up FileZilla

6. Links and anchors
    One video
    Destinations and fragments
    Linking to other pages
    Putting a linked-to page into another browser window or tab
    Using <a> for downloading files
    Setting up for emails
    Displaying an icon in the browser window or tab heading
    Elements: A, LINK
    Attributes: href, target, download
    Preloading files to prevent latency
    Exercise: Add fragments and links; set up for an email

7. Getting some style
    Three videos
    Body elements: B, I, MARK, S, SUB, SUP, U
    Head element: STYLE
    Style property values (reserved words, colors, lengths)
    Style properties: background-color, color
    Style properties: font-family, font-style, font-variant
    Style properties: font-size, font-weight
    Style properties: text-align, text-decoration, text-indent, text-transform
    Attributes: style, class
    Exercise: practice with style
    Body elements: SPAN, DIV, HR
    Aligning text data in columns
    Exercise: practice with HR and lining up text
    The Visual formatting model
    Border style properties
    Padding style properties
    Margin style properties
    Location style properties
    Size style properties
    Position, float, and clear properties
    Implementing page layout using style
    Exercise: implementing page layout design

Intermediate Topics

8. Style sheets
    One video
    Creating style sheets
    Referencing style sheets
    Understanding cascading
    Exercise: building and testing style sheets

9. Testing and debugging
    One video
    Testing: checking appearance in multiple browsers
    Exercise: debugging - validating to find and fix errors

10. All you need to know about HTML lists
    Two videos
    Ordered lists (<ol>, <li>)
    Unordered lists (<ul>, <li>)
    Definition lists (<dl>, <dt>, <dd>)
    List related attributes (reversed, type, start, value)
    List related style properties:list-style-type)
    List related style properties:list-style-image)
    List related style properties:list-style-position)
    Exercise: creating your own browser home page of bookmarks

11. Images and client-side maps
    Two videos
    Images (<img>)
    Client side maps (<map>, <area>)
    Related attributes: src, alt, usemap, width, height, name
    Related attributes: shape, coords, href
    Related style properties: float, clear
    Exercise: client side maps
    "Pixabay" and "IrfanView"

12. AUDIO and VIDEO elements
    One video
    Media: video and audio
    <video>, <audio>, and <source> elements
    Related attributes: src, poster, controls, autoplay
    Related attributes: muted, loop, height, width, type
    The "Can I Use" website
    Exercise: work with audio and video files

13. Introduction to client side scripting (JavaScript)
    One video
    DOM and JavaScript
    Event handlers
    Assignment (" = ") and var statements
    Variables and variable names
    Attributes as variables
    Style properties as variables
    The 'this' element identifier
    Exercise: code some event handlers

14. The DOM (Document Object Model) and scripting
    Two videos
    Nodes - objects with properties and methods
    Node types of interest: document, element, text
    JavaScript string expressions
    createElement, createTextNode, and getElementById methods
    nodeType, parentNode, firstChild properties
    lastChild, previousSibling, nextSibling properties
    appendChild, replaceChild, removeChild, hasChildNodes methods
    getAttribute, setAttribute, removeAttribute methods
    length property
    subStringData, appendData, insertData, deleteData, replaceData methods
    Exercise: exception handlers adding text
    DOM coding examples
    The Window object
    alert, confirm, prompt methods
    Exercise: sentence builder event handlers

15. JavaScript logic and arrays
    One video
    The if statement
    Condition tests
    Relational expressions
    The <script> element
    JavaScript arrays
    Array methods: push, pop, shift, unshift
    The for statement

16. JavaScript functions and document.write
    Three videos
    Expanding and contracting lists
    JavaScript functions
    The <noscript> element
    Pop-up windows
    Functions with parameters

17. Forms and INPUT
    Three videos
    The <form> element
    The <input> element
    <input> types: text, tel, email, url, password
    <input> types: checkbox, radio, submit, reset, button
    <input> types: file, color, range, hidden, image
    <input> attributes: required, multiple, maxlength, minlength
    Submit processing and the form data set
    Introduction to CGI concepts
    Validating form data
    The JavaScript charCodeAt function

18. Those other controls

19. Various topics

20. Introduction to cookies

21. Introduction to HTML tables

22. Structuring tables

23. Scripting with tables

24. Inline frames

25. Loose ends




Email us if you would like additional information. We would love to see your comments and recommendations for our site.