Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt.

Slides:



Advertisements
Similar presentations
Dreamweaver Dr. Kristen Landreville Wed. 09/29/10 – Fri. 10/08/10.
Advertisements

PART IV - EMBED VIDEO, AUDIO, AND DOCUMENTS. Find a video on Youtube.com: Search for a video, then look for the Embed code. Copy this code into the HTML/JavaScript.
ETT 229 Fall 2004 Web Design Basics IV Multi-page designs.
ETT 429 Spring 2007 Web Design Basics II. Publishing Web Pages Activating your NIU website Go to this.
Compiled by ackoo Inserting images into a webpage.
Google Earth. Adding Folders 1. Control Click on My Places, 2. Click on Add or.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Teaching With the Tubes How to use YouTube and TeacherTube videos to supplement instruction Presented by Farmington Technology Department.
How to link to a website in PowerPoint Bryan Mills.
Dreamweaver Learning to be a web design master! By: Mr. Brunton.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Making an HTML Document Notepad Group Bo Kim Dan Carter Han Chong Justin Weaver Kris Lamont.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Creating your Webpage with tables. This is a 2 column by 1 row table!
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
CURR 285, FirstName LastName, This_Semester This_Year FirstName LastName About Me [A] [My Own Choice Of Topic] [B] Favorite Educational Web Site [C] My.
Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
Images in HTML PowerPoint How images are used in HTML.
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
How are tables used in web design?. A table (FIVE THINGS TO KNOW) 1. Is made up of columns and rows 2. Has cells where columns and rows intersect.
Going Live with a Basic Web Page Bill Hart-Davidson AIM: billhd30 pfworkshop.
Creating webpages in Google Sites. 1- Create a Gmail account.
Enhancing Web Pages  Use Notepad to open any html file  Adding an Animation  Google search ‘free animation’  After saving one, add it to the web page.
How to upload files to Altervista Overview:
Add an Image. index.html about.html contact. html contact. html.
Moodle with Style Integrating new technologies to empower learning and transform leadership.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
PowerPoint Extras. Eyes to the front please! Action Buttons.
Title Here. Directions Delete this slide when you are done! On the first slide, insert the picture or diagram you want to make interactive Change the.
The Internet Using the Internet Web addresses Searching Favourites Saving / Printing web pages.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
Images Worksheet. Web template Download the template folder Unzip and save in your documents Rename the folder to “images work” without quotes.
UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points.
A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.
Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
HTML Help For MGS 351 Final Project Website. Agenda Getting Started – Must-Do’s – Working from an off-campus computer – Other Resources Working with HTML.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,
+ HTML Hypertext Markup Language. + Introducing HTML HTML is the language used in writing websites Open the “HTML Practice” link on the Daily Log Delete.
Integrate Google Drive Apps With VLE-Frog
QR Codes Word Walls and Beyond. What they are… Applications for the classroom – Word Walls Quizzes Learning centers Written responses Student resources.
Creating Web Pages with Links, Images, and Embedded Style Sheets
PowerPoint Practice Exercise 1.Save this file on your H drive in Word folder as Practice. 2.Edit each slide according to the instructions provided in the.
Text Title: YOUR TOPIC Narrator: Narration: Replace the BOLD words with your own information Photo: Go to the Unsolved Mysteries Wiki Resources page under.
Body System Here Enter group members names here. Save Your Work! This is a good time to start saving your work. Go to FILE, then Save As…, then change.
 When preparing a lesson, create a new folder  Put ALL materials related to the lesson into the folder  Include all video clips, audio clips, documents,
 Open the course to add an online class  Click on Add a Page (left side)  Type in a name  Click on Create  Click on the Content Tab  Click on Add.
Using PowerPoint to Scaffold a Text
On each booth you will find 4 to 6 banners
On each booth you will find 4 to 6 banners
USING DREAMWEAVER Contents: Assigning a Root Folder
On each booth you will find 4 to 6 banners
On each booth you will find 4 to 6 banners
Presenter Mindy Pistol Ext
How to Embed Videos into Powerpoint
Project 5 Creating an Image Map.
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Google Drive and Gale Databases
HTML Text editors and adding graphics
Step-by-Step Banner Creation Guide
Creating an Interactive Quiz
Creating your first website
Lesson 7 Graphics.
Creating your first website
Wheelers clubs Your site will consist of 3 pages:
Creating an Interactive Quiz
Presentation transcript:

Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt

Images You can add images that have been downloaded to the images folder or link to an image on a webpage. This is the Image tag to insert an image that is located in the images folder. Just look at it. Now go to the W3Schools website below and try out the exercise. Go to the following website and click try it to observe the code. Try it Change the width and height amounts in the code. Did the size of the image change?

DO: Copy the smiley face image to your images folder. From this website right click on the smiley face image. Save as AND PLACE in the images folder in your portfolio. e_test e_test Then go to the next slide.

Open the index.html file Place the code below after the comment that is in your index.html notepad doc. Save and run in chrome. Do you see the smiley face? If so go to the next slide. If not let someone know or go back and look over the instructions.

Choose your own banner Now go and find a banner that you want for your web page. I choose this one. Follow the same instructions to place the banner on your webpage. (Delete the smiley face).

Go to Unit 3 Type the following between the paragraph tags. Then after the insert the image tag to insert an image from your directory. You can choose any image you want that is appropriate.

Use a link to an image on a webpage go to the website below. Try it. This is the tag used to link an image to a web page. Just look at it and go to the next slide.

Go to Unit 4 in your index.html doc. Type the following between the tag for Unit 4 This is how you link to an image on the web After the ending tag paste the link below: Save and run in Chrome. Do you see the smiley image.

Now go and find an image of you choosing. When you find the image. Right click on the image: Click on copy the URL. Go to the index.html doc and find the tag you just pasted. Highlight the part in red in the code and paste the URL you copied from the webpage. It might be long. Save and run. Do you see the image?