languages of the web - a beginner's guide

mini-MOOCS E R I E S

LANGUAGES OF THE WEB

A D D I T I O N A L S P O N S O R S

Time Warner Cable & The Raspberry Pi Foundation

LOUISVILLE CENTER FOR DESIGN

Authored by David Edwin Meyers

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

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 01PREFACE: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: 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

Exercise 01: Most Basic Web Site Structure

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

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

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

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

This is thefundamentalstructure of all web sites . . .

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

websites

first_websiteimg

css

js

inc

Exercise 02: Most Basic Webpage Structure

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

by selecting (from the main menu) FILE > NEW. In the case of Dreamweaver, you may get a dia-

logue box pop up. If this is the case, select “html” doc on then “OK” or “Create”

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

<!doctype html>

<html>

<head>

<meta charset=”UTF-8”>

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

3) Since 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

</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

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 thefundamental structure of all web pages . . .

CLASS 01 CLASS 01

Additional Snippets to Know:

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

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

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

“.txt”, the browser would disregard the “tags” and simply read it as a text document.

TRY THE FOLLOWING:

a) Drag the “index.html” from your “first_website” folder directly into the window of any open

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

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.

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

.html (or .htm)

.php

.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

CLASS 01 CLASS 02Class 02: Objectives

n Expanding page features with new tags

n text tags

n image tags

n hyperlinks

n Understanding anatomy of a Web page

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

n Preview in a Web browser

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

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,

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

<html>

</html>

<head>

</head>

text content

<body>

</body>

images

links

videos

CLASS 02Review: 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>This is a “line break” or carriage return and simply moves the content following the <br> to the

next line.

See example page code:

<html>

<head>

<title>LC4D</title>

</head>

<body>

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

</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.

CLASS 02Review: 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 .


<html>

<head>

<title>LC4D</title>

</head>

<body>

My First Web Page - WoHoooo!

<br>

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 the line break and paragraph breaks are somewhat similar, but use the <p> and </p>

when presenting paragraphs of content.

Review: The Fundamental Tag Set

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

<a href=”http://www.lc4d.com”>lc4d</a>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.

Possible examples:

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

<a href=”biography.html”>My Biography</a>


<html>

<head>

<title>LC4D</title>

</head>

<body>

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


<p>





</p>

<p>


<br>

You use this to say something like:

<br>

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

</p>

</body>

</html>


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

default. Each progressively gets smaller:

<h1>Headline</h1>

<h2>Headline</h2>

<h3>Headline</h3>

<h4>Headline</h4>

<h5>Headline</h5>

<h6>Headline</h6>


<html>

<head>

<title>LC4D</title>

</head>

<body>



<p>





</p>

</body>

</html>

Note that I eliminated the <br> tag after the

headline. “h” tags add a line break by default.

CLASS 02 CLASS 02


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

<img src=”img/logo.png”>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

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


<html>

<head>

<title>LC4D</title>

</head>

<body>



<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.


</p>

<p>


<br>


<br>


</p>

<p>

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

</p>

</body>

</html>

CLASS 02 CLASS 02Exercise 03: Basic Web Page Using all Tags

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”

2) In Dreamweaver, type in the following code. This is the code that we just reviewed in the

preceding pages.

<html>

<head>

<title>LC4D</title>

</head>

<body>



<p>


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>


<br>


<br>


</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 CLASS 02Exercise 04: Basic Web Page - HTML Playground

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”

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

- Try 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.

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

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

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

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

Example: <a href=”http://www.lindsey.edu”>LWC</a>

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

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

Additional Snippets to Know:

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

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

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.

ABSOLUTE PATHSThis is a trail or “path” to the file (image or html file) that can be found regardless of the refer-

ring 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

an “entire and absolute” path to the file.

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,

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

and absolute.

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

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

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

whitehouse_www/images/icons/wh_logo_seal.png”>

Lets look at the 3rd example. The file “wh_logo_seal.png” is in a folder named “icons” which is

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

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

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

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

Now that is bureaucracy!


n Fundamentals of CSS Cascading Style Sheets

n text tags

n image tags

n hyperlinks

n Anatomy of a CSS tag

n Where to place CSS

n CSS Options

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

Review: The Fundamentals of CSSUp to this point we have learned 9 basic html tags:

<html></html> <br>

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

<title></title> <a href></a>

<body></body> <img src>

<h1></h1>

These tags allow us to build a Web page and add “content”. Content being defined as text, imag-

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.

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.

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>

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

}

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>

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

</head>

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

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

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

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

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

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

CLASS 03 CLASS 03Exercise 06: CSS Playground

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”

2) Your 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.

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:

W3Schools.com

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

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

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

SimpleHtmlGuide.com

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

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

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

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.


n Fundamentals of PHP as a “dynamic” coding language n syntax <? ... ?> n echon Daten Includes (inc folder)n Variablesn Pass values through URLs

Fundamental PHP Rules

n All 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 ?>

n To 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 You 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

n You define (or declare) a variable with a dollar sign $ <? $name = “David”; echo $name; < - - - - This will display David ?>

n Variables can be changed at any time <? $name = “David”; echo $name; < - - - - This will display David $name = “Susan”; echo $name; < - - - - This will display Susan ?>

n You can pass values though your url and place in a variable index.php?name=David <? $name = $_GET[‘name’]; echo $name; < - - - - This will display David ?>

Review: The Fundamentals of PHP

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

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>

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 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

pre-processed PHP) code.

PHP Fun With DatesYou 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 04Exercise 06: PHP Picture Playground

1) Using any page (i.e. index.php), paste in the following code anywhere in the body:

<?

echo “The current second is ”. date(“s”);

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

?>

2) Based 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 “dym-namically” everytime the page is loaded. See the code below:

<?

$now = date(“s”);

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

?>

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!

Exercise 06: Using Include files

1) Duplicate your website from session 3 and rename the main folder “website04”. We will repur-

pose all of these file to save time, but insert PHP code.

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

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)

So delete:

<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.

CLASS 04

languages of the web - a beginner's guide

Documents