Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating and Editing a Web Page

Published byLionel Fontaine Modified over 6 years ago

Similar presentations

Presentation on theme: "Creating and Editing a Web Page"— Presentation transcript:

1 Creating and Editing a Web Page
Project 1 Creating and Editing a Web Page

2 Objectives Identify elements of a Web Page Start Notepad
Describe the Notepad window Enter the <HTML>, <HEAD>, <TITLE>, and <BODY> tags Enter a paragraph of text, a bulleted list, and HTML tags Save an HTML file

3 Objectives Change the background color of a Web page Center a heading
Start your browser View the HTML file in your browser Print an HTML file from Notepad Print a Web page from your browser

4 Objectives Use a definition list Quit Notepad Quit your browser

5 Web Page Elements Title Bookmarks Body Background Normal text
Paragraph Bulleted list Headings Images Horizontal Rules Image map Hotspot Animated images Hyperlinks

6 Web Page Elements title body heading horizontal rule image paragraph
bulleted list links animated image

7 Starting Notepad Point to Accessories Click Notepad Point to Programs
Click Start

8 The Notepad Window Click Maximize

9 The Notepad Window menu bar Untitled – Notepad window text area
scroll bars

10 Wrapping Text in Notepad
The text you type will scroll continuously to the right unless the WordWrap feature is turned on Select Word Wrap in the Edit menu

11 Entering HTML Tags and Text
Four tags define the overall structure of standard Web pages: <HTML> and </HTML> Indicates file is an HTML document <HEAD> and </HEAD> Introduction to the rest of the file Indicates the area where the title will be placed <TITLE> and </TITLE> Indicates the title that will display in the title bar <BODY> and </BODY> Indicates the boundaries of the Web page

12 HTML Tags and Functions

13 Entering Initial HTML Tags
initial tags insertion point It is good form to be consistent when you type tags, adhering to a standard practice

14 Entering Initial HTML Tags
all Web page content will be placed here ending BODY and HTML tags If you notice an error in the text, use the BACKSPACE key to erase all the characters back to and including the one that is incorrect

15 Headings Used to separate text and introduce new topics
Vary in size, from <H1> through <H6> Use the same sized heading for the same level of topic

16

17 Entering Headings Since the Chiaravalle Pizza
main heading Since the Chiaravalle Pizza heading is the first line after the BODY tag, it will be the first thing displayed on the Web page

18 Paragraphs Most text on Web pages is in paragraph format
The <P> tag has an optional ending tag When a browser finds a <P> tag, it starts a new line and adds a paragraph break Try not to type large sections of text without having paragraph breaks

19 Entering Paragraphs The <BR> (break) tag breaks a
paragraph tag and text The <BR> (break) tag breaks a line of text and starts a new line, but does not add vertical spacing like a <P> tag

20 Creating a List Lists structure your text in outline format
Unordered (bulleted) lists <UL> and </UL> marks the beginning and end of unordered lists Ordered (numbered) lists <OL> and </OL> marks the beginning and end of ordered lists The <LI> and </LI> tags define list items The TYPE attribute defines the default bullet or number type

21 Unordered Lists <H3>Unordered Lists</H3>
<UL TYPE=“disc”> <LI>First item – type disc</LI> <LI>Second item – type disc</LI> </UL> <UL TYPE=“square”> <LI>First item – type square</LI> <LI>Second item – type square</LI> <UL> <UL TYPE=“circle”> <LI>First item – type circle</LI> <LI>Second item – type circle</LI>

22 Ordered Lists <H3>Ordered Lists</H3> <OL TYPE=“1”>
<LI>First item – type 1</LI> <LI>Second item – type 1</LI> </OL> <OL TYPE=“A”> <LI>First item – type A</LI> <LI>Second item – type A</LI> <OL TYPE=“a”> <LI>First item – type a</LI> <LI>Second item – type a</LI> <OL TYPE=“I”> <LI>First item – type I</LI> <LI>Second item – type I</LI> <OL TYPE=“i”> <LI>First item – type i</LI> <LI>Second item – type i</LI>

23 Creating a Bulleted List
tags and text

24 Saving the HTML File You must save the file before you can view it in your browser HTML files must end with an extension of .htm or .html .html extensions only work on Web servers running an operating system that supports long filenames

25 With a floppy disk in drive A, select Save As from the File menu
Saving the HTML File With a floppy disk in drive A, select Save As from the File menu

26 Saving the HTML File The Save As dialog box File name text box

27 Type page1.htm in the File name text box
Saving the HTML File Click the Save in box arrow Type page1.htm in the File name text box

28 Point to and click 3½ Floppy (A:) in the Save in drop-down list
Saving the HTML File Point to and click 3½ Floppy (A:) in the Save in drop-down list

29 Saving the HTML File Click the Save button

30 Saving the HTML File new file name

31 Using a Browser to View a Web Page
After you save your HTML file, you may view your Web page in a browser The HTML file displays in your browser just as it would on the Web Windows allows you to view the page in your browser while keeping Notepad open

32 Starting Your Browser Locate and click on the icon
in your Start menu that identifies your Web browser This varies on each computer

33 standard buttons toolbar
Your Browser maximize button Internet Explorer Window menu bar standard buttons toolbar address bar default startup page status bar

34 Opening a Web Page in Your Browser
Click the Address bar

35 Opening a Web Page in Your Browser
Type a:\page1.htm in the Address text box, then press ENTER

36 Your Web Page title main heading paragraph H2 heading body of Web page
bulleted list

37 Click the Notepad button
Activating Notepad Click the Notepad button on the taskbar

38 Activating Notepad Now it is time to add some elements to the Web page
that make it more interesting

39

40 Adding Background Color
Locate the 6-character code of the color you wish to use

41 Adding Background Color
Background color code goes at the end of the BODY tag

42 Centering the Heading Text can be aligned differently on the page
ALIGN = “LEFT” ALIGN = “RIGHT” ALIGN = “CENTER” The default alignment for headings is left-alignment

43 center-alignment code
Centering the Heading center-alignment code

44 Adding a Horizontal Rule
Horizontal Rules are graphical images that act as dividers The tag used to insert a Horizontal Rule is <HR> Horizontal Rules are easy to insert

45 Adding a Horizontal Rule
<HTML> <HEAD><TITLE>Horizontal Rules</TITLE> </HEAD> <BODY BGCOLOR=#94D6E7> <P>Default HR</P> <HR> <P>HR with size=1</P> <HR SIZE=1> <P>HR with size=5</P> <HR SIZE=5> <P>HR with size=10</P> <HR SIZE=10> <P>HR with size=10 and noshade</P> <HR SIZE=10 NOSHADE> </BODY> </HTML>

46 Adding a Horizontal Rule
horizontal rule tag

47 Viewing the Modified File in Your Browser
after saving the modified file, click the Refresh button in your browser

48 Viewing Your Web Page Source
You can view the HTML code on any Web page from within your browser This allows you to see how others created their Web pages

49 Viewing Your Web Page Source
Click Source in the View menu

50 Viewing Your Web Page Source
HTML source code

51 Printing a Copy 1. Ready the printer
2. Select Print from the File menu 3. Click the OK button in the Print dialog box 4. Retrieve the printout

52 From the Notepad window, select Print from the File menu
Printing the HTML From the Notepad window, select Print from the File menu

53 Quitting Notepad and Your Browser
Click the Close button on the Notepad title bar

54 Quitting Notepad and Your Browser
Click the Close button in your browser’s title bar

55 Definition Lists Used to list information without the standard bullet or numbered list symbols Syntax is not as straightforward as <UL>, <OL>, or <LI> <DL> and </DL> start and end the list <DT> and <DD> are used to create the actual list elements, terms, and definitions

56 Definition Lists

57 definition term start definition list start definition start definition list end

58 definition terms definitions

59 Summary Identify elements of a Web Page Start Notepad
Describe the Notepad window Enter the <HTML>, <HEAD>, <TITLE>, and <BODY> tags Enter a paragraph of text, a bulleted list, and HTML tags Save an HTML file

60 Summary Change the background color of a Web page Center a heading
Start your browser View the HTML file in your browser Print an HTML file from Notepad Print a Web page from your browser

61 Summary Use a definition list Quit Notepad Quit your browser

62 What You Should Know

63 Project 1 Complete

Download ppt "Creating and Editing a Web Page"

Similar presentations

Creating and Editing a Web Page Using Inline Styles

Creating and Editing a Web Page Using Inline Styles
Chapter 5 Creating an Image Map

Chapter 5 Creating an Image Map
Creating and Editing a Web Page

Creating and Editing a Web Page
Creating a Form on a Web Page

Creating a Form on a Web Page
HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.

HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.
Web Page Development Identify elements of a Web Page Start Notepad

Web Page Development Identify elements of a Web Page Start Notepad
Creating and Editing a Web Page

Creating and Editing a Web Page
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
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.

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.
HTML Concepts and Techniques Fourth Edition Project 3 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.

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Creating Tables in a Web Site

Creating Tables in a Web Site
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.

HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.

Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.
Microsoft Office 2003- Illustrated Introductory, Premium Edition with Word 2003 Getting Started.

Microsoft Office Illustrated Introductory, Premium Edition with Word 2003 Getting Started.
Project 1: Creating a Dreamweaver Web Page and Local Site 1 Project Objectives Add a background image Open and close panels Display and describe the Property.

Project 1: Creating a Dreamweaver Web Page and Local Site 1 Project Objectives Add a background image Open and close panels Display and describe the Property.
Creating and Editing a Web Page using HTML IMED1316.

Creating and Editing a Web Page using HTML IMED1316.
Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.

Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.

HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.

XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.

Similar presentations

Ads by Google