Web Development Foundations C779 Basic GUI Web Page HTML, CSS, and UI Structure Practice Project Guide

4/2/2021 A Basic GUI Web Page | Web Development Foundations C779



Search this co


 Web Development Foundations C779: Unit 1: Web Development Fundamentals



MODULE 13 EXTENDING HTML5: GRAPHIC USER INTERFACES



(/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_html5-
based_graphic_user_interfaces)
(/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_module_13__summary)
Go to page 52




Current Module | Pages 50 - 53


A Basic GUI Web Page

Learning Objectives


W Create basic web pages using the most current version of Hypertext Markup
Language (HTML).



W Apply third-party applications to a web page.




https://wgu-nx.acrobatiq.com/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_a_basic_gui_web_page 1/14

,4/2/2021 A Basic GUI Web Page | Web Development Foundations C779




Photo (https://unsplash.com/photos/UP3SMQSoNsM) by Author
(https://unsplash.com/@hkphotographyca), Unsplash (https://unsplash.com), is licensed under Unsplash
license (https://unsplash.com/license).

The universal availability of web browsers, and the web design capabilities offered by
HTML/CSS/JS/DOM/DHTML, provide great opportunities for you to grow as a web designer. It
is possible to produce elegant and powerful GUIs for programs that are available as web
services via the internet, or on a local machine, but without graphical capabilities, like
command line programs. Whether used online or locally, the development of HTML-based
GUI provides several advantages, including:


rapid prototyping: the development of powerful inputs and controls is
easily implemented using HTML forms

platform independence: the HTML-coded interface will be equally
available to any operating system (Windows, MacOS, mobile, etc.)
since the system adaptation is provided by the browser

easy display configuration: the interface aspect is easy to change by
modifying the CSS definitions that do not affect the
HTML/JS/DOM/DHTML encoding



https://wgu-nx.acrobatiq.com/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_a_basic_gui_web_page 2/14

,4/2/2021 A Basic GUI Web Page | Web Development Foundations C779

A GUI provides tailored access to third-party applications, and all its interface complexity will
be encapsulated by the GUI design. This allows the end user to interact with the third-party
application without encountering any of the internal complexity of the GUI.

Most third-party applications are made available through an application programming
interface (API). An API is a software artifact that serves as an intermediary between two
programs that need to pass information between each other, in which the parameter
passage format is predefined. An HTML-based GUI defines a standard method to feed the
API with the collected parameters received by the end user and passes it along to the web
service API. This is usually done by a post method that is available in HTML forms.

Examples of GUIs applied to third-party servers are often found integrated with database
management systems (DBMS) that provide storage and retrieval of data. Third-party
applications are often integrated into websites using server-side PHP code and DBMS
systems such as MySQL.



Essential Reading



"Graphical User Interface"
Read "Graphical User Interface (https://lrps.wgu.edu/provision/239544326)" from omni
sci to learn about the differences between character and graphical user interfaces.

As you read, consider the following questions:


What are the advantages and disadvantages of a GUI?

Are there any disadvantages to having a GUI?

What strategies should a web designer consider to ensure that
interactions are not overwhelming for the user?


 I read it.




Essential Video

https://wgu-nx.acrobatiq.com/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_a_basic_gui_web_page 3/14

, 4/2/2021 A Basic GUI Web Page | Web Development Foundations C779




"APIs in plain English" (2:25)
Watch "APIs in plain English (https://lrps.wgu.edu/provision/240243334)" from LinkedIn
Learning to learn more about application programming interfaces (APIs) and they can
be used to access data.

As you watch consider the following questions:


How do APIs simplify the interface between company data
servers and the customers who need access to that data?


 I watched it.




Learning Exploration




"Coding Connection" by LBrown, is licensed by WGU under CC BY-NC-SA 4.0
(https://creativecommons.org/licenses/by-sa/4.0/) / A derivative from PxHere
(https://pxhere.com/en/photo/670370)

In this learning exploration exercise you will create a GUI for a calculator using HTML
forms. This code has some basic JavaScript (JS) code included in it just for demonstration.
(JavaScript is not covered in depth during this course.)

Instructions:


1. For this code connection, you have to save the following codes into
two different files:
a. one named calc.html with the HTML code, inserted with
the JS code



https://wgu-nx.acrobatiq.com/en-us/courseware/page/wgu_C779_01Feb21_web_dev_foundations_1/wbp_a_basic_gui_web_page 4/14