Scribd
Upload
32 views

Mod 2 book

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views

Mod 2 book

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Web Development Applications C777: Unit 1: HyperText Markup Language

Module 2
chevron_right
HyperText Markup Language Standardization: Introduction
Page navigation
 Previous: The Importance of Hypertext Markup Language:
Summarychevron_left
 Go to page / 12
 Next: Universal Markupchevron_right
HyperText Markup Language Standardization: Introduction

Photoopens a new window by Authoropens a new window, Unsplashopens a new


window is licensed under Unsplash Licenseopens a new window.
Building on an understanding of the role of the web development trifecta in modern
web design and the innovations of HTML5, it is important to learn more about the
standards that are used to write clean code and thus create great websites. This
module will cover the following topics:
 An overview of what universal markup is and the importance of W3C
standardization
 An overview of nuances like accessibility and cross-browser compatibility
 A look into different HTML5 APIs and what they can do to help create dynamic
web pages
 A hands-on approach to creating responsive web pages

Learning Objectives
 Explain the importance of universal markup creation.
Why Use Universal Markup?
Today's users expect to be able to access websites from a variety of devices, and to
have a similar experience regardless of the browser. Consistent user experience
occurs when standards are applied within a universal markup language. To make
sure markup is universal, developers carefully follow standards set for HTML5 by the
World Wide Web Consortium (W3C). The W3C is an international group that
develops standards for web development. W3C's goal is to promote the benefits of
web communication for all people. Remember that standards promote accessibility.
settings
Procedure
W3C has an extensive list of standards to ensure that markup is accessible to
anyone regardless of language, disability, or browser.
Let's focus on cross-browser compatibility, which means that the code can be
rendered appropriately on multiple browsers. Since different browsers can render
web pages differently, it is important to write code using the standards that all
browsers follow. This way, the code will render uniformly regardless of the browser,
and all users will get relatively the same experience when accessing a page. If the
W3C standards are not met, then a page may render with unexpected results that
make it more difficult to use.
There are additional benefits to using universal markup. Some of these benefits
include:
 Pages with cleaner code will be more adaptable to future changes,
including new code or revisions.
 Pages will be less likely to break when there are browser updates because
standards are written so that browsers will still understand the page
structure.
 If working with a team, it ensures everyone is following the same coding
practices and can work interchangeably.
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 the video "Semantic HTML5"opens a new window (3:57) to learn about the
importance of interpreting semantic meaning within HTML5 when developing a web
page.
As you watch, consider the following questions:
 What are semantics and why are they important?
 How could understanding semantic code improve a developer's
effectiveness?

I watched 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 Look at How the Browser Renders Content"opens a new window (3:24) to
learn more about the basics of browsers rendering content.
As you watch, consider the following questions:
 In what order does a browser load content?
 Why is it important that the browser load in that order?
 What is the DOM?
 What is the CSSOM?

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.
Why is universal markup important for WWW usage?
It ensures that W3C standards are being followed.
It helps to identify mistakes when browsers are updated.
It helps to ensure cross-browser and device compatibility and accessibility.
It helps to ensure the correct version of HTML is used.
Correct! Universal markup ensures cross-browser and device compatibility and
accessibility.

Learning Objectives
 Identify common elements of HTML5 application programming interfaces
(APIs).

Photoopens a new window by Authoropens a new window, Unsplashopens a new


window is licensed under Unsplash Licenseopens a new window.
Common Elements of HTML5 Application Programming Interfaces (APIs)
HTML5 application programming interfaces, (APIs) are a set of definitions that
facilitate building websites or applications. Those definitions may be used to
facilitate specific local tasks, such as playing audio and video media within a
browser, or for communication tasks between the end user's machine (client) and
the webserver, such as sending and receiving data to and from a database
management system (DBMS) running on the server side. HTML5 APIs run over the
end user machine by providing an interface for computational resources both on the
client side and the server side. APIs can be invoked implicitly by HTML commands,
as is the case with the media player API that runs when the property controls
include an <audio> or a <video> HTML tag. APIs can also be invoked explicitly by
a call in JS code; for example the same media player API can have operations
invoked by calling JS functions, such as play ( ) and pause ( ).
The most common client-side APIs available in HTML5 are:
 HTML5 Media API: provides the control of audio and video player in web
pages
 HTML5 Drag and Drop API: manages the passage of information when
the end user drags and drops files into specific areas on a web page
 HTML5 Workers API: provides the background execution of small
programs on the end user's machine
 HTML5 Cookie Store API: specialized for the execution of one specific
kind of background program: the cookies, which are designed to pass along
data to external handlers
 HTML5 Web Storage API: provides a locally stored database, i.e., a
client-side, size-limited alternative to storing data remotely on a server-side
database
 HTML5 SSE API: issues requests to the webserver, e.g., periodic web page
content reloads that do not require user action
Web APIs, specifically, are combinations of HTML5, CSS, and JavaScript that can be
accessed over the web to help two software or web components communicate.
Since the need for universal code and responsive design became a requirement,
many APIs have been created to ease the task of building websites to the proper
standards. The way that APIs commonly do this is by allowing developers to create
custom components that have built-in functionality. They also allow responsive
layouts for their pages using out-of-the-box grid systems. For example, another
frequently used API is the HTML5 Bootstrap API, which is a way to provide access to
some features available through the Bootstrap
framework (https://getbootstrap.comopens a new window).
Learning Exploration
Bootstrap: Get Started
In this learning exploration exercise, you'll be using W3Schoolsopens a new
window to explore HTML coding. Follow these steps to complete the exercise:
1. Observe the example HTML snippet that starts with a div element that has
the class jumbotron text-center: (<div class="jumbotron text-
center">).
2. Click on "Try it Yourself" to edit the example.
3. In the editing page, make changes to the HTML snippet and click "Run" to
see the results of each change in the page display. Try the following tests
(and others if you feel confident):
o Create another row by adding a div with class row as a sibling to the
initial row: <div class="row">
o Nest two divs in the new row and give them both the class col-sm-
6: <div class="col-sm-6">
o Copy the lorem ipsum paragraph from one of the divs above and
paste it into your empty divs: <p>Lorem ipsum dolor.</p>
o Add class offset-md-2 to the first div in your new row: <div
class="offset-md-2">
o Add <h3> to your new divs with the text Column 4 and Column
5 respectively: <h3>Column 4</h3>
Beyond just the creation of responsive web pages, developers are using APIs to
make custom components that already have functionality, instead of completely
building them from scratch. Components such as maps, charts, video players, etc.
Common APIs that help with this include:
 Google Maps
 Facebook
 YouTube
 Twitter
Learning Check
Question 1
This is not a form; we suggest that you use the browse mode and read all parts of
the question carefully.
What are two examples of popular HTML5 APIs?
Choose 2 answers.
Drag and Drop
Software
Style
Web Storage
Check My Answer
Correct! The HTML5 Drag and Drop API is one of the most popular APIs for web
development. The HTML5 Web Storage API is one of the most popular APIs for web
development.

In this module, you were introduced to HTML5 standards, including:


 What universal markup is and why it is important to write code that way
 What the W3C is and how it is beneficial for web development
 The importance of cross-browser compatibility
In addition, you learned about HTML5 APIs and identified a list of some of the most
popular APIs. What are the common elements of HTML5 APIs?

You might also like