Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Published byGervais Grant Modified over 9 years ago

Similar presentations

Presentation on theme: "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."— Presentation transcript:

1 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 lists using HTML View an HTML document

2 Section 4.3 Insert images using HTML Insert links using HTML Debug and test a Web page Section 4.4 Re-create an existing HTML document in FrontPage Test a Web page in FrontPage

3 4.1 HTML Coding Guide to Reading Main Ideas An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. The World Wide Web Consortium establishes guidelines and standards for using HTML. Key Terms Hypertext Markup Language (HTML) HTML tag starting tag ending tag nested tag empty tag source code pp. 92-94

4 4.1 HTML Coding HTML Tags HTML tags You create Web page documents by inserting HTML tags into a text document. Hypertext Markup Language (HTML) The code used to create Web pages. (p. 92) HTML tag Text contained between two angle brackets ( ) that tells the Web browser how to display a page’s content. (p. 92) pp. 92-94

5 4.1 HTML Coding HTML Tags startingending tag HTML tags often come in starting and ending tag sets. Nesting tags Nesting tags refers to placing the tags in particular order. Empty tags Empty tags do not require an ending tag. pp. 92-94 starting tag The first of a pair of HTML tags; also known as an opening tag. (p. 92) ending tag The last of a pair of HTML tags; also known as a closing tag. (p. 92) nested tag An HTML tag that is enclosed within another set of tags. (p. 93) empty tag An HTML tag that requires only an opening tag; also known as an orphan tag. (p. 93)

6 Understanding and using the basic guidelines for HTML code will help you see the relationship between the code you write and what you see in the Web browser. For example, extra spaces between elements in an HTML document will not necessarily display in a Web browser. 4.1 HTML Coding HTML Guidelines pp. 92-94

7 4.1 HTML Coding HTML Guidelines source code Viewing source code will allow you to see the text and the HTML commands used to create the Web site. source code The text and HTML commands used to create the Web page. (p. 94) pp. 92-94

8 4.2 Using a Text Editor Guide to Reading Main Ideas You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site. Key Terms file name extension attribute ordered list unordered list pp. 96-102

9 Every Web site is composed of folders and files. Whether you use a text editor or a Web site development application, you must keep your files organized. 4.2 Using a Text Editor Organizing Files and Folders pp. 96-102

10 4.2 Using a Text Editor Using Notepad Notepad can be used as a text editor for creating Web sites. file name extension When you save a file for the first time in Notepad, use the Save As function to name the file and choose the file name extension. file name extension The three or four characters after a period in a file name that tell the computer system what type of file it is reading. (p. 97) pp. 96-102

11 4.2 Using a Text Editor Adding Attributes using HTML attributes Some HTML tags can contain attributes to specify the tags characteristics. Some attributes include: Font color Background color Heading Alignment attribute An HTML instruction that is included in an HTML tag to specify a characteristic of a Web page element. (p. 98) pp. 96-102

12 4.2 Using a Text Editor Creating Lists Using HTML Creating lists can make text easier to read and add visual interest to a page. ordered lists unordered lists There are two types of lists: ordered lists and unordered lists. pp. 96-102 ordered list A type of list that contains items, usually numbered, that must appear in a particular sequence. (p. 100) unordered list A list that contains items that can appear in any order. (p. 100)

13 With text editors you cannot see how your page will appear in a Web browser while you are creating it. You must save the HTML document and then view it in a browser. 4.2 Using a Text Editor Viewing an HTML Page pp. 96-102

14 Activity 4A – Creating Folders to Organize a Site (p. 96) Activity 4B – Creating and Saving an HTML Document (p. 98) Activity 4C – Adding Color and Formatting Text Using HTML (p. 100) Activity 4D – Creating an Unordered List Using HTML (p. 101) Activity 4E – Viewing HTML in a Browser (p. 102) 4.2 Using a Text Editor pp. 96-102

15 4.3 Enhancing and Testing Your Page Guide to Reading Main Ideas Use image tags to insert graphics using HTML. You can create links by using an anchor tag to specify the clickable area. A link can be absolute or relative. Web pages must be tested. Key Terms text link graphic link anchor tag absolute link relative link debugging testing pp. 103-108

16 You can insert images into pages using the tag and assign the five common attributes: Source ( src ) Alternative text ( alt ) Align ( align ) Width ( width ) Height ( height ) 4.3 Enhancing and Testing Your Page Adding Images Using HTML pp. 103-108

17 4.3 Enhancing and Testing Your Page Inserting Links Using HMTL There are several different types of links using HTML. Anchor tag Text link Graphic link anchor tag An HTML tag used to create hyperlinks. The tag identifies what is clicked on and where it links to. (p. 104) text link A type of link in which users click text to activate the link. (p. 105) graphic link A type of link in which users click on an image to activate the link. (p. 105) pp. 103-108

18 4.3 Enhancing and Testing Your Page Inserting Links Using HMTL absolute relative Text and graphic links are either absolute or relative. absolute link A type of link that contains the complete URL or path of the file being linked to. (p. 105) relative link A type of link that is used when linking to a local file, such as one within the same Web site. (p. 105) pp. 103-108

19 4.3 Enhancing and Testing Your Page Testing a Web Page debug test You should debug and test your Web site often to make sure that the page displays properly and all links are connected correctly. debugging The process of locating and correcting errors in a Web site’s HTML code. (p. 107) testing The process of repeatedly checking the Web page and site to make certain that elements display as designed. (p. 107) pp. 103-108

20 The World Wide Web Consortium (W3C) releases specifications, called recommendations, on HTML. You can read the complete specifications on the W3C Web site. The specifications developed by this governing body help ensure that Web designers create pages that follow specific standards and can be displayed by any browser that also follows these specifications. 4.3 Enhancing and Testing Your Page HTML and the W3C pp. 103-108

21 Activity 4F – Inserting and Image Using HTML (p. 104) Activity 4G – Inserting Absolute Links using HTML (p. 106) Activity 4H – Testing an HTML Document (p. 107) 4.3 Enhancing and Testing Your Page pp. 103-108

22 4.4 FrontPage versus Notepad Guide to Reading Main Ideas A Web site development application allows you to create Web sites by clicking buttons instead of typing HTML commands into a text document. Key Terms border embedded file pp. 110-114

23 The major advantage of using FrontPage is that you can see how your final page will appear. FrontPage allows you to quickly change attributes, such as color, and see how they look. 4.4 FrontPage versus Notepad Adding Color and Formatting Text in FrontPage pp. 110-114

24 4.4 FrontPage versus Notepad Adding Graphics and Links border When using FrontPage, adding a border can add visual interest to your page. embedded files When you save a page, you will be asked where to save embedded files. border A visual break on the page that is used to add interest and to separate elements. (p. 113) embedded file File that you add to the FrontPage document from other applications. (p. 113) pp. 110-114

25 Always spell check and proofread your Web page. Also view your Web page in more than one browser to make sure each line works properly. 4.4 FrontPage versus Notepad Testing a Web Page pp. 110-114

26 Activity 4I – Creating and Formatting a page in FrontPage (p. 110) Activity 4J – Adding Headings and Unordered Lists in FrontPage (p. 112) Activity 4K – Inserting a Graphic and Links in FrontPage (p. 63) Activity 4L – Testing a Web Page in FrontPage (p. 114) 4.4 FrontPage versus Notepad pp. 110-114

27 For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.webdesign.glencoe.com Chapter 4 Resources

Download ppt "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."

Similar presentations

3.02D HTML Overview 3.02 Develop webpages.

3.02D HTML Overview 3.02 Develop webpages.
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.

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.
HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.

Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.

Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
HTML Computing Concepts HTML - An Introduction 1.

HTML Computing Concepts HTML - An Introduction 1.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Marking Up With Html: A Hypertext Markup Language Primer

Marking Up With Html: A Hypertext Markup Language Primer
HTML Introduction HTML

HTML Introduction HTML
Database-Driven Web Sites, Second Edition1 Chapter 2 INTRODUCTION TO HTML.

Database-Driven Web Sites, Second Edition1 Chapter 2 INTRODUCTION TO HTML.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
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.

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.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.

Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.

Similar presentations

Ads by Google