Introduction to XHTML.

Internet Programming An introduction to XHTML.

XHTML

XHTML is simple.

XHTML is simple. it is the skeleton of a web page

XHTML is simple. it is the skeleton of a web page NOT what makes them look pretty

<!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" xml:lang="en" lang="en"> <head> <title> It starts with a header </title> </head>

<!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" xml:lang="en" lang="en"> <head> <title> </head> It starts with a header </title> A <body> </body> </html>

<!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" xml:lang="en" lang="en"> <head> <title> </head> It starts with a header </title> A <body> <h1>and Elements in-between.</h1> </body> </html>

Header Body Elements Doctype - Conforms to Web Standards - Three basic types - Strict - Transitional - Quirks - The doctype let’s the browser know how it should evaluate the XHTML

Header Body Elements Title Tag - A six to eight word description - Displayed at the top of most browsers - Important in Search Engine Optimization

Header Body Elements Title Tag - A six to eight word description - Displayed at the top of most browsers - Important in Search Engine Optimization Meta Tags - A standardized tag to describe your web page - Description - Keywords - Minor Search Engine Optimization Importance

Header Body Elements Code Inclusion - Javascript Imports - CSS Imports ex. <script type=”text/javascript” src=”ﬁle.js”></script>

Header Body Elements

Header Body Elements - Elements inside the body will be displayed on the web page

Header Body Elements - Elements inside the body will be displayed on the web page - The body contains the structure of the web page

Header Body Elements - Elements inside the body will be displayed on the web page - The body contains the structure of the web page - The body’s structure will be styled with CSS to give the page a look and feel

Header Body Elements - Elements are XHTML data types used to structure a web page

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between.

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between. ex. <body></body>, <p>Hello</p>

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between. ex. <body></body>, <p>Hello</p> - An element may also have attributes to further describe itself

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between. ex. <body></body>, <p>Hello</p> - An element may also have attributes to further describe itself ex. <img src=”picture.png” />

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between. ex. <body></body>, <p>Hello</p> - An element may also have attributes to further describe itself ex. <img src=”picture.png” /> - Sometimes the ending tag is inferred

Header Body Elements - Elements are XHTML data types used to structure a web page - Elements have a beginning tag, ending tag and content in between. ex. <body></body>, <p>Hello</p> - An element may also have attributes to further describe itself ex. <img src=”picture.png” /> - Sometimes the ending tag is inferred ex. <input type=”text” />

Common XHTML Elements

Common XHTML Elements <h1>Heading One</h1> <h2>Heading Two</h2> <h3>Heading Three</h3> <h4>Heading Four</h4> <h5>Heading Five</h5> <h6>Heading Six</h6> <h7>Heading Seven</h7>

Common XHTML Elements <p>The paragraph element is used for long blocks of text.</p>

Common XHTML Elements <p>The paragraph element is used for long blocks of text.</p> <ul> <li>Lists are used</li> <li>to</li> <li>list out data.</li> </ul>

Common XHTML Elements <p>The paragraph element is used for long blocks of text.</p> <ul> <li>Lists are used</li> • Lists are used <li>to</li> • to <li>list out data.</li> • list out data. </ul>

Common XHTML Elements <a href=”http://google.com” title=”Google”>Link to Google</a>

Common XHTML Elements <a href=”http://google.com” title=”Google”>Link to Google</a> Link to Google

Common XHTML Elements <a href=”http://google.com” title=”Google”>Link to Google</a> Link to Google <img src=”rss.png” />

Common XHTML Elements Tables are used for tabular data. Only.

Common XHTML Elements Tables are used for tabular data. Only. <table> <tr> <td align=”left”>Cell 1</td> <td align=”right”>Cell 2</td> </tr> <tr> <td valign=”middle”>Cell 3</td> <td valign=”bottom”>Cell 4</td> </tr> </table>

Common XHTML Elements Tables are used for tabular data. Only. <table> <tr> <td align=”left”>Cell 1</td> Cell 1 Cell 2 <td align=”right”>Cell 2</td> </tr> <tr> <td valign=”middle”>Cell 3</td> Cell 3 <td valign=”bottom”>Cell 4</td> Cell 4 </tr> </table>

Common XHTML Elements Forms are used for a variety of reason, but primarily to gather data from a web visitor.

Common XHTML Elements Forms are used for a variety of reason, but primarily to gather data from a web visitor. <form action=”search.php” method=”post”> Name: <input type=”text” name=”email” /> Checkbox: <input type=”checkbox” name=”box” /> State: <select name=”state”> <option value=”TX”>Texas</option> <option value=”CA”>California</option> <option value=”LA”>Louisiana</option> </select> <input type=”submit” value=”Go!” /> </form>

Common XHTML Elements The elements listed are only a small subset of the available XHTML elements. An exhaustive list of elements can be found on the W3C website listed below. http://www.w3.org/TR/REC-html40/index/ elements.html

For questions, comments or feedback, feel free to contact me. Chad Hutchins hutchins.chad@gmail.com twitter.com/chadhutchins

Introduction to XHTML.

0 comments

Notes on slide 1

Favorites, Groups & Events