XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML XP Review 1New Perspectives on JavaScript, Comprehensive2 Objectives Understand the history of the Web and HTML Study the basic syntax for creating elements and attributes Learn to create block-level and inline elements XP Review 1New Perspectives on JavaScript, Comprehensive3 Objectives Understand how to insert nontextual objects such as inline images into a Web page Study how to create and populate Web tables Learn how to work with Web forms and their content Understand how to create Web frames and inline frames XP Review 1New Perspectives on JavaScript, Comprehensive4 Introducing the World Wide Web and HTML Internet Formerly known as ARPANET Foundations for World Wide Web Laid in 1989 by Timothy Berners-Lee and other researchers at the CERN nuclear research facility XP Review 1New Perspectives on JavaScript, Comprehensive5 Introducing the World Wide Web and HTML Researchers at CERN Developed a system of interconnected documents using hypertext Stored documents on servers Made documents accessible client computers Hypertext Allows users to click items called links to open documents XP Review 1New Perspectives on JavaScript, Comprehensive6 Web Pages, Servers, and Browsers Web pages Documents on the Web Can contain images, video and sound clips Stored on Web servers Web browser Used to view a Web page XP Review 1New Perspectives on JavaScript, Comprehensive7 Viewing a Document on the World Wide Web XP Review 1New Perspectives on JavaScript, Comprehensive8 HTML: The Language of the Web Web page Text file written in Hypertext Markup Language (HTML) Markup language Describes structure and content of a document Extensions Differences in the language introduced by competing browsers XP Review 1New Perspectives on JavaScript, Comprehensive9 HTML: The Language of the Web World Wide Web Consortium (W3C) Creates standards for browser manufacturers Has no enforcement power but recommendations are usually followed Provides online tutorials, documentation, and quizzes XP Review 1New Perspectives on JavaScript, Comprehensive10 Versions of HTML and XHTML XP Review 1New Perspectives on JavaScript, Comprehensive11 HTML: The Language of the Web Future of Web development Focused on XML and XHTML Web page author guidelines Become well versed in the history of HTML Know your market Test XP Review 1New Perspectives on JavaScript, Comprehensive12 Creating an HTML Document Element A distinct feature of a document Each is marked within the HTML file with a tag General syntax of a two sided tag content XP Review 1New Perspectives on JavaScript, Comprehensive13 Creating an HTML Document Scope of a two-sided tag identified by its Opening tag ( ) and its closing tag ( ) One-sided tag Contains no content Syntax: Empty elements Elements that employ one-sided tags XP Review 1New Perspectives on JavaScript, Comprehensive14 White Space and HTML White space Blank spaces, tabs, and line breaks within the file Browsers See no difference between a blank space, a tab, and a line break XP Review 1New Perspectives on JavaScript, Comprehensive15 Element Attributes Provide browsers with additional information about how to treat them Attributes Inserted into elements opening tag using the syntax attribute1="value1" attribute2="value2" XP Review 1New Perspectives on JavaScript, Comprehensive16 The Structure of an HTML File Root element Must be included in a markup document Contains all other elements in the document Basic structure of an HTML document content XP Review 1New Perspectives on JavaScript, Comprehensive17 The Structure of an HTML File Head element Contains information about the document Body element Contains content to be displayed in the Web page Nesting The technique of placing one element within another XP Review 1New Perspectives on JavaScript, Comprehensive18 Working with the Document Head Title element Required element of head element Specifies page title that is displayed in title bar of a users Web browser Web document can only have one Head element Can contain meta elements XP Review 1New Perspectives on JavaScript, Comprehensive19 Working with Block-level Elements Block-level element Contains content displayed in a separate section within the page Inline elements Placed within blocklevel elements Not separated from other page content XP Review 1New Perspectives on JavaScript, Comprehensive20 Creating Headings Headings Titles placed within the page body HTML supports six heading elements, numbered h1 through h6 Syntax to mark a heading element content XP Review 1New Perspectives on JavaScript, Comprehensive21 Creating Paragraphs Paragraphs Another popular block-level element To mark content as a paragraph content XP Review 1New Perspectives on JavaScript, Comprehensive22 Creating Lists Ordered list Used for items that have a prescribed sequential order Unordered list Used for items do not need to be placed in any special order Definition list Contains list of definition terms with each term followed by a definition description XP Review 1New Perspectives on JavaScript, Comprehensive23 Creating a Generic Block div element Generic container for any block-level content Syntax content XP Review 1New Perspectives on JavaScript, Comprehensive24 Block-level Elements XP Review 1New Perspectives on JavaScript, Comprehensive25 Working with Inline Elements Character-formatting element Used to define format of text within a block Logical element Created with tags like and Describes nature of enclosed content but not how content should appear XP Review 1New Perspectives on JavaScript, Comprehensive26 Working with Inline Elements Physical element Created with tags such as and Describes how text should appear Does not indicate nature of elements content XP Review 1New Perspectives on JavaScript, Comprehensive27 Character-Formatting Elements XP Review 1New Perspectives on JavaScript, Comprehensive28 Working with IDs and Classes id attribute Used to identify a distinct element Syntax: id="text" Class attribute Used to mark a group of elements Syntax: class="text" XP Review 1New Perspectives on JavaScript, Comprehensive29 Creating Links To change content into a link Mark content with a two-sided tag: content Example Pixal Products XP Review 1New Perspectives on JavaScript, Comprehensive30 Working with Images and Other Nontextual Content Inline images Must be placed within a block-level element Most widely viewable in one of two file formats GIF or JPEG To mark an inline image XP Review 1New Perspectives on JavaScript, Comprehensive31 Special Characters and Codes XP Review 1New Perspectives on JavaScript, Comprehensive32 Embedding Media Clips Embedding multimedia clips Embed element Not part of the official HTML specifications Support may be discontinued in the future XP Review 1New Perspectives on JavaScript, Comprehensive33 MIME Types XP Review 1New Perspectives on JavaScript, Comprehensive34 Creating Web Tables Tables Marked using the two sided tag Row groups Used to indicate role that each table row plays in table Creating a table caption content XP Review 1New Perspectives on JavaScript, Comprehensive35 Setting the Border, Spacing, and Padding Size Creating a table border is... To change cell spacing... Cell padding Space between content of each table cell and the cells border XP Review 1New Perspectives on JavaScript, Comprehensive36 Creating Frames and Rules Frame attribute Defines which sides of a table have borders Syntax... XP Review 1New Perspectives on JavaScript, Comprehensive37 Working with Column Groups Column groups Allow you to format the appearance of every cell in a column To define a column group, insert the following element after the opening tag XP Review 1New Perspectives on JavaScript, Comprehensive38 Creating Web Forms Control elements Elements of a form in which a user can enter information Input boxes Supported by Web forms Selection lists, option buttons Check boxes, group boxes Text areas, form buttons XP Review 1New Perspectives on JavaScript, Comprehensive39 Parts of a Web Form XP Review 1New Perspectives on JavaScript, Comprehensive40 Creating and Formatting Input Boxes Input box By default, displays 20 characters of text on a single line To change width XP Review 1New Perspectives on JavaScript, Comprehensive41 Input Types XP Review 1New Perspectives on JavaScript, Comprehensive42 Creating Option Buttons XP Review 1New Perspectives on JavaScript, Comprehensive43 Working with Frames Frame A section of the browser window capable of displaying the content of an entire Web page Common use of frames Displaying a list of links in one frame while Showing individual pages from the site in another XP Review 1New Perspectives on JavaScript, Comprehensive44 Creating a Frameset Frames are arranged in a frameset General syntax title frames XP Review 1New Perspectives on JavaScript, Comprehensive45 Frame Layouts in Rows and Columns XP Review 1New Perspectives on JavaScript, Comprehensive46 Formatting Frames By default Scroll bar is displayed when the content of the source page does not fit within a frame Scrolling attribute Used to override default setting Syntax: scrolling="type" XP Review 1New Perspectives on JavaScript, Comprehensive47 Working with Frames and Links To assign a name to a frame Add the name attribute to the frame element Syntax for name attribute Reserved target names Cause a linked document to appear within a specific location in the browser XP Review 1New Perspectives on JavaScript, Comprehensive48 Using the noframes Element Frame-blind browsers Browsers that do not support frames noframes element Used to mark a section of HTML file for code that browsers frame-blind browsers can use A document can Contain only one noframes element XP Review 1New Perspectives on JavaScript, Comprehensive49 Creating Inline Frames Floating frame, or inline frame Displayed as a separate box or window within a Web page Syntax alternate content