HTML Lesson 3 TBE 540 Farah Fisher. Prerequisites Use a search engine to locate information. Download graphics from the web. Define GIF, JPG and "animated.

Slides:

Advertisements

Similar presentations

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

Advertisements

Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.

CHAPTER 2 INTEGRATING IMAGES. LEARNING OBJECTIVES How to use the tag to place an image within a Web page The difference between relative and absolute.

Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.

HTML Lesson 4 TBE 540. Prerequisites Learners must already be able to... (besides basic computer knowledge) Use a search engine to locate information.

HTML Lesson 2 TBE 540 Farah Fisher. Prerequisites Access web pages and navigate Use search engines to locate specific information Download graphics from.

1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.

Graphics for the Web Graphic formats and other considerations.

HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.

The Power of Tables They aren't just for sitting stuff on anymore...

Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.

ETT 429 Spring 2007 Web Design I.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

HTML Lesson 5 TBE 540. Prerequisites The user must be able to… –Create basic web pages with a text editor and/or a web page editor.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

ISTC 301 Standards Web Design & Development. Teaching with Tech Standards “The digital-age teaching professional must demonstrate a vision of technology.

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417 Other web pages In own website New window Same page.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.

XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.

Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.

Web Technologies Website Development Trade & Industrial Education

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

Uploading Image Files. Introduction – Click on Control Panel Button Typically, most instructors will post the majority of their images under the “Course.

Creating Web Documents Wk 2: HTML & PSP basics Discuss sites HTML, PSP lesson Assignment: first Web page due Day class: 1/23; Night class 1/28.

Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.

Informatics Computer School CS114 Web Publishing HTML Lesson 2.

Understanding HTML Code

WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.

Images in HTML PowerPoint How images are used in HTML.

Website Development with Dreamweaver

McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.

F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.

HTML Review HTML and JavaScript. 2 What is HTML? HTML stands for HyperText Markup Language It is the set of instructions hidden behind every web page.

HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.

Frame Page A Frame Page does the following: –Defines the size of each frame. –Defines how the window will be broken up – rows or columns. –Specifies which.

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.

1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.

Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.

HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site.

1 Using HTML and JavaScript to Develop Websites. Using Images.

CPT 499 Internet Skills for Educators Session Ten Class Notes.

HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”

1 Creating the Header Page The header frame always displays on the AHS Web site The image (screagle.gif) that will go in the header is contained on the.

CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.

Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.

HTML: Images and Links Many Thanks to “Joe,” at index.html, from whom I got these lessons!

Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.

1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.

1 Start TextEdit. 2 Creating a Home Page  A home page is the main page of a Web site –Visitors usually view the home page first –Identify the purpose.

1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.

Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.

REEM ALMOTIRI Information Technology Department Majmaah University.

ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.

HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.

Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.

Extended Learning Module F

Images in HTML PowerPoint How images are used in HTML

With Microsoft FrontPage 2000

Chapter 2 Adding Web Pages, Links, and Images

Embedding Graphics in Web Pages

Images in HTML PowerPoint How images are used in HTML

Presentation transcript:

HTML Lesson 3 TBE 540 Farah Fisher

Prerequisites Use a search engine to locate information. Download graphics from the web. Define GIF, JPG and "animated GIF". Use simple graphics tools to create/manipulate graphics. Control the size and placement of graphics. Demonstrate appropriate use of the following HTML tag categories: required tags, images, lists, colors, text sizes, lines

Objectives Create linked web pages. Use a list (text) of links. Use graphics as background and links. Place text next to images in at least two alignments. Use a graphic as an alternate to. Locate and use web page evaluation rubrics.

More about Links Virtually every web page has links…it’s the basic idea of the web and HTML (HyperText refers to links). Link tags look like this: what to click on The address can be a file name (like home.htm) or a web address (like

More about Links The “what to click on” is quite often text. Whatever is placed between the tags is displayed on the screen and usually underlined (though you can change it in your browser settings). You can also place an tag between the tags, making the image into a link. A handout on links is available at

More about Links The example below shows an image called TOY.JPG as a link to a page called TOYSTORY.HTM : The tag may also contain HEIGHT, WIDTH, and BORDER information. This way, however, the user will not know that the image is a link. See the next slide for a better idea.

More about Links In the example below, both the image TOY.JPG and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM. GO TO TOY STORY The words in the link can come before or after the tag. Placement of text next to images will be discussed later in this lesson.

More about Links Sometimes it is convenient to have a list of links. See the example below: CSUDH ” College of Education Dr. Fisher’s Classes

More about Graphics When placing text next to graphics, you may be surprised by the placement of the text. If you put in no “alignment” information, the text will appear at the bottom of the graphic: Text appears here

More about Graphics Using ALIGN=TOP or ALIGN=CENTER may be more useful. Text appears here Text appears here

More about Graphics Graphics can be used a web page backgrounds. The tag is used. A graphic used in the background of a page should be lightened so that it does not interfere with the information on the page.

More about Graphics When an image is smaller than the web page, it is “tiled” (repeated) to fill up all the space. A single graphic like this: would look like this as a background:

More about Graphics To lighten a graphic, you will need a program like PhotoShop or Word (or a freeware or shareware program). If you bring down the contrast and raise the brightness, the graphic will appear “washed out” - just right for a background. An example:

More about Graphics Another use for graphics is as a replacement for. You can search for web graphic lines (“dividers”) at websites like /dividers/dividers1/index.html (part of Clip Art Universe) /dividers/dividers1/index.html Use a regular tag to display the graphic line. You might want to adjust the width ( )

Self Check - HTML Lesson 3 Which of the following creates a link to HOME.HTM by clicking GO HOME? HOME.HTM GO HOME HOME.HTM

Self Check - HTML Lesson 3 Which of the following creates a link to HOME.HTM by clicking GO HOME? HOME.HTM GO HOME HOME.HTM

Self Check - HTML Lesson 3 Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? GO HOME

Self Check - HTML Lesson 3 Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? GO HOME {Either graphics first or words first}

Self Check - HTML Lesson 3 Which of the lists below will results from these tags? See Me GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY!

Self Check - HTML Lesson 3 Which of the lists below will results from these tags? See Me GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY!

Self Check - HTML Lesson 3 Which is the correct text placement if this tag is used? SINK! SINK!

Self Check - HTML Lesson 3 Which is the correct text placement if this tag is used? SINK! SINK!

Self Check - HTML Lesson 3 To use a graphic (back1.gif) as a page background, use… You cannot use a graphic as a background.

Self Check - HTML Lesson 3 To use a graphic (back1.gif) as a page background, use… You cannot use a graphic as a background.

Self Check - HTML Lesson 3 If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).

Self Check - HTML Lesson 3 If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).

Self Check - HTML Lesson 3 To use an image (lineup.gif) as a line, use the following tag(s)… lineup.gif

Self Check - HTML Lesson 3 To use an image (lineup.gif) as a line, use the following tag(s)… lineup.gif

Evaluation Rubrics One of the requirements for the HTML project is that you use a rubric to evaluate your own website when it is complete. Looking at rubrics now will alert you to what is important in web design. Check out the Web Evaluation Links on the class web site (HTML pages). NOTE: The CyberBee forms are very nice.

Activities Complete the web page activity found at This activity includes the development of several linked pages, much like your final project will be.