If available, I have some discussion questions I need help with.  I need at least 150 words per question and I have attached the chapter for a reference.  I also have a few more that I will need by Saturday that I can post for you, if you have the time. Thanks!

1. Discuss and explain Markup Language.

2. As part of this reading, it was noted that elements on the HTML document can be nested within each other created a "tree-like structure" or that elements may have a parent/child relationship.  With all of these multiple elements being nested within each other, it is no wonder why the code could grow to be come significant and complex.  As a web developer, what would be your approach to being able to manage, support, and troubleshoot through this code?  For example, do you feel that nesting elements within nested elements creates too much complexity, thus you would rather use multiple .css files? Or, are you confident enough to support and troubleshoot code with this level of complexity?

3. Discuss in detail the required elements in HTML5.

 

 

Basic template 1 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Lesson 1
Introduction to HTML5 This lesson is an introduction to the HTML5 markup language. The HTML5
markup language is a language for structuring and expressing the content of a web
page in a manner that can be consistently interpreted by a web browser.
If you are already familiar with HTML, much of this chapter will look very familiar.
It is still important that you read through this lesson, however, because there are a
number of important changes in HTML5, and many of these are very subtle.
If you are not familiar with HTML, or have only a passing familiarity, this lesson
will provide you with the background you need to understand the basics of an
HTML web page. This lesson is only an introduction, however; the material in this
lesson will be enhanced in the remainder of this section. What Is a Markup Language?
A markup language is a language for annotating a document with a set of tags.
These tags are used to provide additional meaning and structure to the text of the
document, or provide instructions on the manner in which it should be displayed
to the reader.
For instance, a tag may state that one portion of the text is a header, while another
portion is a paragraph of text. Consider the following document fragment: This is a heading
This is a paragraph of text In this example, the tags can be clearly differentiated from the content of the
document by the angle brackets. The following represents the start of a heading:
while this represents the end of the heading: 2/23/2017 8:44 PM Basic template 2 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Note
HTML defines six categories of header from h1 to h6. The lower the number,
the more important the header is. The entire h1 structure—including the start tag, the end tag, and its textual
content—is referred to as an element.
The HTML5 markup language specifies the tags that can be used in an HTML
document, how they should be used, and what additional information (called
attributes) they can contain.
In the early days of HTML, many of the tags included in the markup language
instructed the browser how to present information. For instance, tags were used to
dictate font size and color.
The HTML markup language is no longer responsible for dictating the
presentation of a document, and in HTML5 most of the remaining presentation
tags have been removed. Presentation is now the sole preserve of another
technology called Cascading Style Sheets, which will be examined later in this
section.
Instead, the HTML5 markup language is responsible for conveying the meaning of
the various components of the document and how they interact with other
components. Note
Browsers can still provide their own default styles for tags, however, and this
is why an h1 element will appear in large, bold text.
HTML5 greatly enhances the expressiveness of earlier version of HTML, however,
and allows sections of the document to be marked as, amongst other things,
headers, footers, and asides.
Earlier versions of HTML were based on a technology called SGML, which is a
language for expressing markup languages. As of HTML5, the HTML markup
language is not based on any other technology. This has removed a number of
restrictions from the language; therefore, if you are familiar with HTML, you will
notice in the sections that follow that a number of the old rules no longer apply. 2/23/2017 8:44 PM Basic template 3 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... The Simplest HTML Page Possible
When learning any technology, it's always a good idea to start out with the simplest
implementation possible. In HTML5, the simplest page you can possibly write is as
follows:
hello world!!! Open your favorite text editor, enter this text, and save the document as hello.html.
Now, open Chrome, and select Ctrl-O in Windows or -O on a Mac, navigate to the
file you have just saved, and select “Open”. This should look like Figure 1.1 when
loaded in the web browser. Figure 1.1 This may not look like a web page; after all, there are no tags in the page except the
strange looking tag on the first line of the document.
With the page open in Chrome, now select to open the developer tools:
Command+Option+I on OS X
F12 or Ctrl+Shift+I on Windows
This should open the window shown in Figure 1.2 below the web page. Figure 1.2
This is the web-browser's internal representation of the web page. As you can see,
this has normalized the structure of the document, and does provide a set of tags
nested inside one another. On the outermost level is the html element, and inside
this are two elements: head and body. The content of the body element is the text you
wrote in the text editor. 2/23/2017 8:44 PM Basic template 4 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... The document has been normalized to conform to the rules of the Document
Object Model (DOM). The DOM will turn out to be enormously important
throughout this book because much of the power of modern web pages comes from
their ability to manipulate the DOM after the page has loaded.
The manner in which a Document Object Model should be constructed from an
HTML page has been a contentious issue since HTML first appeared. Historically,
different browsers would generate different models for the same HTML, and this
made it very difficult to write cross-browser web pages.
In order to counteract cross-browser issues, the World Wide Web Consortium
(W3C), which is the standards body behind web standards such as HTML, decided
to recommend a set of standards placing the onus on the web page developer.
These standards, called HTML Strict and XHTML, forced the web page developer
to create a normalized web page, and therefore made it easy for web browsers to
render pages consistently.
This approach did not work very well. The real power behind HTML is not the
standards bodies, but the browser vendors because they ultimately decide what is a
valid web page. They did not want to enforce this strictness on web pages because
failing to load web pages would only serve to make their browser look deficient.
As the W3C continued on with their strict standards, a rival group called
WHATWG started work on a rival standard that would eventually become HTML5.
The members of this group were made up of participants from the main browser
vendors, and their goals were far more pragmatic. Rather than creating a whole
new set of standards, this group first looked at what browsers were already doing
and, where possible, formed standards from this.
W3C eventually abandoned their efforts for strictness and joined WHATWG's
efforts, and the two groups each publish a version of the HTML5 standard. A large part of the HTML5 standard describes how browser vendors should create
a normalized DOM from a non-normalized HTML document. This is why Chrome
created the DOM that it did in the preceding example, and why Firefox, IE, and
Safari would create exactly the same structures. An HTML Template
In the previous section, you wrote the simplest web page you could write. In this
section, you will write a web page following a basic template that is intended to
represent the simplest HTML structure you should write.
I will first present the template, and then I will walk you through it line by line. 2/23/2017 8:44 PM Basic template 5 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Open a new document in your text editor, and save the following as template.html: This is the body of the document. If you open this in Chrome, and then view the DOM in the developer tools, it will
look like the example in Figure 1.3. Figure 1.3
As you can see, in this case there is far closer alignment between the content you
provided in the HTML file and the normalized structure generated by the browser.
Let's now walk through each line in the document and examine its purpose.
The first line in the document is as follows:
This line defines the document type of the page. Because there have been many
different HTML standards over the years, the browser uses this line to understand
which of these standards the page is using, and then uses the rules applicable for
this standard to interpret the content of the page and render it accordingly. This is the HTML5 document type definition, and comes as a pleasant surprise for
developers who may be accustomed to copying and pasting DOCTYPE declarations
such as:
The other main surprise about this document type definition is that it does not
include a version number: The document type is simply html.
Although the specification is referred to as HTML5, it defines a “living-standard” 2/23/2017 8:44 PM Basic template 6 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... that will be subject to incremental change as and when browser vendors
implement, and agree on, new features. Put another way, there will never be
another version of HTML, but HTML will always continue to evolve.
The next line contains the opening html tag, which encapsulates the remainder of
the document:
This tag contains an attribute called lang, which has been given the value en.
Attributes provide a mechanism for providing extra meaning to tags. This
particular attribute is stating that the language of the document is English. Note
The ISO standard 639-1 defines the set of two-letter codes that can be used for
languages. These can also be paired with a country code, for instance en-US.
Country codes are defined in the ISO standard 3166.
As with many aspects of HTML5, although the specification defines the attributes
and their expected values, it is up to the browser to decide what to do with this
information. The browser may use this information to suggest a translation to a
non-English speaker, or it may do absolutely nothing with this information.
The next element in the document is the head element. This is the section of the
document where you can provide important metadata about the document, along
with links to other files needed by the document. The head section never contains
any visual components of the web page. In this particular case, the head contains
one important piece of metadata:
This specifies that the character encoding of the document is UTF-8. I will not
cover character encodings in this section, but the specification recommends setting
this.
There is one other element that is commonly added to the head element: the title
element. This is the text that the browser will display in the title bar when the web
page is loaded. Therefore, add the following inside the head section:
and then view the page in Chrome; the tab header will appear as follows: Figure 1.4 2/23/2017 8:44 PM Basic template 7 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Next you come to the body element. This is where all the visual elements of the page
will be described. In this particular example, the body consists of a single text
string, but it is this area of the document that you will enhance in the chapters
ahead to create interesting web pages. Understanding Elements and Attributes
Even though the examples you have created are very simple, you can already see
that elements can be nested inside one another, and as a result, create a tree-like
structure.
Every HTML document has a single top-level element, which is always the html
element (the document type element is not part of the document as such).
In addition, every element in the document can have zero or more children. The
html element has two children: head and body. The head element in turn has a child of
its own: the meta element.
Every element in the document (except the html element) has one (and only one)
parent. The parent of the head element is the html element. The parent of the meta
element is the head element.
As you will see, the structure of pages will become considerably more complex, and
the degrees of nesting will increase enormously. No matter how complex the pages
become, however, all the elements will follow these simple rules.
You have examined how elements consist of an opening and closing tag; for
instance the opening of the head tag is while the closing is an identically named tag
preceded by a forward slash .
Some elements do not require any content: The tag and its attributes provide all
the information that is required. In this case, the start and the end tag can be
combined into the following construct:
The forward slash before the end of the tag indicates that the tag is being closed.
This is the direct equivalent of the following:
You should always ensure that all tags are closed in the reverse order they are
opened. For example, you should never write markup as follows:
Hello In this case, the strong element is supposed to be the child of the p element, but the
p element ends before the strong element. 2/23/2017 8:44 PM Basic template 8 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Note
The strong tag is used to indicate that a piece of text is important. Although
this is often confused with the now deprecated bold tag, it is, in fact, still a
valid HTML5 tag. This tag is not considered a presentation tag because it
indicates that text is important, not how this text should be styled. You may
decide that strong elements are colored red rather than with a bold font. If you add this to your template.html file before the ending body tag, and then view
the normalized structure in Chrome, you will notice that the browser has
rearranged these tags, as you can see in Figure 1.5. Figure 1.5
Although the HTML5 specification does have rules for fixing up your mistakes, it is
generally best not to make mistakes in the first place because the rules of the
HTML5 specification may not be what you intended.
I generally find it best to write tags in lowercase. As it turns out, tag names are
entirely case insensitive because they are automatically converted to lowercase in
the DOM. The following is therefore valid, but should be avoided for obvious
readability reasons:
this is a header The final feature I will cover in this lesson is attributes. You have already seen two
examples of attributes, on the html tag and on the meta tag. Many other tags also
support attributes, and you will examine these throughout the book.
Attributes often consist of a name/value pair. When an attribute has a value, the
value can either be included in single or double quotes. The following are
equivalent: 2/23/2017 8:44 PM Basic template 9 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... A tag can contain more than one attribute, in which case they are simply separated
by white space:
Additionally, some attributes do not have a value. These are referred to as Boolean
attributes. The presence of the attribute is all that is required. For instance: In this case, the attribute is called read-only, but the presence of the attribute is
enough to indicate that the element is read-only. It is still possible to add a value to
a Boolean attribute, but it has no meaning. For instance, the following input field is
still read-only: Attribute names should also be written in lowercase (because this is how they will
be represented in the DOM). Generally attribute names will also use hyphens if
they contain more than one word. Try It
In this Try It, you will duplicate the template html page outlined in the lesson. You
may choose to skip this portion if you are familiar with HTML, but the simple act
of typing code word for word enhances your understanding.
If you get stuck in this example, you can refer back to the example earlier in the
lesson, or use the screencast to guide you though the process. Lesson Requirements You will need a text editor and a web browser. Step-by-Step
1. Open your text editor and create a new document.
2. Add the HTML5 doctype to the document.
3. Add an html element (both the opening and closing tags) below the document
type.
4. Indicate the language of the document using an attribute on the html tag.
5. Add a head element inside the html element. You will need both an opening and 2/23/2017 8:44 PM Basic template 10 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... a closing tag.
6. Add a title inside the head element, and give the document a name. Remember
that this needs to be a child of the head element.
7. Add a body element inside the html element just below the closing head tag.
8. Add a meta element to the head indicating that the charset is UTF-8.
9. Add any text you like to the body of the document. Any text that you add should
be displayed back to you when you open the web page in Chrome.
10. Save the document with a .html extension.
11. Open the document in Chrome and inspect the Document Object Model in the
developer tools.
When you open this in Chrome, and then open the development tools to inspect
the elements, the markup should look like Figure 1.6. Figure 1.6
There is also a complete example in the Lesson 1 folder on the book's website called
tryit.html. Reference
Please select the video for Lesson 1 online at www.wrox.com/go/html5jsjquery24hr.
You will also be able to download the code and resources for this lesson from
the website. Lesson 2
Basic HTML 2/23/2017 8:44 PM Basic template 11 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... This lesson provides a basic introduction to the most common HTML tags. If you
are already familiar with HTML and are reading this book primarily to learn about
HTML5, you could choose to skip the next two lessons, although each lesson does
include material that is specific to HTML5.
In the previous lesson, you created an HTML template. In this lesson, you will start
adding content to the body of this template using some of the most common
HTML tags. Structuring Text
You will begin by examining the ways you can structure text in a web page. HTML
originally started life as a means of sharing research papers; thus, text formatting
has always been an important part of HTML.
Begin by opening the template.html file created in the previous chapter. Replace the
body of the web page, as shown in the following markup: This is a top level heading
This is a second level heading
This is a third level heading 2/23/2017 8:44 PM Basic template 12 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... The body now contains three separate header elements. If you open this in Chrome,
it should look like Figure 2.1. Figure 2.1
Notice that the h1 element's text is displayed in a larger font than the h2 element. As
it happens, this has nothing to do with the HTML specification; this is simply the
default style provided by the web browser, just as the font is the default font of the
browser. In Lesson 4, you will see how this can be overridden with Cascading Style
Sheets (CSS).
You will also notice that each heading is displayed on a new line. This is not
because the elements are placed on new lines in the HTML file; in fact, white space
is mostly ignored in HTML. In order to prove this, change the h1 tag as follows: This is a top
level heading This is a second level heading
If you reload the web page, you will see that this change makes no difference to the
way the headings display. Although a single whitespace character is displayed as a
space inside an element, a sequence of whitespace characters, even if it contains
new-line characters, is collapsed down to a single white space character.
HTML does provide a special character sequence, , for adding extra whitespace
characters, but new lines should be created using the tags introduced shortly. 2/23/2017 8:44 PM Basic template 13 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... Note
The ampersand character, followed by a sequence of characters and
terminated by a semicolon, indicates that this is a special character sequence.
There are a number of special character sequences in HTML. Perhaps the
most common ones you will encounter are < and >, which are used for the less
than () characters respectively. These are required because the < and >
characters have special meaning in HTML. In case you were wondering, nbsp
stands for “non-breaking space.”
So what did generate the new lines after each heading? These appear because the
elements h1 through h6 are block elements. All visual HTML elements have a
display type, the most common of which are block and inline. Whenever a block
element ends, the next element automatically begins on a new line. Next, you can continue by adding some paragraphs to the body:
This is the first paragraph
This is the second paragraph If you refresh the web page, it will look like what you see in Figure 2.2. Figure 2.2
Each paragraph appears on a new line, and there is a space between each
paragraph. 2/23/2017 8:44 PM Basic template 14 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... It is actually possible to omit the ending tag from a p tag. In fact, there are many
cases where the ending tag can be omitted because the next tag in the document
implies it. I usually find it easier to add the ending tag in these cases, but the
specification makes this entirely optional. You will see throughout the examples
that I sometimes omit the closing tag and sometimes include it. What about XHTML?
If you are already familiar with HTML, you may be aware of XHTML, which
is an XML-based version of HTML. HTML5 extends and replaces XHTML as
well as HTML. In order to serialize an HTML5 page to XML, all tags must be
closed, and the document as a whole must be well-formed. In addition, the
html tag should be declared as follows:
and the content type of the document should be set to application/xhtml+xml
rather than text/html when it is served to the browser.
If you are not already familiar with XHTML, you can ignore it for the
duration of this book: It is typically only used if you have a need to process an
HTML page with XML parsers and tools.
The text in a paragraph will automatically wrap if it reaches the far right side of the
browser. Additionally, if the user resizes their browser, the text will automatically
be adjusted: This process is referred to as a browser reflow. Sometimes the browser will break your paragraphs in an inconvenient place,
especially if it contains very large words. In order to give you more control over
line breaks, HTML5 has introduced a tag called wbr that can be added anywhere
inside a paragraph as a hint to the browser that this would be a good place to add a
line break.
If you would like a line break within a paragraph, you can use the br tag. This is
also a self-closing tag so it can be used as follows:
This is a paragraph
that spans two lines HTML supports several other tags for encapsulating blocks of text. The final one
you will look at in this section is the blockquote element, which can be used to
capture quoted text, optionally with a citation:
Tell me and I forget. Teach me and I remember. Involve me and I learn.
Benjamin Franklin 2/23/2017 8:44 PM Basic template 15 of 18 https://jigsaw.vitalsource.com/api/v0/books/9781119001171/print?from... This structure is slightly more complex: The blockquote tag contains the quote,
while cite, which is an optional child tag, captures the source of the quote. Figure
2.3 shows an example of this tag in Chrome. Figure 2.3
Notice that the blockquote is indented and that the cite element displays in italics.
Again, these are browser defaults rather than part of the HTML5 specification.
Finally, as your web pages become more complex, you may find cases where you
would like to add comments to remind you what the markup means. Comments
can be added as follows, and will not display to the user: Links and Images
HTML pages naturally consist of far more than text. This section will introduce two
of the most fundamental tags found in most web pages: hyperlinks and images.
I will assume you know what hyperlinks are: They are a mechanism for referencing
another HTML document and can be clicked to allow the user to navigate to that
document.
Start by creating a new page in the same folder as the page you developed in the
previous section, but call this one page2.html. Add some contents to this page so
that you can distinguish it when it loads.
Now, in the original HTML file, add the following paragraph:
Please click here to view page 2 If you reload the page, this HTML will generate the text found in Figure 2.4. Figure 2.4 Notice that the text displayed to the user is derived from the content of the a tag,
while the page that is loaded when the link is clicked can be found in the href
attribute.
This particular URL is referred to as a relative URL because it does not start with a
forward slash or a domain name. The browser will attempt to find page2.html in a
locatio...