HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.

Slides:



Advertisements
Similar presentations
HTML Tags and Their Functions
Advertisements

Learning the Basics – Lesson 1
Creating and Editing a Web Page Using Inline Styles
Chapter 8 Creating Style Sheets.
Chapter 5 Creating an Image Map.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
CIS101 Introduction to Computing HTML Project Two.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
Creating Tables in a Web Site Using an External Style Sheet
Creating Web Pages with Links, Images, and Formatted Text.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Creating an Expression Web Site
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
Web Technologies Website Development Trade & Industrial Education
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.
Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
HTML PROJECT #3 Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Chapter 5 Creating an Image Map.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
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.
9 April 2008 Creating Web Pages with Links, Images, and Formatted Text WEB 101 – HTML Prof: Mariana Mendoza-Botero Escuela de Administración de Empresas.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
9 April 2008 Creating Web Pages with Links, Images, and Formatted Text WEB 101 – HTML Prof: Mariana Mendoza-Botero Escuela de Administración de Empresas.
Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox.
Creating Web Pages with Links, Images, and Formatted Text
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Creating Tables in a Web Site
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
HTML: Hyptertext Markup Language Doman’s Sections.
HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site.
1 Creating Links within a Web Page  These links are especially useful on long Web pages  Links at the top of the page point to areas further down the.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Chapter 2 Working with Images and Links. Chapter Objectives Insert and align an image Change the workspace Add borders and margins to an image Copy page.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Links HTML uses a hyperlink to another document on the Web.
Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
Creating and Editing a Web Page
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.
Wikispaces in Education Tutorial ESA, Region 2 Mary Teply Marge Hauser.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Creating and Editing a Web Page Using Inline Styles
Creating Web Pages with Links, Images, and Embedded Style Sheets
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
Let’s Try It! Open Notepad
Online PD Basic HTML The Magic Of Web Pages
Learning the Basics – Lesson 1
Creating Tables in a Web Site Using an External Style Sheet
Creating a Web Site with Links
Creating Web Pages with Links, Images, and Formatted Text
Enhancing Your Web Site—Adding Links Web Page
Project 4 Creating an Image Map.
Presentation transcript:

HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 2 Chapter Objectives Describe linking terms and definitions Create a home page and enhance a Web page using images Align and add bold, italics, and color to text Change the bullet type used in an unordered list Add a text link to a Web page in the same Web site Add an link Use absolute and relative paths Save and view an HTML file and test the links Open an HTML file Add an image with wrapped text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 3 Chapter Objectives Add a text link to a Web page on another Web site Add links to targets within a Web page Copy and paste HTML code Add an image link to a Web page in the same Web site

Plan Ahead Plan the Web site Analyze the need Choose the content for the Web page Determine how the pages will link to one another Establish what other links are necessary Create the Web page and links Test all Web pages within the Web site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 4

Get Organized Go to your home directory (H:) Double-click on the Web Dev or HTML directory that you created. Create Ch. 3 folder All work you do today, put in the Ch3 folder. Go to Public/HTML Stuff/Chapter03/ChapterFiles There are 6 items in there. Copy and Paste these to your Ch. 3 folder Continue to separate work by chapters throughout the remainder of this semester NOW, read the Project – Pasta Divine Web Sit on pg.82 Project 3: Creating Web Pages with Links, Images, and Formatted Text 5

Links Text Links – –use descriptive words..not Click here –Underlined, different color text –IE defaults Initial link – blue Visited link – purple Active link - varies Image Links – –above colors apply to borders around images Moving a mouse pointer over a link causes it to change into a pointing hand. URL of the link appears on the status bar. Project 3: Creating Web Pages with Links, Images, and Formatted Text 6

Links (pg ) To override the default colors for links… –Link – Normal link (unvisited link) –Vlink – visited link (already been clicked) –Alink – Active link (color of link immediately after the mouse clicks the hyperlink) Can link to –another web page on the same web site –another web page on a different web site –somewhere within the web page – address Project 3: Creating Web Pages with Links, Images, and Formatted Text 7

Entering HTML Tags to Define the Web Page Structure Pull up one of your old projects (that validated correctly!) Clean out all of the STUFF until it looks like the table on the bottom of pg. 91. Save this file as ‘structure.html’. This will be your starting point for all future projects. Some of you may have already created a template which is fine. Just make sure it looks like pg The exception should be the !doctype statement that we corrected upon validation…LEAVE IT ALONE…don’t attempt to make it match pg. 91. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 8

Entering HTML Tags to Define the Web Page Structure Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 9

10 Adding an Image Do bullet 1 on pg. 93 to add an image to your document.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 11 Adding a Left-Aligned Heading with a Font Color The most frequently used font attribute is size Size can be 1-7, but 3 is the default. Colors are the same as those for the background Other attributes for the font tag –Face=“fontname” – changes the font-type. If a browser can’t display the font requested, it will use its default font. –Size=“x” – X may be an absolute size (1-7) or a relative size (+2, - 1) to the last preset size. Headings are LEFT aligned by default, if you want center or right alignment, you must specify.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 12 Adding a Left-Aligned Heading with a Font Color Do #1 on pg. 95 – adding a heading with font color

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 13 Entering a Paragraph of Text Enter the HTML code shown in Table 3–4 on page 95 as the first paragraph in the HTML file. Press ENTER at the end of each line Continue to do pg This will create another paragraph and a bulleted list. BE CAREFUL…sometimes code will work without all tags being present..but it WILL NOT validate, neither will it pass my inspection. Make sure you save this file on your H: drive under Ch. 3 – name it pastadivine.html

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 14 This is what it will look like.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 15 Adding a Text Link to Another Web Page within the Same Web Site Anchor tag - & - use to create anchors for links to another page in the same web site, to a web page in an external web site, within the same page, or for links. Example: – linktext where linktext is the phrase that appears on the web page value for href is the URL of the linked page. –See pg. 99, table 3-7 for attributes to the link tag.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 16 Adding a Text Link to Another Web Page within the Same Web Site and an link Do the steps on pg

Adding a Subject Together with Body Message Text Turn to pg. 102 Notice you can add a Subject and a message to by adding some additional information Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 17

Adding a Text Link to a Web Page in Another Web Site DO pg 103. Save the file again Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 18

Adding a Text Link to a Web Page in Another Web Site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 19

Validating a Web Page Go ahead and validate this web page… Pg. 106 will walk you through it. Look over your web page. It should look link pg. 107 (next slide) Go ahead and test the links…make sure they work. When all this is done…show me! Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 20

Viewing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 21

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 22 Opening an HTML File Go to your home directory, HTML/Ch 3 folder and open specials.html with NotePad.

User friendly Because this is such a long page, you should provide users a quick way to move back to the top of the page without scrolling. See pg. 111 for what it will look link when we are finished. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 23

Formatting Text (pg.114) Look at pg. 114 for a list of attributes for use with formatting text. We’ll discuss these and look at pg. 115 for examples. – - Boldface – - usually bold (browser interprets it) – - increases font size – - for emphasis (italicized usually) – - Italicized – & - subscript and superscript – - underlined Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 24

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 25 Formatting Text in Bold Do the steps on pg. 116 to add some text formatting to your document.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26 Adding an Image with Wrapped Text Look at the bottom of pg 117. Notice the text is right next to the image. NOT GOOD…we need some horizontal/vertical space there. Turn to pg. 118, the same page with the hspace attribute used. –Hspace – left/right of the image –Vspace – top/bottom of the image Using the tag also controls the space around images..See pg. 119.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27 Using thumbnail sized images Thumbnail images – smaller version of the actual image. Usually, when clicked, will load the full-sized image. To create thumbnails – resize the image in paint or image-editing software and save with a different filename. There are countless images in many places on the Web. Search for ‘Free Web images’ or ‘Free GIFs’ and see what you get. Be aware of copyrighted images. This line of code will add a thumbnail image (you have to have resized it in a image-editing program) that links to a larger image of itself. See pg. 120.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28 Adding an Image with Wrapped Text Do pages Save the file…do this often, so if you have problems, you haven’t lost much.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29 Clearing the Text Wrapping To stop wrapping to the right, use To stop wrapping to the left, use will clear ALL wrapping Do pg. 122

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 30 Setting Link Targets Now we need to add links WITHIN the web page. First thing we have to do is create target links. Ex. Target – a NAMED location or anchor within a Web page to which a link can be created. For long web pages, makes it easier for visitors to navigate the site. You will make your bulleted list a set of links to targets within your web page.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 31 Setting Link Targets Targetname MUST BE UNIQUE within that web document. Just marks a specific area of the web page to which a link can be directed. - notice the # sign.. Turn to pg. 124 in your textbook

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 32 Adding Links to Link Targets within a Web Page PG Save this and then test all the links. When it is working properly, call me and let me see it!

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 33 Copying and Pasting HTML Code Do pg That will finish up all the links for this document. Save it, test it, validate it if you want to…just don’t leave off any tags! I want to see this work before we go any further.

What now? Homework- –Play ‘Who wants to be a computer Genius’ for chapter 3 ( You must have at least 15 out of 20 questions correct. Print this out and turn it in to me. –Due next class meeting Labs for Ch. 3 –Cases & Places –#1 & #3 pg. 142 read this CAREFULLY and make sure you do everything that is asked. Project 3: Creating Web Pages with Links, Images, and Formatted Text 34