Creating and Editing a Web Page. Chapter 2 HTML

Size: px

Start display at page:

Download "Creating and Editing a Web Page. Chapter 2 HTML"

Daisy Ford
7 years ago
Views:

1 Creating and Editing a Web Page Chapter 2 HTML

2 Chapter Objectives Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter a centered heading and a paragraph of text Chapter 2: Creating and Editing a Web Page 2

3 Chapter Objectives Create an unordered, ordered, or definition list Save an HTML file Use a browser to view a Web page Activate Notepad Identify Web page image types and attributes Chapter 2: Creating and Editing a Web Page 3

4 Chapter Objectives Add an image, change the background color of a Web page, and add a horizontal rule View the HTML source code in a browser Print a Web page and an HTML file Quit Notepad and a browser Chapter 2: Creating and Editing a Web Page 4

5 Plan Ahead Complete Web page planning Analyze the need for the Web page Choose the content for the Web page Determine where to save the Web page Chapter 2: Creating and Editing a Web Page 5

6 Plan Ahead Identify how to format various elements of the Web page Find appropriate graphical images Establish where to position and how to format the graphical images Test the Web page for XHTML compliance Chapter 2: Creating and Editing a Web Page 6

7 Chapter 2 Html Notes Window Elements The title of a webpage is the text that appears on the title bar of the browser window when the web page appears. The title also is the name assigned to the page if a user adds the page to the browser s list of favorites, or bookmarks The body of the Web page contains the information that is displayed in the browser window. The background of a Web page is a solid color, a picture, or a graphic against which the other elements on the Web page appear. Notepad is a basic text editor you can use for simple documents or for creating Web pages using HTML.

8 Extensions for a HTML Document!.html.htm

9 Hyperlink Elements A link is text, an image, or another Web page element that you click to instruct the browser to go to a location in a file or to request a file from a server. <!DOCTYPE> tag is used to tell the browser which HTML or XHTML version and type the document uses. Three types Strict, Transitional, frameset <meta/> Indicates hidden information about the Web page

10 TABLE 2-1 HTML TAG <!DOCTYPE> <html> </html> <head> </head> <meta /> <title> </title> <body> </body> <hn> </hn> <p> </p> <ul> </ul> <hr /> <br /> <li></li> FUNCTION Indicates the version and type of HTML used; includes a URL reference to a DTD Indicates the start and end of an HTML document Indicates the start and end of a section of the document used for the title and other document header information Indicates hidden information about the Web page Indicates the start and end of the title. The title does not appear in the body of the Web page, but appears on the title bar of the browser. Indicates the start and end of the Web page body Indicates the start and end of the text section called a heading; sizes range from <h1> through <h6> Indicates the start of a new paragraph; inserts a blank line above the new paragraph. Indicates the start and end of an unordered (bulleted) list. Inserst a horizontal line Inserts a line break at the point where the tag appears Inserts a line break at the point where the tag appears.

11 Chapter 2 <h1 align= center >Please Help!</h1> example of center heading <p>text goes here.</p> example of paragraph code which is inserted within the <body> tag.

12 Horizontal Rules Breaks up text on Web Page Code <hr/> <hr / size= 1 > <hr / size= 5 >

13 Table 2-5 Definition List <dl></dl> Purpose Start and end a definition list <dt> Identify a term <dd> Indentify the definition of the term directly above.

14 Text Elements Normal text is the default format used for the main content of the Web page. Normal text can also be used in a series of text items called list. Two types of list: Ordered - Recipe Unordered shopping list Headings are used to set off paragraphs of text or different sections of a page

15 List Ordered List <ol></ol> Numbered List Unordered list <ul></ul> Bullet list <li> Tag- are used to define a list item in an ordered or unordered lists

16 Unordered list < type= disc > < >Item 1 type disc</li> <li>item 2 type disc</li> </ul> <ul type= square > <li>item 1 type square</li> <li>item 2 type square</li> </ul>

17 Ordered List <ol type= 1 > < >Item 1 type 1</li> <li>item 2 type 1</li> </ol> <ol type= A > <li>item 1 type A</li> <li>item 2 type A</li> </ol>

18 Create an Unordered List I am picking up these people John Frank Bill Amos Eustice

19 Deprecated Tags Means that other means of accomplishing the task are preferred: Deprecated features may become obsolete in future versions of HTML, though browsers that support the features may continue to support them.

20 Table 2-6 Image Types and Uses Image Type Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) Use Use for images with few colors (<256) Allows for ransparent backgrounds Use for images with many colors(>256), such as photographs Use for images with many colors(>256), such as photographs Newest format for images Use for all types of images Allows for variation in transparency GRAPHICS ARE NOT PART OF THE HTML FILE! This will be on the quiz and test!

21 Table 2-7 Image Attributes Attribute Align Alt Border Function Controls alignment Can be set to bottom, middle, top, left, or right Alternative text to display when an image is being loaded Especially useful for screen readers, which translate information on the computer screen into audio output Should be a brief representation of the purpose of the image Generally should stick to 50 characters or less Defines border width Height Hspace Src Vspace width Defines the height of the image Improves loading time Defines the horizontal space that separates the image from the text Defines the URL of the image to be loaded Defines the vertical space that separates the image from the text Defines the width of the image Improves loading time

22 Image Elements An image used in a web page is called an inline image which means the image or graphic file is not part of the HTML file. 3 types of inline images Image map special type of inline image in which you define one or more areas as hotspots. Hot spot in an area of an image that activates a function when selected. Animated meaning they include motion and can change in appearance.

23 Other types of file format.bmp (bitmap).tiff

24 Background colors Code Insert this code in the Body tag <body bgcolor= color >