{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

lect12 - 1.264 Lecture 12 XHTML CSS Forms Hypertext markup...

Info iconThis preview shows pages 1–8. Sign up to view the full content.

View Full Document Right Arrow Icon
1.264 Lecture 12 XHTML, CSS, Forms
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Hypertext markup language (XHTML) exercise !DOCTYPE (details omitted) <html> <head> <title> Welcome to the Chemical System </title> </head> <body> <h1> Welcome to the Chemical System </h1> This system handles orders for chemicals. We handle many products. We comply with the latest US regulations. <p> The use of this system is subject to <a href= “MITRule.html”> MIT rules and regulations. </a> </p> </body> </html> Create site and page in DW; type this text in Code view (Example1.html)
Background image of page 2
XHTML Tags (e.g. <h1>) never display but direct the browser XHTML tag pairs (e.g. <h1> and </h1>) delimit section Some tags have attributes (e.g. <a href=“abc.html”> </a>) XHTML document begins with <html>, ends with </html> Two sections within document: head and body Head has identifying information not displayed Body is displayed, with formatting: Paragraph <p> Header levels 1 through 6 <h1> through <h6> Anchor <a>, placed around text or graphics; used for hyperlinks HTML and most of its formatting features will be deprecated eventually, replaced by XHTML and CSS (Cascading Style Sheets)
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
XHTML <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=“http://www.w3.org/1999/xhtml> <head> <title> Test Web page </title> </head> <body> <p> Sample text </p> </body> </html> XHTML is more structured form of HTML: Defined as XML document Rules stricter: All tags must be lower case All tags must be closed Quotation marks required for tag attributes Dreamweaver generates XHTML, which we’ll use all term
Background image of page 4
Tag examples Control appearance of page Not as precise as MS Word or other editors Intended for pages that can be viewed on machines with very different graphics capabilities. Tags discourage specific assumptions. Opening tag Closing tag Definition <em> </em> Emphasis (often italic) <strong> </strong> Strong emphasis (often bold) <var> </var> Variable <cite> </cite< Citation (of an article or book) <address> </address> Address (identifying info at bottom of doc) <code> </code> Computer code fragment (tags ignored) Add some of these to your Example1.html page
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Tag examples, cont Special characters: &gt; is > Paragraph format: <h2 align=“center”> text </h2> Preformatted text: <pre> (lines up columns exactly, etc.) Horizontal lines: <hr width=“80%” align= “left”> Lists: can be multi-level, etc. Ordered (numbered) <ol> Unordered (bulleted) <ul> Definition (indented) <dl> Tables: <table>, <td> (data), <tr> (row), etc. Add some of these to your Example1.html page
Background image of page 6
XHTML Filenames Relative names (UNIX conventions) MITRule1.html same folder (directory) as current doc Laws/MITRule2.html in subfolder (subdirectory) of current doc ../MITRule3.html in folder above current doc Absolute names (also UNIX) /MITRule4.html in root folder (Web root or local root) Document sections MITRule1.html#sec1 points to target tag (sec1) in same doc Sections defined by <a name=“sec1”> </a> Documents on other sites <a href=“http://www.mit.edu/index.html”>
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Image of page 8
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}