Creating Web Pages with Links, Images, and Formatted Text

Slides:



Advertisements
Similar presentations
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Advertisements

HTML Tags and Their Functions
Creating Tables in a Web Site
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Learning the Basics – Lesson 1
Creating and Editing a Web Page Using Inline Styles
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Chapter 8 Creating Style Sheets.
Chapter 5 Creating an Image Map
Chapter 5 Creating an Image Map.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
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.
Creating and Editing a Web Page
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
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.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Using Frames in a Web Site
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
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.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Adding Images & Working with Images Unit 2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
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.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
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 Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
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.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
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.
CPG 4331 Class Agenda Word  Getting Started  Editing Documents  Changing Views in Documents  Format Text / Format Documents  Work With Tables  Work.
Windows Internet Explorer 7 Chapter 1 Introduction to Windows Internet Explorer.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
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.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
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.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
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.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
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.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
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.
Creating and Editing a Web Page Using Inline Styles
Creating Web Pages with Links, Images, and Embedded Style Sheets
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Learning the Basics – Lesson 1
USING DREAMWEAVER Contents: Assigning a Root Folder
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
Project 4 Creating an Image Map.
Presentation transcript:

Creating Web Pages with Links, Images, and Formatted Text Chapter 3 Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 1

Project 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Objectives Add an e-mail 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 5

Introduction Project uses the following types of links text and image links to another Web page in the same Web site text links to another Web page in a different Web site text links within a Web page e-mail links Project 3: Creating Web Pages with Links, Images, and Formatted Text

Entering HTML Tags to Define the Web Page Structure Use the HTML template on the In-Chapter HTML Chapter 2 Web page to create the code listed here Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 7 7

Using Links on a Web Page moving mouse pointer over a link causes mouse pointer to change to a pointing hand displays URL of linked page on the status bar of browser use descriptive text as the clickable word “Click here” – does not explain purpose of link “Save up to 60% on airfare” better choice default color of links set by browser unless coded in <body> tag in HTML code same color defaults apply to border color around an image link Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Links on a Web Page image link text link URL on status bar Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Links on a Web Page normal link visited link active link More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Links on a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Links on a Web Page image with border and normal link image with border and visited link image with border and no link Project 3: Creating Web Pages with Links, Images, and Formatted Text

Linking within a Web Page allows user to move quickly from one section of a long Web page to another move directly to a section of interest rather than scrolling through a document use list of links like a menu or table of contents at the top of the page Project 3: Creating Web Pages with Links, Images, and Formatted Text

Linking to an E-Mail Address home page provides a way for visitors to contact person at company responsible for maintaining Web site or addressing customer questions or comments when visitor clicks e-mail link, automatically opens new message in default e-mail program and inserts appropriate contact e-mail address in the To field Note: if browser not configured to send mail, e-mail link will not work Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Absolute and Relative Paths All projects in book both HTML code and graphical images saved in the same folder more appropriate to separate HTML code files and graphical images files into different folders create folder structure in which each functional area has its own folder path describes the location (folder or external Web site) where the files can be found Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Absolute and Relative Paths 2 Kinds of Paths Absolute specifies exact address for the file E:\HTML\ChapterFiles\Chapter03\pastadivine.html cumbersome – if files are moved to different folder or Web server all absolute paths would have to change Relative specify location of a file, relative to location of current file utilizes double period (..) symbol to move up or down the folder structure ..\images\pastadivine.html relative path better choice offers more flexibility if root folder must change would not have change the addressing Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Pasta Divine home page includes an image logo to provide visual appeal, catch visitor’s interest and promote company brand. logo image is same image found in print on company stationary, cards, and other promotional materials consistent visual and brand message including width and height of logo image will improve load time alt attribute appears when page is loading and when user moves mouse over image Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image width attribute and value alt attribute and value end img tag img tag to insert image src attribute used to specify the name and location of image height attribute and value Project 3: Creating Web Pages with Links, Images, and Formatted Text

Font Attributes and Values Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Left-Aligned Heading with a Font Color start h1 heading tag end h1 heading tag start font tag font color attribute and color code end font tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

Creating Unordered (Bulleted) Lists start ul tag with square bullets h2 heading line items end ul tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Text Link <a> and </a> tags used to create links in a Web page. <a> tag also is called the anchor tag because it is used to create anchors for links to another page in same Web site, to an external Web site, within same Web page, or an e-mail link. basic format: <a href=“URL”>linktext</a> linktext is clickable word or phrase on Web page href (hypertext reference) name or URL of linked page or file Project 3: Creating Web Pages with Links, Images, and Formatted Text

Tag Attributes and Functions Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Text Link to Another Web Page within the Same Web Site end <a> tag start <a> tag link to Web page specials.html monthly specials to appear as text link Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an E-Mail Link mailto: identifies link as e-mail link pastadivine@isp.com to appear as clickable text for e-mail link e-mail address end link Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Text Link to a Web Page in Another Web Site end <a> tag start <a> tag link to Web page wikipedia.org history of pasta to appear as text link Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26

Validating a Web Page Click the Start button on the Windows Vista taskbar to display the Start menu Click the Internet icon in the pinned items list on the Start menu to start Internet Explorer. If necessary, click the Maximize button to maximize the browser window Click the Address bar to select the URL in the Address bar Type validator.w3.org to replace the current entry then press the ENTER key. Click the Validate by File Upload tab Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27

Validating a Web Page Click the Browse button Locate the pastadivine.html file on your storage device and click the file name Click the Open button in the Choose file dialog box and the file name will be inserted into the File box Click the Check button. The resulting validation should be displayed as shown on the following slide Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 28 28

Validating a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29

bulleted list with square bullet type Viewing a Web Page h1 heading h2 heading bulleted list with square bullet type Project 3: Creating Web Pages with Links, Images, and Formatted Text

Testing Links in a Web Page Pasta divine Web page prior to editing More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text

Setting Link Targets target – named location, link within the same Web page or file in project a bulleted list is added as links to the targets links are directed to the heading at the top of each major section when clicked links will move Web page visitor to the targets users will not have to scroll to topics or sections four text links names “To Top” will return users to top of document More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text

targets named locations Setting Link Targets targets named locations Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to Link Targets within a Web Page Links to link targets named locations Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to a Target at the Top of the Page HTML Code to setup target (top location) at beginning of document <a name="top"></a> as the tag HTML Code to use the target link (top) to return to the beginning of document <p><a href="#top"><font size=-1>To top</font> </a></p> as the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to a Target at the Top of the Page More on Web Links to top target named location Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text More on Web logical style tags allow browser to interpret tag based on browser settings, relative to other text in a Web page <h2> heading tag larger than regular text yet smaller than <h1> <strong> text should have a strong emphasis most browsers interpret as bold physical style tags specify a particular font change interpreted strictly by all browsers <b> bold tag in practice, <strong> and <b> tags have same result when Web page displayed Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image with Wrapped Text Alignment is a key consideration when inserting an image horizontal – values can be left or right vertical – values can be top, middle, or bottom of image alignment can give an image and the surrounding text completely different looks <img src=“agave.jpg” align=“right” alt=“Agave” width=“212” height=“203” /> must enter a break <br /> tag to stop text wrapping <br clear=“right” /> <br clear=“all” /> clears both left and right alignments More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image with Wrapped Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 40 40

Clearing the Text Wrapping Clearing Wrapped Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 41 41

Using Horizontal and Vertical Spacing Using spacing between and around images can make the Web page easier to read hspace attribute of <img> tag controls amount of horizontal space around an image hspace=“20” vspace attribute of <img> tag controls amount of vertical space around an image vspace=“20” Project 3: Creating Web Pages with Links, Images, and Formatted Text

Using Thumbnail Images developers use thumbnail images to improve loading time thumbnail image is a smaller version of the image itself used as a link, when clicked loads full-sized image gives visitor opportunity to decide whether to view full-sized image create thumbnail version of image, image is resized to smaller size using a paint or image-editing application, then saved to a different file name <a href=“largeimage.gif”><img src=“thumbnail.gif” /></a> use Back button on browser to return to original Web page displaying the thumbnail Project 3: Creating Web Pages with Links, Images, and Formatted Text

Obtaining Images Web sites – downloaded free for noncommercial purposes (copyright rules) use search engine key words “free GIFs” or “free Web images” right-click image, click Save Picture As, save image to your computer clip art – found in applications scanner or digital camera create images – using paint or image-editing program Project 3: Creating Web Pages with Links, Images, and Formatted Text

Chapter Summary 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 Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 45 45

Chapter Summary Add an e-mail 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text 46 46

Chapter Summary 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 Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 47 47

Homework # 6 In the Lab 3 page HTML 140-141 Creating Two Linked Web Pages See INF 186 Computer Assignment 6 Web page for details, hints, and requirements for the assignment Project 3: Creating Web Pages with Links, Images, and Formatted Text

Creating Web Pages with Links, Images, and Formatted Text Project 3 Complete Creating Web Pages with Links, Images, and Formatted Text