Tutorial: Building Content For the Web

This section of the chapter provides a tutorial-style introduction to building content with HTML and CSS. Follow along on your computer as you move through these sections.

You will need a program that lets you create and edit .html and .css files.

• Default options: Notepad or Notepad++ (PC); TextEdit (Mac)

  • Mac users will need to configure some of their TextEdit settings: more info

• Safe, free things you could download and install: Phoenix Code, Visual Studio Code (VS Code)

• Safe, free(mium) options that run in your browser: Phoenix Code (online version), Replit

Section Contents¶

• Code in Context, Computing & the Liberal Arts
• How to Interact With This Book
• Course Overview
  • Background
  • Course Schedule
  • Course Activities
  • How Grading Works
  • Preparing for Class Meetings
• Binary Number Systems & Encoding Schema
  • Physical, Logical & Conceptual Objects
  • Binary Number Systems
  • Encoding Schema
  • Representing Other Information in Binary
  • File Formats
  • Application Questions
  • Collaborative Problem Solving
• How Computers Work (Part 1): Computer Hardware & Architecture
  • Von Neumann Architecture
  • ALU & Memory
  • CPU & the Fetch-Execute Cycle
  • Assembly Language
  • Putting It All Together
  • Application Questions
  • Scenarios
    • Scenario #1: ALU & Memory
    • Scenaroi #2: ALU & Memory
    • Scenario #3: Assembly Language, the CPU & the Fetch-Execute Cycle
• How Computers Work (Part 2): Operating Systems & Interfaces
  • Operating Systems
  • The Command Line Interface
    • Tutorial: Working at the Command Line
    • Tutorial: Opening Your Shell
    • Tutorial: Terminal Wayfinding
    • Tutorial: Working in the Terminal
    • Putting It All Together
  • Application Questions
  • Collaborative Activities
• Computer Networks & the Internet
  • Computer Networks
  • The Internet
    • Additional Resources
  • Application Questions
  • Interactive Activities
    • Packet Switching Network Relay
    • I Think Therefore ICANN (A Roleplaying Game About Domain Names)
• The World Wide Web
  • The World Wide Web
  • Tutorial: Building Content For the Web
    • Your First Web Page!
    • Adding Content
    • Additional Pages
    • Linking Pages
    • Adding Images
    • Style & Formatting
    • Cascading Style Sheets
  • Application
  • Additional Resources
  • Collaborative Activities
    • Web Search Activites
    • Hypertext Activities
• Programming Fundamentals in Python: Variables, Data Types & Operators
  • Python in Spyder
  • Python in Jupyter Notebooks
  • Figuring Out Your IDE Workflow
  • Your First Program
    • Variables & Assignment Operators
    • Arithmetic Operators
    • Concatenation
    • Input & Output (I/O)
    • Converting Data Types
  • Comparison Operators
    • More Advanced Comparisons
  • Application
  • Collaborative Activities
    • Python Activities
    • Microbit Activities
• Data Structures in Python
  • Index/Indexing and Counting in Python
  • Strings
  • Lists
    • Other Linear Array Structures in Python
  • Dictionaries
  • Putting It All Together
  • Application
  • Activities
    • Python Activities
    • Microbit Activities
• Control Structures in Python
  • Conditional Execution
  • Iteration
    • While Loops
    • For Loops
    • Additional Loop Considerations
  • Putting It All Together
  • Application
  • Collaborative Activities
    • Python Activities
    • Microbit Activities
• Code Reuse & Modularity in Python
  • Functions in Python
    • Built-In Functions
    • Named Functions
      • How Named Functions Work
      • Python Example A
      • Python Example B
      • Python Example C
    • Parameters & Scoping
    • Named Functions Application
    • Putting It All Together
    • Code Reuse & Modularity (aka a quick detour into modules, packages, and libraries)
  • Application
• Structured Data in Python
  • File I/O
    • Opening Files
    • Access Modes
    • open() examples
    • write()
  • Structured Data
    • Delimited Data
    • CSV Files
    • JavaScript Object Notation
  • Pandas
    • Data Structures in Pandas
      • Series
      • DataFrame
    • From Data File to Data Frame
    • Interacting with a DataFrame
    • From DataFrame to Data File
    • Pandas Application Question
  • Application