Computer Science
Gilmour AcademyLancerTech
  • Our Curriculum and Department
  • Intro to Programming
    • 1: Parts of a Computer
    • 2: Parts of Python
    • 3: DRY Turtle
    • 4: Turtle Design App
    • Wordle with Turtles
    • 5: Interactive Turtles
    • OLD 5: Replit, GitHub, and repositories (Oh my!)
    • 6: Raspberry Pi / GoPiGo
    • 7: Kivy
  • Intro to Web Design
    • 1: Internet?
    • 2: Websites?
    • 3: Bootstrap Template
    • 4: Graphics and Branding
    • 5: Collaboration
    • 6: Advanced Editing
    • Publish Static HTML
  • AP Computer Science
    • 1: Logic & Instances
    • 2: How Java Works
    • 3: Data Types & Flow
    • 4: Strings
    • 5: Objects & References
    • 6: Inheritance & Algorithms
    • 7: Data Structures
    • 8: Sorting
    • 9: Review
    • Data Science
  • Web App Dev
    • 1: Core Concepts
    • 2: MVT Pattern
    • 3: Hello Flask
    • 4: Install Flaskinni
    • 5: Tour Flaskinni
    • 6: Visualize Your App
    • 7: Theme & Blueprint
    • 8: Standup Your DB
    • 9: Advanced Topics
    • 10: Deployment
  • 2D Game Design
    • Class Overview
    • Gamemaker Studio 2 and Github Setup
    • Game 1: Bouncing Ball
    • Turning in your games
    • Game 2: Maze
    • Game 3: Ping Pong
    • Game 4: Breakout
    • Game 5: Tank Battle
    • Game 6 Highlights
    • DO NOT DO:
    • Game 7: Final Project
    • Publish to Opera
    • FAQ
  • 3D Game Design
    • 1: Class Overview
    • 2: Installation
    • 3: Exploring the Unity UI
    • Game 1: Rolling Ball
    • Game 2: Tanks
    • Game 3: Third Person Platformer
    • Game 4: Final project
    • FAQs
    • OLD: Distance Learning Setup
    • OLD: GIT
  • 3D Modeling & Fabrication
    • Installation
    • Fusion 360 Interface and Sketch Modeling
    • Primitive Modeling
    • Patterns
    • Appearances and Rendering
    • Building Community Gallery Page 2023
    • Parametric Modeling
    • 3D Printing Concerns
    • Assemblies and Mechanical Design
    • Laser Cutting
    • Sculpt Tools
    • Milling Concerns
  • Robotics 7
    • Software Installation
    • Python basics (trinket.io)
    • Python Turtle
    • Programming for the Ev3
    • Setting up for clarity
  • Robotics 8
    • Replit
    • Python review
    • Kivy Basics
    • Calculator
  • Competitive Robotics
    • Hardware Team
      • CAD Examples
      • Elevators
    • Software Team
      • Command Pattern
      • Example Command
      • Subsystem
      • Running Your Code
      • Under the Hood
      • RoadRunner
      • Vision Processing
  • Archives
    • Adiletta Archives
      • Old Web
        • Ex: WordPress CMS
      • ItP
        • OLD: Parts of Python (old -- Mr. A)
        • OLD: 5: Raspberry Pi
        • OLD: 6: Deploying Code
        • OLD 7: Nav Algorithm
    • Vanek Archives
      • OLD Robotics 8
        • OLD: End of Class Project
      • OLD Competitive Robotics
        • Untitled
        • Webots Videos
      • OLD Robotics 7
        • Trinket Introduction
        • Lists: x/y position
        • Functions: Math program
        • Lists: Grocery List
        • Study Guide Program
        • Tic Tac Toe Game
        • Dice Roller Program
        • Visualization
        • Dice Roller + Visualization
        • OpenSCAD: Installation
        • OpenSCAD: Command Sheet and Intro
        • OpenSCAD: Difference
        • OpenSCAD: Variables
        • OpenSCAD: Union
        • OpenSCAD: For Loops
        • OpenSCAD: Final Project
      • OLD Art I - Blender Sculpting
        • Class Overview
        • Installation
        • Lesson 1 - Tools
        • Lesson 2 - Detail
        • Lesson 3 - Base Mesh: Metaballs
        • Lesson 4: Converting metaballs and adding detail
        • Lesson 5: Masking, Hiding, and Working with Multiple Objects
        • Lesson 6: Joining Objects & Basing
        • Lesson 7: Sculpture Painting
        • Student Gallery: Animal Sculpts
        • Lesson 8: 3D Compositon
        • Lesson 9: The Project - Putting it all together
        • Lesson 10: Developing the image further
        • Lesson 11: Layout the base metaball mesh.
        • Lesson 12: Final Detail
        • Lesson 13: Basing and Painting
        • Final Project Gallery
      • OLD Fab
        • OLD Building Community Project Gallery
        • Copy of Building Community Project Gallery
        • old Building Community Project Gallery
      • OLD: Turtle Design App
      • OLD Arduino Robotics 8
        • Arduino Basic Commands Cheat Sheet
        • Logging into Tinkercad
        • Arduino, Circuits, LEDs and Resistors
        • Functions and Variables
        • Serial Monitor
        • Buttons and Interrupts
        • Traffic Light Project
        • Potentiometers + Servos
        • Piezo Buzzer and Tone();
        • Sequencer Project
        • Arrays and for loops
        • Extra Loop Practice
        • Refining the Sequencer
        • Servos
        • Ultrasonic Sensors
        • Final Project
Powered by GitBook
On this page
  • Expectations
  • Learning Targets
  • Assignments
  • World Wide Web
  • Tim Berners-Lee
  • HTTP sends HTML
  • Structure of HTML
  • Tags and Elements
  • Page Structure
  • CSS is HTML's Sidekick
  • Practice
  • Additional Training

Was this helpful?

Export as PDF
  1. Intro to Web Design

2: Websites?

What's happening under the surface of a web page?

Previous1: Internet?Next3: Bootstrap Template

Last updated 12 months ago

Was this helpful?

Expectations

Learning Targets

  • I can describe how web pages are displayed on my browser using HTTP and HTML.

  • I can create a basic HTML page.

Assignments

  • You will construct an HTML page from scratch in a guided class activity.

  • You will complete HTML and CSS courses on codecademy.com

World Wide Web

Tim Berners-Lee

The "Internet" we think of is primarily the contents of our web browser. Trying to find information by tediously scanning film after film was not fun. People like Tim Berners-Lee wanted to link text together. So touching one word might connect you to relevant information without having to manually search for hours.

HTTP sends HTML

HyperText Transfer Protocol is a set of rules to pass information (like the HTML layout of a web page) over a network. HTML is a markup language. It describes the structure and content of a page. So when you type in an web address like google.com into your browser, you're sending a GET request to the Google server. It responds with an HTML package that your browser renders into a familiar display.

Structure of HTML

Tags and Elements

A tag looks like this: <tag> </tag> The stuff that's between the opening <tag> and the closing </tag> is what's inside that element. The first and most important element in a web page is a hypertext link. If I wanted to make a link that went to Google.com, it would look like this: <a href="google.com">this is my link</a>

The term tag describes the structure of the <opening> and </closing>. The element is what type of object is being built by the tag, (an a is a hyperlink). The contents of an element is whatever is between the open and closing tag of an element. The property="value" pair that goes inside of an HTML tag is called an attribute.

Page Structure

Every web page has to have a <!DOCTYPE html> at the very start to tell your browser that yes, this block of text is HTML and it should render it into a display. The <html> element does something very similar. Every page you've ever seen online has been the contents of an HTML tag.

BlankPage
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <head> element isn't seen by the user. The contents of the head allow you to connect other resources to the page, such as fonts or CSS.

CSS is HTML's Sidekick

CSS has its own style rules. But you drop it into an HTML head like any other HTML, <style> css goes here </style>. You can put the CSS in the HTML file, but the better way is to keep your CSS in a separate file. In that case, you use a <link> element instead to connect the .css file.

Practice

Additional Training

If one person had to be named as the creator of the Internet, it might be in 1989. More specifically, he created the World Wide Web while working at . It was a way of transferring information over the TCP/IP network talked about in last chapter.

No more

The most important part of a website remains the .

It can often be very frustrating to find the right CSS rule to fix your display
Tim Berners-Lee
CERN
Microfiche
hyperlink
LogoCodePen
We'll build a practice page together in class using CodePen
Nobel Prize winner Tim Berners-Lee
Microfiche was text printed on tiny films. Searching through many films was a pain
HTML is Batman and CSS is Robin. CSS doesn't ever work alone--it's there to support HTML
LogoFlexbox Froggy
LogoCSS Diner