This course uses the following e-book content:

• Paul Wellens’ Practical Web Development
• Bob Terrell’s Creating Data-Driven Web Sites: An Introduction to HTML, CSS, PHP, and MySQL

This course uses the following LinkedIn Learning Video Series. 

• Christina Truong’s CSS Essential Training video series
• Jen Simmons’ HTML Essential Training video series 
• James Williamson’s Web Technology Fundamentals video series

It is recommended that students complete the essential readings and videos prior to taking the objective assessment for this course. 

There is an index at the end of this course that contains links to the supplemental resources referred to in this course. 

---

Web Development Fundamentals: Introduction

When you hear the term web design, several ideas may come to mind, such as the look and feel of a website, or perhaps the background coded languages that are used to create content on a website. While visual appeal is an important part of website design, the underlying coding, or computational aspects of developing web content, will be the focus of this introductory course. 

You will explore how web content is created using the classic tools of the World Wide Web:

• HTML5 – hypertext markup language, version 5
• CSS – cascading style sheets

What do these terms mean and why are they important to web design?“Breakdown of HMTL terminology” © WGU 2020

HyperText Markup Language Version 5, or HTML5, is used to create web pages:

• Hypertext refers to the hyperlinks that an HTML page may contain;
• markup language refers to the way tags are used to define the page layout and elements within the page
• The “5” denotes the current version of the language being used.

Cascading style sheets (CSS)  are also used to format web pages, to help define text styles, table sizes, and other aspects of web page design. To be successful in this course, you will need to acquire a baseline knowledge of both languages and develop the practical skills required to build web pages using each language. 

This course will cover the following topics:

• Basic coding with HTML5 and CSS
• Creation of HTML forms
• Industry standards for web pages
• HTML extensions
• Insertion of third-party applications and media elements
• Database connection
• Web page life cycle
• Web page performance
• Tools and techniques for e-commerce

What learning experiences should you expect within each module?

• Essential Readings and Videos will help you develop a clearer understanding of how each of the languages fit together, and will introduce key topics that new web designers need to be aware of. 
• Learning Explorations and other activities will reinforce content you have just learned. Instructional activities like drag/drop, interactive images, and matching activities will help to increase your understanding and retention.
• <Coding Connection> laboratory simulation activities will allow you hands-on practice of each new skill so you will see how coding language translates into basic web page content.
• Glossary terms will be bolded and linked to their definitions.

There are several technical terms that you will need to learn throughout each course module.  These terms, and other basic terminology, will be highlighted throughout and may also be accessed in the course glossary.

Cascading style sheets (CSS)

Comma separated values (CSV) files

Document object model (DOM)

Extensible markup language (XML)

Graphical user interface (GUI)

Hypertext transfer protocol (HTTP)

Hypertext markup language (HTML)

Standard generalized markup language (SGML)

Transmission control protocol/internet protocol (TCP/IP)

Uniform resource locator (URL)

World wide web consortium (W3C)

Competency 4039.2.1: Web Development Fundamentals

The graduate creates web pages using a graphic user interface (GUI) editor as well as basic HTML5 and CSS3 elements.

---

Website Fundamentals – Introduction

What is the internet? 

The internet is the global network of computers, also referred to as the World Wide Web (WWW). These computers exchange information within the internet. In this modern age, the internet is present in almost every human society around the whole wide world (which by coincidence, or not, carries the same WWW acronym!). While internet connectivity started a long time ago (1969 with ARPAnet), the World Wide Web as we know it today started precisely on March 12, 1989.

How was the internet born, and how are URLs and HTML involved? 

Not unlike the stages of human development, the World Wide Web started with language development.“Progressive development of web content languages” © WGU 2020

You will learn more about CSS language and examine examples as we proceed through the modules. It should be noted that JavaScript and PHP languages will not be covered in this course.  Take a look at this image to learn more about how webpages are arranged using HTML.

• URLMarks the webpage URL [Uniform Resource Locator]
• Logo ImageLogo image is embedded in the page using the HTML5 tag <img>. You will learn more about hyperlinks later in the module.
• Heading TextHeading text made using HTML tag <h2>. You will learn more about HTML tags later in the module.
• Site NavigationThis alphabet feature is HTML content; each letter hyperlink directs to the databases starting with each corresponding letter. You will learn more about these hyperlinks later in the module.

“Overview of Web Page Components” © WGU 2020

A Brief Look Back at the History of the Internet

It is hard to explain to someone born after the turn of the century how people were able to research and access different types of information before the internet! There is a particularly good reason for that: the internet represents an evolution of human civilization comparable only to the invention of writing around 5,000 years ago. Behind this phenomenal change in our lives was the creation of the World Wide Web (WWW) just over 30 years ago. Like any developed language, both the internet and the WWW have rules—they rely on simple definitions of protocols. These protocols are agreements on how portions of data are exchanged between every computing device that is connected to a basic physical infrastructure provided by governments and organizations around the world. In the following reading and video resources here, you will gain a fundamental understanding about how this remarkable evolution of our civilization came to be.

In addition to a brief reading that provides a timeline of the history of internet and the WWW, a video provides statements from the creator of the WWW, Tim Berners-Lee.

Essential Reading

Question 1

This is not a form; we suggest that you use the browse mode and read all parts of the question carefully.

Read “Chapter 1. The World Wide Web” (opens new tab) in Practical Web Development.

This chapter provides a clearer understanding of how the internet and web content has developed and evolved over the previous decades.  

As you read, consider the following questions:

• What are HTTP and URLs, and how do the two work together to display a web page?
• What are hyperlinks
• What is the document root?

 I read it.

Essential Video

Question 2

This is not a form; we suggest that you use the browse mode and read all parts of the question carefully.

Watch “A Brief History of the World Wide Web” (opens new tab) to learn more about the interconnected technology systems that recreate the web browsing and design experience.

As you watch, consider the following questions:

• What is the difference between a secure and non-secure web page?
• How did the video describe how the first internet protocols were developed, as they are used today?

Transcript I watched it.

Learning Check

Question 3

This is not a form; we suggest that you use the browse mode and read all parts of the question carefully.

What is the functional purpose of HTML in web design?

It used for making complex or fancy webpage content.

It is the protocol to exchange files over the internet.

Browsers decode HTML to render a webpage.

It is a supporting markup language to store data.

Supplemental Resources

Read “History of the Web Timeline Infographic: Celebrating 30 Years of the World Wide Web” (opens new tab) to gain a clearer understanding of how internet/web content has developed and evolved over the last three decades.

---

Web Design Governance

Data messages must be transmitted to various receivers and all data traffic on the internet follows a strict protocol in terms of data exchange. The protocol for general internet data exchange is TCP/IP (Transmission Control Protocol/ Internet Protocol). Similarly, specialized services, like email and file transfer, have their own protocols to be followed. For the World Wide Web, and consequently for the objectives of this course, the more important service and its corresponding protocol is HTTP (hypertext transfer protocol) which allows access to hypertext documents through the use of a unique uniform resource locator (URL).

Both the format of hypertext documents and their unique URLs are defined by standards set by the World Wide Web Consortium (W3C) (opens new tab). W3C defines important technical specifications, such as how the main parts of a URL are composed.

Example 1:

HTTP://www.w3g.org/Consortium

• HTTP: → the protocol definition
• //www.w3.org→ the domain name: a sequence of host machine names preceded by a double slash and separated by periods
  • Domain names are not case sensitive: WWW.W3.ORG and www.w3.org are equivalent
• /Consortium→ web page location as a filename and/or path
  • for web page locations the text is usually case sensitive

Example 2:

https://www.wgu.edu/online-it-degrees.html

• HTTPS: → the protocol definition, the secured version of HTTP
• www.wgu.edu → the domain address
• online-it-degrees.html → the web page location (the .html extension means that this page is a file)

Essential Video

Question 1

This is not a form; we suggest that you use the browse mode and read all parts of the question carefully.

Watch “Anatomy of a URL” (opens new tab) in the course Web Technology Fundamentals from LinkedIn Learning.

This video teaches you more about how a WWW address is formed and how it needs to be accessed by a browser.

As you watch consider the following questions:

• What are the main components of an URL?
• What is a subdomain, and what does it represent on a web server?

 I watched it.

Note:

Information may be sent from a web browser to a web server through the use of query strings. Query strings are an optional part of a URL which allow values to be associated with parameters. For example, the query string ‘?firstName=William&lastName=Jones’ added to the end of a URL, as in http://www.website.com?firstName=William&lastName=Jones, would send first and last name, as separately accessible pieces of information, to the web server for processing.

Engage Your Brain

Web Design Pre-Assessment

The purpose for this pre-assessment is to allow learners to explore their prior knowledge of web design and to set expectations concerning what skills they will develop and/or refine during this module. Consider each of the following questions carefully—you will receive feedback for your responses.

This is not a graded activity, but rather a tool to help you understand what prior knowledge you may be able to apply to this course, and what additional foundation content would be useful so you can build an understanding of the concepts that will be presented later in this module. Answer as honestly as you can and utilize the instructional tools that will be suggested.Nextquestion

---

Markup Languages 101

A markup language is a way to insert annotation into a text document, so it can be distinguished from the original text. In other words, a computer can process the annotated text and always be able to determine which portions are the original text, and which portions are the annotations. Several markup languages are available and are very useful in computational systems, especially within the internet core definitions set by W3C. Within the internet the most important markup languages are the hypertext markup language (HTML) and the extensible markup language (XML). HTML is particularly important since all web pages are coded using some version of HTML, i.e., a web page is an HTML file.

It is important to keep in mind that the definition of HTML like other standards proposed by W3C, is not legally enforced. But it serves as a guideline, and each internet browser can decide whether to comply according to its business and security decisions. Additionally, since each web page is coded independently, it is not uncommon to see some web pages displayed incorrectly in some browsers and correctly in others. It is a good practice to test web pages in several browsers in order to avoid undesirable web page performance.

Read “Markup Language” (opens new tab) from TechTerms.

This article teaches you the basic concepts behind the usual format of markup languages.

As you read, consider the following questions:

• How does a markup language like HTML distinguish the annotations from the original text?
• In the context of markup languages what are “tags?”

Watch “What is HTML” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.

This video allows you to gain practical examples of how HTML language works with web browsers.

As you watch consider the following questions:

• What is the role of HTML?

---

HTML Files

HTML is the language of the World Wide Web since all web pages are coded using some form of HTML. The version of HTML impacts the browser on which HTML content may be rendered.

• Most browsers can handle all basic commands and options of all versions of HTML, but system/software updates can impact this compatibility
• Almost all browsers comply with the current version, HTML5

Like any other markup language, HTML is based on the definition of elements that are defined by tags, usually a starting tag and an ending tag encompassing a portion of text.  For example:

• formatting a portion of text as a title is defined by: <title>Page Title</title>, where the starting tag is <title>, the content is the text “Page Title,” and the ending tag is </title>. 
• Later in this unit, you will see more details about the basic structures of HTML files. 

 But for now, you are advised to watch the video and complete a learning exploration exercise using HTML language.

Watch “The role of HTML” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.

This video teaches you more about the basic format of HTML files and the use of basic HTML elements.

As you watch consider the following questions:

• What three programming languages make up the World Wide Web?
• Why are the three programming languages used rather than a single all-encompassing language?
• What kind of language is HTML?

In this learning exploration exercise, you’ll be using the W3School website to practice your first HTML coding experience.

HTML Tutorial (opens new tab) 

Follow these steps to complete the exercise:

• Observe the example of HTML file with the following elements: head (<head>), title (<title>), body (<body>), heading (<h1>), and paragraph (<p>).
• Click on the “Try it Yourself” button to edit the example.
• In the editing page, make changes to the HTML file and click on the button “Run” to see the results of each change in the page display. Try the following tests (try others if you feel confident):
  • Change the heading content to “My First HTML file.”
  • Change the paragraph content to “Hello World!”
  • Change the title content to “My First Page” (this will not change the displayed contents).
  • Create a second paragraph after the heading and before the existing paragraph, inserting the element:
    • <p>This is a longer paragraph that will likely be split into two lines on my displayed web page, if my screen is not wide enough to show the whole paragraph in one single line.</p>

---

CSS

Since an HTML file uses several formatting tags, it is advisable to define standard formatting options for each tag type. CSS (cascading style sheets) is a standard created to facilitate the better use of HTML files. The usual reason to adopt CSS is to define a same-format option for each HTML element. Therefore, instead of repeatedly establishing a formatting option at each instance of an element, formatting can be defined in the CSS document and then applied to the entire HTML file.

For example, a CSS command may define that all paragraphs of a web page will, by default, be displayed using a Verdana font size of 20 pixels. It is important to keep in mind that the use of CSS is not only useful to reduce the size of HTML files, it is also an organized way to provide homogeneity in web page design. Later on in this course we will see more details about the basic structure of CSS, but for now you are advised to watch the following video and complete a learning exploration exercise with CSS.

Watch “HTML and CSS” (opens new tab) in the course CSS Essential Training from LinkedIn Learning.

This video teaches you the basics of how CSS is used in conjunction with HTML elements.  

As you watch consider the following questions:

• What is the difference between CSS and HTML in terms of how each impacts content in an HTML document?
• Why must CSS be accompanied by HTML?

In this learning exploration exercise, you’ll be using the W3Schools website to practice your first CSS coding experience.

CSS Tutorial (opens new tab)

Follow these steps to complete the exercise:

• Observe the example of a CSS file that defines the default formatting option for the text body of a web page (body), its heading (h1), and the paragraphs (p).
• Click on the “Try it Yourself” button to edit the example.
  • Note that, since CSS commands can be either in a separate file or inserted into the HTML file, the addition of the CSS commands is made inside the HTML element <style> that appears inside the tag that starts with <head> and ends with <\head>.
• In the editing page, make changes to the CSS commands and click on the button “Run” to see the results of each change in the page display. Try the following tests (try others if you feel confident):
  • Change the body formatting color from “lightblue” to “gray.”
  • Change the heading from “center” to “left.”
  • Change the paragraph font from “verdana” to “helvetica.”
  • Add another style entry to the paragraph to set the color as “blue” (you can copy it from the color set on h1).

---

XML Basics Introduction

Recall that websites are, in their most basic form, documents written in HTML code. The more content and design features you wish to add to a web page, the more complex that code becomes. That code is referred to as a markup language. Markup language is a structured set of computer code elements that are assembled in a specific way, which provide the formatting for how text and other web page features (a button that a user may click, or a text field into which a user will enter content) will appear.

An HTML document consists of:Hello World HTML Code Snippet” © WGU 2020

Text above the image reads, “An HTML document consists of:” 

Image displays the following code snippet:

<!DOCTYPE html>

<html>

     <head>

         <title>Hello World</title>

     </head>

     <body>

         <p>Hello World! I am using HTML.</p>

     </body>

</html>

Markups must be structured in a format that follows certain syntax. These rules must be followed for the HTML code to be interpreted correctly by a web browser and display web content as it was intended. Content is arranged in tags, which are structured within the < > symbols. The structure of the tag and the content within the < > symbols provide instructions concerning what content will display on the web page, and what style elements, such as color or font, will be applied and visually displayed.

HTML, unlike programming languages, is not case sensitive because the language is intended to be tolerant of a wide audience of web developers who may create code without regard for formal code development. HTML is used to structure data and includes the use of tags that, when structured following proper syntax, will render intended outputs.

XML, on the other hand, has an entirely different application than HTML. XML is a markup language that you can use to structure and format any kind of data that has multiple purposes, such as:

• Data storage
• Data retrieval
• Data mining
• Data processing—which may include content that will display on a web page

You will learn about key differences between extensible markup language (XML) and HTML, and how they are used in conjunction.

---

Exploring XML

XML (eXtensible Markup Language) is a markup language proposed by the W3C. XML, unlike HTML, is case sensitive because it is used by other applications beyond web browsers, for which formal definition (including case sensitivity and formal syntax) of terms is required.

XML is a way to attach information to text. Like all other markup languages, XML behaves like a highlighter that you might use to highlight text in different colors to distinguish key data points. For example, consider a small table hierarchy where “US” is parent of “NY” and “CA,” which respectively are parents of “NYC” for “NY,” and “LA” and “SF” for “CA.”

This is what someone might do with yellow, green, and blue highlighting to categorize different sets of information. Here is what that would look like in a table:

Now, translate that into XML code. The structure of an XML file can be understood as a hierarchy of tags that categorize parts of text. Each XML tag holds some structural information, plus textual content. The XML representation for the previous example would be:

<hierarchy title="United States" />

<country text="US">

   <state text="NY">

       <city>"NYC"</city>

   </state> 

   <state text="CA">

       <city>"LA"</city>

       <city>"SF"</city>

   </state>

</country>

Note that XML tags can be nested. Nesting is indicated by an indentation so the web designer can easily visualize where content will be nested. As noted in the example, <city> tags were nested inside <state> tags, which were, in turn, nested inside <country> tags.

XML is considered extensible because it is more versatile than HTML. With HTML, tags are specific and fixed. With XML, you can invent whatever tag categories you wish, and add as many tags as you want in order to highlight specific information in your code.

Additionally, the addition or removal of XML elements will not affect the processing of the XML file.

In the previous example there were three tags: <country>, <state>, and <city>. Any other new tag could be included (for example, a <neighborhood> tag) and the general structure would be preserved, as shown:

<hierarchy title="United States" />

<country text="US">

    <state text="NY">

        <city text="NYC">

            <neighborhood>"QUEENS"</neighborhood>

            <neighborhood>"BROOKLYN"</neighborhood>

        </city>

   </state> 

   <state text="CA">

       <city>"LA"</city>

       <city>"SF"</city>

   </state>

</country>

XML Tag Formatting

XML tags follow one of two formats, as was shown in the previous code snippets:

• Element tags: <tag_name, attributes>text</tag_name>
  • Example: <city>"LA"</city> 
• Self-closing tags: <tag_name, attributes />
  • Example: <hierarchy title="United States" />

You will notice that both formats include:

• a tag_name, which is any unique identifier for a tag kind
• attributes, which are an optional list of pairs attribute_name="attribute_value"

Read section “XML” (opens new tab) of Chapter 10 in Practical Web Development. 

This section explains more about extensible markup language (XML), how to format it, how to display it, and what editors can be used to create and modify XML. 

As you read, consider the following questions:

• What areas can XML be applied?
  • Web Services –

What web services typically offer you is the ability to go to a certain web address, with a query string indicating the kind of information you are seeking. The result of visiting this (virtual) site is an output stream in the XML format, which you can then process.

• What is XML declaration?
  • The beginning of the XML document that states the version and encoding
• What is an XML schema?

conventions used to define the structure of an XML file

• Is XML a formal language?
  • Yes?
• What is the purpose of XML?
  • Nested tags

XML Practical Applications

XML has practical applications as well. As an open standard, XML is flexible, meaning that it is platform and language independent, and it can be used to transfer data from one disparate system to another. For example, a developer may create a web service to download data from a particular website. The developer would use XML because, as an open standard, XML is platform and language independent, thus the developer does not need to know the language of the website backend.

The data transfer could occur in both directions, meaning the web service could download data from the external website, and the web service could also upload data to the external website. The developer could run a script that could automate the XML data transfer, or the developer could click a button to execute the XML data transfer.

---

XML Vs HTML

As previously noted, HTML tags are fixed: they are predetermined by the W3C standard. As a developer, you cannot create new HTML tags, nor alter the structure and syntax. While it is impossible to memorize all HTML tags and their attributes, most web developers are familiar with a certain number of frequently used tags that are implemented in most web pages. One of the best resources for referencing standard HTML tags is the HTML Reference (opens new tab) document.

Now that you have a clearer idea of how XML is used, let’s explore its similarity to HTML. Even though XML is intended to store data, it can also be used as a framework to provide additional style to other markup languages, like HTML.

HTML can be viewed as a specific case of XML, where only a series of predefined tags can be used, and must follow specific syntax and semantic rules. While there are some practical differences, in general HTML follows the XML structure and principles. But it is important to understand that HTML is specifically designed to render content that will be read and displayed by a web browser, while XML provides structure for data but is not intended to be displayed.

Website Fundamentals – Summary

During this first module, you were introduced to the classic tools used for developing content on the World Wide Web. You explored a brief history of the internet and the World Wide Web and how it has evolved to produce the experience you now have as a user today. Throughout your readings and videos, you learned about:

• Hypertext markup language and how HTML5 code is used to define a web page layout and elements within the page 
• CSS language elements, which are used to provide additional page formatting
• How the internet is subject to web governance; you learned about the World Wide Web Consortium’s role in defining key technical specifications for how URLs are constructed, and how that defines web file paths
• XML, an additional markup language used in the construction of HTML files

During your <Coding Connection> activities, you walked through the steps for creating HTML and CSS code snippets, and you saw firsthand how code is rendered into page content. As a result of what you learned, you were able to produce your first HTML file! The concepts you learned and hands-on skills you practiced during this module will prepare you to explore these topics in greater detail in the coming modules.

Finally, during this module, you learned the basics of markup languages in general, and XML specifically. You explored XML syntax rules, such as root and parent elements, the necessity of both opening and closing tags, and that tags are case-sensitive. You learned how tags differ between XML and HTML, and reviewed resources from W3Schools that will be helpful in the future for referencing tag semantics and attributes. Finally, you created an XML code snippet that helped you better understand how XML structures data.