1 / 41

HTML Basics

HTML Basics. YOU WILL LEARN TO…. 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. HTML Basics. YOU WILL LEARN TO…. Section 4.3

miya
Download Presentation

HTML Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Basics YOU WILL LEARN TO… • 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. HTML Basics YOU WILL LEARN TO… • 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 Dreamweaver • Test a Web page in Dreamweaver

  3. Learning Target 4.1 • Format HTML tags • Identify HTML guidelines

  4. http://www.howcast.com/videos/474912-HTML-Tutorial-What-Is-HTMLhttp://www.howcast.com/videos/474912-HTML-Tutorial-What-Is-HTML

  5. pp. 98-101 HTML Coding 4.1 Focus on 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

  6. pp. 98-101 HTML Coding 4.1 HTML Tags Knowing Hypertext Markup Language (HTML) will help you understand how Web site development applications like Dreamweaver work. 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. 98) HTML tag Text contained between two angle brackets (< >) that tells the Web browser how to display a page’s content. (p. 98)

  7. pp. 98-101 HTML Coding 4.1 HTML Tags starting tag The first of a pair of HTML tags; also known as an opening tag. (p. 98) ending tag The last of a pair of HTML tags; also known as a closing tag. (p. 98) HTML tags often come in startingtag and ending tag sets.

  8. pp. 98-101 HTML Coding 4.1 HTML Tags nested tag An HTML tag that is enclosed within another set of tags. (p. 99) empty tag An HTML tag that requires only an opening tag; also known as an orphan tag. (p. 99) Nested tags refers to the order in which HTML tags appear. Empty tags do not require an ending tag.

  9. pp. 98-101 HTML Coding 4.1 HTML Guidelines and Standards The World Wide Web Consortium (W3C) develops specifications for the use of HTML and other programming languages that are used on the Internet. These specifications help to ensure that all Web pages can be displayed by any browser that follows W3C specifications.

  10. pp. 98-101 HTML Coding 4.1 HTML Guidelines and Standards 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.

  11. pp. 98-101 HTML Coding 4.1 HTML Guidelines and Standards source code The text and HTML commands used to create the Web page. (p. 101) You can see the HTML commands used to create any Web page by viewing its source code.

  12. pp. 98-101 HTML Coding 4.1 Section Assessment Evaluate An HTML tag that is enclosed within another set of tags is called what type of tag? A. a starting tag B. an empty tag C. an ending tag D. a nested tag D. a nested tag

  13. Complete Pg. 101 #1-5 in your notes

  14. Learning Target 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

  15. pp. 102-108 Using a Text Editor 4.2 Focus on 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

  16. pp. 102-108 Using a Text Editor 4.2 Organizing Files and Folders 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.

  17. pp. 102-108 Using a Text Editor 4.2 Using Notepad Notepad can be used as a text editor for creating Web sites. When you save an HTML document in Notepad, use the Save As function to name the file and choose the .html 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. 103)

  18. pp. 102-108 Using a Text Editor 4.2 Adding Attributes using HTML • Some HTML tags can contain attributes to specify a tag’s 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. 104)

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

  20. pp. 102-108 Using a Text Editor 4.2 Viewing an HTML Page 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.

  21. pp. 102-108 Using a Text Editor 4.2 • Activity 4A – Create Folders to Organize a Site (p. 102) • Activity 4B – Create and Saving an HTML Document (p. 104) • Activity 4C – Add Color and Format Text Using HTML (p. 106) • Activity 4D – Create an Unordered List Using HTML (p. 107) • Activity 4E – View HTML in a Browser (p. 108)

  22. pp. 102-108 Using a Text Editor 4.2 Section Assessment Analyze Which file name extension should you choose when you save an HTML file in Notepad? A. .html B. .doc C. .xls D. .mlth A. .html

  23. Learning Target 4.3

  24. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Focus on 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 anchor tag text link graphic link relative link absolute link debugging testing

  25. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Adding Images Using HTML • You can insert images into pages using the <IMG> tag and assign these common attributes: • Source (src) • Alternative text (alt) • Align (align) • Border (border) • Width (width) • Height (height) <IMG>src=“images/book.gif” alt=“Books” align=“center” border=“0” width=“40” height=“30”>

  26. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Inserting Links Using HMTL • There are different types of HTML links. • Anchor tag (<A></A>) • 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. 110) text link A type of link in which users click text to activate the link. (p. 111) graphic link A type of link in which users click an image to activate the link. (p. 111)

  27. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Inserting Links Using HMTL Text and graphic links are either relative or absolute. The anchor tag set uses the href (short for Hypertext Reference)attribute to tell the Web browser where it needs to link to. relative link A type of link that is used when linking to a local file, such as one within the same Web site. (p. 111) absolute link A type of link that contains the complete URL or path of the file being linked to. (p. 112)

  28. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Testing a Web Page Debugging and testing your Web site will help you to make sure that the pages display properly and all links are connected correctly. debugging The process of locating and correcting any obvious errors in a Web site’s HTML code. (p. 113) testing The process of repeatedly checking the Web page and site to make certain that elements display as designed. (p. 113)

  29. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 • Activity 4F – Insert and Image Using HTML (p. 110) • Activity 4G – Insert Absolute Links Using HTML (p. 112) • Activity 4H – Test an HTML Document (p. 113)

  30. pp. 109-114 Enhancing and Testing Your HTML Page 4.3 Section Assessment True/False Text and graphic links are either relative or absolute. True. Text and graphics are either relative or absolute. A relative link is used when linking to a local file. An absolute link contains the complete URL or path of the of the file being linked to.

  31. Learning Target 4.4

  32. pp. 116-122 Dreamweaver Versus Notepad 4.4 Focus on 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 color palette border

  33. pp. 116-122 Dreamweaver Versus Notepad 4.4 Adding Color and Formatting Text in Dreamweaver The major advantage of using Dreamweaver is that you can see approximately how your final page will appear while you are working on it. This allows you to make adjustments, such as changing the font size or background color, as you go.

  34. pp. 116-122 Dreamweaver Versus Notepad 4.4 Adding Color and Formatting Text in Dreamweaver • In Dreamweaver, there are two ways to select background colors: • Enter hexadecimal numbers into the Background color box in the Page Properties dialog box. • Choose a color from the Dreamweaver color palette. color palette A menu of colors available in the Dreamweaver program. (p. 116)

  35. pp. 116-122 Dreamweaver Versus Notepad 4.4 Adding Graphics and Links Adding a border can add visual interest to your page. border A visual break on the page that is used to add visual interest and to separate elements. (p. 120)

  36. pp. 116-122 Dreamweaver Versus Notepad 4.4 Testing a Web Page 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.

  37. pp. 116-122 Dreamweaver Versus Notepad 4.4 • Activity 4I – Create and Format a page in Dreamweaver (p. 117) • Activity 4J – Add Headings and Unordered Lists in Dreamweaver (p. 118) • Activity 4K – Insert a Graphic and Links in Dreamweaver (p. 120) • Activity 4L – Test a Web Page in Dreamweaver (p. 122)

  38. pp. 116-122 Dreamweaver Versus Notepad 4.4 Section Assessment True/False One major advantage of Dreamweaver is that it allows you to create Web sites by keying HTML commands instead of clicking buttons. False. Dreamweaver’s major advantage is that you can see how your page will turn out while you are working on it.

  39. HTML Basics Chapter Review Identify The attributes src, alt, align, border, width, and height are all commonly used with which type of tag? A. Ordered list B. Image C. Nested D. Anchor B. Image

  40. HTML Basics Chapter Review Analyze Why should you always test and debug your Web pages before publishing them? Debugging and testing a Web site ensures that all of the pages display properly and that all links work correctly.

  41. HTML Basics Chapter Resources For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com.

More Related