Languages of The Web - A Beginner's Guide

mini-MOOC S E R I E S

LANGUAGES OF THE WEB Authored by David Edwin Meyers

LOUISVILLE CENTER FOR DESIGN ADDITIONAL SPONSORS Time Warner Cable & The Raspberry Pi Foundation

PREFACE: This workbook accompanies a Mini-MOOC presented by the Louisville Center for Design and Lindsey Wilson College. Additional support is provided by Time Warner Cable and the Raspberry Pi Foundation. This class is designed for absolute beginners. Many comments such as “This is the fundamental structure of ALL web sites”, within this booklet are stated as fact.

These may or may not be 100% factual but it is our attempt to avoid the details that may cloud the learning experience since we are targeting beginners.

This class is available as a 4-part online mini-MOOC experience. To schedule a session for your school, company or institution, contact David Edwin Meyers at the Louisville Center for Design at Lindsey Wilson College at 270-577-2715

Booklet Contents

CLASS 01 Class 01: Objectives n How the Web works n Discuss and create web site basic structure (Exercise 01) n Discuss and create web page basic structure (Exercise 02) n Preview work in Web browser

Key Words HTML - the language of the Web (Static code). Hypertext Markup Language PHP - the language of the Web (Dynamic code). Hypertext Preprocessor

Class 01:

n How the Web works n HTML: Discuss and create web site basic structure n Preview work in Web browser n Exercise 1 n Exercise 2

Class 02:

n Expanding page features with new tags n HTML: Understanding anatomy of a Web page n Make a variety of basic web pages with text, image and hyperlinks n Preview in a Web browser n Exercise 3 n Exercise 4

Class 03:

n Fundamentals of CSS Cascading Style Sheets n Anatomy of a CSS tag (Exercises 5) n Where to place CSS (Exercises 6) n CSS Options n Exercise 5

n Exercise 6

Class 04:

n PHP: How is it Different from HTML? n Fundamentals of PHP n Creating dynamic Web pages n Exercise 7 n Exercise 8

Extrenal Resources and Cheatsheets: HTML: http://www.simplehtmlguide.com/cheatsheet.php CSS: http://www.simplehtmlguide.com/csscheatsheet.php EXAMPLES: http://www.simplehtmlguide.com/examplesheet.php

CSS - coding language used to style content (fonts, colors, etc.). Cascading Style Sheets DNS - server address associated with domain names. These are akin to zip codes. The DNS system attaches and address to a domain name so that when you type in “wwwlc4d.org”, the DNS system knows where the webpage is “hosted” throughout the WWW and billions of computers. Domain Name System.

FTP - process used to transfer (upload and download) files that you create on your computer up to a host server. File Transfer Protocol.

Web Server - It is important to know that a Web Server is simply a computer, not that much different than the ones you and I use everyday. What makes them unique is they exists to store Web sites and deliver them to viewers when a request is made. A request is simply you typing in “http://www.WhatEverWebSite. com”.

How the Web “basically” works: - - - - - - DEVELOPER 1) Web programmer registers a domain name (@ GoDaddy, @BlueHost, etc.)

2) When registering, the host assigns a DNS address (IP address) 3) Web programmer authors/programs/codes a web page 4) They upload it via FTP to a Web server (Web Hosting Account) - - - - - - USER 5) User utilizes a Web browser and types in the domain name (i.e. www.lc4d.org) or Googles :-) 6) The browsers sends the domain name or clicked link out onto the WWW 7) The DNS systems matches the domain name to its assigned DNS IP address, which in turns sends it to a specific computer in the complex WWW consisting of billions of computers 8) This specific computer (the Web Server which hosts the Web site) sends out the requested file (usually the “index.html” file which is, by default, the designated homepage) 9) The file travels through the Internet and lands on the user’s computer.

10) The browser then translates the code and presents the interpreted page in the browser window.

Viola!

CLASS 01

CLASS 01

Exercise 01: Most Basic Web Site Structure

Exercise 02: Most Basic Webpage Structure

1) Create a new folder on your Desktop - title it “websites” (no quotes)

1) O pen Dreamweaver (or Wordpad PC/Text Edit MAC) and create a new file. This is typically done

n All future websites will reside in this folder in their respective folder

by selecting (from the main menu) FILE > NEW. In the case of Dreamweaver, you may get a dialogue box pop up. If this is the case, select “html” doc on then “OK” or “Create”

2) Within this newly created “websites” folder, create a new folder - title it “first_webite”

n This folder will house all of the necessary files for your first website

2) I n Dreamweaver, if all is successful, you will see a new scree with the following:

3) Within this newly created “first_website” folder, create a series of new folders as shown below:

n img

n css

n js

n inc

<!doctype html>

<html> <head>

websites first_website

img

<meta charset=”UTF-8”>

<title>Untitled Document</title>

</head> <body>

css

</body>

js

</html>

inc

3) S ince we are focusing on the very basics, delete lines 1 and 4. Now type in “LC4D” between the <title> and </title> tags and also “My First Web Page - WoHoooo!” between the <body> and

This is the

fundamental structure of

all web sites . . .

</body> tags (Tags are what we call specific code labels). This should leave the following: <html>

<head> <title>LC4D</title>

</head>

<body>

My First Web Page - WoHoooo!

</body>

</html> You will notice that I have indented the tags. This is called “nesting” and will help you understand the structure more

From here:

n img - will house all image files (jpgs, gifs and pngs)

n css - will house all CSS (Cascading Style Sheets) files

n js - will house all JS (Javascript) files

n inc - will house all INC (include) files

ALL future websites should be set up this exact same way. *Get in the habit of USING ALL LOWERCASE and no spaces for titling files and folders

clearly as you get deeper into coding.

4) SAVE THIS FILE! Title it “index.html” (no quotes) and place it inside the “first_website” folder.

This is the

fundamental structure of all web pages . . .

CLASS 01 Additional Snippets to Know:

1) “index.html” is the defacto default name for a “homepage” or a websites primary page.

CLASS 02 Class 02: Objectives

n Expanding page features with new tags

n text tags

2) T he extension “.html” is what allows a Web browser to detect the file as being an html doc-

n image tags

ument and thus allows the browser to interpret it properly. If you changed the extension to

n hyperlinks

“.txt”, the browser would disregard the “tags” and simply read it as a text document. n Understanding anatomy of a Web page TRY THE FOLLOWING: a) Drag the “index.html” from your “first_website” folder directly into the window of any open

n Make a variety of basic web pages with text, image and hyperlinks (Exercises 3 and 4)

browser. You will see that the browser displays “My first Website - WoHoooo!”. b) Now change the extension of you index file to “.txt”. In other words, delete the “.html” and

n Preview in a Web browser

add “.txt” in its place. Drag the “index.txt” from your “first_website” folder directly into the window of any open browser. Notice the difference? You will see that the browser displays all of the text as text. It fails to understand that it must “interpret” the tags in the document.

See the illustration below. This is a visualization of the structure that html code provides. The main shell is the overall “html” document. Within this is nested the “head” and the “body”. The

3) Web browsers also recognize MANY other extensions for web pages. The most common are:

head will always contain the “thinking” code. Items such as css styles, javascript scripts and

other goodies. The body, on the other hand contains “content”. This includes text, images, links,

.html (or .htm)

.php

etc. - all the tangible things that are seen on the web page.

.asp In Class 02, we will focus on leaning the most important html tags.

n img - will house all image files (jpgs, gifs and pngs)

n css - will house all CSS (Cascading Style Sheets) files

n js - will house all JS (Javascript) files

n inc - will house all INC (include) files

<html> <head> </head> <body> text content images links videos

</body> </html>

CLASS 02 Review: The Fundamental Tag Set

As discussed earlier, the small coding between the “<” and “>” are referred to as html tags.

Below are the most common tags used in authoring Web pages. Look at these as “learning new words” in a new language. Learning how to use just these 4 simple tags will open up a world of endless possibilities for creating web sites.

<br>

CLASS 02 Review: The Fundamental Tag Set

<p></p> This is a “paragraph” block and simply encases the content between the <p> and </p> in a singular block .

See example page code: <html>

This is a “line break” or carriage return and simply moves the content following the <br> to the

<head>

next line.

<title>LC4D</title> </head>

See example page code:

<body>

<html>

My First Web Page - WoHoooo!

<head> <title>LC4D</title>

<br>

Now lets learn more code.

</head> <body> My First Web Page - WoHoooo!<br>Now lets learn more code. </body> </html>

<p>

Now is the time for all good men and women to come to the aid of their country. Now

is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country.

</p>

</body> </html>

Note that the line break occurs exactly where the tag <br> was placed. Also know that as you learn more tags, your coding style becomes important. Browsers read html documents with no regard to spacing or indentations. This is done by programmers so that they can easily see the structure and organization. In actuality, the browser reads the html as: <html><head><title>LC4D</title></head><body>My First Web Page - WoHoooo!<br>Now lets learn more code.</body></html> But this would be hard to understand by most programmers, especially beginners. This is why the code is set up using nesting, multiple lines and indentations.

Note that the line break and paragraph breaks are somewhat similar, but use the <p> and </p> when presenting paragraphs of content.

CLASS 02 Review: The Fundamental Tag Set

CLASS 02 Review: The Fundamental Tag Set

<h1></h1>

<a>

default. Each progressively gets smaller:

This is a “hyperlink” but needs additional code so the browser knows where to link.

This designates text as a “headline” - there fore its larger and bold. There are 6 “h” tags by

Headline</h1>

<h1>

<a href=”http://www.lc4d.com”>lc4d</a>

<h3>Headline</h3>

The “a” is followed by “href”. The href is shorthand for “hyperlink reference”. You have to tell the browser where the link to go. The destination goes between the “ “ double quotes. Know that you can put a full web site address OR a local file that is housed in the same website folder.

<h4>Headline</h4>

Possible examples:

Headline</h2>

<h2>

<h5>Headline</h5>

<a href=”http://www.lc4d.com”>lc4d</a> <a href=”biography.html”>My Biography</a>

<h6>Headline</h6> See example page code: <html>

See example page code: <html> <head>

<head>

<title>LC4D</title>

<title>LC4D</title>

</head>

</head>

<body>

<body> <h1>My First Web Page - WoHoooo!</h1>

Now lets learn more code. <p>

Now is the time for all good men and women to come to the aid of their country. Now

is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country.

</p>

</body> </html>

Note that I eliminated the <br> tag after the headline. “h” tags add a line break by default.

<h1>My First Web Page - WoHoooo!</h1>

Now lets learn more code. <p>

Now is the time for all good men and women to come to the aid of their country. Now

is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country.

</p>

<p>

<a href=”http://www.lc4d.com”>lc4d</a>

<br>

You use this to say something like:

<br>

Click <a href=”http://www.lc4d.com”>here</a> to visit LC4D

</p>

</body> </html>

CLASS 02 Review: The Fundamental Tag Set

<img> This is an “image” but needs additional code so the browser knows where the image is located.

<img src=”img/logo.png”>

CLASS 02

Exercise 03: Basic Web Page Using all Tags 1) O pen Dreamweaver (or Wordpad PC/Text Edit MAC) and create a new file. In the dialogue pop-up, select “html” doc on then “OK” or “Create” 2) I n Dreamweaver, type in the following code. This is the code that we just reviewed in the preceding pages. <html> <head>

The “img” is followed by “src”. The src is shorthand for “source”. You have to tell the browser where the image is located. The destination or path goes between the “ “ double quotes. Notice that we use “img” and then a forward slash - and then the name of the image. This tells the

<title>LC4D</title> </head> <body>

browser to go to the folder named “img” and inside, show the image titled “logo.png”.

See example page code: <html> <head> <title>LC4D</title> </head> <body> <h1>My First Web Page - WoHoooo!</h1>

Now lets learn more code. <p>

Now is the time for all good men and women

is the time for all good men and women to come to the aid all good men and women to come to the aid of their country. and women to come to the aid of their country.

</p>

<p>

<a href=”http://www.lc4d.com”>lc4d</a>

<br>

You use this to say something like:

<br>

Click <a href=”http://www.lc4d.com”>here</a> to visit LC4D

</p>

<p>

<img src=”img/logo_lc4d.png”>

</p>

</body> </html>

<h1>My First Web Page - WoHoooo!</h1>

Now lets learn more code. <p>

Now is the time for all good men and women to come to the aid of their country. Now

is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country. Now is the time for all good men and women to come to the aid of their country.

</p>

<p>

<a href=”http://www.lc4d.com”>lc4d</a>

<br>

You use this to say something like:

<br>

Click <a href=”http://www.lc4d.com”>here</a> to visit LC4D

</p>

<p>

<img src=”img/logo_lc4d.png”>

</p>

</body> </html> 3) SAVE THIS FILE! Title it “tag_examples.html” (no quotes) and place it inside the “first_website” folder.

4) Preview the file. With your “first_website” folder open, simply drag the “tag_examples.html” file into any open browser window.

Congratulations! You have just programmed a web page that contains all of the basic html tags.

CLASS 02

Exercise 04: Basic Web Page - HTML Playground

CLASS 02 Additional Snippets to Know:

1) Open Dreamweaver (or Wordpad PC/Text Edit MAC) and create a new file. In the dialogue pop-up, select “html” doc on then “OK” or “Create”

1) When linking images (img src) and hyperlinks (a href) there are two basic forms of paths:

2) In Dreamweaver, use the tags that you learned about in class two to accomplish the following:

This is a trail or “path” to the file (image or html file) that is based on a starting point that is

- T ry to add additional images in your “img” folder and display them in your web page using the “img src” tags.

- Try to add a link using the “a href” tags to link between your index.html, tag_examples. html, and tag_playground.html files.

3) SAVE THIS FILE! Title it “tag_playground.html” (no quotes) and place it inside the “first_website” folder.

4) Preview the file. With your “first_website” folder open, simply drag the “tag_examples.html” file into any open browser window.

RELATIVE PATHS relative to the actual file that contains the links.

For example, if you have a file titled “page01html” and inside this file there is a link to a file titled “page02.html” - the link might look like this: <a href=”page02.html”>Page Number 2</a> This assumes that “page01.html” and “page02.html” are in the same folder.

To illustrate how this works, imagine “page02.html: being stored inside a folder titled “pages”.

The link would now have to be: <a href=”pages/page02.html”>Page Number 2</a> in order to work properly. Note that you had to ad “pages/” as that is the folder that “page02. html” is housed.

<br> Example: This will make me go to the<br>next line.

ABSOLUTE PATHS This is a trail or “path” to the file (image or html file) that can be found regardless of the referring file. It is not important in terms of where the reference file is located because an absolute path can be resolved regardless of where it is stored. How is this possible? Because it contains

<p></p>

an “entire and absolute” path to the file.

Example: <p>Now is the time for all good men and women to the aid of their country. </p>

For example, if you place the linked files below into your document, they will work no matter where you place your web page (html file). I could also use these same links on different pages,

<h1></h1>

in different folders and on different servers. They would still work because they are complete and absolute.

Example: <h1>My First Web Page - WoHoooo!</h1> Example 01: <a href=”http://www.lc4d.org/index.php”>lc4d</a>

<a>

Example 02: <img src=”https://www.google.com/images/srpr/logo11w.png”>

Example: <a href=”pages/page02.html”>Page Number 2</a>

whitehouse_www/images/icons/wh_logo_seal.png”>

Example 03: <img src=” https://www.whitehouse.gov/profiles/forall/modules/custom/gov_

Example: <a href=”http://www.lindsey.edu”>LWC</a> Lets look at the 3rd example. The file “wh_logo_seal.png” is in a folder named “icons” which is

<img>

in a folder named “images” which is in a folder named “gov_whitehouse_www” which in turn,

Example: <a href=”http://www.lc4d.org/index.php”>lc4d</a>

which is housed inside “forall”, which is n a folder named “profiles” which resides in the main

Example: <img src=”https://www.google.com/images/srpr/logo11w.png”>

“https://www.whitehouse.gov” website folder.

is in a folder named “custom”. The “custom” folder is located inside a folder named “modules”

Now that is bureaucracy!

CLASS 03 Class 03: Objectives

CLASS 03 Review: The Fundamentals of CSS Up to this point we have learned 9 basic html tags:

n Fundamentals of CSS Cascading Style Sheets

<html></html>

n text tags

<head></head> <p></p>

n image tags

<title></title>

<a href></a>

n hyperlinks

<body></body>

<img src>

<br>

<h1></h1> n Anatomy of a CSS tag These tags allow us to build a Web page and add “content”. Content being defined as text, imagn Where to place CSS

es and hyperlinks. With an understanding of just these few tags, we can build a website similar to Wikipedia that contains millions of pages and oodles of content.

n CSS Options But if we want to control the “style” of the content we need CSS. Style being defined as the color, size and fonts of the text, and the placement and alignment of the images - and the size, color and style of the hyperlinks.

p{ color: red; text-align: center; }

Know that there is a clear distinction between coding “content” and then “styling content”. CSS is solely designed for this purpose - to style your content.

Typically, CSS is written in a separate file and titled with the .css extension. For example:

style.css And you guessed it! You place this file in your CSS folder that we created earlier. So your directory and file structure would look like this: Another major reason that CSS is housed seperately is that is can be accessed by ALL web pages as a reference link. This allows us to make a change only once in the main CSS file and that change will be reflected in all of the pages that the CSS file is linked to.

To link the CSS file to your Web page, you simply add a link to it in the “head” area of your html file - like this: <head> <link rel=”stylesheet” type=”text/css” href=”css/style.css”> </head>

CLASS 03

Exercise 05: Creating a Simple CSS File 1) Open Dreamweaver (or Wordpad PC/Text Edit MAC) and create a new file. In the dialogue pop-up, select “css” doc on then “OK” or “Create” 2) In Dreamweaver, type in the following code. This is coded in a style that CSS requires. p{ color: #ff0000; text-align: center; } h1{ color: #0000ff; text-align: left; font-size: 36px; font-family: Impact, , sans-serif

CLASS 03 Exercise 06: CSS Playground

1) O pen Dreamweaver (or Wordpad PC/Text Edit MAC) and create a new file. In the dialogue pop-up, select “html” doc on then “OK” or “Create” 2) Y our task is to assemble a biography of you that includes:

- Your name <p>

- A photo of you <img>

- A short biography, one paragraph <p>

- A list of your top 5 favorite website links <a> 3) First create the HTML document (as instructed in item 1). This is where you will use all the html tags that you have learned. Simply use these tags with your content (bio, photo, links, etc.).

4) SAVE THIS FILE! Title it “bio.html” (no quotes) and place it inside the “first_website” folder.

5) Next, open your “style.css” file and play with styling different selector tags.

}

The basic concept is:

A) You define the tag you want to style (This is called a “selector”)

B) You list a “property” and a “value” A property is something like “color” and the value would be something like “red”.

This is illustrated in the sample code above.

3) SAVE THIS FILE! Title it “style.css” (no quotes) and place it inside the “css” folder that is located withing you “first_website” folder.

4) Now open the “tag_examples.html” file that you created from class 02. And in the head area, add the following code: <head> <title>LC4D</title>

6) SAVE THIS FILE! Title it “bio_style.css” (no quotes) and place it inside the “css” folder that is located withing you “first_website” folder.

7) Now place the following code in the head area of your “bio.html” file: <head> <title>My Bio: Your Name Here</title> <link rel=”stylesheet” type=”text/css” href=”css/bio_style.css”> </head> 8) Preview the “bio.html” file now by dragging it into a Web broeser.

IMPORTANT NOTE: It is very easy to become frustrated trying to style content - for beginners. Many times we can picture in our mind what we want, but we simply are not familiar with the vast majority of available tags.

There is no way around this, especially for beginners, other than to have a reference or cheetsheet that lists all the tags and what they do. Even seasoned pros rely on cheetsheets and reference sites - as well as googling for solutions. See W3SCHOOLS for great references for HTML, CSS and PHP:

<link rel=”stylesheet” type=”text/css” href=”css/style.css”> </head>

W3Schools.com

Note that the path includes “css/”. This lets your “tag_examples.html” file know that it must go into

HTML: http://www.w3schools.com/html/default.asp

the CSS folder to find the “style.css” file.

CSS: http://www.w3schools.com/css/default.asp PHP: http://www.w3schools.com/php/default.asp

5) Preview the “tag_examples.html” file now by dragging it into a Web browser. Your page should

SimpleHtmlGuide.com

reflect the styling as defined in the CSS style sheet. Your <h1> headlines should be blue and 36px

HTML: http://www.simplehtmlguide.com/cheatsheet.php

in height. And your text that is in the <p> tags should be red and aligned to the center.

CSS: http://www.simplehtmlguide.com/csscheatsheet.php EXAMPLES: http://www.simplehtmlguide.com/examplesheet.php

Congratulations! You have just styles a web page using Cascading Style Sheets.

Note: You will see that the webpages used by W3Scools.com and SimpleHtmlGuide.com end in a “.php” extension. We will discuss the basics of PHP in the final class.

CLASS 04 Class 04: Objectives

CLASS 04 Review: The Fundamentals of PHP

Fundamentals of PHP as a “dynamic” coding language

n syntax <? ... ?>

n echo n Date n Includes (inc folder) n Variables n Pass values through URLs

As we have discussed, HTML is considered a “static” language. PHP, on the other hand is

Fundamental PHP Rules

Therefore when a user requests a webpage with that code, it will display it in the bowser as:

n

n

n

A ll PHP must be enclosed inside the open and close php tags. You can place php tags in HTML but the file needs to end in .php for the PHP to be read: <? PHP CODE GOES HERE ?> T o show text or php code in the browser, you must use “echo”: <? echo “Hello World”; ?>

n

Like CSS, all lines end with a semi-colon

n

Y ou can incude a single “include file” in as many pages as you like. All of these pages will reference the master include file which is typically placed in the “inc” sub folder. <? include (“inc/mast.php”); ?> < - - - - Note the PATH to locate the include file

considered to be a “dynamic” language. This is because PHP is “processed” on the server BEFORE it sent to the end user and their browser. For example, consider the following: In HTML, to show a date, one might write the following: <p>The date is 12/13/2015</p>

The date is 12/13/2015 It will display it in that manner no matter the date, because it is hardcoded and static.

In PHP, to show a date, one might write the following: <p>The date is <? echo date(“d, m, Y”); ?></p> Therefore when a user requests a webpage with that code, it will display it in the bowser as: The date is 12/13/2015

< - - - - (It will properly display the current date, every day)

How does it work? The server reads the code and “processes” it based on the servers date then, and only the, after processing - it sends out the file to the browser and is read as HTML (or

n

n

n

Y ou define (or declare) a variable with a dollar sign $ <? $name = “David”; echo $name; < - - - - This will display David ?> V ariables can be changed at any time <? $name = “David”; echo $name; < - - - - This will display David $name = “Susan”; echo $name; < - - - - This will display Susan ?> Y ou can pass values though your url and place in a variable index.php?name=David <? $name = $_GET[‘name’]; echo $name; < - - - - This will display David ?>

pre-processed PHP) code.

PHP Fun With Dates You can test php online here: http://www.w3schools.com/php/showphp.asp?filename=demo_syntax Get a Simple Time Here are some characters that are commonly used for times:

h - 12-hour format of an hour with leading zeros (01 to 12)

i - Minutes with leading zeros (00 to 59)

s - Seconds with leading zeros (00 to 59)

a - Lowercase Ante meridiem and Post meridiem (am or pm)

The example below outputs the current time in the specified format:

<? $name = $_GET[‘name’]; echo The Time is: date(“h:i:sa”); ; < - - - - This will display The time is 06:20:19pm ?>

CLASS 04 Exercise 06: Using Include files

1) Duplicate your website from session 3 and rename the main folder “website04”. We will repurpose all of these file to save time, but insert PHP code.

CLASS 04 Exercise 06: PHP Picture Playground

1) U sing any page (i.e. index.php), paste in the following code anywhere in the body: <? echo “The current second is ”. date(“s”);

2) Change the file extensions on all of the “.html” file to “.php”

< - - - - This will display a number between 0-60 or the current second. ?>

3) Create a simple include file. We will use the header area from website03 and make it a separate include file. Open the website03 index.php (formerly index.html) file.

4) Copy the header area - start at the open <div> and end at the close </div> tag as so: <div id=”header”> <img src=”img/header.jpg”> </div> 5) Create a new file from scratch and paste in the above code. It should be ONLY the above code - no html, body, title, etc.. only waht is shown above.

6) SAVE THIS FILE! Title it “header.php” (no quotes) and place it inside the “inc” folder - inside the website04 folder.

7) With the index.php file still open, paste in the following code IN PLACE OF (substitute the code)

2) B ased on this, type in the following code: <? $now = date(“s”); echo $now; ?> This first places the “current second” into the variable $now, then when we echo the variable and it displays the variable - a number between 0-60 or the current second.

3) This gives us the ability to become creative. For example, imagine that, in our :img” (images” folder, we have 60 images, each named using the following format: pict01.jpg... pict02.jpg... pict03.jpg... pict04.jpg... pict05.jpg... and so on.

Using the date snippet and a variable, we can create code that will display a different picture “dymnamically” everytime the page is loaded. See the code below: <? $now = date(“s”);

So delete:

echo ‘<img src=”img/andy’.$now.’.jpg”>’;

<div id=”header”>

?>

<img src=”img/header.jpg”> </div> And paste in this in its place: <? include (“inc/header.php”); ?> If you upload this file to a server and preview, you will see that the “header.php” code is injected in the place as indicated and the header appears as desired. NOTE: You can only preview PHP pages from a web server - You CANNOT simply drag into a browser as we have been doing.

Congratulations! You have just created a web page using a PHP include tag.

The red dots . connect the pieces together like this:

<img src=”img/andy + $now + .jpg”> so the final result is: <img src=”img/andy04.jpg”> and likewise displays this image.

Try it!