Web Project 1: "Static"

NotesforISEM501BrochuretoWebPage.docx

Home >Computer Science homework help >Web Project 1: "Static"

Notes for ISEM501 - Web Project

Note: When you resume your C9 workspace, you need to re-activate the python virtual environment into which you installed Flask during the python/Flask setup steps.

1. When you execute the command to start the Flask app, you may get this error:

To correct this, execute the following command:

> workon flask-tutorial

You will notice that the command prompt now includes the name of the virtual environment in parentheses at the front:

You can now start the python Flask app as per normal:

> python run_app.py

Sample: Steps to convert a brochure to a web page.

Assume you are given a MS Word document, for a client brochure, that they would like you to implement as a web page. There are many ways to accomplish this, but for this exercise I will pick several steps which work well with small projects, and can also be used as a platform for learning about HTML, CSS, and Javascript.

NOTE: The MS Word document ("Dons_Auto_Repairs.docx") I am using can be found on the Moodle page for our class, under the Module 5 - Web site Project Tab, in the Sample Project Files folder.

Steps:

Phase 1: Create an unformatted HTML page, using the content from the MS Word file.

1.1. Open the MS Word document, select the entire document, and paste it into a text editor, such as the open source Sublime, or Notepad++. (Don't use the default Notepad editor in windows since it is so limited in functionality). This step is done to remove all the MS Word formatting characters which are embedded in the document, which may cause issues when included in the HTML file.

1.2. Create a new HTML file in your C9 project. Rename it to something such as 'dons_auto.html'.

- NOTE: The new file must be created in the templates directory.

- Right-click on the templates node, and select New File.

- Change the name from "Untitled" to "dons_auto.html"

1.3. Select the contents of the entire file that you have open in the text editor, copy it, and paste it into the newly-created file in C9.

1.4 Update the Flask project so you can type a URL such as 'dons_auto', and the new page will show in the application.

1.4.1 Edit the file app.py

1.4.2 Add these lines to your file:

@app.route('/dons_auto')

def dons_auto_view():

return render_template('dons_auto.html')

It should look something like:

1.5 Save this file (app.py), and bring up the web output tab. The full URL will be different, but the last part should be similar to the following:

http://d-0320-a-donohara.c9users.io:8080/dons_auto

1.6 If you did everything correctly, you should see something like:

Phase 2: Add the standard HTML HEAD and BODY sections

2.1 The browser can display text files, but it is best practice to always create valid HTML files.

2.2 Add the following to the top of the HTML file in your C9 project:

<html>

<head>

</head>

<body>

.... (rest of page content)

2.3 Add the following to the bottom of the HTML file in your C9 project:

.... (rest of page content)

</body>

</html>

2.3 Save the html file, and bring up the web output tab in your browser.

2.4 Make sure to refresh your web page after you edit and save the html file in your C9 project.

2.5 You should not see any difference, but notice that the tab now displays the title we entered into the HEAD section of our html document:

Phase 3: Add some basic formatting for the section headers.

3.1 To implement the sections present in the brochure, you can use the various HTML heading tags (H1, H2, H3, etc).

Edit the html file to use the following HTML heading tags: (only the updated lines are shown here)

.....

<h1>Don's Famous Auto Repair </h1>

.....

<h2>Fixing jalopies since 1842 !</h2>

.....

<h3>Table of Contents</h3>

.....

<h3>Our History</h3>

.....

<h3>Our Specialty</h3>

.....

<h3>Our Locations</h3>

.....

<h3>Make an Appointment</h3>

3.2 Save the html file, and refresh the web page. You should see the basic structure, and how the different heading tags affect the formatting:

Phase 4: Experiment with different methods to control white space. (br, table, list)

Notice that the lines run together within a section. HTML ignores the typical carriage return/line feed sequence, and ignores all space characters except the first one (unless in quotation marks). For this and other reasons, using HTML only to control formatting is very difficult, if not impossible. It is much better to use CSS for fine-grained control.

However, there are valid reasons for using the proper HTML tags to organize the content. Each tag will be formatted differently by the browser, so you need to experiment to see what the default formatting behavior is.

4.1 Use BR (breaking line) HTML tag to force a newline.

The easiest way to cause the browser to split a line where you want it to, is to use the BR tag:

.....

<h3 >Table of Contents</h3>

Our History<br>

Our Specialty<br>

Our Locations<br>

Make an Appointment<br>

<br>

<h3>Our History</h3>

Don has been fixing cars since 25 BC, when he first put a wheel back on Hannibal's chariot.<br>

Don does have some issues telling tall tales.<br>

<h3>Our Specialty</h3>

Cars that run<br>

Cars that don't run<br>

Cars that run sometimes<br>

<h3>Our Locations</h3>

Nearby<br>

Far Away<br>

Somewhere in the middle<br>

<h3>Our Specialty</h3>

.....

Notice that you don't need to put a BR tag on the lines with the heading tags, since by default, headings are always followed by a new line.

4.2 Use the HTML Table tags to format tabular data.

When the data is naturally in tabular format, the HTML Table tags can be an appropriate choice.

The primary tags are:

the outermost container

a table will contain one or more rows, coded with <tr>

a row will contain one or more columns coded with either <th> or <td>.

<th> = table column header

<td> = table column data

For example:

<table>

<tr>

<th>Topic</th>

</tr>

<tr>

<td class="my-class" >Our History</td>

</tr>

<tr>

<td>Our Specialty</td>

</tr>

<tr>

<td>Our Locations</td>

</tr>

<tr>

<td>Make an Appointment</td>

</tr>

</table>

4.3 Use the HTML list tags to format lists of data.

The primary tags are:

the outermost container of the list

<ul> = unordered list

<ol> = ordered list

a list will contain one or more list items, coded with <li>

For example:

<ul>

<li>Little cars</li>

<li>Spaceships</li>

</ul>

Phase 5: Experiment with CSS to format elements

The most effective way to format web pages is by using CSS. For this exercise, we will put all the CSS statements in the HEAD section of the HTML page, since that simplifies things.

You can also put CSS statements in a separate file, so that maintaining settings across many HTML pages is made easier.

5.1 Add CSS statements that change the appearance of every occurrence of specific HTML tags:

<html>

<head>

<style>

body { background-color:lightblue;}

h1 { color: white;

text-align: center; }

h2 {

font-family: verdana;

font-size: 20px;

color:green;

}

</style>

</head>

<body>

After saving the html file and refreshing the web page, you should see that

a) the background color of the whole page (body) is blue

b) The heading is in the center, and the text color is white

c) The subheading is green, and the font is different

d) The other elements have not changed.

5.2 Use the combination of the HTML ID attribute and CSS ID selector to isolate changes to a particular item on the page.

Our example has several H3 lines. To change just one, we can use the ID (identifier) attribute to "name" a unique element on the page, and then use CSS syntax to refer to that "name".

NOTE: Not all code repeated here; just what is new:

<style>

.......

#special { color: red;

text-align: center;

}

</style>

......

<h3>Table of Contents</h3>

.....

<h3 id="special" >Our History</h3>

.....

<h3>Our Specialty</h3>

.....

<h3>Our Locations</h3>

.....

<h3>Make an Appointment</h3>

Notice that only one of the section headings is changed:

5.3 Use the combination of the HTML class attribute and CSS class selector to isolate changes to multiple items on the page.

<style>

.......

.my-class { background-color: #4CAF50;

color: white; }

</style>

......

<tr>

<td class="my-class" >Our History</td>

</tr>

.....

<h3>Our Specialty</h3>

<ul>

<li>Little cars</li>

<li class="my-class">Spaceships</li>

</ul>

Notice that I can change multiple items on the page, and they do not have to be the same type of HTML tag.

Phase 6: Experiment with Javascript to make the page interactive.

6.1 Add some HTML and Javascript that causes the time to be displayed when a button is clicked:

.....

<div>javascript area!</div>

this should be filled in when i click the

button.........

</div>

<button

onclick="document.getElementById('demo').innerHTML = Date()"> The time is?

</button>

<button

onclick="document.getElementById('demo').innerHTML = ' this should be

filled in when i click the button.........'">Reset

</button>