Web Page Design with PHP Mozafar BagMohammadi 1

Web Page Design with PHP Mozafar Bag-Mohammadi 1

HTML. یک ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺩﺭ ﺣﺎﻝ ﺭﺷﺪ ﺍﺳﺖ HTML (Hyper. Text Markup Language) l l HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia l in 1993, Mosaic added many new features (e. g. , integrated images) l l HTML 2. 0 (IETF, 1994): tried to standardize these & other features, but late l in 1994 -96, Netscape & IE added many new, divergent features l l HTML 3. 2 (W 3 C, 1996): attempted to unify into a single standard l but didn't address newer technologies like Java applets & streaming video l l HTML 4. 0 (W 3 C, 1997): current standard l attempted to map out future directions for HTML, not just react to vendors l XHTML 1. 0 (W 3 C, 2000): HTML 4. 01 modified to conform to XML standards l XHTML 1. 1 (W 3 C, 2001): “Modularization” of XHTML 1. 0 l 3

The Basic Web page – A Worked Example <html> <!–- COMP 519 page 22. html 15. 08. 06 --> <head> <title> Bill Smiggins Inc. </title> </head> <body> <h 1>Bill Smiggins Inc. </h 1> <h 2>About our Company. . . </h 2> <p>This Web site provides clients, customers, interested parties and our staff with all of the information that they could want on our products, services, success and failures. </p> <hr/> <h 3> Products </h 3> <p> We are probably the largest supplier of custom widgets, thingummybobs, and bits and pieces in North America. </p> <hr width="50%"/> </body> view page </html> 8

Text Appearance <html> <!–- COMP 519 page 25. html 15. 08. 06 --> <head> <title>Text Variations and Escape Sequences</title> </head> <body> <h 1>Text Variations</h 1> <p>We can use <b>simple</b> tags to <i>change</i> the appearance of <strong>text</strong> within <tt>Web pages</tt>. Even super<sup>script</sup> and sub<sub>scripts</sub> are <em>supported</em></p> <h 1>Text Escape Sequences</h 1> <p> & < > " © </p> <h 1>Preformatted text</h 1> <pre> University of Liverpool Department of Computer Science Chadwick Building, Peach Street Liverpool, L 69 7 ZF, UK </pre> </body> view page </html> ﻣی ﺗﻮﺍﻥ ﺍﺳﺘیﻞ ﻧﻤﺎیﺶ ﻓﻮﻧﺖ ﺭﺍ l : ﻣﺸﺨﺺ ﻧﻤﻮﺩ < پﺮ ﺭﻧگ b>… </b> < ﺍیﺘﺎﻟیک i>… </i> < ﺷﺒیﻪ ﻗﻮﻧﺖ ﺩﺳﺘگﺎﻩ tt>… </tt> ﻣﺎﺷیﻦ ﺗﺤﺮیﺮ < ﺳﺎیﺰ ﻓﻮﻧﺖ ﺭﺍ big>… </big>. ﺯیﺎﺩ ﻣی کﻨﺪ <ﺳﺎیﺰ ﻓﻮﻧﺖ small>… </small>. ﺭﺍ کﻢ ﻣی کﻨﺪ < ﺑﺮﺍی ﺗﺎکیﺪ ﺭﻭی یک em>…</em> ﻗﺴﻤﺖ ﺧﺎﺹ < ﺑﺮﺍی strong>…</strong> ﺗﺎکیﺪ ﺑیﺸﺘﺮ <ﺑﺮﺍی ﺗﻮﻟیﺪ sub>… </sub> subscript <ﺑﺮﺍی ﺗﻮﻟیﺪ sup>… </sup> superscript l l l l l <ﻓﺮﻣﺖ پﺎﺭﺍگﺮﺍﻑ ﺭﺍ pre>…</pre>. ﺣﻔﻆ ﻣی کﻨﺪ l & &al; > " © HTML کﺎﺭکﺘﺮﻫﺎی ﻓﺮﺍﺭ ﺑﺮﺍی کﻨﺘﺮﻝ l 9

Hyperlinks (cont. ) <html> <!–- COMP 519 page 09. html 15. 08. 06 --> <head> <title>Internal Links in a Page</title> </head> <body> <p> [ <a href="#HTML">HTML</a> | <a href="#HTTP">HTTP</a> | <a href="#IP">IP</a> | <a href="#TCP">TCP</a> ] </p> <p> Computer acronyms: <dl> <a name="HTML"></a><dt>HTML</dt> <dd>Hyper. Text Markup Language <a name="HTTP"></a><dt>HTTP</dt> <dd>Hyper. Text Transfer Protocol…</dd> <a name="IP"></a><dt>IP</dt> <dd>Internet Protocol…</dd> <a name="TCP"></a><dt>TCP</dt> <dd>Transfer Control Protocol…</dd> </dl> </p> </body> </html> view page ﻣی ﺗﻮﺍﻥ یک ، ﺩﺭ ﺳﻨﺪﻫﺎی ﻃﻮﻻﻧی l ﻟیﻨک ﺩﺭﺳﺖ ﻧﻤﻮﺩ کﻪ ﺑﻪ ﺟﺎی . ﺩیگﺮی ﺍﺯ ﺳﻨﺪ ﺍﺷﺎﺭﻩ ﻣی کﻨﺪ <a name="ident">…</a> یک ﻣﺘﻐییﺮ ﺍﺳﺖ کﻪ ﻣﺤﻞ ident l. ﻣﻮﺭﺩ ﻧﻈﺮ ﺭﺍ ﻋﻼﻣﺖ گﺬﺍﺭی ﻣی کﻨﺪ l l <a href="#ident">…</a> ﺑﺎﻋﺚ ﻣی ﺷﻮﺩ کﻪ ﺑﻪ ﻣﺤﻞ ﻣﺸﺨﺺ ﺷﺪﻩ . پﺮﺵ کﻨیﻢ <a href="URL#ident“ >…</a> ﺑﻪ ﻣﺤﻠی ﺍﺯ یک ﺳﻨﺪ ﺩیگﺮ پﺮﺵ ﻣی . کﻨﺪ l l l 12

Images ﻣی ﺗﻮﺍﻥ یک ﺗﺼﻮیﺮ ﺭﺍ ﺩﺭ ﺳﻨﺪ IMG ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ l. ﻗﺮﺍﺭ ﺩﺍﺩ ﻭ GIF ﻣﺮﻭﺭگﺮ ﺑﻄﻮﺭ پیﺶ ﻓﺮﺽ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎیﺶ ﻓﺎیﻠﻬﺎی l. ﺍﺳﺖ JPEG. ﻧیﺎﺯ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻨﺪ plug-in ﻓﺮﻣﺘﻬﺎی ﺩیگﺮ ﻣﻤکﻦ ﺍﺳﺖ ﺑﻪ l <img src="URL"|"name" height="n" width="n" <html> title=15. 08. 06 “text” <!–- alt="text" COMP 519 page 10. html -->/> <head> <title>Images</title> </head> <body> <img src="http: //www. csc. liv. ac. uk/~martin/teaching/comp 519/HTML/Blair. jpg" alt="Blair” title=“Tony Blair”/> <p>Former Prime Minister Tony Charles Lynton Blair</p> </body> view page </html> 13

Layout in a Table <html>  <head> <title>Table Layout</title> </head> <body> <table style="border: 1 px solid; "> <tr style="text-align: center; "> <td style="border: 1 px solid; "> Left<br/>Column</td> <td style="border: 1 px solid; vertical-align: top; "> Right Column</td> </tr> <td style="border: 1 px solid; "> Some data</td> </tr> </table> </body> view page </html> ﻣﺮﺯﻫﺎی border ﻣی ﺗﻮﺍﻥ ﺑﺎ ﻣﺸﺨﺼﻪ l. ﺟﺪﻭﻝ ﺭﺍ ﻣﺸﺨﺺ ﻧﻤﻮﺩ <table style= “border: 1 px solid; ”> �� ﻣی ﺗﻮﺍﻥ ﺟﺎﻧﻤﺎیی ﺍﻓﻘی ﻭ ﻋﻤﻮﺩی ﺭﺍ l. ﺑﺮﺍی ﻫﺮ ﺳﻠﻮﻝ ﻣﺸﺨﺺ کﺮﺩ <td style= “text-align: center“> <td style= “vertical-align: bottom"> ﻣی ﺗﻮﺍﻥ ﺟﺎﻧﻤﺎیی ﺭﺍ ﺑﺮﺍی یک l. ﺭﺩیﻒ ﺗﻌﺮیﻒ ﻧﻤﻮﺩ <tr style=“text-align: center“> <tr style=“vertical-align: top“> 15

Table Width پﻬﻨﺎی ﻫﺮ ﺧﺎﻧﻪ ﺑﺮﺍﺑﺮ ﻣﺤﺘﻮی آﻦ ﺩﺭ ﻧﻈﺮ ، ﺑﻄﻮﺭ پیﺶ ﻓﺮﺽ l. گﺮﻓﺘﻪ ﻣی ﺷﻮﺩ . ﻣی ﺗﻮﺍﻥ پﻬﻨﺎی ﺧﺎﻧﻪ ﺭﺍ ﻧﺴﺒﺖ ﺑﻪ ﺻﻔﺤﻪ ﺗﻐییﺮ ﺩﺍﺩ l <table style=“width: 60%“> <html>  <head> <title>Table Width</title> </head> <body> <table style="width: 100%; "> <tr> <td>left-most </td> <td style="text-align: right; "> right-most</td> </tr> </table> </body> view page </html> 16

Inline Style Sheets <html> <!–- COMP 519 page 17. html 15. 08. 06 --> <head> <title>Inline Style Sheets</title> </head> <body> <p style="font-family: Arial, sans-serif; text-align: right">This is a right-justified paragraph in a sans serif font (preferably Arial), with some <span style="color: green">green text</span>. </p> <p>And <a style="color: red; text-decoration: none; font-size: larger; " href="1. htm">here</a> is a formatted link. </p> </body> view page </html> ﻣی ﺗﻮﺍﻥ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻣﺸﺨﺼﻪ l ﻧﺤﻮﻩ ﻧﻤﺎیﺶ یک ﻋﻨﺼﺮ ﺭﺍ style. کﻨﺘﺮﻝ کﺮﺩ ﻣی ﺗﻮﺍﻧیﻢ ﺩﺍﺧﻞ ﺍیﻦ ﺑﺮچﺴﺐ ﺩﻧﺒﺎﻟﻪ ﺍی l. ﺭﺍ ﻗﺮﺍﺭ ﺩﻫیﻢ property: value ﺍﺯ font-family: Courier, monospace font-style: italic font-weight: bold font-size: 12 pt font-size: larger color: red color: #000080 background-color: white text-decoration: underline text-decoration: none text-align: left text-align: center text-align: right text-align: justify vertical-align: top vertical-align: middle vertical-align: bottom text-indent: 5 em text-indent: 0. 2 in 23

Inline Style Sheets (cont. ) <html> <!–- COMP 519 page 18. html 15. 08. 06 --> <head> <title>Inline Style Sheets</title> </head> <body> <p>Here is an image <img src=“ 1. jpeg" alt="Tony Blair" style="margin-left: 0. 3 in; margin-right: 0. 3 in; vertical-align: middle; border-style: double; border-color: yellow“ /> embedded in text. </p> <ol style="list-style-type: upper-alpha"> <li> one thing</li> <li> or another</li> <ul style="list-style-type: square; whitespace: pre"> <li> with this</li> <li> or that</li> </ul> </ol> </body> view page </html> : ﻣﻄﺎﻟﺐ ﺑیﺸﺘﺮ l margin-left: 0. 1 in margin-right: 5% margin: 3 em padding-top: 0. 1 in padding-bottom: 5% padding: 3 em border-width: thin border-width: thick border-width: 5 border-color: red border-style: dashed border-style: dotted border-style: double border-style: none whitespace: pre list-style-type: square list-style-type: decimal list-style-type: lower-alpha list-style-type: upper-roman 24

Inline Style Sheets (cont. ) <html> <!–- COMP 519 page 19. html 15. 08. 06 --> <head> <title> Inline Style Sheets </title> </head> <body> <table style="font-family: Arial, sans-serif"> <caption style="color: red; font-style: italic; text-decoration: underline"> Student data. </caption> <tr style="background-color: red"> <th> name </th> <th> age </th> </tr> <td> Chris Smith </td> <td> 19 </td> </tr> <td> Pat Jones </td> <td> 20 </td> </tr> <td> Doogie Howser </td> <td> 9 </td> </tr> </table> </body> view page </html> 25

Document Style Sheets (cont. ) <html> <!–- COMP 519 page 21. html 15. 08. 06 --> <head> <title> Inline Style Sheets </title> <style type="text/css"> table {font-family: Arial, sans-serif} caption {color: red; font-style: italic; text-decoration: underline} th {background-color: red} </style> </head> ﺷیﻮﻩ ﻧﺎﻣﻪ ﺳﻨﺪ ﺩﺭ ﻓﺮﻣﺖ l کﺮﺩﻥ ﺟﺪﺍﻭﻝ ﺑﺴیﺎﺭ کﺎﺭآ . ﺍﺳﺖ ﻣﺤﺘﻮی ﻭ ﻧﻤﺎیﺶ ﺭﺍ ﺑﻄﻮﺭ l. ﻣﻮﺛﺮی ﺍﺯ ﻫﻢ ﺟﺪﺍ ﻣی کﻨﺪ <body> <table> <caption> Student data. </caption> <tr><th> name </th> <th> age</th></tr> <tr><td> Chris Smith </td> <td> 19 </td></tr> <tr><td> Pat Jones </td> <td> 20 </td></tr> <tr><td> Doogie Howser </td> <td> 9 </td></tr> </table> </body> view page </html> 28

Pseudo-Elements <html> <!–- COMP 519 page 23. html 15. 08. 06 --> <head> <title>Title for Page</title> <style type="text/css"> a {color : red; text-decoration : none; font-size : larger} a: visited {color : black} a: active {color : orange} a: hover {color : blue} p: first-letter {font-size : large; color : white; background-color : darkblue} </style> </head> <body> <p> Welcome to my Web page. I am so happy you are here. </p> <p> Be sure to visit <a href="http: //www. cnn. com">CNN</a> for late-breaking news. </p> </body> view page </html> ﻋﻨﺼﺮ ﻣی ﺗﻮﺍﻥ ﺑﺮﺍی - ﺍﺯ ﺷﺒﻪ l ﺻﺪﺍ کﺮﺩﻥ ﻗﺴﻤﺘﻬﺎیی ﺍﺯ یک . ﻋﻨﺼﺮ ﺍﺳﺘﻔﺎﺩﻩ کﺮﺩ ﻣﺜﻼ ﻟیﻨک ﺩﺭﺍی ﻗﺴﻤﺘﻬﺎی ﺯیﺮ : ﺍﺳﺖ l یﺎ پﺎﺭﺍگﺮﺍﻑ ﺩﺍﺭی ﺯیﺮ ﻗﺴﻤﺘﻬﺎی : ﺯیﺮ ﺍﺳﺖ l : visitedl : activel : hoverl : first-linel : first-letterl �� l �� CSS 2 �� 29

Modularity & Style Sheets <html> <!–- COMP 519 page 26. html 15. 08. 06 --> <head> <title>Title for Page</title> <link rel="stylesheet" type="text/css" href="my. Style. css" title="my. Style“ /> </head> /* my. Style. css COMP 519 02. 09. 05 */ h 1 {color : blue; text-align : center} p. indented {text-indent: 0. 2 in} <body> <h 1>Centered Title</h 1> <p class="indented">This paragraph will have the first line indented, but subsequent lines will be flush. </p> <p>This paragraph will not be indented. </p> <h 1>The End</h 1> </body> </html> view page 31