Introduction to Web Development

Size: px

Start display at page:

Download "Introduction to Web Development"

Brandon Evans
8 years ago
Views:

1 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, / 1

2 HTML Syntax For Example: HTML Document is a Tree of Elements <tag options? >... </tag> Options are name="value" <a href=" News</a> <form action=" 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

com">the News</a> <form action="https://www.paypal.

3 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

4 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! / 1

.</html>) Head declares extra non-page information. (<title>.

5 XHtml 1.0 Strict - Structure Structure Elements & Attributes <html>..</html> (R) Root element of document. Req Attr: xmlns=" <head>..</head> (R) Delimits extra page information <body>..</body> (R) Displayable content. 5 / 1

6 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

<meta name="keywords" content="chxhtml, Haskell, htmlhelp" /> <style>..</style> Embedded style information. <link>.

7 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" " <html xmlns=" <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

org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.

8 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

All the way to <h6>..</h6>. <blockquote>.

9 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

10 XHtml 1.0 Strict - Inline A Element <a href=" title="where?">news Here!</a> Two types of URL in A Element Absolute href=" 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" Relative to the current location, go to pages/other.html Relative (backup) href="../pages/other.

11 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 / 1

TM Trademark. Non-breaking space, don t line wrap. Others http://www.w3.

12 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

(requires dt or dd) <dt>..</dt> Definition term in dl. <dd>..</dd> Definition of a term in dl. <table>.

13 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

14 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

Part of the LAMP stack Not Secure! Can easily expose security problems!

15 Cascading Style Sheets (CSS) Syntax Describes presentation! 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

html selector { property: value; property2: value2;.

16 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

17 Example <html xmlns=" <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

18 What can you change? Text - Size, font, color, shadow, Positioning blocks - margins, padding, borders, background color (Week 5) Lists - Bullet icons Display vs Print settings. <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 18 / 1

com/webfonts Positioning blocks - margins, padding, borders, background color (Week

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov