LESSON 1: Develop Basic HTML documentation

using HTML5 and CSS 3 Syntax.

1.1 Illustrate different business domain features

1.2 Document business processes using agreed-on representation format
1.3 Describe the interaction of the objects with the business logic in details
1.4 Document interaction diagrams using agreed representation format
1.5 Create and configure an HTML document according to user’ specification
1.6 Design HTML5 document using Cascading Style Sheet 3 (CSS3)

DEFINITION OF TECHNICAL TERMS

HTML 5. A revision of the Hypertext Markup Language (HTML),
the standard programming language for describing the
contents and appearance of Web pages.

CSS 3. Is the modularization of Cascading Style Sheets to allow

additions to the specification as well as limit the properties
used.

Javascript. An object-oriented computer programming

language commonly used to create interactive effects within
web browsers.
A business domain in object-oriented programming is the set of
classes that represent objects in the business model being
implemented.
LESSON INFORMATION 1.1

HTML, JAVASCRIPT AND CSS 3

The demand in web developer in the market industry is increasing due to the
evolution of modern technology. Creating websites is highly needed in the
market world. What technology would be useful and needed for this website?

HTML, CSS, and JavaScript are three closely coupled core web technologies
that you can learn to increase your marketability and give you flexibility to
choose the company for which you want to work. This is the beginning of
your path toward your future career. Learn these technologies well, and you
can expand into other programming technologies such as Silverlight, Flash,
C#, and Visual Basic.

A business domain in object-oriented programming is the set of classes that

represent objects in the business model being implemented. The business
domain is distinguishable from the business model in that the business
model is an understanding and explanation of information and behaviors in
the problem domain while the business domain is an implementation of that
model in a specific programming language.

Backward compatibility and cross-browser compatibility

Difference between every version of every browser is written using Internet
Explorer 10, which is installed with Windows 8. In addition, many but not
all the code examples were tested using the following browsers.

Firefox 17.0.1
Google Chrome 23.0.1271.97 m
Opera 12.11
Apple Safari 5.1.
and etc.

System requirements
The following are the minimum system requirements your computer needs to
meet to complete the configuration.
■ Windows 8 or newer. If you want to develop Windows Store applications,
you need Windows 8 on your development computer. Hardware
requirements
Hardware requirements for using Visual Studio 2012.
■ 1.6 GHz or faster processor
■ 1 GB of RAM (more is always recommended)
■ 10 GB (NTFS) of available hard disk space
■ 5400 RPM hard drive
■ DirectX 9–capable video card running at 1024 × 768 or higher display
resolution.
■ Internet connectivity
DIFFERENT BUSINESS DOMAIN FEATURES

1.WIX.COM
Wix is a very popular cloud-based website development platform that serves
millions of users from all over the globe.
Features:
 Intuitive Website Builder
 100s of Designer-Made Templates

 Customizable Designs

 Free and Reliable Hosting

 Online Store

 Email Marketing

 Display Events

 Live Chat

 Multiple Payment Methods

 Contact Manager

 Personalized Google Mailbox

 Financial Tools

 Marketing Tools

 Communication Tools

 Site Analytics – Google Analytics

2. Geocities
The Geocities.com, an online web development where you can write the
code in their editor, it can also upload external files from computer. It offers
free web hosting.
3. WordPress
WordPress powers more than 33% of the web — a figure that rises every day.
Everything from simple websites, to blogs, to complex portals and enterprise
websites, and even applications, are built with WordPress.

Features are simplicity, flexibility, publish with ease

publishing tools, user management , media management ,full standards
compliance, easy theme system ,extend with plugins ,built-in comments.

4. Bluehost
Offers affordable and reliable web hosting with a range of useful features
including unlimited domain hosting, unlimited hosting space and unlimited
file transfer. In addition, this hosting service is recommended by WordPress
making it the ideal choice for bloggers or anyone looking to launch a
WordPress-based site. https://www.thetop10sites.com/web-hosting/bluehost/
SELF-CHECK 1.3
Choose the correct answer to the question. Write only the letter of the
answer on your answer sheet.

1. object-oriented programming is the set of classes that represent

objects in the business model being implemented.

a. wix
b. geocities
c. business domain
d. html 5
2. Is the modularization of Cascading Style Sheets to allow additions
to the specification as well as limit the properties used?

a. javascript
b. html 5
c. jquery
d. css3

3. A revision of the Hypertext Markup Language (HTML), the

standard programming language for describing the contents and
appearance of Web pages.
a. javascript
b. html 5
c. jquery
d. css3

4. An online web development where you can write the code in their
editor, it can also upload external files from computer. It offers free
web hosting.
a. wix
b. geocities
c. business domain
d. html 5

5. An object-oriented computer programming language commonly

used to create interactive effects within web browsers.
a. javascript
b. html 5
c. jquery
d. css3
 LESSON INFORMATION 1.2

Functions and documentation of business processes

Business Process is a process that is focused on achieving a goal for a

business. If you have worked in a business setting, you have participated in
a business process. Anything from a simple process for making a sandwich
at Subway to building a space shuttle utilizes one or more business
processes.
Documenting a Process
Anything that can be used to process the business. For processes that are
not so straightforward, documenting the process as a checklist may not be
sufficient. For example, here is the process for determining the grades of the
students in the subject through the use of Student Record System.

1. Input student id or student name.

2. Click the search button

3. If the record found

4. It will display the grades and remarks of the student

5. If not found

6. The system will not display the records.

Student id or
name

Is it found? yes Display records

no

No records found
Search
other
record

Process diagram for determining the grades of the students thru the use of
Student Record System. (Private Domain)
Managing Business Process Documentation

As organizations begin to document their processes, it becomes an

administrative task to keep track of them. As processes change and improve,
it is important to know which processes are the most recent. It is also
important to manage the process so that it can be easily updated! The
requirement to manage process documentation has been one of the driving
forces behind the creation of the document management system. A document
management system stores and tracks documents and supports the
following functions:
 Versions and timestamps. The document management system will
keep multiple versions of documents. The most recent version of a
document is easy to identify and will be served up by default.
 Approvals and workflows. When a process needs to be changed, the
system will manage both access to the documents for editing and the
routing of the document for approvals.

 Communication. When a process changes, those who implement the

process need to be made aware of the changes. A document
management system will notify the appropriate people when a change
to a document is approved.

Of course, document management systems are not only used for managing
business process documentation. Many other types of documents are
managed in these systems, such as legal documents or design documents.
LESSON INFORMATION 1.3

Creation and configuration of HTML5.

After this lesson, you will be able to:

 Understand the Syntax of HTML5.

 Create an HTML5 document and add elements and attributes to it.

Syntax of HTML 5

HTML is an acronym for Hypertext Markup Language, which is the language

we have used to create webpages since the first webpages arrived on the
web. HTML roots are from an older markup language that was used in
document publishing, called SGML (Standard Generalized Markup
Language). Like SGML, HTML uses tags to provide formatting features such
as this is bold, which would cause the text within the starting b tag and
ending b tag to render as bolded text. Notice the difference between the first
and second tag; the second tag has a slash (/) to indicate that it’s an ending
tag. Many but not all HTML tags have a matching end tag.

The syntax for HTML 5 is:

<!Doctype html>

<html>

Statement/tags

</html>

<!Doctype html> ; it indicates that we are using HTML 5, if we omit the <!
Doctype html> it will run on the HTML 4.0 version. other

HTML Documents, Elements and Attributes

An element is composed of a beginning tag, an ending tag, and the content

between the tags. Consider the following HTML fragment.
“The quick brown fox jumps over the lazy dog”. In this sample, the tag is just
the beginning tag on the first line. The element is the complete sample,
which includes content that also contains a element. The element consists of
the beginning tag, the content, which is the word “fox,” and the ending tag.
The element creates a section in your document. HTML5 does not mandate
lowercase tag names, lowercase tag names are recommended.
Element reference HTML5 has more than 100 defined elements that you can
use to create rich webpages and applications.

These are the common elements of HTML 5.

 <a> anchor/hypertlink
  <b> bold text
 <i>italic text
 <del> deletion
 <table> table
 <br> breakline
 <body> main content
 <col> table column
 <tr> table row
 <form> form
 <h1> heading level 1
 <h2> heading level 2
 <h3> heading level 3
 <h4> heading level 4
 <h5> heading level 5
 <h6> heading level 6
 <ul> unordered list
 <div> Generic Division
 <img> add image file
 <hr> horizontal line

Adding attributes to elements.

The begin tag can contain additional data in the form of an attribute.
An attribute is a name=”value” pair in which name is unique within the tag
and value is always enclosed within either single quotes or double quotes.
You can add many attributes to the begin tag. You can also alternate using
single quotes and double quotes, which is especially beneficial when you
need to embed single or double quotes within the value of the attribute. You
can also have Boolean attributes that contain the attribute name but no
value.
In this example, cellpadding, cellspacing are attributes of the table.
The cellpadding attribute specifies the distance of the text an element within
an HTML document. The cellspacing attribute specifies the space of text as
an element of the table.

USING VISUAL STUDIO 2015 to create Web Development

Microsoft’s Visual Studio is the primary integrated development

environment (IDE) used to create ASP.NET sites and applications. The most
recent version is Microsoft Visual Studio 2015, which includes quite a few
enhancements. There are also new versions of both C#, version 6.0, and
VB.NET, version 14. ASP.NET 5 is also an important release because it can
now run on OS X and Linux with Mono installed.Mono is a software platform
designed to enable developers to easily create cross-platform applications. It
is an open-source implementation of Microsoft’s .NET Framework that runs
on non-Windows operating systems. This is a tremendous game changer;
because until now, every ASP.NET application, either Web Form or MVC,
needed to be deployed to and run on a Microsoft Windows
server.

Visual Studio C# will be used to write HTML 5.

Creating a New Site
1. The first step in creating the sample application is to create an appropriate
project in Visual Studio.
By selecting File ➪ New Project you will get the New Project dialog shown in Figure 2-3.

Figure 2-3.

2. Under Visual C# select the web and click ASP.NET Application

3. Write the name of the project and click ok.
4. Select the project within the Solution Explorer window. Add a new
Web Form page from the top menu by selecting Project ➪Add New
html page as show below in the figure 2-4.
FIGURE 2-4: New ASP.NET Web Form fi le
5. Under source tab write the code below.

FIGURE 2-5: New ASP.NET Web Form fi le

6. The design tab will be display the initial output of the code and click
on the google play will display the webpage in the google browser.

FIGURE 2-6: Browser output webpage.

SELF-CHECK 1.3
Choose the correct answer to the question. Write only the letter of the
answer on your answer sheet.

1. This is the beginning and ending of tags.

a. tags
b. attributes
c. element
d. html

2. HTML is an acronym of:

a. Hyper text mark up language
b. Human task mark up language
c. Hyper task mark up language
d. None of the above

3. A pair in which name is unique within the tag and value is always
enclosed within either single quotes or double quotes.
a. tags
b. attributes
c. element
d. html

4. This tag displays the vertical line.

a. <hr>
b. <br>
c. <tr>
d. <td>

5. This tag displays the break line.

a. <hr>
b. <br>
c. <tr>
d. <td>
LEARNING ACTIVITY 1.3
Use the following tags in your HTML document.
1. <p>
2. <b>
3. <i>
4. <h1>
5. <hr>

Rubrics:

Evaluation: Percentage Score

Criteria
1. Use the given mark-up tags 40%
2. Codes are clear and organized 40%
3. Appropriate filename 20%
Performance Criteria
LESSON INFORMATION 1.4

Designing HTML5 document using Cascading Style Sheet 3 (CSS3)

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a standard style sheet
language used for designing the web pages. The elements of HTML
documents were contained within the HTML markup (specifically inside the
HTML tags); all the font colors, background styles, element alignments,
borders and sizes had to be explicitly described within the HTML.

CSS3 is the latest version of the CSS specification. CSS3 adds several new
styling features and improvements to enhance the web presentation
capabilities.

CSS Syntax

Selectors are used to declare which of the markup elements a style applies
to.
The declarations that appear in the block that follows the selector may be
applied to all elements of a specific type, or only those elements that match a
certain attribute.

Each declaration consists of a property and a value. The property is the style
attribute you want to change; they could be color or border etc. Each
property has a value, for example color property can have value
either blue or #0000FF etc.

Example:

h1 { color: blue; text-align: center; }

Selector

Selectors are one of the most important aspects of CSS as they are used to
select elements on a web page so that they can be styled.
 Types of Selector

1. Element type selector matches every instance of the element in the document
tree with the corresponding element type name.

Example :
p { color: yellow; }
2. The id selector is defined with a hash sign (#) immediately followed by
the id value.
Example :
#p1 { color: yellow; }
3. The class selector is defined with a period sign (.) immediately
followed by the class value.
Example :
.p2 { color: yellow; }

Including CSS in HTML Documents

You can include CSS in an HTML document in three ways:

 Inline styles — Using the style attribute in the HTML start tag.
 Embedded styles — Using the <style> element in the head section of
a document.
 External style sheets — Using the <link> element, pointing to an
external CSS file.

Inline Styles

Inline styles are used to apply the unique style rules to an element by
putting the CSS rules directly into the start tag. It can be attached to an
element using the style attribute.
The style attribute includes a series of CSS property and value pairs.
Each “property: value” pair is separated by a semicolon (;), just as you would
write into an embedded or external style sheets. But it needs to be all in one
line i.e. no line break after the semicolon, as shown here:
Example:
<h1 style=”color:red; font-size:30px;”> My first Program</h1>

Embedded Style Sheets

Embedded or internal style sheets only affect the document they are
embedded in.
Embedded style sheets are defined in the <head> section of an HTML
document using the <style>element. You can define any number
of <style> elements in a HTML document but they must appear between
the <head> and </head> tags. Here's an example:
<!Doctype html>
<html>
<head>
<title> Programming Group</title>
<style>
body {
background-color:cyan;
}
p { color:blue;
font-size:20px; }
</style>
<body>
<p> Programming Group</p>
</body>
</html>

External Style Sheets

An external style sheet is ideal when the style is applied to many pages of
the website.
An external style sheet holds all the style rules in a separate document that
you can link from any HTML file on your site. External style sheets are the
most flexible because with an external style sheet, you can change the look
of an entire website by changing just one file.
You can attach external style sheets in two ways — linking and importing.

Linking External Style Sheets

Before linking, we need to create a style sheet first. Let's open your favorite
code editor and create a new file. Now type the following CSS code inside this
file and save it as "style.css".
Example:
body {
background-color:cyan;
}
p{ color:blue;
font-size:20px; }

An external style sheet can be linked to an HTML document using

the <link> tag. The <link> tag goes inside the <head> section, as shown in
this example:
<!Doctype html>
<html>
<head>
<title> Programming Group</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p> Programming Group</p>
</body></html>

Sample html document using css 3

<!Doctype html>
<html>
<head>
<title> Programming Group</title>
<style>
body {
background-color:cyan;
}
p { color:blue;
font-size:20px; }
.p2 { color:red; font-size:30px; }

<body>
<p> Programming Group</p>
<p class=”p2”> Lingayen, Pangasinan</p>
</body>
</html>
SELF-CHECK 1.4
Choose the correct answer to the question. Write only the letter of the
answer on your answer sheet.

1. Style sheet can be linked to an HTML document using the <link> tag.

e. External style sheet

f. Internal style sheet
g. Inline style sheet
h. Embedded style sheet

2. Style sheet holds all the style rules in a separate document that you
can link from any HTML file on your site.

a. External style sheet

b. Internal style sheet
c. Inline style sheet
d. Embedded style sheet

3. Internal style sheets only affect the document they are embedded in.

a. External style sheet

b. Internal style sheet
c. Inline style sheet
d. Embedded style sheet
e.
4. Used to apply the unique style rules to an element by putting the CSS
rules directly into the start tag. It can be attached to an element
using the style attribute.

a. External style sheet

b. Internal style sheet
c. Inline style sheet
d. Embedded style sheet

5. One of the most important aspects of CSS as they are used to select
elements on a web page so that they can be styled.

a. Attributes

b. Selectors

c. Style sheets

d. Declarations
LEARNING ACTIVITY 1.4
Using html document with css 3

1. Setting text color.

2. Alignment of text.

3. Size of the text.

4. Background of the page.

Rubrics:

Evaluation: Percentage Score

Criteria
1. Use the appropriate mark-up tags 40%
2. Codes are clear and organized 40%
3. Appropriate filename 20%
Performance Criteria

References:

https://www.tutorialrepublic.com/css-tutorial/

https://en.wikipedia.org/wiki/Business_domain

https://reviews.financesonline.com/p/wix/

https://en.wikipedia.org/wiki/Adobe_Dreamweaver
https://softwareengineering.stackexchange.com/questions/234251/what-really-is-the-
business-logic

https://bus206.pressbooks.com/chapter/chapter-9-info-systems-strategic-advantage/