User Tools

Site Tools


en:web_development: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
en:web_development:overview [2022/02/06 06:00]
mag [MySQL]
en:web_development:overview [2023/08/16 09:33] (current)
Line 5: Line 5:
 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.+{{:en:web_development:overallphp.png?690|}}
  
 ===== 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 ^
Line 52: Line 50:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
 </head> </head>
 <body> <body>
Line 72: Line 70:
 </body></code> </body></code>
  
-**screen.css**+**style.css**
 <code>body <code>body
 { {
Line 102: Line 100:
 { {
     display: flex;     display: flex;
-    justify-content: space-betwee;+    justify-content: space-between;
 } }
  
Line 114: Line 112:
 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. 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 [[https://techschool.murraygunn.id.au/webdev/demo/overalljs.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" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  <script type="text/javascript" src="overall.js"></script>  <script type="text/javascript" src="overall.js"></script>
 </head> </head>
Line 164: Line 162:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  <script type="text/javascript" src="overall.js"></script>  <script type="text/javascript" src="overall.js"></script>
 </head> </head>
Line 175: Line 173:
             <ul>             <ul>
 <?php <?php
 +    // prepare list of photos
     $images = array('https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg',      $images = array('https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg', 
                     'https://www.applelanguages.com/en/img/top/sydney.jpg',                      'https://www.applelanguages.com/en/img/top/sydney.jpg', 
Line 180: Line 179:
                     'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg',                      'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg', 
                     'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg');                     'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg');
 +    // create HTML code for nav items
     foreach($images as $k => $photo)     foreach($images as $k => $photo)
     {     {
-        $i = $k+1; +        $i = $k+1; // display number is 1-5 instead of 0-4 used in $images 
-        echo "<li onclick=\"showImage(this, '$photo')\">Image $i</li>";+        echo "<li onclick=\"showImage(this, '$photo')\">Image $i</li>"; // the HTML code
     }     }
 ?> ?>
Line 257: Line 257:
 </body></code> </body></code>
  
-[[en:web_development:letter|Next Lesson: Letter]]+[[en:web_development:text|Next Lesson: Text]]
en/web_development/overview.1644156037.txt.gz · Last modified: 2023/08/16 09:33 (external edit)