Chapter 1: Introduction to XHTML (part 1) Web Design Chapter 1: Introduction to XHTML (part 1)
HTML Source Document When you connect to a web page by entering its URL into the browser Browser instructs your computer to send a message out over the Internet to the computer specified by that URL requests that it sends back a certain document (HTML source doc) HTML source doc describes the content and layout of the web page After your computer receives the html, your browser interprets the html and displays the resulting web page (text/graphics/links etc)
HTML vs. XHTML HTML XHTML Tags are not case-sensitive XHTML is a simple, more standardized version of HTML. For this course, we use XHTML. HTML XHTML Tags are not case-sensitive Only lowercase tags are allowed Possible to leave off and ending tag Tags should appear in pairs Overlapping tags No overlapping tags
Editing XHTML XHTML/HTML can be created using a simple text editor like notepad File extension must be .html or .htm it is a good programming practice to assign documents file names that describe their functionality.
Composition of a XHTML Document An XHTML document consists of three main parts: html (represented by html element): encloses the head and body sections. head section (represented by head element): contains information about the XHTML document such as: The title (represented by title element) which appear in the title bar at the top of the browser window and in the list of Favorites. Title element is called a nested element. Special document formatting instructions called style sheets. Client-side programs called scripts. Body section (represented by body element): contains the page’s content that the browser displays when the user visit the Web page.
Tags XHTML documents delimit an element with start and end tags: Start tag consists of the element name in angle brackets (e.g. <html>). End tag consists of the element name preceded by a slash in angle brackets (e.g. </html>). Tags must nest, not overlap: Correct: <tag1>Some text <tag2>more text</tag2> and more.</tag1> Wrong: <tag1>Some text <tag2>more text</tag1> and more.</tag2> All tags must be lower case.
Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>…</title> </head> <body> … </body> </html>
Attributes Many start tags define attributes that provide additional information about an element. Each attribute has a name and a value (enclosed by double quotes) separated by an equal sing (=). Basic syntax for XHTML tags and attributes: <tag attribute="value"> </tag>
<p> and <strong> tags <p> tag: The paragraph tag used to markup text for display in a browser. All text placed between the <p> and </p> tags form one paragraph. A blank line precedes and follows paragraph text. Example: <p>This is a paragraph</p> <strong> tag: Browsers display text marked up with <strong> in a bold font. <strong>Strong text</strong>
<br/> tag It is used for line break. Example: <p>Contact<br /> 6150 Sennott Square<br /> University of Pittsburgh<br /> Pittsburgh, PA 15260 </p>
Headers <h1> to <h6> define headers. <h1> defines the largest header. <h6> defines the smallest header. Example: <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6>
Example
Commenting Source Code Comments are enclosed in <!-- and --> Example: <!--This comment will not be displayed --> <p>This is a regular paragraph</p>
Linking One of the most important XHTML features is the hyperlink, which links to another web page or another place in the same web page. Another web page – External link Another place – Internal link Web browser typically underline text hyperlinks and color their text blue by default. Links are created using the<a> (anchor) tag.
Linking External Links: <a href=“SomeURL”>Text/image</a> Example: <a href=“http://moodle.iu-ccsi.com/”>CS Department at Al-Imam University </a> Internal Links : Create a place/anchor: <a name=“SomeLabel”></a> Link to the anchor: <a href=“#SomeLabel”>Go to some place</a>
Linking Link to e-mail addresses using mailto: URL Example: <a href=“mailto:hm_643@yahoo.com”>My e-mail address</a>
Images We can Insert an image in the document using <img> tag. The image file’s location is specified with the src attribute: <img src=“file’s location ” /> Every img element has an alt attribute. If the browser cannot render an image, it displays the alt attribute’s value. Optional width & height attributes specify the image’s width and height: <img src="Lake.jpg" alt="Lake view" width="257" height="161" /> Images are measured in pixels.
Images Three most popular formats: Image as a hyperlink: Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) Image as a hyperlink: <a href=“http://moodle.iu-ccsi.com/”> <img src=“logo.jpg" alt=“CS college" width="257" height="161" /> </a>
Special Characters and More Line Breaks del element: Strike-through text sup element: Superscript text sub element: Subscript text <hr /> Horizontal rule (horizontal line) use <hr/>. It always appears on a line by itself. This tag takes an optional attribute width such as <hr width="50%"> to control how far across the page it extends. Special characters: < - the less-than symbol < (left angle bracket) > - the greater-than symbol > (right angle bracket) & - the ampersand sign & © - the copyright symbol © ¼ - the fraction 1/4
Lists Ordered lists & Unordered lists: <ol> for ordered <ul> for unordered <li> for each item inside the list Browser inserts a blank line before & after the list Example: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Lists sequence type of an ordered list can be specified by ol element’s type Attribute: <ol type=“a”> <li>Item 1</li> <li>Item 2</li> </ol> Unordered list items may be set to discs, circles or squares by setting the ul element’s type Attribute to “disc”, “circle” or “square”, respectively: <ul type=“disc”> </ul>
Lists Nested lists: <ul> <li>Top Level, Item 1</li> <li>Sublevel 1, Item 1 <li>Sublevel 2, Item 1</li> </ul> </li> <li>Sublevel 1, Item 2</li> <li>Top Level, Item 3</li>