Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1
HTML Syntax For Example: HTML Document is a Tree of Elements <tag options? >... </tag> Options are name="value" <a href="http://cnn.com">the News</a> <form action="https://www.paypal.com" method="post"> Form here</form> <img src="mypic.jpg" alt="my House"> <br> XHTML exception: Non paired tags require a / to end element <br /> or <img src="mypic.jpg" alt="my House" /> 2 / 1
HTML Versions World Wide Web Consortium (W3C) HTML 3.2 (Jan 1997) HTML 4.0 (Dec 1997) Strict Transitional Frameset HTML 4.01 (1999) (same 3) XHTML 1.0 (1999) (Essentially HTML 4.01 but in XML) Each version is specified by a Document Type Definition (DTD) document, which defines the syntax, tags allowed, and semantics. Syntax rarely changes, but elements(tags), nesting, and semantics do. 3 / 1
XHtml 1.0 Strict - Classes of Elements Structure, Head, Block, & Inline Structure defines part of HTML document (<html>..</html>) Head declares extra non-page information. (<title>..</title>) Block are elements which define a rectangle on the page and can have margins, etc. (<p>..</p>) Inline are elements which apply to the flow of text. (<b>..</b>) Nesting can be tricky! http://validator.w3.org/ http://fuzzpault.com/chxhtml/htmlhelp.php 4 / 1
XHtml 1.0 Strict - Structure Structure Elements & Attributes <html>..</html> (R) Root element of document. Req Attr: xmlns="http://www.w3.org/1999/xhtml" <head>..</head> (R) Delimits extra page information <body>..</body> (R) Displayable content. 5 / 1
XHtml 1.0 Strict - Head Head Elements & Attributes <title>..</title> (R) Page title. Used in Window bar and Bookmarks (Favorites) <meta>..</meta> Extra page information, like description, keywords, author. <meta name="keywords" content="chxhtml, Haskell, htmlhelp" /> <style>..</style> Embedded style information. <link>..</link> Link to external document, like a stylesheet. <link rel="stylesheet" type="text/css" href="mystyle.css" /> <script>..</script> Define JavaScript code. 6 / 1
Your first Web Page! 1 Start a new document test.html. 2 Type (or copy paste) this: <!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>my First Web Page!</title> </head> <body> <h1>my First Web Page!</h1> </body></html> 3 Open test.html in browser (Opera, Chrome, Firefox, IE). 7 / 1
XHtml 1.0 Strict - Block (Part I) Block elements can contain block or inline elements. Check CHXHtml! Block Elements <p>..</p> Paragraph. <h1>..</h1> Highest level heading. All the way to <h6>..</h6>. <blockquote>..</blockquote> Quoted block, indented from both margins. <hr /> Horizontal rule. <pre>..</pre> Preformatted text. Displayed exactly as written. 8 / 1
XHtml 1.0 Strict - Inline (Part I) Inline elements can contain inline elements, but not block. Check CHXHtml! Inline Elements <em>..</em> Emphasis (italics). <strong>..</strong> Bold. <br /> Forced line break. <q>..</q> Inline quotation. <a>..</a> Anchor. Attr: href, title, tabindex,... 9 / 1
XHtml 1.0 Strict - Inline A Element <a href="http://cnn.com" title="where?">news Here!</a> Two types of URL in A Element Absolute href="http://yahoo.com/thenews" Relative href="pages/other.html" Relative to the current location, go to pages/other.html Relative (backup) href="../pages/other.html" Relative to the current location, go back one folder, then pages/other.html Using Fragment Identifiers Say some test.html had this tag in it: <p id="news">..</p> A link to that news would be <a href="test.html#news">the news</a> 10 / 1
HTML Special Characters How do you display HTML or special characters? Special Characters & is & Ampersand. " is " Double quote. c Copyright. R Registered. TM Trademark. Non-breaking space, don t line wrap. Others http://www.w3.org/markup/html-spec/html-spec_13.html http://www.utexas.edu/learn/html/spchar.html http://www.webmonkey.com/2010/02/special_characters/ 11 / 1
XHtml 1.0 Strict - Block (Part II) More Block Elements <ul>..</ul> Unordered list. (Requires <li>..</li>) <ol>..</ol> Ordered list. (Requires same) <li>..</li> List item, inside a ul or ol. <dl>..</dl> Definition list. (requires dt or dd) <dt>..</dt> Definition term in dl. <dd>..</dd> Definition of a term in dl. <table>..</table> Table of cells. (Requires tr) <tr>..</tr> Table row.. (Requires th or td) <th>..</th> Table header. <td>..</td> Table data. 12 / 1
Wrap up HTML Part I html head body title meta style link script p h1 pre hr em q a strong em q ul ol li dl dt dd table tr th td 13 / 1
PHP PHP: Hypertext Preprocessor Server Side Scripting Language Evolved from Common Gateway Interface (CGI) Interpreted! Typeless Object oriented from 3 onward, now 5. Part of the LAMP stack Not Secure! Can easily expose security problems! Widely used: Facebook MediaWiki, Joomla, Wordpress, Concrete5, MyBB, and Drupal. Can be compiled to C++: HipHop (Facebook) 50% speedup 14 / 1
Cascading Style Sheets (CSS) Syntax Describes presentation! http://www.w3.org/tr/css21/propidx.html selector { property: value; property2: value2;... } /* comment */ selectors define where to apply the style. properties define what to change. values define what it should be. 15 / 1
Cascading Style Sheets (CSS) - Where? Where can we put style information? Embedded <title>my First Web Page!</title> <style> body { background-color: #f70; color: #000;} h1 { color: #00f;} </style> Inline <body> <h1 style="color: #00f;">My First Web Page!</h1> </body>... External <link href="/mystyle.css" rel="stylesheet" type="text/css" /> 16 / 1
Example <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>my First Web Page!</title> <style> body { background-color: #f70; color: #000;} h1 { color: #00f;}.bla { background-color: #000; color: #fff; margin: 10px;} </style> </head> <body> <h1>my First Web Page!</h1> <p class="bla">more here!<p> </body></html> 17 / 1
What can you change? Text - Size, font, color, shadow, http://www.typetester.org/ http://www.google.com/webfonts Positioning blocks - margins, padding, borders, background color (Week 5) http://www.csszengarden.com/ Lists - Bullet icons Display vs Print settings. <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 18 / 1