WGU C777 – Web Development Applications – Notes
1.
– Hyper-Text Markup Language
Study Questions.
1.
What is the web development trifecta?
2.
What is the role of HTML in the web trifecta?
3.
HTML5 offers a wider range of development capabilities not possible in prior
iterations.
Also, third-party software like Adobe Flash is no longer required.
Why is the doctype important?
7.
JS defines the behavior of the site into something that users can interact with.
How has HTML evolved to support modern design techniques?
6.
CSS adds style and formatting to the structures.
What is the role of JavaScript in the web trifecta?
5.
HTML simply creates and structures the site’s contents.
What is the role of CSS in the web trifecta?
4.
HTML, CSS, JS.
Because it is used to inform the browser about the version of HTML that the
site is written in.
How is an ordered list created? An unordered list?
Unordered, <ul>
Item
Item
Item
Item
Ordered, <ol>
1.
2.
3.
4.
First Item
Second Item
Third Item
Fourth Item
1.
How are structure elements different from basic elements?
Structure elements are used to provide more structure to the document.
Basic elements are used for layout/styling.
2.
By ensuring that the web-page is clean, error-free, accessible, and standards
compliant according to the W3C.
Do it by using a code validator.
Why is it important to validate code and adopt a single standard?
4.
More basic.
How is HTML code validated?
3.
More semantic.
It helps create cross-browser/cross-platform compatible web pages and
ensures compatibility with future versions of web browsers/standards.
Increases search engine visibility.
Reduces unexpected errors.
Give an example of how to embed a video in a webpage.
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
5.
Give an example of how to embed an audio file in a webpage.
<audio loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
6.
Use the following code example and label which portions are the element, attribute,
opening tag, and closing tag:
<p class="bg-gray" style="color:blue;">This is a paragraph with blue text</p>
Opening, element (includes the entire thing), attribute, closing.
Key Concepts.
1.
HTML
Tag/Element:
Refers to a start tag, and end tag, and the content in between.
Start tag: <h1>
Element content: This is a Heading
End tag: </h1>
All together: <h1>This is a Heading</h1>
Attributes:
Refers to things that provide additional information about the
element.
HTML elements can have attributes.
They are located in the start tag.
Comes in name/value pairs.
2.
Evolution of HTML
3.
Use a code validator/the W3C markup validation service.
<!DOCTYPE>
5.
Use <!DOCTYPE> to provide information to the browser about what type of
document is to be expected.
Validating HTML
4.
charset=”utf-8”
Used to provide information to the browser about what type of document is to
be expected.
All HTML documents must start with a DOCTYPE declaration.
For HTML5 -> it is simple (<!DOCTYPE html>). Other versions are super
complex.
Basic HTML Elements
h1>
For headings.
h1 is the most important heading, h6 is the least important heading.
For defining a paragraph.
Ex: <p>This is some text in a paragraph</p>
Defines a list item, used for creating ordered lists and unordered lists.
<p>
<li>
<ol>
src attribute
src, attribute specifies the location of the external resources (URL).
Unordered list, a list of items displayed with bullet points.
<ul>
<div>
6.
Ordered list, a list of items displayed with numbers or letters.
Defines a division or a section in a document.
Structure/Semantic Elements
<header>
<footer>
For defining a section of a document.
<article>
For defining a set of links.
<section>
For specifying the main content of a document.
<nav>
For defining the footer for a document or section.
<main>
For representing a container for introductory content, or a set of links.
Defines content accompanying the main content, while stilling being
independent and self-contained content (it can exist on it’s own).
Forum posts, blog posts, news stories.
<aside>
Defines some content ASIDE from the content it is placed in.
Should be indirectly related to the surrounding content.
7.
“It is related to the main content, but not necessarily apart of it.”
<video>
Consists of 4 attributes: height, width, autoplay, controls.
One of the four main attributes; refers to the video automatically
playing as soon as the page loads.
controls
A child element specifying alternative files which the browser can
choose from, for expanded compatibility of video types.
autoplay
Height/width: refer to the size of the video.
Autoplay:
Controls: refers to physical play, pause, and volume controls.
<source>
Refers to physical play, pause, and volume controls.
poster
8.
Sidebar; ads, news feeds, highlighted resource links.
An optional attribute that tells the player to display a static image
while the video downloads or before the user selects play (essentially
a thumbnail).
<audio>
Consists of the controls and autoplay attributes and supports the loop
attribute.
<source>
autoplay
A child element specifying alternative files which the browser can
choose from, for expanded compatibility of audio types.
Refers to the audio automatically playing as soon as the page loads.
Controls
Refers to physical play, pause, and volume controls.
Loop
9.
Multimedia
MPEG-4 (video)
.webm.
Ogg (audio & video)
.mp3, actually the sound part of MPEG files, most popular format for
music players.
Good compression with high quality, supported by all browsers.
WebM (video)
Also known as .mp4, supported by all browsers and used in video
cameras/TV hardware.
MP3 (audio)
.ogg.
Wav (audio)
Refers to the file to continue playing from the beginning once finished.
.nav, plays well on Windows, Mac, Linux.
Extra Questions:
1.
What is the purpose of Flavors?
2.
What is responsive design?
3.
The design technique that allows for pages to automatically reformat based on
browser size or resolution of the screen.
What is adaptive design?
4.
To ensure backwards compatibility for browsers not using HTML5.
A design technique for ensuring both computers and mobile devices can be
made compatible.
What does Semantic HTML refer to?
Refers to tags that define the meaning of the content they contain.
5.
What are APIs?
6.
Sets of definitions that facilitate building websites or applications.
For doing specific things like background execution, local database, issuing
requests, managing information, etc.
What are the only supported audio and video standards/types by HTML?
7.
<header> <footer> <article> would all be semantic as it indicates the role of the
content they contain.
<div> would not be semantic as it does not indicate the role of the content
contained within.
Video: MP4, WebM, Ogg.
Audio: MP3, WAV, Ogg.
What does the page structure for every HTML document look like?
<html>
<head>
</head>
<body>
<title>Page Title</title>
<h1>This is a Heading</h1>
<p>This is a Paragraph</p>
<p>This is another Paragraph</p>
</body>
</html>
<head> IS for computers
<body> IS what is going to appear on the screen/webpage
8.
What is the difference between inline and block elements?
9.
Inline elements DO NOT start a new line, and only take the necessary width.
Block elements DO start a new line, and takes the FULL width available.
List block level elements and inline level elements:
Inline Level Elements: <span>, <img>, <a>
Block Level Elements: <div>, <h1-h6>, <p>, <form>
10. What does <strong>, <em> do?
Strong = bold text.
Em = italisize text.
11. What does <a> do?
It is for defining a hyperlink.
href is the most important attribute (is specifies the URL of the page the link
goes to.
0
