Tech School

User Tools

Site Tools

Trace: • exercise • padding_margin • layout • update
web_design:overview

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
web_design:overview [2021/10/06 08:29]
mag [HTML] 		web_design:overview [2023/08/16 09:33] (current)
Line 4: Line 4:
 ===== Objective ===== ===== Objective =====
 This lesson introduces the technologies required to create a fully functional web application or web site. This lesson introduces the technologies required to create a fully functional web application or web site.
 +
 +Esta lección presenta las tecnologías necesarias para crear una aplicación web o un sitio web completamente funcional.
  
 ===== Introduction ===== ===== Introduction =====
 The following technologies are commonly used to create web pages and applications. While an extremely basic page can be created solely using HTML, you'll usually want to use a combination of these for your sites. The following technologies are commonly used to create web pages and applications. While an extremely basic page can be created solely using HTML, you'll usually want to use a combination of these for your sites.
 +
 +Las siguientes tecnologías se utilizan comúnmente para crear páginas web y aplicaciones. Si bien una página extremadamente básica se puede crear únicamente usando HTML , generalmente querrá usar una combinación de estos para sus sitios.
  
 ^ Tecnologia ^ Funcion ^ ^ Tecnologia ^ Funcion ^
-| HTML (HyperText Markup Language) | Structura y contenido de pagina | +| HTML (HyperText Markup Language) | Estructura y contenido de página | 
-| CSS (Cascading Style Sheet) | Deseno de pagina | +| CSS (Cascading Style Sheet) | Diseño de página | 
-| Javascript | Hacer dinamica la pagina | +| Javascript | Hacer dinámica la página | 
-| Server Side Script - PHP, Java | Hacer consistencia entre paginas, Personalisacion | +| Server Side Script - PHP, Java | Hacer consistencia entre paginas, Personalización | 
-| Database - MySQL, SQL | Guardar informacion |+| Database - MySQL, SQL | Guardar información |
  
 Let's look at a simple page to get an idea of what each of these technologies provides by building a page that shows a photo, and allows the photo to be changed by clicking on links in a side panel. Let's look at a simple page to get an idea of what each of these technologies provides by building a page that shows a photo, and allows the photo to be changed by clicking on links in a side panel.
Line 24: Line 28:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <!-- <link rel="stylesheet" media="screen" type="text/css" href="screen.css" /> 
- <script type="text/javascript" src="overall.js"></script> --> 
 </head> </head>
 <body> <body>
Line 45: Line 47:
 </body></code> </body></code>
 ===== CSS ===== ===== CSS =====
-Custom Style Sheets provide the design information including positioning and coloring of elements. Notice the new line in <head> of the html file that informs the client where to find the css file. Our example is beginning to look more like a web page. See the results [[http://techschool.murraygunn.id.au/webdev/demo/overallcss.html|here]]+Cascading Style Sheets provide the design information including positioning and coloring of elements. Notice the new line in <html><head></html> of the html file that informs the client where to find the css file. Our example is beginning to look more like a web page. See the results [[http://techschool.murraygunn.id.au/webdev/demo/overallcss.html|here]]
  
-overallcss.html+**overallcss.html**
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
Line 70: Line 72:
 </body></code> </body></code>
  
-screen.css+**screen.css**
 <code>body <code>body
 { {
Line 110: Line 112:
 }</code> }</code>
 ===== Javascript ===== ===== Javascript =====
-The page really begins to take off when we add Javascript, again by including a line in <head> telling the client where to find the JS (Javascript) code. The code is activated by clicking the item in the sidebar, which includes details of the image to use. The code replaces the image and changes the colours of the sidebar items to show which image has been selected.+The page really begins to take off when we add Javascript, again by including a line in <html><head></html> telling the client where to find the JS (Javascript) code. The code is activated by clicking the item in the sidebar, which includes details of the image to use. The code replaces the image and changes the colours of the sidebar items to show which image has been selected.
  
 See the results [[http://example.com|here]]. See the results [[http://example.com|here]].
  
-overall.html+**overall.html**
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
Line 138: Line 140:
 </body></code> </body></code>
  
-overall.js+**overall.js**
 <code>function showImage(element, photo) <code>function showImage(element, photo)
 { {
Line 153: Line 155:
     document.getElementById('photo').src=photo; // update photo     document.getElementById('photo').src=photo; // update photo
 }</code> }</code>
 +
 ===== PHP ===== ===== PHP =====
 PHP is code that runs on the server to produce the HTML sent to the client. It is very powerful, but in this example, we simply provide the same HTML we've already seen. For a large number of images, the PHP code is much more efficient. It can also cope with lists of different lengths more easily than pure HTML can. PHP is code that runs on the server to produce the HTML sent to the client. It is very powerful, but in this example, we simply provide the same HTML we've already seen. For a large number of images, the PHP code is much more efficient. It can also cope with lists of different lengths more easily than pure HTML can.
Line 158: Line 161:
 See the results [[http://techschool.murraygunn.id.au/webdev/demo/overall.php|here]]. See the results [[http://techschool.murraygunn.id.au/webdev/demo/overall.php|here]].
  
-overall.php+**overall.php**
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
Line 188: Line 191:
     </main>     </main>
 </body></code> </body></code>
 +
 ===== MySQL ===== ===== MySQL =====
 MySQL is a database that can be used to store any information you need in a set of tables. In this example, we store a list of photos in a single table. Then we connect to the database in the first part of the PHP code and get the list of photos in the later part. MySQL is a database that can be used to store any information you need in a set of tables. In this example, we store a list of photos in a single table. Then we connect to the database in the first part of the PHP code and get the list of photos in the later part.
Line 193: Line 197:
 See the results at http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=sydney and http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=medellin. See the results at http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=sydney and http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=medellin.
  
-MySQL+**MySQL**
 ^ ID ^ City ^ Photo ^ Link ^ ^ ID ^ City ^ Photo ^ Link ^
 |1 |Sydney |harbour |https://upload.wikimedia.org/wikipedia/commons/thu...| |1 |Sydney |harbour |https://upload.wikimedia.org/wikipedia/commons/thu...|
Line 205: Line 209:
 |9 |Medellin |Botanical Gardens |https://inhabitat.com/files/orq-1-frontpage-b-537x...| |9 |Medellin |Botanical Gardens |https://inhabitat.com/files/orq-1-frontpage-b-537x...|
  
-overall.php+**overall.php**
 <code><?php <code><?php
     // Set up database connection     // Set up database connection
- define ('DBCONNECT', "/home/mag/pdo.php"); // database connection +    define ('DBCONNECT', "/home/mag/pdo.php"); // database connection 
- define ('ROOT', "/var/www/html/"); // url+    define ('ROOT', "/var/www/html/"); // url
     define ('DB', "webtut");     define ('DB', "webtut");
     include_once DBCONNECT;     include_once DBCONNECT;
Line 252: Line 256:
     </main>     </main>
 </body></code> </body></code>
 +
 +[[web_design:letter|Next Lesson: Letter]]
web_design/overview.1633534146.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki