Tech School

User Tools

Site Tools

Trace: • exercise
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/03 12:07]
mag [MySQL] 		web_design:overview [2023/08/16 09:33] (current)
Line 1: Line 1:
-====== Web Development Overview ======+====== Web Development ====== 
 +===== Lesson 1 - Overview ===== 
 ===== Objective ===== ===== Objective =====
-This page 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 (Custom 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.
 ===== HTML ===== ===== HTML =====
-This version uses only HTML. It is typically where we start building our page because it contains the content and provides the structure that will be used later. We typically put the elements in the order we see them on the page (top to bottom, left to right). In the <body> of the code we can see a <header> section and a <main> section. The <main> section contains the list of links and the displayed image.+This version uses only HTML. It is typically where we start building our page because it contains the content and provides the structure that will be used later. We typically put the elements in the order we see them on the page (top to bottom, left to right). In the <body> of the code we can see a <header> section and a <main> section. The <html><main></html> section contains the navigation and the displayed image.
  
 See the resulting page [[http://techschool.murraygunn.id.au/webdev/demo/overall.html|here]]. See the resulting page [[http://techschool.murraygunn.id.au/webdev/demo/overall.html|here]].
  
-overall.html+**overall.html**
 <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 43: 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 68: Line 72:
 </body></code> </body></code>
  
-screen.css+**screen.css**
 <code>body <code>body
 { {
Line 108: 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 136: Line 140:
 </body></code> </body></code>
  
-overall.js+**overall.js**
 <code>function showImage(element, photo) <code>function showImage(element, photo)
 { {
Line 151: 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 156: 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 186: 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.
  
-See the results [[http://techschool.murraygunn.id.au/webdev/demo/overallsql.php|here]].+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 203: 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 250: Line 256:
     </main>     </main>
 </body></code> </body></code>
 +
 +[[web_design:letter|Next Lesson: Letter]]
web_design/overview.1633288041.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