Module 1: Crafting a Professional Web Presence
Computer Fundamentals >> Component 4: Programming The Web
The Internet Age has arrived, and folks that seem relatively "with it" get a leg up in all sorts of situations, including employment searches. This module's product is a professional website featuring your interests, skills, accomplishments, and thoughts.arrow_downward
Jump to a section
local_diningModule "hamburger" guide
bookResources and reference documents
extensionCore Concepts: Creating a skeleton HTML page
schoolModule Preparation Exercises: Study W3 Schools
motorcyclePhase 1: Dissecting a website...to find tags and boxes!
motorcyclePhase 2: HTML/CSS Box Model Challenges
motorcyclePhase 3: Poaching CSS: Legally "Stealing" Styling
motorcyclePhase 4: Styling your profile
buildMini Project: "Build Out" Your Profile
flight_takeoffExtension Exercise 1: Building with a WYSIWYG
flight_takeoffExtension Exercise 2: Plugging and Playing with HTML goodies & CSS
Module Learning Objectives
Create a simple HTML/CSS box-model diagram based on an HTML page and broswer dissection tools
Create, save, access, and tinker with a single-file HTML page (with embedded CSS) in a web browser
Tinker with a more complicated website in HTML and CSS to contain customized content, including text and images
Advanced: Create a multi-page profile website with custom resources arranged in a sensible directory structure for extension in the future
Module Hamburger Guide
Print off the hamburger guide for this module, review it carefully, and complete its sections as a culminating activity for this module.
Activities and readings to do prior to our starting the module in class:
- Read the module core concepts descriptions and study the images, following links as needed. Check out the external resources--spend 5 mins reading and exploring each page. Have fun! It's the internet!
- Pay particular attention to the HTML tutorials on the Mozilla Developers site. Following their page-by-page tutorials is the most straightforward way to become comfy with HTML.
Module Core Concepts
Learn HTML Basics
HTML is a markup language, meaning it involves adding additional information to a text document which, in our case, a browser interprets to create consistently displayed web pages. HTML is the basis for all page structure on the World Wide Web today.
Devote about a half hour to working through one of these two tutorials on HTML basics. Check each one out and click through a bit, getting a sense for how their exercises are structured. Choose the one that makes your learning most fluid.
As you read, build yourself a simple skeleton site in Netbeans. Save the file with a .html extension into a directory you make called "web". As you tinker with the online tools, tweak your skeleton as you go. Remember, we're just making a playground site at this point.
Phase 1: Dissecting a website...to find tags and boxes!
You should have a sense from the core concepts activity of how HTML looks and works. Opening and closing tags create all of the amazing configurations and presentations we see on the Web today. This phase encoruages you to become familiar with even more tags and how they work together by dissecting a sample website designed using "pure HTML" (rather than HTML generated by a website builder).
Follow these steps to choose a website that you'll dissect and then do some digging to learn more about how it's put together. Record your findings in your Hamburger's phase 1 questions.
- Choose from these sample websites that Eric has built over the years OR a website of your choosing that is realtively simple in its layout.
- View the website you choose in the developer mode using FIREFOX. Activate the tool panel with the F12 key. Lick the inspector toggle button in the upper right of the developer tools to change the cursor to a magic box model selector. Poke through the site to find unique tags to look up at W3 Schools or Mozilla developer's network.
- Record your findings in the Hamburger; take your time!
Site 3: This site
Site 4: Choose your own site
Phase 2: HTML/CSS Box Model Challenges
Phase 3:Poaching CSS: Legally "Stealing" Styling
Phase 4: Styling your profile
Module mini-project: Building out your profile
Extension activity 1: Building with a WYSIWYG
Extension activity 1: Plugging and Playing with HTML goodies & CSS