D276 Web Development Foundations
Know how to add HTML Entities to a webpage.
&entity_name; OR &#entity_number;
Which is the correct file path to place the product1.jpg image on the service3.html webpage?
../images/product1.jpg
Create a basic webpage with the following elements: DOCTYPE html head title meta body
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1 ><p>My first paragraph.</p> </body> </html>
Which is the correct way to create a link from the service1.html webpage to the services.html webpage?
<a href="../services.html">Services</a>
Know and identify types of empty tags.
<br> <hr> <meta> <link> <img> <source> <input>
Which of the following are HTML5 semantic tags? Select all that apply.
<footer> <header> <nav>
Which of the following are block-level elements? Select all the apply.
<footer> ... </footer> <div> ... </div> <h1> ... </h1> <p> ... </p>
Which of the following are examples of container tags? Select all that apply.
<h3> <p> <article>
HTML5 introduced which of the following elements?
<header> ... </header> <nav> ... </nav> <footer> ... </footer> <audio> ... </audio>
Basic syntax of an HTML element
<html> <body> <h1> <p>
Text editor and common text editors
A text editor is any program that allows you to type simple text and edit it, such as Microsoft Notepad and WordPad, or UNIX-based programs such as Vi and Pico. Atom - https://atom.io/ (Windows, macOS, Linus) Cream — http://cream.sourceforge.net (Windows only). Emacs — www.gnu.org/software/emacs (Windows, macOS, or Linux). jEdit — www.jedit.org (Windows, macOS, or Linux). Notepad++ — http://notepad-plus.sourceforge.net (Windows only). Sublime Text — https://www.sublimetext.com (Windows, macOS, or Linux). Vim — www.vim.org (Windows, Mac or Linux).
Successful Websites have a strong, central theme. Successful Websites are also aimed at a distinct ____.
Audience
The ___ element is used to reference an external style sheet.
link
The ___ element is used to specify information about the document, such as a character set, author, and viewport.
meta
Before you create a Website, you must first create a Website ____.
plan
As you communicate your Website plan to relevant parties, which of the following should you consider using to help illustrate your plan?
presentation aids
Examine the following snippet of code. Identify the value.
special
Once your site is live, your Web team will receive various kinds of feedback from customers and
stakeholders
When creating a Website, who are relevant employees or contributors within the organization who can help determine the purpose of the Website, the site's look and feel, the services that the audience requires from the site, and so forth?
stakeholders
The ___ element identifies the document title.
title
As you develop webpages for your website, what should you do often to ensure that the HTML and CSS used to create and style the pages are correct?
validate webpage files
Fill in the blank (answer is one word; not www). Complete the URL for the W3C markup validation service. https://_______.w3.org.
validator
The process of working on an outline for a Web presence is known as _____.
wireframing
Which heading element is the same size as default text?
h4
The ___ element is used to contain meta tags, links to style sheets, and the title element.
head
The ___ element contains the entire document code.
html
Know and identify types of container tags
<html> ... </html> <head> ... </head> <body> ... </body> <p> ... </p> <div> ... </div> <header> ... </header> <footer> ... </footer>
Which of the following are examples of empty tags? Select all that apply.
<img> <meta> <br> <hr>
A metalanguage that is used to create other languages.
<meta>
Know how to correctly add the following elements within a webpage: Paragraph elements Heading elements (h1 - h6) An ordered list with three list items An unordered list with three list items
<p>This is a paragraph.</p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Understand block-level vs. inline (or text-level) elements.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). An inline element does not start on a new line. An inline element only takes up as much width as necessary.
Which is the correct file path to add the logo.png image file to the index.html webpage?
images/logo.png
Understand website file structure/file path.
A file path describes the location of a file in a web site's folder structure. <img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page <img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder <img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web <img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
Identify three good coding practices.
Always Declare Document Type Use Lowercase Element Names Close All HTML Elements Use Lowercase Attribute Names Avoid Long Code Lines Never Skip the <title> Element
US act that protects the rights of people with disabilities.
American Disabilities Act (ADA)
Which browser is text-based, supports braille displays and screen readers, and is considered useful for testing website accessibility?
Lynx
A style sheet language that provides the formatting and "look" of a Webpage or document written in a markup language.
CSS
What does CSS stands for and its purpose
Cascading Style Sheets (CSS) are rules in an external text file that determine how to display HTML elements in your Webpages. CSS contain formatting instructions that can define the font, color and phrase elements used on a particular markup page.
Identify the benefits of CSS
Consistency — CSS easily gives an entire site a consistent look and feel. Easy change management — You can change the look and feel of an entire site by simply changing one part of a single line of code, rather than having to change possibly thousands of lines in hundreds of Webpages.
Give three examples of a container tag and three examples of an empty tag.
Container Tags : <html> ... </html> <head> ... </head> <body> ... </body> Empty Tags: <br> <hr> <meta>
Identify the steps in the Web Development Project Cycle and describe each
Create and document an initial Website plan. Obtain relevant input from stakeholders. Communicate the Website plan. Consider technical and non-technical concerns. Develop the website. Publish the website. Website maintenance.
True or False? HTML comments should be used to inform others about important elements used with in the webpage code.
DOCTYPE
True or False? HTML comments should be used to ensure that the addition of random white space will not affect rendering in browsers.
False
True or False? Head elements are the same as header elements.
False
True or False? The Internet and the WWW are the same thing.
False
GUI and common GUI editors
Graphical user interface (GUI) markup editor applications place markup instructions into files for you Popular GUI HTML editors include Adobe Dreamweaver, Microsoft Expression Web, Mozilla SeaMonkey and Google Web Designer.
A markup language used for structuring and presenting Webpage content.
HTML
What support was added with HTML 4.01
HTML 4.01 supported multiple spoken languages. For example, HTML 4.01 allowed you to create Webpages that read languages such as Hebrew from right to left. HTML 4.01 also allowed you to create ambitious tables and forms, as well as incorporate scripting languages. HTML 4.01 Transitional —allowed developers to insert formatting using either CSS or traditional layout instructions (e.g., HTML font, color and phrase elements). This version rendered in browsers that did not support HTML 4.01 features such as CSS. This version also allowed tags that the W3C considered to be less useful, known as "deprecated tags." HTML 4.01 Strict —required the exclusive use of CSS when defining layout instructions. Deprecated tags were not allowed and generated errors. HTML 4.01 Frameset — required for pages that used HTML frames, which placed Webpages inside each other to create separate panes in the browser window. Some felt that frames provided additional functionality or enhanced a site's look and feel.
What is the latest version of HTML?
HTML 5.2
HTML Versions
HTML 5.2 is the latest verion. HTML 3.2 is an older but functional HTML standard. Some Webpages and HTML editors still use the 3.2 and 4.01 standards. The HTML 4.01 Recommendation (released in 1999) contained many improvements from HTML 3.2, most notably Cascading Style Sheets (CSS).
How to add an attribute and value to a tag.
HTML attributes provide additional information about HTML elements. The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: <a href="https://www.w3schools.com">Visit W3Schools</a>
What is the difference between HTML and XML.
HTML displays data and describes the structure of a webpage, whereas XML stores and transfers data.
Describe what is meant by nested elements.
HTML elements can be nested (this means that elements can contain other elements).
Which of the following statements are true about HTML Entities?
HTML entities are special symbols or characters, such as the copyright symbol © All HTML entities start with an ampersand & and end with a semicolon ;
Which of the following are considered the web development "trifecta?"
HTML, CSS, and JavaScript
A language that requires few plug-ins and standardizes how video and audio are presented on a Webpage.
HTML5
Web Development Trifecta
HTML5, CSS and JavaScript.
What is the difference between the head element and a heading element?
Head tag: The HTML <head> element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets. (HTML MDN) Header tag: The HTML <header> element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on. (HTML MDN) - In other words; the head tag is used for document title, styling, scripts, etc. Whereas the header tag is used for headers as seen in articles.
Examine the following statements. Which statement is true?
Heading elements may be nested within header elements.
A scripting language used to provide interactivity within a Webpage.
JavaScript
Semantic elements introduced with HTML5
Introduced the <video> element, which is designed to eliminate the need to install third-party plug-ins (such as those for Adobe Flash or Microsoft Silverlight). Adds the <audio> element, which allows pages to seamlessly add audio files for events such as podcasts. Establishes ways to enable drag-and-drop capability for Webpages without using third-party add-ons. Gives developers more native tools such as download progress indicators, image captioning options and form validation tools to use on a page. Provides developers with a native option for offline storage, and enables applications to run as expected even without network connectivity. Allows developers to retrieve the geographical location information for a client-side device, called geolocation. Examples include using the Global Positioning System (GPS) of a mobile device to determine the device's location, which allows Web services to be provided based on the client's location.
HTML (Hypertext Markup Language)
It is the standard markup language on the Web, and in other settings. HTML is standardized by an organization called the World Wide Web Consortium (W3C)
Describe what is meant by Responsive Web Design.
Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.
Know how to add comments to an HTML file. Identify their purpose.
Short comments should be written on one line, like this: <!-- This is a comment --> Comments that spans more than one line, should be written like this: <!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
HTML 4.01 added support for which of the following?
Tables CSS Scripting languages Forms Multiple spoken languages
Know and understand the difference between a container tag and empty tag.
Tags that come in pairs. Container tags use starting and ending tags. Tags that stand alone. Empty tags are those that do not directly format a specified block of text, and therefore one tag can execute the instruction.
Which of the following can be used to create a webpage?
Text editor GUI editor
Identify the purpose of each element: DOCTYPE html head title meta body
The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph
True or False? HTML comments can be used to disable code to see how a page will appear without a particular markup element.
True
True or False? HTML comments can be used to remind yourself why you inserted a particular piece of code.
True
What is the purpose of markup validation and the W3C URL for markup validation
Using this service, you can upload local HTML files for validation, or provide the URL of a Webpage to validate it. The purpose of the validator is to guarantee the compliance of a website and to check your code against syntax and accessibility standards.
As a general rule, adhering to _____ will provide a more consistent rendering of your Webpages across various browsers.
W3C validation standards
Group that focuses on accessibility for W3C technologies.
Web Accessibility Initiative (WAI)
States that federal agencies must make electronic information accessible.
Web Accessibility Initiative (WAI)
Specific set of guidelines that should be followed to make web content accessible.
Web Content Accessibility Guidelines (WCAG)
As you develop Webpages, make sure that you test your Webpages using multiple ____.
Web browsers
What is the last step in the Web Development Project Cycle?
Website management and maintenance.
Examine the following snippet of code. Identify the attribute.
class
Creates all web standards.
World Wide Web Consortium (W3C)
A language that allows transition from HTML to XML.
XHTML
A language that describes the function and context of the information contained in a document. Used to store and transport data.
XML
The ___ element contains all visible webpage content.
body
