Presentation is loading. Please wait.

Presentation is loading. Please wait.

XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.

Similar presentations


Presentation on theme: "XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML."— Presentation transcript:

1 XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML

2 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

3 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

4 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

5 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

6 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

7 XP Review 1New Perspectives on JavaScript, Comprehensive7 Viewing a Document on the World Wide Web

8 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

9 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

10 XP Review 1New Perspectives on JavaScript, Comprehensive10 Versions of HTML and XHTML

11 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

12 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

13 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

14 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

15 XP Review 1New Perspectives on JavaScript, Comprehensive15 Element Attributes Provide browsers with additional information about how to treat them Attributes –Inserted into element’s opening tag using the syntax attribute1="value1" attribute2="value2"

16 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

17 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

18 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 user’s Web browser –Web document can only have one Head element –Can contain meta elements

19 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

20 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

21 XP Review 1New Perspectives on JavaScript, Comprehensive21 Creating Paragraphs Paragraphs –Another popular block-level element To mark content as a paragraph content

22 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

23 XP Review 1New Perspectives on JavaScript, Comprehensive23 Creating a Generic Block div element –Generic container for any block-level content –Syntax content

24 XP Review 1New Perspectives on JavaScript, Comprehensive24 Block-level Elements

25 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

26 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 element’s content

27 XP Review 1New Perspectives on JavaScript, Comprehensive27 Character-Formatting Elements

28 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"

29 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

30 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

31 XP Review 1New Perspectives on JavaScript, Comprehensive31 Special Characters and Codes

32 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

33 XP Review 1New Perspectives on JavaScript, Comprehensive33 MIME Types

34 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

35 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 cell’s border

36 XP Review 1New Perspectives on JavaScript, Comprehensive36 Creating Frames and Rules Frame attribute –Defines which sides of a table have borders –Syntax...

37 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

38 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

39 XP Review 1New Perspectives on JavaScript, Comprehensive39 Parts of a Web Form

40 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

41 XP Review 1New Perspectives on JavaScript, Comprehensive41 Input Types

42 XP Review 1New Perspectives on JavaScript, Comprehensive42 Creating Option Buttons

43 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

44 XP Review 1New Perspectives on JavaScript, Comprehensive44 Creating a Frameset Frames are arranged in a frameset General syntax title frames

45 XP Review 1New Perspectives on JavaScript, Comprehensive45 Frame Layouts in Rows and Columns

46 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"

47 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

48 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

49 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


Download ppt "XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML."

Similar presentations


Ads by Google