Creating Websites Using Notepad [or any plain text editor]

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:

Beginnings

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
    Protocols
    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: unirpt2.html

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:
    roomdate.html and dateroom.html

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 locs.html
    Body elements: SPAN, DIV, HR
    Aligning text data in columns
    Exercise: practice with HR and lining up text:
    locs.html, locs2.html, textTest.html
    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:
    BordersDemo.html, FDAHist.html, FDA.html

Intermediate Topics

8. Style sheets
    One video
    Creating style sheets
    Referencing style sheets
    Understanding cascading
    Comments
    Exercise: building and testing style sheets:
    FDAstyle.css, FDAstyle-yellow.css

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: map_work.html
    "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: video.html

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
    Expressions
    Exercise: code some event handlers scripts1.html

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 scripts1a.html
    DOM coding examples
    The Window object
    alert, confirm, prompt methods

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
    Exercise: if statement and arrays scripts2.html

16. JavaScript functions and document.write
    Three videos
    Expanding and contracting lists
    JavaScript functions
    Exercise: create a function scripts3.html
    The <noscript> element
    Pop-up windows
    document.write
    Exercise: generate a pop-up window Events.html
    Functions with parameters
    Exercise: function with parameters FunctionDemo.html

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
    Exercise: create forms
    FDA2.html, FDAEnroll.html, FDAStyle2.css
    <input> types: file, color, range, hidden, image
    <input> attributes: required, multiple, maxlength, minlength
    Submit processing and the form data set
    Introduction to CGI concepts
    Exercise: more forms FDAEnroll-x.html
    Validating form data
    The JavaScript charCodeAt function
    Exercise: validating form data FDAEnroll-x2.html

18. Those other controls
    Two videos
    The <button> element
    The <select> element
    The <option> element
    The <optgroup> element
    Exercise: 'select' DTECafe-local.html, DTECafe-remote.html
    The <label> element
    The <textarea> element
    The <fieldset> element
    The <legend> element
    Building list boxes
    Accessing selected options
    Adding and removing options in a list box
    Creating visual groupings
    Using controls without forms
    Exercise: complex form formss.html

19. Cookies
    One video
    Link to paper on dealing with cookies disabled situation
    What are cookies?
    document.cookie
    setCookie(), deleteCookie(), getCookieValue() functions
    function_name.arguments
    function_name.arguments.length
    split function
    Math.PI
    toFixed()
    Exercise: managing cookies Events2.html, newAttendee.html

20. Introduction to HTML tables
    One video
    Columns, rows, and cells
    Related elements: <table>, <caption>, <tr>, <th>, <td>
    New style properties: border-collapse, caption-side
    Building tables
    Exercise: update a table tables.html

21. Structuring tables
    Two videos
    Grouping by rows
    Grouping by columns
    Creating large cells
    Related elements: <col>, <colgroup>, <thead>, <tbody>, <tfoot>
    Exercise: row grouping
    inventory.html, inventory1.html,inventory2.html
    Constructing complex tables
    Exercise: adjusting complex table coronaVirusTable.html

22. Scripting with tables
    Three videos
    textContent property
    'rows' and 'cells' properties
    'insertCell' method
    JavaScript Number() function
    Exercise: build table dynamically inventoryValue.html
    document.getElementsByTagName methoc
    'switch' and 'break' JavaScript statements
    Link to paper on DOM methods for table-related elements
    Exercise: extend previous lab inventoryValue.html

23. Inline frames
    One video
    <iframe> element
    Exercise: build several pages to demonstrate iframes:
      setValue.html, showValue.html, iframeAndCookies.html,
      iframeDisplay.html

24. Loose ends
    One video
    Validation tools
    The Viewable in any Browser campaign
    Development strategies
    Building a list of web pages to learn from
    How I handle errata