Web Page Design Model
Units:
- Introduction to the Internet and the World Wide Web
- Portable Whiteboard
- Copyright Laws- Ethical Content Use
- Art and Web Design Principles
- Boolean Logic
- Internet Navigation Tools
- Web 2.0
- Intro to Blogging
- Creating Your Own Blog Site
- The Generator Blog
- Teacher Intro
- Creating an Avatar
- Creating a blog on Blogger
- Customizing Blog Appearance
- Customizing the Color/Appearance of your Blog.
- Posting to your Blog
- Creating a Blog Post
- Assessment of 1st blog post
- Posting images and videos
- Adding Your Avatar
- Using Widgets
- Adding Widget/Gadgets
- Presenting Blogs to the class
- Podcasting- Let Your Voice Be Heard
- Wikis- What?s a wiki?
- Videoconferencing- Say it with Skype!
- File Management
- HTML/CSS
- Introduction to Cascading Style Sheets (CSS)
- Introduction to Basic HyperText Markup Language (HTML) Tags
- CSS Rules and Browsers
- Creating Hyperlinks with HTML
- Using HTML Table Format
- Creating Lists within a Web Page
- Working with Images
- Image Race
- Step 1- Finding Images Online
- Step 2- Resizing Images Online
- Step 3- Using HTML code to add images
- Step 4- Creating a hyperlink to an image
- Text, Divisions, Borders and Rounds with CSS
- Make 3 web pages from one and manage with External CSS
- Adding Text To AP Div Tags
- Creating A Basic Layout Using AP Div Tags
- Formatting Images Using HTML Coding
- Text formatting with HTML
- A Polish to Your Site
- Site Development Planning
- Analyzing Websites
- Brainstorm First
- Organizing Brainstorming Ideas
- Introducing Layouts for Web Site Planning
- The Outline Approach to Web Site Planning
- Introducing Storyboards for Web Site Development
- Introducing Wireframing for Web Site Development
- Hook
- Lecture
- Checking for Understanding
- Demonstration
- Checking For Understanding
- Guided Practice
- Quick Independent Practice to Check for Understanding
- Closure Lecture Day
- "About Me" Wireframing Project Day 1
- Check for Understanding
- Closure Day 1
- Overview of Project -- Day 2
- Checking for Understanding
- Closure Day 2
- Overview of Project -- Day 3
- Checking for Understanding
- Closure Day 3
- Introducing Accessibility
- Intro to Art Theory and Fundamentals
- Multimedia Web Page Development
- Web Development Applications
- Prepare Your Class/Club/Activity Web Site
- Publishing Content to the Internet
- How To Secure A Domain Name For Your Web Site
- How To Find A Hosting Server On The Web
- How To Upload And Update Your Web Site Using Dreamweaver
- "The files are INSIDE the computer!!!"
- Background information
- Demonstration #1, setting up the site in Dreamweaver
- Students Perform The First Task, Setting Up Remote Site
- Demonstration #2, Next Step, How To Upload Your Files To The Remote Host
- Students Perform The Second Task, Put Their Files To The Remote Site
- Employment Portfolio
Tags
Activity Industry Sector
Information Technology
Activity Originally Created By:
Brooke Ahrens
Step 3- Using HTML code to add images
Part of Lesson Plan: Working with Images
Activity Overview / Details
It is assumed that students have already hand-coded a web page using html and are familiar with the process of creating a new document in Notepad.
The teacher should direct students to do the following while modeling:
- Using Notepad, create a new HTML document. Make sure to set up your document correctly as seen here: http://www.w3schools.com/tags/tag_DOCTYPE.asp
- Inside the <body> tag, write 1 sentence that describes your image.
-
Now add your add by using an image tag:
- <img src="filename.jpg"> Remember to replace “filename.jpg” with the name of your file, and to keep the quotation marks! Use the smaller image that we just resized.
-
Preview your coding here:
http://pastehtml.com/
- Select All, copy, and paste your code into the site to see a preview of your coding.
Materials / Resource
HTML DocType layout
[
Go to Site
]
HTML Previewer
[
Go to Site
]
