Your SlideShare is downloading. ×
May 18th, 2007 Eduardo Gonzalez WEB  PAGES & DYNAMIC CONTENT
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Short introduction <ul><li>Webpages basically consist of: </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>Present...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
HTML (XHTML) review <ul><li>Internet tutorials and references </li></ul><ul><li>www.htmldog.com </li></ul><ul><li>HTML = H...
HTML <ul><li>Simple coding language </li></ul><ul><li>You can write webpages using for example windows notepad </li></ul><...
A webpage code <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml...
Tags <ul><li><!DOCTYPE  > </li></ul><ul><li><html>  </html> </li></ul><ul><li><head>  </head> </li></ul><ul><li><title>  <...
Other tags <ul><li><em></em> - for emphasis (italics) </li></ul><ul><li><strong></strong>  - for bold text </li></ul><ul><...
Link and image tags <ul><li>Links require a <a> </a> tag as in: </li></ul><ul><ul><li><a href=&quot;http://www.htmldog.com...
Tables in HTML <ul><li>Creating tables help you organize your page structure </li></ul><ul><li>It is not an easy task for ...
The “div” tag <ul><li>Groups a piece of HTML </li></ul><ul><li>Used together with Cascading Style Sheets (css) to give sty...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Style sheets <ul><li>Add styles to your webpage </li></ul><ul><ul><li>Colors, fonts, margins… </li></ul></ul><ul><li>Allow...
Adding style <ul><li>In-line: </li></ul><ul><ul><ul><li>straight in you HTML code </li></ul></ul></ul><ul><ul><ul><ul><li>...
CSS code <ul><li>In HTML “tags” – In css “selectors” </li></ul><ul><li>The “selector” names are the same as the HTML “tag’...
Advanced selectors <ul><li>Besides HTML selectors you can use the “class” or “id” selectors: </li></ul><ul><ul><li>You can...
Example css <ul><li>Very useful properties: </li></ul><ul><ul><li>Margins </li></ul></ul><ul><ul><li>Positions </li></ul><...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Blackboard WebDAV <ul><li>Webdav in  wikipedia </li></ul><ul><li>Use webdav to add networking functionality </li></ul>
Create a network drive <ul><li>Click on “add a network place” </li></ul><ul><li>Click “Next” two times </li></ul><ul><li>C...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Slideshare code samples <ul><li>Popular gis </li></ul><ul><ul><li><object type=&quot;application/x-shockwave-flash&quot; d...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Youtube and biofuel code samples <ul><ul><li>Finnish video (swedish) </li></ul></ul><ul><ul><ul><li><object width=&quot;42...
CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Addi...
Google Maps <ul><li>You can use google maps as part of your course content: </li></ul><ul><ul><li>Linking to a google maps...
Basic google map script <ul><li>Example using the address:  http://maycourse.kwikphp.com </li></ul><ul><li>User: maycourse...
Adding controls <ul><li>Visit the  google maps documentation </li></ul><ul><ul><ul><li>You need to add this two lines to t...
Adding a kml file <ul><li>Visit the  google maps documentation </li></ul><ul><ul><ul><li>You need to add this few more lin...
Adding extra control <ul><li>Visit the  google maps documentation </li></ul><ul><li>Turning on/of the kml file </li></ul><...
Upcoming SlideShare
Loading in...5
×

Webpages And Dynamic Content

970

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
970
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Webpages And Dynamic Content"

  1. 1. May 18th, 2007 Eduardo Gonzalez WEB PAGES & DYNAMIC CONTENT
  2. 2. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps (google maps) </li></ul></ul>
  3. 3. Short introduction <ul><li>Webpages basically consist of: </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>Presentation </li></ul></ul><ul><li>For the sake of simplicity and functionality these two things can be separated: </li></ul><ul><ul><li>Content is included in a HTML file </li></ul></ul><ul><ul><li>The presentation in a Cascading Style Sheet (css) file which is linked to the HTML file </li></ul></ul>
  4. 4. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  5. 5. HTML (XHTML) review <ul><li>Internet tutorials and references </li></ul><ul><li>www.htmldog.com </li></ul><ul><li>HTML = Hyper Text Markup Language </li></ul><ul><li>XHTML =eXtended HTML </li></ul>
  6. 6. HTML <ul><li>Simple coding language </li></ul><ul><li>You can write webpages using for example windows notepad </li></ul><ul><li>Based on “tags” </li></ul><ul><li>The content is inside the “tags” </li></ul>
  7. 7. A webpage code <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>This is a webpage</title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1>This is a header</h1> </li></ul></ul><ul><ul><li><p>Here you can write your contents</p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><li></html> </li></ul>
  8. 8. Tags <ul><li><!DOCTYPE > </li></ul><ul><li><html> </html> </li></ul><ul><li><head> </head> </li></ul><ul><li><title> </title> </li></ul><ul><li><body> </body> </li></ul><ul><li><h1></h1> </li></ul><ul><li><p></p> </li></ul>
  9. 9. Other tags <ul><li><em></em> - for emphasis (italics) </li></ul><ul><li><strong></strong> - for bold text </li></ul><ul><li><br /> - for a line-break </li></ul><ul><li>Lists can be created using </li></ul><ul><ul><li><ul> </ul> - for an unordered list </li></ul></ul><ul><ul><li><ol> </ol> - for an ordered list </li></ul></ul><ul><ul><ul><li><li> </li> - for every element inside the list </li></ul></ul></ul>
  10. 10. Link and image tags <ul><li>Links require a <a> </a> tag as in: </li></ul><ul><ul><li><a href=&quot;http://www.htmldog.com&quot;>HTML Dog</a> </li></ul></ul><ul><li>Images are added withing the <img> </img> tags </li></ul><ul><ul><li><img src=&quot;http://www.htmldog.com/images/logo.gif&quot; width=&quot;157&quot; height=&quot;70&quot; alt=&quot;HTML Dog logo&quot; /> </li></ul></ul>
  11. 11. Tables in HTML <ul><li>Creating tables help you organize your page structure </li></ul><ul><li>It is not an easy task for complex tables </li></ul><ul><li>The table tags are: </li></ul><ul><ul><li><table> - opens a table </li></ul></ul><ul><ul><li><tr> - opens a row </li></ul></ul><ul><ul><li><td> Cell content</td> - gives content to a cell </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  12. 12. The “div” tag <ul><li>Groups a piece of HTML </li></ul><ul><li>Used together with Cascading Style Sheets (css) to give style to your pages </li></ul><ul><li>HTML and css are linked via tag attributes (e.g. “class” and “id” attributes) </li></ul>
  13. 13. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  14. 14. Style sheets <ul><li>Add styles to your webpage </li></ul><ul><ul><li>Colors, fonts, margins… </li></ul></ul><ul><li>Allows you to reuse your styles </li></ul><ul><ul><li>Keep the same style for all your pages </li></ul></ul><ul><li>Easy and fast to change your pages look </li></ul><ul><ul><li>Change the size of all the titles at once </li></ul></ul><ul><li>Easy to add and manage your styles </li></ul><ul><ul><li>Add new styles at any time </li></ul></ul><ul><li>www.htmldog.com </li></ul>
  15. 15. Adding style <ul><li>In-line: </li></ul><ul><ul><ul><li>straight in you HTML code </li></ul></ul></ul><ul><ul><ul><ul><li><p style=&quot;color: red&quot;>text</p> </li></ul></ul></ul></ul><ul><li>Internal: </li></ul><ul><ul><ul><li>using a <style></style> tag inside the “head” tag in your HTML code </li></ul></ul></ul><ul><li>External: </li></ul><ul><ul><ul><li>using a external file, i.e. a css file, and linking to it from the HTML file, for example: </li></ul></ul></ul><ul><ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;web.css&quot; /> </li></ul></ul></ul></ul>
  16. 16. CSS code <ul><li>In HTML “tags” – In css “selectors” </li></ul><ul><li>The “selector” names are the same as the HTML “tag’s” name </li></ul><ul><li>Inside the “selectors” you find “properties” within curly brackets </li></ul><ul><ul><li>To give a style to e.g. the <body> tag: </li></ul></ul><ul><ul><ul><ul><li>body { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>font-size: 0.8em; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>color: navy; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul>
  17. 17. Advanced selectors <ul><li>Besides HTML selectors you can use the “class” or “id” selectors: </li></ul><ul><ul><li>You can define different styles for example for different <p> tags based on their “attributes” </li></ul></ul><ul><ul><ul><li>“class” </li></ul></ul></ul><ul><ul><ul><li>“id” </li></ul></ul></ul>
  18. 18. Example css <ul><li>Very useful properties: </li></ul><ul><ul><li>Margins </li></ul></ul><ul><ul><li>Positions </li></ul></ul><ul><ul><ul><li>#navigation { position: absolute; top: 0; left: 0; width: 10em; } </li></ul></ul></ul><ul><li>You can use css to create your page layout instead of tables </li></ul><ul><li>http://www.htmldog.com/guides/cssadvanced/layout/ </li></ul>
  19. 19. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Blackboard WebDAV </li></ul></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  20. 20. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Blackboard WebDAV </li></ul></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  21. 21. Blackboard WebDAV <ul><li>Webdav in wikipedia </li></ul><ul><li>Use webdav to add networking functionality </li></ul>
  22. 22. Create a network drive <ul><li>Click on “add a network place” </li></ul><ul><li>Click “Next” two times </li></ul><ul><li>Copy the webdav addres from Blackboard </li></ul><ul><li>And fill in the user and password as they are requested </li></ul>Now you can use your Blackboard network drive to manage your files
  23. 23. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Blackboard WebDAV </li></ul></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  24. 24. Slideshare code samples <ul><li>Popular gis </li></ul><ul><ul><li><object type=&quot;application/x-shockwave-flash&quot; data=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=35302&doc=popular-gis-1853&quot; width=&quot;425&quot; height=&quot;348&quot;><param name=&quot;movie&quot; value=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=35302&doc=popular-gis-1853&quot; /></object> </li></ul></ul><ul><li>Create Your KML File by KML Editor </li></ul><ul><ul><li><object type=&quot;application/x-shockwave-flash&quot; data=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=37265&doc=create-your-kml-file-by-kml-editor-18517&quot; width=&quot;425&quot; height=&quot;348&quot;><param name=&quot;movie&quot; value=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=37265&doc=create-your-kml-file-by-kml-editor-18517&quot; /></object> </li></ul></ul>
  25. 25. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Blackboard WebDAV </li></ul></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  26. 26. Youtube and biofuel code samples <ul><ul><li>Finnish video (swedish) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/9_sOtLSrZXI&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/9_sOtLSrZXI&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul><ul><ul><li>American video (english) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/FdymZ__oQ_s&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/FdymZ__oQ_s&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul><ul><ul><li>The Future of Global Biofuels, Biodiesel and Ethanol (english) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/VML-DqpueHE&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/VML-DqpueHE&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul><ul><ul><li>Short new from Argentina (spanish) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/4iIUvAwLZNY&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/4iIUvAwLZNY&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul><ul><ul><li>Fungi for Biofuel (english) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/OCR485SXet0&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/OCR485SXet0&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul><ul><ul><li>Broad Based Wealth Using Mozmabique Bio Fuel In (english) </li></ul></ul><ul><ul><ul><li><object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/36fj8o-zmi8&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/36fj8o-zmi8&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object> </li></ul></ul></ul>
  27. 27. CONTENT <ul><li>Fast HTML (XHTML) review </li></ul><ul><li>Light presentation of style sheets (css) </li></ul><ul><li>Adding dynamic content </li></ul><ul><ul><li>Blackboard WebDAV </li></ul></ul><ul><ul><li>Flash presentations ( SlideShare ) </li></ul></ul><ul><ul><li>Video ( youtube ) </li></ul></ul><ul><ul><li>Maps ( google maps ) </li></ul></ul>
  28. 28. Google Maps <ul><li>You can use google maps as part of your course content: </li></ul><ul><ul><li>Linking to a google maps page: </li></ul></ul><ul><ul><ul><ul><li>http://maps.google.com/maps?f=q&hl=en&q=http://maycourse.kwikphp.com/stp.kml </li></ul></ul></ul></ul><ul><ul><li>Or by embedding a small google maps window into your own webpage: </li></ul></ul><ul><ul><ul><ul><li>http:// www.google.com/apis/maps/signup.html </li></ul></ul></ul></ul>
  29. 29. Basic google map script <ul><li>Example using the address: http://maycourse.kwikphp.com </li></ul><ul><li>User: maycourse; password: check out in the Blackboard course area </li></ul><ul><ul><li>Key: </li></ul></ul><ul><ul><ul><li>ABQIAAAA8aYR3W7Ieu1ZmvGUitQz1xQaptPhWtDKrHju4WjhqD_bfDRX1RTXhoxdvXejYuYT6CjJpyPVRGRVZw </li></ul></ul></ul><ul><ul><li>HTML basic example: </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/> <title>Google Maps JavaScript API Example</title> <script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA8aYR3W7Ieu1ZmvGUitQz1xQaptPhWtDKrHju4WjhqD_bfDRX1RTXhoxdvXejYuYT6CjJpyPVRGRVZw&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;> <div id=&quot;map&quot; style=&quot;width: 500px; height: 300px&quot;></div> </body> </html> </li></ul></ul></ul>
  30. 30. Adding controls <ul><li>Visit the google maps documentation </li></ul><ul><ul><ul><li>You need to add this two lines to the basic script: </li></ul></ul></ul><ul><ul><ul><ul><li>map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); </li></ul></ul></ul></ul>
  31. 31. Adding a kml file <ul><li>Visit the google maps documentation </li></ul><ul><ul><ul><li>You need to add this few more lines to the basic script: </li></ul></ul></ul><ul><ul><ul><li>var geoXml = new GGeoXml(&quot;http://maycourse.kwikphp.com/stp.kml&quot;); </li></ul></ul></ul>
  32. 32. Adding extra control <ul><li>Visit the google maps documentation </li></ul><ul><li>Turning on/of the kml file </li></ul><ul><li>You need now a bit more complex editing: </li></ul><ul><ul><li>Script modifications </li></ul></ul><ul><ul><ul><li>var toggleState = 1; </li></ul></ul></ul><ul><ul><ul><li>function toggleMyKml() { </li></ul></ul></ul><ul><ul><ul><ul><li>if (toggleState == 1) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>{ map.removeOverlay(geoXml); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>toggleState = 0; } </li></ul></ul></ul></ul><ul><ul><ul><ul><li>else { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>map.addOverlay(geoXml); toggleState = 1; } </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><li>HTML addition </li></ul></ul><ul><ul><ul><li><input type=&quot;button&quot; value=&quot;Toggle Markers&quot; onClick=&quot;toggleMyKml();&quot;/> </li></ul></ul></ul>

×