Transcript HTML
XP HTML Tutorial 1: Developing a Basic Web Page 2 XP HTML: The Language of the Web 3 Web pages are text files, written in a language called Hypertext Markup Language (HTML) HTML describes the format of Web pages through the use of tags. The Web browser interprets these tags and renders the text accordingly HTML has a set of rules, called syntax. XP Web Development Web development is now focusing more on XML (Extensible Markup Language) and XHTML (Extensible HyperText Markup Language) for developing document content. 4 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 Creating an HTML Document 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 XP HTML Tags 8 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 content 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> Tags are not case sensitive. The current standard is to display all tags in lowercase letters. XP Making Elements with Tags To create a two-side tag, use: <element> content </element> To create a one-side tag, use: <element /> where element is the name of HTML element 9 The Structure of an HTML File <html> <head> <title> </title> </head> <body> </body> </html> XP Block-Level Elements (see Figure 1-20) 11 A block-level element contains content displayed in a separate section within the page, setting it off from other blocks Examples: <p> . . . </p> <h1> . . . </h1> <ul> . . . </ul> XP Creating Lists HTML supports three kinds of lists: 12 an ordered list, which is used to display information in a numeric order an unordered list, which list items not 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 XP Inline Elements (see Figure 1-21) 13 An inline element is part of the same block as its surrounding content - e.g., individual words or phrases within a paragraph. Examples: <b> . . . </b> XP Inserting an inline image 14 <img src=“file” alt=“text” /> <p style=“text-align: center”> <img src=“dube.jpg” /> </p> XP Inserting Horizontal Lines A horizontal line can improve the appearance of a Web page. <hr style=“color: color; background-color: color; width: width; height: height” /> <hr style=“color: red; background-color: red; height: 2; width: 100%> 15 Special Characters in the Browser accented é added to last name Dubé XP Tips for Good HTML Code 17 Use line breaks and indented text to make your HTML files 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 Use styles whenever possible