CIS2336 - CH3: Introduction to HTMl
<footer>
-footer
HTML images
-*<img src= "..."*: URL of image -*alt= "..."*: provides brief description of image's content for users who are unable to see it -*title= "..."*: will be displayed in a pop-up tool tip when the user moves mouse over image -*width= "..." height= "..."*: specifies the width and height of image in pixels
HTML headings
-6 levels of heading (h1-h6) -also used by the browser to create a document outline for the page
Markup
-a way to indicate information about the content that is distinct from the content -ex: tags (HTML elements)
HTML documents
-composed of textual content and HTML elements
nesting HTML elements
-correct: <h1> Share Your *<strong>* Travels *</strong>*</h1> -incorrect: <h1> Share Your *<strong>* Travels </h1>*</strong>*
<dl>
-description lists
Inline text elements
-do not disrupt the flow -ex: <br>, <strong>, <small>, <time>, etc.
DOCTYPE
-document type definition -tells the browser what type of document it is about to process -*<!DOCTYPE html>*
empty element
-does not contain any text content -an instruction to the browser to do something -XHTML: empty elements had to be terminated by a trailing slash -HTM5: trailing slash in empty elements is optional -ex: <img ... />
HTML links
-essential feature of all web pages -uses the *<a>* element (stands for "anchor") -can link to external site, another page on the same site, another place on the same page, specific place on another page, email, JavaScript, telephone, etc.
semantic markup
-focus on the structure of the document, not the visual -advantages: maintainability, performance, accessibility, search engine optimization
<header>
-header
HTML header
-intended to contain the section's heading, but this is not required -can be used to wrap a section's table of contents, a search form, or any relevant logos
HTML
-markup language -has been through many versions and branches, the details of which might matter if you ever see old HTML code
<ol>
-ordered lists (numbered)
nesting HTML elements hierarchy
-parent > child = sibling -ancestor > descendants -(look at picture examples on PPT)
<ul>
-unordered lists (bullet points)
XHTML and Validation
-use https://validator.w3.org/ in order to validate if there are any errors in code for your web page
HTML5
-widely implemented in modern browsers -the current W3C recommendation for web development -still relatively new and not always taught
What are the main syntax rules for XML?
1. There must be a single root element 2. Element names are composed of any of the valid characters (most punctuation symbols and spaces are not allowed) in XML 3. Element names can't start with a number 4. Element and attribute names are case sensitive 5. Attributes must always be within quotes 6. All elements must have a closing element (or be self-closing)
-contains content to be displayed by the browser
<body>
-contains descriptive elements about the document -ex: title, style sheets, JavaScript files, etc.
<head>
-contains all the other HTML elements in the document
<html>
-specifies an external CSS style sheet
<link>
How are the <main>, <section>, and <article> elements related? Be sure to describe the semantic role for each of these elements
<main> appears first and includes <section> and <article>. <article> is included within <section>. The semantic role for these elements are to clearly define the HTML document's content and to help organize the document.
-declares that the character encoding for the document is UTF-8
<meta>
What are HTML elements? What are HTML attributes?
HTML element is a more expansive term that encompasses an element name within angle brackets and the content within the tag (<a>...</a>). HTML attribute is a name=value pair that provides more information about the HTML element (href= "http://www.insertlink.com"). Ex: <a href= "http://www.insertlink.com">LINK</a>
Describe the difference between a relative and an absolute reference. When should each be used?
Relative reference is a link that merely refers to different objects within the website, and is used when we need to be able to successfully reference files within our site, such as images, external JavaScript or CSS files, etc. Absolute reference is the complete URL of a link and is used when referencing a page or resource on an external site.
Why is removing presentation-oriented markup from one's HTML documents considered to be a best practice?
Removing presentation-oriented markup from one's HTML documents is the best practice because semantic markup gives the advantage of maintainability, performance, accessibility, and search engine optimization.
What is semantic markup? Why is it important?
Semantic markup is focusing on the structure of the document rather than its visuals. It is important to have the HTML document describe its content's structural semantics or meaning, instead of visually presenting content.
What is the difference between standards mode and quirks mode? What role does the doctype play with these modes? .
Standards mode relates to standards developed in new browsers, while quirks mode is for browser's that follow older nonstandards algorithm. Doctype was used to tell the browser to render an HTML document using one of the following modes depending on the browser's algorithm
How does the <figure> element differ from the <img> element? In what situation does it make sense to use or not use <figure>?
The <img> element is used to embed the image into an HTML document whereas the <figure> element is used to semantically organize the content of an image in the HTML document. It is best to use <figure> if the content is essential, but its position in the flow of content is not important.
What is the difference between <p> and <div> element? In what contexts should one use the one over the other?
The <p> element and <div> elements represent paragraphs in an HTML document. The <p> tag is a container and can contain HTML and other inline HTML elements, while the <div> element is a container that is used to create a logical grouping of content. It is best to use <p> over <div> when waning to include HTML elements within a paragraph to create a regular "flow".
What are the advantages of using the new HTML5 semantic elements? Disadvantages?
The advantages of using the new HTML5 semantic elements are how it improves the maintainability and accessibility of web pages. The disadvantage is that the simplified elements can make the resulting markup of a complex layout confusing and hard to modify.
Why was the XHTML 2.0 standard eventually abandoned?
The development of XHTML 2.0 dragged on for many years because there was a large W3C committee in charge of the specification (too many people working on it, instead of a smaller group), and browser manufacturers/the web development community became uncomfortable with rejecting the backwards compatibility with HTML and making substantial changes to all existing web pages.
What role do HTML validators play in web development?
They verify that a web page's markup followed the rules for XHTML Transitional or Strict (think of the website we use to "validate" our web pages to make sure there are no errors).
What is the difference between XHTML and HTML5?
XHTML is a version of HTML that uses stricter XML syntax rules, with the goal of making page rendering more predictable by forcing web authors to create web pages without syntax errors. HTML5 was created in order to achieve 3 things: specify unambiguously how browsers should deal with invalid markup, provide an open and nonproprietary programming framework (vis JavaScript) for creating rich web applications, and be backward compatible with the existing web.
Are you allowed to use more than one <heading> element in a web page? Why or why not?
Yes, you can use more than one <heading> element in a web page because of the w3c documentation allowing for 6 levels of headers (h1-h6).
HTML elements
encompasses: -the element name within angle brackets (tag) -attributes -the content within the tag
