Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
XP New Perspectives on Creating Web Pages with HTML & XHTML Developing a Basic Web Page 1 XP Objectives Upon completion of this lesson, you should be able to: 1. 2. 3. 4. 5. 6. 7. 8. 9. HTML History HTML Elements HTML Coding Practices HTML Versions Review the structure of the World Wide Web Learn the basic principles of Web documents Create a HTML document View an HTML file using a Web browser Explain the basic syntax of HTML. 2 XP Objectives (HTML & XHTML) 1. 2. 3. 4. 5. 6. Do simple markup of a text document in HTML. Use document tags (HTML, HEAD, BODY, and TITLE). Use formatting tags (P, BR, and HR) with some of their attributes. Use text style tags (I, B, U, and FONT) with some of their attributes. Use heading and list tags for organizing the document. Use the image tag (IMG) with its attributes. 3 XP Objectives HTML (Cont.) 1. 2. 3. 4. 5. 6. 7. Use the anchor tag (A) with its main attribute to link to another Web page. Test your HTML documents. Use HTML tags for text, headings, paragraphs, and lists Insert character tags into an HTML document Insert an inline graphic image into a HTML document Add special characters to an HTML document Insert horizontal lines into an HTML document 4 XP Introducing the World Wide Web In order for computers to share resources efficiently, they can be linked together in one of the following structured networks: linked within a local area network (LAN) linked across a wide area network (WAN) Networks are very useful, their use led to a “network of networks” called the Internet. 5 XP The Internet The Internet consists of millions of interconnected computers that enable users to communicate and share information. The World Wide Web is a service of the Internet that was developed to make the Internet easier to use and give quick access to users. 6 The Development of the World Wide Web XP In 1989, Timothy Berners-Lee and other researchers at the CERN nuclear research facility, laid the foundation of the World Wide Web, or the Web. created an information system that would make it easy for researchers to locate and share data required minimal training and support developed a system of hypertext documents, electronic files that contain elements that you can easily select Activity: Write a one page Biography about Timothy Berners-Lee. (Do not copy and paste. Print it) 7 XP Hypertext Documents Hypertext offers a better way of locating information. When you read a book, you follow a linear progression, reading one page after another. With hypertext, you progress through pages in whatever way is best suited to you and your objectives. Hypertext lets you skip from one topic to another. 8 XP Hypertext Documents Continued The key to hypertext is the use of links, which you activate to move from one topic to another. a link can open a document on a computer anywhere in the world Hypertext has become the dominate method of sharing and retrieving information on the Internet, becoming known as the World Wide Web, or the Web. Documents on the Web are known as Web pages. 9 XP HTML: The Language of the Web Web pages are text files, written in a language called Hypertext Markup Language or HTML. A markup language is a language used to describe the contact and format of documents. HTML = HyperText Markup Language. Markup languages tell browsers how to display text and graphics. 10 XP HTML is a markup language, not a programming language. Why? Markup language is different from programming language in that instead of making the computer act a certain way, it just makes the text and other elements of the screen display a certain way. Markup language allow for very little interaction with the user, while programming languages allow the user to have a lot of interaction. With most programming languages (such as Java, C++, and Visual Basic) you begin with a text file, but that is then compiled into machine-readable computer code file that is virtually impossible for a person to read. This machine-readable file (somethimes called binary file) is the program or application file. In the markup language, a simple text file contains both the content and the markup, and it remains a text file, so a person can easily read it, even after it is marked up. 11 XP Web Pages and Web Browsers A Web page is stored on a Web server, which makes the page available to users of the Web. To view a Web page, the user runs a Web browser, a software program that retrieves the page and displays it. Name examples of Web Browsers? Which was the first Graphic Web Browser? 12 XP W3C What is W3C? The World Wide Web Consortium is an industry consortium that seeks to promote standards for the evolution of the Web and Web technologies. Although no one organization dictates the rules or standards for HTML, the W3C is regarded as the de facto organization to govern HTML. In addition to information about HTML standards, the W3C Web site (w3.org) also includes information about accessibility, privacy, internationalization, and new Web development languages and techniques. 13 Hypertext Markup Language (HTML) XP HTML allows Web authors to create documents that can be displayed across different operating systems. HTML code is easy to use, that even nonprogrammers can learn to use it. HTML describes the format of Web pages through the use of tags. it’s the job of the Web browser to interpret these tags and render the text accordingly 14 XP Hypertext Markup Language (HTML) Continued HTML has a set of rules, called syntax. syntax are a set of standards or specifications developed by a consortium of Web developers, programmers, and authors called the World Wide Web Consortium (W3C) HTML extensions have been added to support new features, which have been adopted in subsequent sets of standards released by the W3C. these extensions have provided Web page authors with more options 15 XP Beginning of HTML The first version of HTML was created using Standard Generalized Markup Language (SGML). Introduced in the 1980’s. SGML is a strong and highly flexible metalanguage (language used to create other languages). SGML is device and system-independent, meaning that it can be applied to almost any type of document stored in almost any format. While powerful, SGML is also quite complex; for this reason, SGML is limited to those organizations that can afford the cost and overhead of maintaining complex SGML environments. However, SGML can also be used to create markup languages like HTML, which are tailored to specific task and are simpler to use and maintain. 16 XP Markup Languages Hypertext Markup Language HTML: HTML is a formatting language used to create Web pages. HTML defines a Web page through tags, or markups, which are codes that primarily specify how text displays and where links lead. You can create a Web page by inserting HTML tags into a text file using a basic text editor such as Windows Notepad or MACs Simple Text. 17 XP Versions of HTML This figure presents a history of the various versions of HTML that have been released by the World Wide Web Consortium (W3C). 18 XP Web Development Web designers need to determine which browsers and browser versions support their web pages. In the future, Web development is focusing more on XML (Extensible Markup Language) and XHTML (Extensible HyperText Markup Language) for developing document content. XML combined with style sheets provides the same functionality as HTML, but with greater flexibility XHTML was designed to overcome some of the problems with competing HTML standards Activity : Find information on the Internet about XML, XHTML, DHTML, CSS, WML, and Scripting languages. Write a paragraph about each Web technology (do not copy and paste). Which is the most recent version of HTML? What is it new? 19 XP Markup Languages XML Extensible Markup Language: XML is a metalanguage like SGML but without SGML’s complexity and overhead. XML is a markup language that uses tags to describe the structure and content of a document, not the format. XML through predefined or customized, self-defined tags offers a designer greater freedom to arrange or present information than HTML. For example, with XML you can create one link that links to several URLs. With HTML, one link can point to only a single URL. 20 XP Markup Languages XHTML Extensible Hypertext Markup Language: is a reformulation of HTML so it conforms to Extensive Markup Language (XML) rules. By incorporating HTML and XML, XHTML combines the benefits of the display features of HTML and the stricter coding standards required by XML. If you create a Web page in HTML and do not follow HTML coding standards exactly (for example, by not using an end </p> tag), the Web browser on your computer still can interpret and display the Web correctly. Newer types of browsers, such as those for mobile phones or handheld computers, are not able to interpret HTML code that does not meet the HTML standards. Because XHTML has such strict coding standards, it helps ensure that Web pages created in XHTML will be readable by many different types of applications. 21 XP Markup Languages WML (Wireless Markup Language): WML is a subset of XML. WML is used to design Web pages specifically for micro browsers such as handheld computers, PDAs, cellular telephone, and pagers. WML allows for the displays of the text portion of Web pages. WML uses Wireless Application Protocol (WAP) to allow Internet access by wireless devices. Almost all mobile telephone browsers globally support WML. 22 XP Markup Languages DHTML Dynamic HTML: HTML can be used with other Web technologies to provide additional Web page functionality. For example, Dynamic HTML (DHTML) is a term that describes a combination of HTML tags, cascading style sheets (CSS), and a scripting language such as JavaScript. DHTML allows users to create interactive, animated Web pages. 23 XP Markup Languages CSS Cascading Style Sheets: The primary purpose of Cascading Style Sheets is to control the presentation of the content by applying styles to such elements as type, margins, positioning, color, and more. Cascading refers to the order in which the different styles are applied. 24 XP Programming Languages Scripting Languages: are advanced programming languages, which are utilized to write scripts. Scripts are short programs that your visitors’ Web browsers run. These programs, when added to basic HTML documents, make your Web pages dynamic and interactive, with such features as multimedia, animation, forms that allow you and your visitors to communicate, and scrolling text. A programmer would utilize scripting language more often that would the typical Web designer: Designers, however, can purchase readymade script on CDs or download them from specific Web sites. 25 XP Programming Languages JavaScript, Active Server Pages (ASP), Hypertext Preprocessor (PHP) and MySql are widely used scripting languages. JavaScript is inserted into an HTML document to create such elements as date and time information, forms, animations, messages, and more. ASP and PHP frequently are utilized for interactive elements such as forms and dynamically drawn content from a database. MySql, which is database server software, often is used for small to medium sized database-driven Web sites. MySql is very powerful when utilized with PHP to develop dynamic Web sites. 26 XP Guidelines for a Web page author: Become well-versed in the history of HTML. Unlike other languages, HTML history impacts how to write your code. Know your market. Do you have to support older browsers, or have your clients standardized on a particular browser or browser version? The answer affects how you write the code for your Web pages. Become familiar with what different browsers can and can’t do. Test. If you have to support several types of browsers and several types of devices, get them and use them to view your documents. Don’t assume that if your page works in one browser, it will work in an older version of that same browser. In addition, a given browser version might even perform differently under different operating systems. 27 Tools for Creating HTML Documents XP HTML documents are text files, which a text editor such as Windows NotePad can be used to create. You can also use an HTML converter or an HTML editor. HTML converter allows you to create Web pages easily as they have a Save as Web Page features that converts a document like Microsoft Word doc, Power Point doc, or Excel doc into an HTML file by automatically adding the HTML tags into the document. takes text in one format and converts it to HTML code. Each of these applications also provides the capability of inserting hyperlinks, drop-down boxes, option buttons, or scrolling text to the Web page. 28 Tools for Creating HTML Documents XP HTML editor like Macromedia HomeSite or BBEdit. It Is a program that provides basic text-editing functions, as well as more advanced features such as color-coding for various HTML tags, menus to insert HTML tags, and spell checkers. WYSIWYG (What you see Is What you get) is a program that provides a graphical user interface that allows a developer to preview the Web page during its development. It creates the HTML code for you as you add elements to the Web page. Microsoft FrontPage, Macromedia Dreamweaver , WYSIWYG editor, and Software HotDog ; software application for creating web pages. Activity : Find information on the Internet about HTML converters HTML editors and WYSIWYG editor. Name 2 or 3 examples of each one.(Write one page paper do not copy and paste). 29 XP Creating an HTML Document It’s always a good idea to plan the appearance of your Web page before you start writing code. heading 1 image paragraph horizontal line list heading 3 bold and italic text 30 XP HTML Syntax Document content is what the users sees on the page, such as headings and images. Tags are the HTML codes that control the appearance of the document content. tag is the name of the HTML tag attributes are properties of the tag document content is actual content that appears in the Web page 31 XP What Is HTML? (Cont.) HTML = HyperText Markup Language. Markup languages tell browsers how to display text and graphics. HTML uses tags surrounded by <angle brackets> to pass commands to the browser. <B> To Bold Text </B> The first set of tags will bold text. The second set of tags will italicize text. Tags usually appear in pairs, with an opening tag <B> and a closing tag </B>. <I> To Italicize Text </I> 32 XP HTML Tags To insert comment: <!-- comments --> Is use to add notes to your HTML code. Comments are not required and are not displayed or used by the Web browser, they are useful in documenting your HTML code for yourself and others. 33 XP HTML Tags Tags can be one-sided or two-sided. two-sided tags contain an opening tag <b> that tells the browser to turn on a feature and apply it to the contact that follows, and a closing tag </b> that turns off the feature one-sided tags are used to insert noncharacter data into the Web page, such as a graphic image or video clip <tag attribute> Earlier versions of HTML allowed designers to omit some closing tags but this practice is no longer recommended. XHTML requires both an opening and closing tag. 34 XP HTML Tags HTML allows you to enter element names in either uppercase or lowercase letters. Thus you can type either <p> or <P> to indicate paragraph. However, since XHTML strictly requires lowercase tag names, we will follow that convention, and strongly recommend that you do likewise so that your Web pages will be consistent with current and future standards. 35 XP HTML Tags One-sided tag contains no content. HTML general syntax is: <element> However XHTM does not support this form, so this is the new syntax including the space and the closing slash at all times. <element /> Elements that employ one-sided tags are called empty elements since they contain no content. 36 XP Deprecated tag/attribute What's a deprecated tag / attribute? Older HTML tags and attributes that have been superseded by other more functional or flexible alternatives (whether as HTML or as CSS) are declared as deprecated by the W3C - the consortium that sets the HTML standards. Browsers should continue to support deprecated tags and attributes, but eventually these tags are likely to become obsolete and so future support cannot be guaranteed. 37 XP Deprecated Tags 38 XP Nesting Tags and Attributes Tags should be nested when more than one tag is used to mark a set of text, as in this example. <B> <I> Properly Nested Tags </I></B> Attributes add information to tell the browser exactly how to implement a tag. This attribute changes the width of a horizontal line. <HR size=“7” /> Tag Attribute 39 Step-by-Steps 8.1 & 8.2 XP Document Tags HTML Document: Tell the browser which HTML or XHTML version and type of document uses. Starts a Web page. Places information in title bar. Any text or graphics placed between the BODY tags will display in a Web browser. A few tags, like <hr>, do not need a closing tag. These tags end the Web page. <!DOCTYPE> <html> <head> <title>Your Web Page’s Title </title> </head> <body> <b> To Bold Text </b> <i> To Italicize Text </i> <b> <i> Properly Nested Tags </i> </b> <hr /> Creates Horizontal Line </body> </html> 40 XP HTML Tags To create an HTML document, you begin by inserting a <!DOCTYPE> tag. It is used to tell the browser which HTML or XHTML version and type the document uses. The W3C supports three document types for HTML or XHTML: strict, transitional, and frameset. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”> To make our HTML files compliant with XHTML standards, always enter tags in lowercase (with exception of the <!DOCTYPE> tag, which is always uppercase). 41 XP HTML Tags The strict document type is specified when you want to prohibit the use of deprecated tags. (Deprecated tags are tags that the W3C has earmarked for eventual removal from their specifications, because they have replaced those tags with newer, more functional tags.) The transitional document type allows the use of deprecated tags. The frameset document type, which is used to support frames on a Web page, also allows the use of deprecated tags. The <!DOCTYPE> tag includes a URL that references a Document Type Definition found on the W3C Web site. A Document Type Definition (DTD) is a file containing definitions of tags and how they should be used in a Web page. 42 XP Initial HTML Tags in Notepad Your text editor may not display the file extension in the title bar. This is okay. <html> tag indicates that this file is written in HTML <head> tag contains information about the Web page <title> tag contains the Web page title Page content will go between the <body> tags 43 XP Document Tags <head> and <body> tags are used to separate the document into two parts, a head and a body. The head (that material inside the <head> tags) will not be visible to the user, except for the title. However, this space can be used to insert information about the Web pages that will help users find your page, such as indexing words called metadata. When search engines are classifying pages, they often use metadata to help them recognize what the Web page is about. 44 XP Meta Tags Meta elements are placed in the document’s head and contain information about the document that may be of use to programs that run on Web servers. <meta name=“text” content=“text” scheme=“text” http-equiv=“text” /> Where the name attribute specifies the name of a property for the page, the content attribute provides a property value, the scheme attribute provides the format of the property value, and the http-equiv attribute takes place of the name attribute for some Web servers. 45 XP Meta Tags Some Web sites, like Google, use search engines to create list of Web pages devoted to particular topics. You can give extra weight to your Web page by including a description of the page and a list of keywords in <meta /> tags at the top of the document. <meta name=“description” content=“Chemistry Class Web page” /> <meta name=“keywords” content=“Chemistry, school, Edmonton, science” /> Note that a document’s head can contain several meta elements. 46 The Initial HTML File in Internet Explorer XP the title you entered between the <title> tags address box indicates the name and location of the HTML file page content will appear here You should occasionally view the formatted page with different Web browsers to check compatibility, verify that there are no syntax errors, or other problems. 47 XP The <body> tags surround the part of your Web page that is visible to the public in the browser window. Most of the content of your Web pages will be inside the <body> tags. Attributes: To change background color <body bgcolor=“blue”> To set up an image to be the background image <body background=“mybackgroundImage.jpg”> 48 XP Formatting Tags These tags work to format text in interesting ways: The paragraph tag adds a double space between paragraphs. The break tag adds a single space between paragraphs. The width and size attributes make the Horizontal Rule tag change size and shape. <p> The Paragraph Tag </p> <br /> The Break Tag <hr width=“50%” size=“5” /> 49 XP My name is Mrs. Hernandez Attributes for formatting tags: <p style=“text-align: center”>My name is Mrs. Hernandez</p> To center the text. To get the text Like this <p style=“text-align: center”>To get the text<br />like this</p> To center the text and break it in two lines. 50 XP Text Style Tags These tags, like formatting tags, modify the look of words on a Web page: The Italics Tag The Bold Tag The Underline Tag The FONT Tag with attributes <i> Italics </i> <b> Bold </b> <u> Underline </u> Deprecated Tag <ins> Underline </ins> <font face=“Arial, Helvetica”> </font> <font face=“Arial” color=“green”>Sample Text </font> Sample Text 51 XP Creating Heading Tags To define a heading, use the syntax <hy>content</hy> Where y is a heading number 1 through 6, and content is the content of the heading. HTML supports six levels of headings, numbered <h1> through <h6>, with <h1> being the largest and most prominent. Headings are always displayed in a bold font. 52 Headings As They Appear in the Browser XP <h1> <h2> <h3> 53 XP Paragraph Text in the Browser 54 XP Six Heading Levels This figure illustrates the general appearance of the six heading styles. Your browser might use slightly different fonts and sizes. 55 XP Inserting an Inline Style To use styles to control the appearance of an element, such as text alignment, you use the style attribute. <element style=“style1: value1; style2: value2, style3: value3;…”> Where style1, style2, style3,… are the name of the styles, and value1, value2, value3,…are the values associated with those styles. 56 XP Applying the Text-Align Style The text-align style tells the browser how to horizontally align the contents of an element. It has four values: left, right, center, and justify; the value “justify” tells a browser to spread the content to touch both the left and right margin of the element. <h1 style=“text-align: center”> Aligned to the Center</h1> Most browser also support the align attribute but it is a deprecated HTML tag. <h1 align=“center” > Aligned to the Center</h1> 57 XP Deprecated Tags 58 XP Creating Lists HTML supports three kinds of lists: an ordered list, which is used to display information in a numeric order an unordered list, which list items are not listed in a particular order i.e. bullets a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right 59 XP Creating Lists Ordered List: The elements appear in a particular sequential order. <ol> <li>Math</li> <li>Science</li> <ol> <li>Art</li> </ol> <li>item1</li> Output <li>item2</li> 1. Math … 2. Science 3. Art </ol> Where item1, item2, etc. are items in the list. Every <li> tag mark the content for a single list item. 60 XP Creating Lists Unordered List: The elements do not appear in <ul> any special order. <li>Math</li> <li>Science</li> <ul> <li>Art</li> </ul> <li>item1</li> Output <li>item2</li> • Math … • Science • Art </ul> Where item1, item2, etc. are items in the list. Every <li> tag mark the content for a single list item. 61 XP Applying a Style to a List If you don’t want your list items marked with either numbers or bullets, you can specify a different marker by applying the following style to <ul> or <ol>. list-style-type:type 62 XP Applying a Style to a List For example, to create the following list: a. Math b. Science c. Art you would enter the HTML code: <ol style=“list-style-type: lower-alpha”> <li>Math</li> <li>Science</li> <li>Art</li> </ol> 63 XP Applying a Style to a List You can also substitute a graphic image for a list marker by using the style: list-style-image: url(file) where file is the name of the image file containing the marker. you would enter the HTML code: <ul style=“list-style-image:url(flask.jpg)”> <li>Math</li> <li>Science</li> <li>Art</li> </ul> 64 XP Applying a Style to a List Each list item is itself a block-level element. By default, most browsers place each list marker outside of its corresponding block; however you can change this by using the following style: list-style-position: position where position is either “outside” (the default) or “inside”. marker. 65 XP Applying a Style to a List The three previous styles can be combined in the following single style: list-style: type url(file) position where type is one of the marker types, file is the location of a graphic file that can be used for a marker, and position is either “inside” or “outside”. <ul style=“list-style:square url(flask.jpg) inside”> <li>Math</li> <li>Science</li> <li>Art</li> </ul> 66 XP Deprecated Tags 67 XP Creating a Definition List HTML supports a third list element, the definition list, which contains a list of definition terms, each followed by a definition description. The syntax is: <dl> <dt>term1</dt> <dd>definition1</dd> <dt>term2</dt> <dd>definition2</dd> … </dl> where term1, term2 etc. are the terms, and definition1,etc. are the definitions of the terms. 68 XP Entering Heading Tags and Text A block-level element contains content displayed in a separate section within the page, setting it off from other blocks. Paragraph and headings are examples of block-level elements. An inline element is part of the same block as its surrounding content-for example, individual words or phrases within a paragraph. 69 XP Inserting an Inline Style By default, the content of a heading are aligned with the left margin of the page. To use styles to control the appearance of an element, such as text alignment, you use the style attribute. <element style=“style: value1; style2: value2; style3: value3;…”> Where element is the element’s name, style 1, style2, style3 and so forth are the name of styles, and value1, value2, value3 and so on are the values associated with those styles. Styles specified as attributes in a tag are also referred to as inline styles. 70 XP Heading with an Inline Style <h1 style=“text-align: center”>Chemistry Class</h1> 71 XP Formatting your Text <body> <h1 style="text-align: center">Mr. Dube's chemistry classes</h1> <h2 style="text-align: center">at Robert service High school</h2> <p>welcome to the Robert Service High school Chemistry web page. Here you'll learn more about our chemistry classes and our pol ci es . </p> <h2>Chemistry classes</h2> <ul style="list-style-type: square") <li>conceptual chemistry: An introductory course, requiring basic math but no algebra</li> <li>Chemistry I: An introductory course, requiring solid algebra skills</li> <li>Advanced Placement chemistry: An advanced course requiring a grade of A or e in Chemistry I</li> </ul> 72 XP Output Mr. Dube's Chemistry Classes at Robert Service High School Welcome to the Robert Service High School Chemistry Web page. Here you'll learn more about our chemistry classes and our policies. Chemistry Classes • • • Conceptual Chemistry: An introductory course, requiring basic math but no algebra Chemistry I An introductory course, requiring solid algebra skills Advanced Placement Chemistry: An advanced course requiring a grade of A or B in Chemistry I 73 The Paragraphs Displayed by the Browser XP Remember: HTML formats text only through the use of tags and ignores such things as extra blank spaces, blank lines, or tabs. four grading paragraphs are not separated 74 The Grading Text Separated into Paragraphs XP To add space between paragraphs, you use the paragraph tag <p>…</p>. text is now separated into four paragraphs 75 Using Other Block-LevelXP Elements HTML supports several other block-level elements that you may find useful in your Web pages. For example HTML supports the address element to indicate contact information. Most browsers display an address element in an italicized font. You can indicate long quoted passages by applying the blockquote element. A browser encountering this element typically indents the quoted text. Next Figure describes additional block-level elements and shows how they look in most browsers. 76 XP Block Level Elements 77 XP Creating Character Tags HTML also lets you format individual characters. A tag that you apply to an individual character is called a character tag. There are two types of character tags: logical character tag physical character tag 78 XP Inline Elements 79 XP Common Logical Character Tags 80 XP Inserting a Graphic Images can be displayed in two ways: as inline images or as external images. an inline image displays directly on the Web page and is displayed when the page is accessed by a user an inline image can be placed on a separate line in your HTML code, or it can be placed directly within a line of text inline images should be in one of two file formats: GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group) 81 XP Inserting a Graphic Continued an external image is not displayed with the Web page, the browser must have a file viewer, which is a separate program that the browser launches when it encounters an external image file external images are represented by an icon that a user clicks to view the image external images are not limited to GIF or JPEG formats 82 The Image File as it Appears in the Browser XP <p style=“text-align: center”> <img src=“dube.jpg”> … 83 XP Tags to Insert Images The IMaGe tag requires the use of attributes: <p style=“text-align: right”> <IMG src=“sign.jpg”> Src= searches for the image. sign.jpg is the name of this file, which is then searched and displayed in the Web browser. 84 XP Special Characters Occasionally you will want to include entities or special characters in your Web page that do not appear on your keyboard. For example: registered trademark symbol ® copyright symbol © HTML supports the use of character symbols that are identified by a code number or name. 85 XP Special Characters in the Browser This figure shows an example of the code “Welcome to Mr. Dubé’s Web site”, which accented the é in his last name.. accented é added to last name 86 XP Inserting Horizontal Lines A horizontal line can improve the appearance of a Web page. The syntax for creating a horizontal line is: <hr align=“align” size=“size” width=“width” color=“color” noshade> 87 XP Inserting Horizontal Lines The HTML horizontal syntax includes the following: align specifies the horizontal alignment of the line on the page (center, left, or right) size specifies the height of the line in pixels or percentage of the screen width width indicates the width of the line in pixels or percentage of the screen width color indicates the color of the line noshade specifies that the browser display a solid line 88 XP Different Line Styles size=12 width-100% size=6 width-50% size=3 width-25% size=1 width-10% <hr align=“center” size=“12” width=“100%”> <hr align=“center” size=“6” width=“50%”> <hr align=“center” size=“3” width=“25%”> <hr align=“center” size=“1” width=“10%”> You can use line styles to improve the appearance of your Web page. 89 XP Horizontal Line Added to the Page horizontal line 90 XP Tags for HyperLinks The Anchor tag <A> creates hyperlinks and also requires attributes. This hyperlink searches for Disney on the Web. <A href=“www.disney.com”>Disney</A> The second example loads a page from the local computer’s hard drive. href= searches for the <A href=“Friends.html”>Friends</A> Web page online. The closed </A> tag stops underlining hyperlinks. Disney and Friends is what the user clicks. 91 XP Testing Your HTML Stop and evaluate your HTML formatting and hyperlinking tags: Alpha testing is the first series of tests that programmers usually do themselves to find obvious mistakes. Beta testing requires a team of testers who try to “break” the software. 92 Tips for Good HTML Code XP • Use line breaks and indented text to make your HTML file easier to read. • Insert comments into your HTML file to document your work. • Enter all tag and attribute names in lowercase. • Place all attribute values in quotes. • Close all two-sided tags. • Make sure that nested elements do not cross. • Use styles in place of presentational attributes whenever possible. • Use logical elements to describe an element’s content. Use physical elements to describe the element’s appearance. 93 XP Summary Learned about the history and structure of the World Wide Web. Introduced the basic principles of Web documents and about the HTML language. Learned how to create a Web page using basic layout tags. Learned how to create paragraphs, headings and lists (both ordered and unordered). 94 XP Summary Continued Worked with character tags and special characters. Introduced to working with graphics by creating a horizontal line and an inline graphic image. To explain the basic syntax of HTML. How to do simple markup of a text document in HTML. To use document tags (HTML, HEAD, BODY, and TITLE). To use formatting tags (P, BR, and HR) with some of their attributes. To use text styles tags (I, B, U, and FONT) with some of their attributes. To use heading and listing tags for organizing the document. To use the image tag (IMG) with its attributes. To use the anchor tag (A) with its main attribute to link to another Web page. How to test your HTML documents. 95