IDS 200 Daystar University Web Designing Computer Science Task

Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Tutorial 8 – Web Design
I.
Introduction to HTML
Webpages are primarily written in HTML (HyperText Markup Language). What’s a markup language?
Well, once upon a time, computers just displayed plain text, in whatever standard format the user’s
hardware adopted. Eventually, though, users wanted the ability to format their text in different fonts,
sizes, and styles. This gave rise to markup languages, which embedded instructions in the text to
specify how the text would be displayed. As computer systems became networked their document
formats needed to be compatible and the need for a standard markup language – like HTML – which
could operate on any system, became obvious.
The basic idea of HTML is that these embedded instructions (“tags”) enclose portions of a text
document. Generally, a tag indicates the start of some format and indicates
where that format ends. For example, the tag indicates that the text should be displayed in italic,
and the tag indicates that text should be displayed in boldface. When a web browser is rendering
a webpage, it will encounter that and start displaying subsequent text in bold. When the browser
encounters a , subsequent text will not be displayed in bold. The tags and are called
paired tags in which is called the opening tag and is called the closing tag.
I.1. Simple Tagging
We’ll start with a simple tagging example using an online HTML code editor. Go to the website
www.onlinehtmleditor.net (or any other online HTML editor you can find in the internet). In the
top panel (the code editor window), you’ll see several lines of HTML code and in the bottom panel
(the output window), you’ll see how it displays. Click in the code panel, then press Ctrl+A for select
all, then press Delete to clear the screen. Now you’re ready. In the code panel, type the sentence “The
quick brown fox jumped over the lazy dog”. It should appear in the output panel as default style text.
Action 1: Type the following HTML syntax in the code editor window of the online HTML code editor (pay
attention on where you place the opening and the closing tags to get the desired output):
•
•
•
The quick brown fox jumped over the lazy dog.
The paired tags and make the word “quick” appear as bold.
The paired tags and make the word “dog” appear as italic.
The paired tags and make the word “fox” appear as underlined – be careful to
underline just the word and not the spaces before or after the word!
Output 1: You should see the following in the output window:
The quick brown fox jumped over the lazy dog.
I.2. Nesting Tags
If you want to apply multiple formatting options to a section of text, you can just put the paired tags
inside others. For example, to display bold and italic text, you could do any of the followings:
• text
• text
• text
• text
Since the styles don’t interfere with each other, the starting tag sequence doesn’t matter. Also, it’s a
Page 1 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
good practice to nest one tag pair entirely within another (as in the first two bullet points) rather
than interleaving the tags (as in the last two bullets). That way, it’s harder to make editing mistakes
when modifying the HTML code. However, interleaved tags won’t generally cause the page to be
misread – when one tag is closed out, all of its enclosed tags are closed out as well (and the
superfluous closing tag, like “” in the last bullet are just ignored.
Action 2: Type the following HTML syntax in the code editor window of the online HTML code editor:
The quick brown fox jumped over the lazy dog.
•
The above code makes the word “brown” appear as bold and italic, “jumped” appear as bold
and underlined, and the word “lazy” appear as italic and underlined.
Output 2: You should see the following in the output window
The quick brown fox jumped over the lazy dog.
I.3. Fonts
To change the text font, as well as size and color, you can use a font tag with enclosed attributes.
When you close out the tag, you only need a and don’t need to list the attributes again. The
tags around text would be:
text
Notes: The words, like the name of the font, are enclosed in double quotes, while numbers are given
as is. For example, to specify that text should be displayed as red, size 12, and Times New Roman, we
can use the following tag structure:
Action 3: Type the following HTML syntax in the code editor window of the online HTML code editor:
All work and no play makes Jack a dull boy.
•
The above code makes the word “work” appear as blue, size 14, and in the Courier font and
the word “play” as red and in the Cambria font.
Output 3: You should see the following in the output window
All work and no play makes Jack a dull boy.
Notes:
• Although you can use the font tags in HTML 4 and 4.1, the latest HTML version, HTML5, no
longer supports the font tags. For that, users should employ Cascading Style Sheets (CSS),
which we’ll cover in part II of this tutorial.
• HTML also provides a set of standard header options with tags , , …, , each
displaying progressively smaller text sizes.
I.4. Elements
The early Internet was text-based, but finding a webpage that’s mostly raw text is, these days, a
jarring surprise. We’re used to images and video and various interactive elements. These non-text
Page 2 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
things are called elements and they may contain data (like the label on a button or the source of an
image) and perform actions (like clearing text fields if you press a button labeled “Clear All” or
displaying a zoomed-in pop-up when you click on a thumbnail image).
The simplest page elements are formatting tags like:
• for paragraphs
• for line breaks
I.5. Links
Perhaps the most important page element is a link to other pages. To create a clickable link, you can
use the tag with an “href” attribute specifying the link destination (be sure to use the full URL,
including http or https). For example, to create a link to cdc.gov, you would use:
Click to get latest news about covid-19
Action 4: Type the following HTML syntax in the code editor window of the online HTML code editor:
Check out UIC!
• The above code creates a clickable link “Check out UIC!” on which if you click will display the
UIC home page. Click on the link to verify whether it works.
Output 4: You should see the following clickable link in the output window.
Check out UIC!
I.6. Images
Images use the tag with a “src” attribute that specifies where the image will be found. Images
are usually pulled from the same file system where the page data is stored, i.e., on the same server.
To display an image on a page from our computer (or local system), we need to:
• Write some code in a text file (e.g. Notepad)
• Save the file as an HTML file (e.g. filename.html)
• Save the image in the same folder as the HTML file
Action 5: Open Notepad and copy the HTML code below, save the file as “code.html” (not as a .txt file) to
an arbitrary folder such as the Desktop. (Note: the opening tag doesn’t need a closing tag
):
Happy face!
this image copyrighted 2017
From Blackboard, download the image file “happyface.jpg” to the same folder where you
save the code.html file (in this case, it is the Desktop folder). While you’re in the Desktop
folder, double click on the code.html file to open it.
Output 5: The happy face image will automatically be pulled from your file system (i.e. the Desktop folder)
and is displayed.
I.7. Buttons, Scripts, and “onclick”
In HTML, basic buttons use a tag. To specify what happens when you click the button, you
Page 3 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
include the instructions in the button’s onclick attribute. One possibility is creating a basic pop-up
window using an “alert” element. For example:
Action 6: Type the following HTML syntax in the code editor window of the online HTML code editor:
Don’t Click!
Output 6: The above code creates a clickable button with text “Don’t Click!” on it. If you click on the button
appears in the output window, a pop-up window with alert “Ohno!” is displayed. Click on OK to
close the pop-up window.
We can also combine HTML elements with scripting languages (e.g. JavaScript) for dynamic page
content. For example:
Action 7: Type the following HTML syntax in the code editor window of the online HTML code editor:
Click me to change my color.
function colorize(element,color) { element.style.color = color;}
•
In the above code we use a script element (which contains a JavaScript function) to cause the
button text to change to red when the user clicks on the button.
Output 7: If you click on the button appears in the output window, the color of the text printed on the button
will change from black to red.
Notes:
• Because different browsers may have different default button styles, it’s good to specify the
button’s type attribute; the type “button” gives an HTML-standard button, not just the
browser’s default style.
• Later in part III of this tutorial, we’ll introduce JavaScript.
BIG SALE
TODAY
Everything must go!
II.
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a complement to HTML that simplifies reusing style elements across
pages. Webpages on the same site often have an identical style: the same text formats, the same
banner images, and the same links in the same pages. With CSS, you can specify a particular style and
reuse it throughout the site. A short CSS document might be embedded in the page HTML code but
longer ones are typically kept as files. The client machine will download it once, cache it in the
browser, and read it locally (without calling a server) as needed.
For sites with high page counts (think Amazon – one page per product per language = many millions
of pages), CSS offers huge savings in time and money. Compared to encoding page styles entirely
Page 4 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
within a page’s HTML code, this approach:
• Simplifies the page design process – only unique page elements need to be coded
• Facilitates changing page styles – once per CSS document rather than once per page
• Reduces the incidence of errors and the proofreading workload
• Generates less network traffic and speeds page load times
CSS works through specifying formats for the various component types or links to a file containing
the formats. The usage placement of the tags defines the three usages of CSS: external, internal, and
inline:
• External: The style is contained in a file, and the file is accessed by any page that used that
style. This makes it easy to apply style changes to a large set of pages. A CSS style sheet
document should never contain HTML code, just CSS.
• Internal: The style is in a tag in a page’s opening HTML statements, then used
throughout that page. This makes elements uniform within a page (like fonts for headers) but
is less reusable because the style tag must updated for every page using the style.
• Inline: The tag is in the main body of the HTML document. Because of nesting, an
inline style tag will take priority over a style tag earlier in the page. So, the inline style is useful
for letting part of a page deviate from the prevailing CSS standard.
II.1. Internal CSS
Let’s start with an internal CSS example.
Action 8: Type the following HTML syntax in the code editor window of the online HTML code editor:
This is some heading text
Here is some paragraph text.
Here is some text outside the paragraph
Output 8: In the output window you should see the header text appears large and the following text appears
smaller.
To implement the internal CSS, we create paired tags and insert them between the
paired tags . Suppose we want the text inside the paired tags to be red,
bold, and centered and the text inside the paired tags to be blue and aligned left. We can
define the two component styles by listing the component type and properties using the paired tags
below. Notice, in the output, the last line of text remains unchanged, which it is not
inside the paired tags or .
Page 5 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Action 9: Type the following HTML syntax in the code editor window of the online HTML code editor (note:
the following codes are the same as the code in Action 8 with four additional lines of codes
between the paired tags ):
h1 {color: red; font-weight: bold; text-align: center;}
p
{color: blue; text-align: left;}
This is some heading text
Here is some paragraph text.
Here is some text outside the paragraph
Output 9: In the output window you should see the header text appears large, in red, bold, and centered;
while the text inside the paragraph tag is blue and aligned left.
For internal CSS, the style tag contains an entry for each component type. Each entry has a type (like
h1 or p) and formatting instructions enclosed in braces (squiggly brackets). Each formatting
instruction contains a property (like color or font-weight), a colon, a value for that property (color:
red will make the text appear in red) and is closed out by a semicolon. There are many, many
formatting possibilities but we’ll limit ourselves to a few basic ones:
• color: changes text color to standard colors (identified by words) or 6-digit hexadecimal
codes corresponding to 24-bit RGB colors (like #000000 for black or #FFFFFF for white)
• text-align: center, right, left, and justify
• font-family: specifies the font (like Arial or Times New Roman)
• font-weight: bold, light, and multiples of 100 (up to 900) for gradually increasing boldness
• font-size: relative sizes from xx-large to medium to xx-small, or absolute sizes in pixels or
points (e.g., 16px or 16pt, respectively)
• font-style: normal, italic, or oblique (both italic and oblique are tilted; sometimes italic is
distinct from oblique, sometimes not)
Action 10: Type the following HTML syntax in the code editor window of the online HTML code editor (note:
the following codes are the same as the code in Action 9 except the settings within paired tags
are different):
h1 {color: green; font-size: 36pt; font-family: Cambria; text-align: center; font-style: italic;
font-weight: light}
Page 6 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
p
{color: #C1C1C1; font-family: Verdana; text-align: right; font-size: large; font-style:
normal; font-weight: light}
This is some heading text
Here is some paragraph text.
Here is some text outside the paragraph
Output 10: In the output window you should see the component style to be green, Cambria 36pt text,
centered, italic and light weight; while the component style to be Verdana, dark gray
(#C1C1C1 in RGB format), large size, normal style, light weight and aligned right.
II.2. Inline CSS
Remember that inline CSS simply overrides any existing style with its new specifications. Any existing
style aspects not overridden remain in place. For example, we just set the header to appear
green, italicized, and in the Cambria font. If we used inline CSS to change the font to Courier but
specified no other changes, the other style aspects (e.g. green and italics) would remain unchanged.
To change a style aspect, we just insert a tag in an existing tag within the HTML body.
•
•
For example, to change the header text font from Cambria to Courier, replace the existing
line of code: This is some heading text
with this code: This is some heading text
Add a tag in a new line after the tag line, with the text “Override this text format”.
Then within this tag add: style=”color:orange;” so the line of code will be:
Override this text format.
The above will change the text color within this particular tag to orange but leave the
first tag’s text unchanged (the one with text “Here is some paragraph text.”).
II.3. External CSS
In external CSS, we create a stylesheet document and tell the page where to find it with a tag.
As in our previous explanation, it’s simpler to just put your CSS file in the same folder as the webpages
that use it. However, if you’re managing a lot of files for pages, components, and styles, you would
probably put the CSS files in a separate folder or folders. For this portion of the tutorial, we’ll make
an HTML file and a CSS file in a plain text editor (e.g. Notepad).
Suppose we want to use a CSS document to set a particular formatting to an HTML document.
Specifically, we want to set the HTML document to have a certain background image, green Courier
font for the text, and the text to be displayed in the center of the page. All these formatting features
will be put in a CSS document (e.g. style1.css in the following example), and the name of the CSS
document(the “style1.css”) need to be inserted in the code in the HTML document to tell the HTML
document which CSS file/document is used for its formatting and where to find the CSS file (note: file
and document mean the same thing in this context). Do the following practice:
Page 7 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Action 11: Open Notepad and copy the green text below into a new file (to create an html document):
This is some heading text
Here is some paragraph text.
Here is some text outside the paragraph
•
Between the paired tags , insert the green tag below. This line of code will
tell the HTML file to use an external CSS document named style1.css and where to find it (note: if
the location/folder of the CSS document is not mentioned in the code, this means that the CSS
document needs to be saved in the same location/folder as the HTML document).
•
Save the file as “webdesign1.html” – be sure to select the file type as “all files”, not .txt!
o Don’t close the above file. Double click on the Notepad application to create a new file and
copy all the code from webdesign1.html to this new file. Save the file as “webdesign2.html”.
Don’t close file webdesign2.html because we will use it in Action 12.
o Double click on the Notepad application again to create another new file and copy all the
code from webdesign1.html to this new file. Save the file as “webdesign3.html”. Don’t close
file webdesign3.html because we will use it in Action 13.
To create the external CSS document (style1.css) which will set the formatting for the HTML
document (webdesign1.html): double click on the Notepad application to create a new file and copy
the green text below ( First Note: Because of the way Notepad encodes text, you should avoid empty
space on lines; it can prevent CSS instructions from being read. Line entries should be flush with the
left margin and not indented. Second Note: The CSS document style1.css sets the formatting for the
HTML document webdesign1.html so that the text within the tags in the HTML
document appears in the center, in green color, in Courier font, and with a particular background
image from file background.jpg. If you need to set the format of the text in different tags, e.g.
or then you have to specify the related tags in the CSS document.):
body{font-family: Courier;
background-image: url(background.jpg);
text-align: center;
color: green;
}
Save the file as “style1.css”, again using the “all files” option, not .txt. (This is your first CSS document
and save it into the same folder where you save file webdesign1.html.)
o Double click on the Notepad application to create a new file and copy all the code from
style1.css to this new file. Save the file as “style2.css”. Don’t close this file because we will
use it in Action 12. (This is your second CSS document.)
Download the file “background.jpg” from Blackboard and save it into the same folder where you
save your files webdesign1.html and style1.css; this will enable the background to be displayed for
your page.
•
•
•
Page 8 of 17
Tutorial 8 – Web Design
•
IDS 200 BBA – Spring 2022
You’re ready! Go to the folder where you save all these files and double-click on the file
“webdesign1.html” to view it in your web browser.
Output 11: Your output should look like the picture below:
Figure 1: Screenshot of Output 11
Suppose using the same code that we use in Action 11, we want to create another HTML document which
has the same text as in webpage webdesign1.html but with different font style and background color. Do
the following practice:
Action 12:
• In Notepad, edit “webdesign2.html” as follows (note: the code in webdesign2.html is initially
the same as in webdesign1.html – see Action 11, but we will modify it as shown below):
o In the tag change “style1.css” to “style2.css”. (Note: this line of code tells the HTML
document to use the formatting in the CSS file style2.css)
o Below the tag add the following CSS tag which will set all text in
tags to appear in bold and italics:
p
{ font-style: italic; font-weight: bold}
o Save this file to keep the change you just made.
• In Notepad, edit the second CSS document (style2.css) as follows:
o Replace the background image line with “background-color: pink” to give a solid
background color.
o Change the tag’s font family to from Courier to Garamond.
o Save this file to keep the change you just made.
• Go to the folder where you save the file and double-click on its name (“webdesign2.html”) to view
it in your web browser.
Page 9 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Output 12: Your output should look like the picture below:
Figure 2: Screenshot of Output 12
II.4. Adding a Page Header via CSS
Suppose we want to include a banner image at the top of each page with a height of 88 pixels. The
simple way to do it is to specify the format in the CSS file, then include the tag in
the HTML files. The CSS part would be written like the code below and the tags in our HTML
documents (when we include the CSS style with them) will automatically adopt that format. Since the
banner image is 88 pixels high, we can specify the header to that height to fit the image.
header{
height: 88px;
background-image: url(banner.jpg);
}
Action 13: Try it yourself:
• Download the banner.jpg file from Blackboard into the same folder as the other files you
created in Action 11 and Action 12.
• Double click on the Notepad application to create a new CSS file, enter the header code
above into the file and save it as “style3.css”
• In Notepad, edit the webdesign3.html file by including a tag and place it as the
first line in the code (note: the code in webdesign3.html is initially the same as in
webdesign1.html – see Action 11, but we add the following tag):
• Save this file to keep the change you just made.
• Go to the folder where you save the file and double-click on its name (“webdesign3.html”) to view
it in your web browser.
Page 10 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Output 13: Your output should look like the picture below:
Figure 3: Screenshot of Output 13
III.
Introduction to JavaScript
Scripting languages are commonly used to provide webpages with dynamic content. A script is just a
bit of executable code that works with a webpage. The two basic styles of scripting are client-side,
where the script is executed on the client machine and converted locally to HTML in the web browser,
and server-side, where the script executes on a server, then returns the output as HTML to the page.
In this tutorial, we’ll perform a few simple tasks with JavaScript, the most widely-used client-side
scripting language.
Suppose we want to create a webpage which contains textual information as well as some buttons
which will cause change(s) in the webpage when the buttons are clicked. In the following practice,
we will create the webpage with the textual information and four buttons below the text.
Action 14: In the code editor window of the online HTML code editor ( www.onlinehtmleditor.net)
type the following:
Sun Conure
The sun conure is a medium-sized brightly colored parrot native to northeastern South
America. The adult male and female are similar in appearance, with predominantly goldenyellow plumage and orange-flushed underparts and face. Sun conures are very social birds,
typically living in flocks. They form monogamous pairs for reproduction and nest in palm
cavities in the tropics. Sun conures mainly feed on fruits, flowers, berries, blossoms, seeds,
nuts and insects. Conures are commonly bred and kept in aviculture and may live up to 30
years.
Label
Color
Latin
Image
Output 14: In the output window you should see the following:
Page 11 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Figure 4: Screenshot of Output 14
III.1.
Changing Object Labels
With JavaScript, we can change some elements in our page. For example, we can specify changes that
happen when we click a button. If the changes are simple enough to be expressed in a single
statement, we can include them in an onclick property. The onclick property is placed in the object’s
opening tag after the object name. The statement to be executed on a click is enclosed in double
quotes (which should be vertical, not curled!). The general format of onclick is:
onclick=”statement”
In our onclick statement example below, we use the statement this.innerHTML=’New Label’:
• this: means the object whose onclick property is used
• innerHTML: means whatever text is enclosed by the tag. Different tag types can interpret this
differently. For paragraph tags, the text is just displayed in the current style. But for buttons
tags, the text is a label for the object itself
• the period between “this” and innerHTML signifies that the property belongs to the object,
i.e., the innerHTML property of “this”
• =’New Label’: the equals symbol indicates an assignment and the text enclosed in single
quotes is the text we use to replace whatever text is already there
• Note: Although JavaScript allows indicating text with either single or double quotes, single
quotes won’t interfere with HTML and double quotes often will – avoid them!
In the practice below we will change the text printed on Label button after the Label button is clicked.
Action 15: In the code editor window of the online HTML code editor, using the existing code (from Action
14), replace the HTML Label with:
Label
Output 15: Click on the Label button to see the change (note: the button text will change from “Label” to
“New Label” as shown below).
Figure 5: Screenshot of Output 15
III.2.
IDs
Changing a different object is similar but requires a different reference. This is achieved by using the
Page 12 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
“id” property of a tag. Then, we can find the tag(s) with matching id(s) and change their inner HTML
or other attributes. The general format for accessing an attribute of a thing is:
document.getElementById(‘thing’).attribute
HTML has a number of tags that don’t automatically affect how the page is displayed. The tag
is a good example; if we apply a font tag without any attributes, it will not affect our page. So, we can
assign a tag an id and use it to change text dynamically.
Suppose we want to display the Latin name of Sun Conure (which is Aratinga solstitialis) after button
Latin is clicked.
Action 16: In the code editor window of the online HTML code editor, using the existing code (from Action
15), in the first line of code, between the tag and word “Sun Conure”, insert the following:
• Next, change d1’s inner HTML attribute (to make Latin text appear) by replacing
the line: Latin with:
Latin
Output 16: Click on the Latin button to see the change (note: the word “(Aratinga solstitialis)” will be
displayed before word “Sun Conure” as shown below).
Figure 6: Screenshot of Output 16
III.3.
Functions
More complex scripts involving multiple statements are grouped into functions. Any JavaScript
function must be enclosed within a tag, although scripts can contain multiple functions. A
function needs a name (so that scripts know how to call it), optionally one or more parameters
(values sent with the function call and received by the function, separated by commas), and a set of
statements enclosed within braces. Within a function, statements are ended with semicolons. A
JavaScript function follows the general format:
name(parameters) {
statement1;
statement2;
…
statementn;
}
The function call can be triggered by something like a click or a timer (we’ll show both). A function
Page 13 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
call uses the function name, any arguments (values sent with the call, separated by commas), and
(since it’s a JavaScript statement) ended by a semicolon. The general format of a function call is:
name(arguments);
Suppose we want to change the color of the text from black to red after button Color is clicked.
Action 17: In the code editor window of the online HTML code editor, using the existing code (from Action
16), assign the opening paragraph an id, p1 by replacing the tag with .
• Next, in the tag for Color button, include the property onclick=”g();” which will call
the function g() when the Color button is clicked. This can be done by replacing the
HTML Color with:
Color
• Finally, we will define the g() function to change characteristics of the p1 object by
including the following script code at the very end of the existing code (in the new
line):
function g() {document.getElementById(‘p1’).style.color=”red”;}
The style.color attribute controls the text color.
Output 17: Click on the Color button to see the change (note: the paragraph text will change to red.)
Figure 7: Screenshot of Output 17
III.4.
Variables
Javascript variables are indicated by the word “var”. A variable is just a virtual container for data. If
you’ve never programmed a computer before, a variable is just like the memory on your calculator.
When you want to store a number, you store it in memory and when you want to retrieve it, you
retrieve it from memory. To specify a variable named x in JavaScript, you declare it and optionally
can assign it an initial value, like:
var x; or var x = 0; or var x = 1.1; or var x = false; or var x = ‘some text’;
Unlike many other programming languages, where different types of variables are provided to hold
different types of data, JavaScript has untyped variables. That is, a JavaScript variable can hold any
kind of data: an integer, a floating point number, a true/false value, strings of text, and even sets of
other variables. This design approach makes sense for JavaScript because scripts tend to be relatively
simple programs and careful memory management is a minor concern compared to ease of coding
and keeping scripts compact.
Page 14 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Suppose we want to create two buttons on which every time the first button is clicked it will display a
new value on the second button.
Action 18: In the code editor window of the online HTML code editor, using the existing code (from Action
17), add the following code at the very end of the existing code (in the new lines):
Add
Value
var x = 0;
function f(y) {x = y + 1; document.getElementById(‘val’).innerHTML=x;}
Output 18: The code will add two blank lines (from the tags), create two buttons (Add and Value),
create a variable x with an initial value of zero, and include a function that increments x and
displays the new value on the Value button every time the it’s called (by clicking on the Add
button) – see below.
Figure 8: Screenshot of Output 18
Notice that x is sent as an argument when function f is called but that the value is received by f as a
parameter named y. Within f, x is assigned a new value of y + 1, which is really just x + 1. Then the
value of x is displayed as the inner HTML for the button that has the id “val”, i.e., Value.
III.5.
Intervals
Sometimes, you might want a timer for your webpage. JavaScript can do that. JavaScript has an
inherent function called setInterval which combines a function call and a periodicity value (i.e., how
frequently it should repeat). When you call the setInterval function, you can enclose an unnamed
function and its statements as the first argument and the periodicity (in milliseconds) as the second
argument. Then, that function will repeat at the specified intervals. The general format is:
setInterval(function() {statements}, periodicity);
By having a variable consistent increase with each interval, you have a timer. The following code
specifies a button with an id of “b”. When it is clicked, it called the function h which uses the
setInterval function with an interval of 100ms. Every 100ms, the current time (x) is incremented and
used to build a text variable (y). The text variable is composed of:
• The text “time: ”
• x divided by 10 (i.e., the number of seconds elapsed)
• if x is evenly divisible by 10 (x % 10 == 0, meaning the remainder of x/10 equals 0), then
append a “.0” to the time
Page 15 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Action 19: In the code editor window of the online HTML code editor, using the existing code (from Action
18), add the following code at the very end of the existing code (in the new lines):
Timer!
var x = 0;
function h() {
setInterval(function(){
var y = ‘time: ‘ + x / 10;
if(x % 10 == 0) y = y + ‘.0’;
y = y + ‘s’;
document.getElementById(‘b’).innerHTML=y;
x = x + 1;}, 100);
}
Output 19: The code will create a Timer button on which if you click the timer will start – see below.
Figure 9: Screenshot of Output 19
III.6.
Inserting Image
Suppose we want to display a red square image on the webpage we’ve designed earlier; follow the
following practice.
Action 20: Double click on the Notepad application to create a new file. Copy the existing code (from Action
19) to this new file and add the following line at the very end of the code (the new line):
•
•
•
Save the file as an HTML file, name it “webdesign4.html”, and put it in a particular
folder in your computer e.g. Desktop folder.
o Double click on the Notepad application to create a new file. Copy all the code from
webdesign4.html and save the new file as “webdesign5.html”. Don’t close this file
because we will use it in Action 21.
Then, download the image file “redsquare.jpg” from Blackboard and save it in the same
folder as the webdesign4.html file. The displayed image will depend on the src attribute
of the img object with the id “square”.
While you’re in the Desktop folder, double click on the webdesign4.html file to open it.
Page 16 of 17
Tutorial 8 – Web Design
IDS 200 BBA – Spring 2022
Output 20: The red square image will be displayed along with other components of the webpage you’ve
added earlier – see below.
Figure 10: Screenshot of Output 20
Suppose on the webpage we’ve designed above; we want the red square image to change to a blue
square image if the Image button is pressed; follow the following practice.
Action 21: In Notepad, edit the webdesign5.html file (note: the code in webdesign5.html is initially the same
as in webdesign4.html – see Action 20, but we will modify it) by replacing the HTML
Image with the code below:
Image
• Add the following line at the very end of the code (the new line):
function gg() {document.getElementById(‘square’).src=”bluesquare.jpg”;}
• Save this file to keep the change you just made.
• Go to the folder where you save the file and double-click on its name (“webdesign5.html”)
to view it in your web browser – see below.
Output 21: The red square image will be changed to a blue square image when you click on the Image button
– see below.
Figure 11: Screenshot of Output 21
Page 17 of 17
Assignment 8 – Web Design
IDS 200 BBA- Spring 2022
Due on Thursday, 04/28/2022, at 11:59 pm
50 points
In this assignment, you will write some simple HTML, CSS, and JavaScript code. You are given three image
files and will build (and submit) one CSS document and two HTML documents.
Instructions
Download the following three image files from Blackboard:
• banner.jpg
• blue_parakeet.jpg
• green_parakeet.jpg
1. Create a CSS (external) document which will apply standard formatting to both HTML documents
that you will create through points #2 and #3 below. The CSS document should have the following
elements/features:
a. [2 points] A banner image at the top of each page of the HTML document; use banner.jpg
for the image.
b. [3 points] Set the header text to appear purple and in the Cambria font.
c. Save this file as Assignment8-YournetId-A.css (e.g. Assignment8-jdoe2-A.css if your
netId is jdoe2).
2. Create the first HTML document with the following elements/features:
a. [2 points] A text within an tag: “Parakeets: A Brief Introduction”
b. [2 points] Two blank lines after the above text.
c. [3 points] A text within a tag: The normal primary color for parakeets is green. This
lets them hide better among tree leaves when they are pursued by predators.
d. [8 points] A text within a second tag: The blue color is a recent mutation, caused by
the absence of yellow coloration from the original green. Although a popular color for pet
birds, a blue parakeet would probably not survive long in the wild.
e. [5 points] A text within tag: Created by YourName – 2022. (Replace word
“YourName” with your own name.)
Notes:
• The text in the tags should be black and in the default style, except for the words
yellow, green, and blue, which should appear in bold and in their color e.g., the word
blue should be blue. (Hint: See Action 1 or Action 2 of the tutorial on how to display
text/word in boldface and see Action 3 on how to change the font color.)
• The text in the tag should be italic and your name should be in boldface.
• Save this first HTML document as Assignment8-YournetId-B.html. The view of this
file in a web browser will be like Figure 1 (shown in the next page).
3. Create the second HTML document with the following elements/features:
a. [2 points] A text within an tag: “Parakeets: Green or Blue?”
b. [2 points] Two blank lines after the above text.
c. [7 points] Within an tag, the image green parakeet should be shown (note: use
green_parakeet.jpg for this image).
d. [2 points] Two blank lines after the above image.
e. [12 points] A button with the label “Change color!”. When the button is pressed, a script
will execute causing the green parakeet image to be replaced with blue parakeet image
(note: use blue_parakeet.jpg for this image).
Notes:
• Additional pressing on the button will produce no further changes.
• Save this second HTML document as Assignment8-YournetId-C.html. The initial
view of this file in a web browser (before the Change Color! button is pressed ) will
be like Figure 2, while the view after the button is pressed will be like Figure 3 (both
figures are shown in the next page).
Page 1 of 3
Assignment 8 – Web Design
IDS 200 BBA- Spring 2022
4. Compress the three files above (one CSS file and two HTML files) into a zip file (a file with an
extension .zip or .rar) and then submit the zip file using the designated link in Week 8 folder on
Blackboard by the due date. Make sure you attach the zip file to your submittal before you hit the
submit button on Blackboard.
Figure 1: The Webpage Created from the First HTML file
Figure 2: The Webpage Created from the Second HTML File before Change Color! Button is Pressed
Figure 3: The Webpage Created from the Second HTML File after Change Color! Button is Pressed
Page 2 of 3
Assignment 8 – Web Design
IDS 200 BBA- Spring 2022
Page 3 of 3