====== Web Development ====== ===== Lesson 1 - Overview ===== ===== Objective ===== 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 ===== 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 ^ | HTML (HyperText Markup Language) | Estructura y contenido de página | | CSS (Cascading Style Sheet) | Diseño de página | | Javascript | Hacer dinámica la página | | Server Side Script - PHP, Java | Hacer consistencia entre paginas, Personalización | | 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. ===== 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 of the code we can see a

section and a

section. The

section contains the navigation and the displayed image. See the resulting page [[http://techschool.murraygunn.id.au/webdev/demo/overall.html|here]]. **overall.html**

===== CSS ===== Cascading Style Sheets provide the design information including positioning and coloring of elements. Notice the new line in 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**

**screen.css**

body
{
    background-color: #334;
}

h1
{
    text-align: center;
    color: #eee;
    font-size: 3em;
}

nav 
{
    top: 100px;
    color: #ddd;
    padding-right: 100px;
}

nav li
{
    list-style: none;
    font-family: sans-serif;
    font-size: 1.5em;
}

main
{
    display: flex;
    justify-content: space-betwee;
}

img 
{
    max-width: 1000px;
    padding: 10px 10px;
    border: 2px #eee solid;
}

===== Javascript ===== The page really begins to take off when we add Javascript, again by including a line in 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]]. **overall.html**

**overall.js**

function showImage(element, photo)
{
    // restore colour of all nav text
    list = document.getElementsByTagName('li');
    for(a of Object.keys(list))
    {
        item = list[a];
        console.log(list[a]);
        item.style.color="#ddd";
    }

    element.style.color='#0dd'; // change selected text to blue
    document.getElementById('photo').src=photo; // update photo
}

===== 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. See the results [[http://techschool.murraygunn.id.au/webdev/demo/overall.php|here]]. **overall.php**



    
	


    
        Sydney
    
    
        
            
 $photo)
    {
        $i = $k+1;
        echo "Image $i";
    }
?>

getMessage(), (int)$e->getCode());
    }
    
    // get city from URL
    $city = $_GET['city'];
?>

    
	


    
        
    
    
        
            
prepare($query);
    $rslt->execute($args);
    while ($row = $rslt->fetch())
    {
        $url = $row['url'];
        echo "{$row['name']}";
    }
?>

[[web_design:letter|Next Lesson: Letter]]