Web Development Overview
28 Questions
0 Views

Web Development Overview

Created by
@AngelicChrysoprase4403

Podcast Beta

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Which stage of web development involves the actual creation of the site?

  • Development (correct)
  • Planning
  • Definition
  • Testing

    • What is the primary function of HTML in web development?

  • Styles the document layout
  • Links external resources
  • Codes the structure and content (correct)
  • Manages server interactions

    • Why is CSS preferred for styling multiple pages over inline styling?

  • Inline styles are more organized
  • CSS applies styles site-wide from a single file (correct)
  • CSS is simpler to write
  • CSS requires more lines of code

    • What does 'index.html' represent on a web server?

    <p>The main entry point of a website</p> Signup and view all the answers

    Which component is NOT typically part of a URL?

    <p>Style sheet</p> Signup and view all the answers

    What is one key characteristic of robust applications?

    <p>They should function despite unexpected selections.</p> Signup and view all the answers

    Which WAI-WCAG conformance level indicates that a site should definitely meet a success criteria?

    <p>A</p> Signup and view all the answers

    What do HTML elements contain?

    <p>A mixture of tags and text.</p> Signup and view all the answers

    What approach did WHATWG take regarding HTML standards?

    <p>Continuous updates with a flexible structure.</p> Signup and view all the answers

    Which of the following best describes SGML?

    <p>A standard that defines the structure and syntax that HTML uses.</p> Signup and view all the answers

    What is the acronym that outlines the principles of web accessibility?

    <p>WCAG</p> Signup and view all the answers

    Which of the following is not a category of disability mentioned in the content?

    <p>Chemical</p> Signup and view all the answers

    What does the principle 'Operable' emphasize in web content accessibility?

    <p>All navigation should be usable for all users.</p> Signup and view all the answers

    Which of the following practices falls under the 'Perceivable' principle?

    <p>Using captions with videos for hearing impaired users.</p> Signup and view all the answers

    What is a potential issue that should be avoided under the 'Understandable' principle?

    <p>Drastic changes in screen/font size.</p> Signup and view all the answers

    What is the purpose of the 'alt' attribute in an image tag?

    <p>To display alternative text if the image fails to load</p> Signup and view all the answers

    What is the consequence of not using quotes around attribute values consistently in HTML?

    <p>Some browsers might ignore the attribute</p> Signup and view all the answers

    Which of the following statements regarding the 'figure' element is true?

    <p>It may contain a caption and other content</p> Signup and view all the answers

    How should quotes be formatted when including them within an attribute value?

    <p>Use HTML entities for the same type of quotes</p> Signup and view all the answers

    What is the purpose of including the UTF-8 character set in an HTML document?

    <p>To support a wider range of languages and characters</p> Signup and view all the answers

    Which of the following is a characteristic of void elements?

    <p>They cannot contain content.</p> Signup and view all the answers

    What is the purpose of attributes in HTML elements?

    <p>To contain information not part of the content.</p> Signup and view all the answers

    Which attribute is mandatory for the image element?

    <p>src</p> Signup and view all the answers

    What is true about Boolean attributes in HTML?

    <p>They can be abbreviated by using only the attribute name.</p> Signup and view all the answers

    Which statement is correct regarding quotes around attribute values?

    <p>Using one type of quote allows for the other type to be used inside.</p> Signup and view all the answers

    What is the recommended approach to include the UTF-8 character set in an HTML document?

    <p>It should be part of the meta element.</p> Signup and view all the answers

    What is the primary role of the meta element in an HTML document?

    <p>To provide keywords and descriptions.</p> Signup and view all the answers

    What must be included in an attribute declaration in HTML?

    <p>An equals sign followed by the attribute value in quotes.</p> Signup and view all the answers

    Study Notes

    Web Development Stages

    • Stages of Web Development: Definition, Planning, Development, Testing, Launch, Maintenance

    Client-Server Model

    • Client and Server interact for website functionality

    HTML

    • Hypertext Markup Language: Codes the structure and content of a webpage or document
    • HTML Elements: Code the building blocks of HTML
      • Body
      • Sections
      • Paragraphs
      • Lists
      • Header
      • Footer
      • Navigation Menu

    CSS

    • Cascading Style Sheets: Codes the style of the document:
      • Fonts
      • Color scheme
      • Layout
      • Spacing
      • Borders
    • CSS Properties: Hundreds of properties can be used to style a document
    • CSS Separation: Keeping styling separate from HTML makes it easier to maintain consistency across multiple pages and update styles easily.

    Index.html

    • Serves as the main index page of a website, often referred to as the home page.
    • Displayed when accessing the website directory.
    • Located at the root of the server's directory structure.

    URL

    • Uniform Resource Locator: The address of a specific resource on the web.
    • Links often hide the URL.
    • Components of a URL: {Protocol}://{Host}/{Path}/{Filename}

    Intro to Accessibility

    • Resource: WebAIM (Accessibility In Mind)
    • Disability Categories: Visual, Auditory, Motor, Cognitive

    WAI-WCAG

    • Web Accessibility Initiative - Web Content Accessibility Guidelines
    • Organization: W3C (World Wide Web Consortium)
    • Components: Principles, Guidelines, Success Criteria, Techniques
    • Goal: To make the web accessible to all users.

    WAI-WCAG: Principles

    • Define what constitutes accessible web content.
    • POUR: Perceivable, Operable, Understandable, Robust

    Perceivable

    • Vision Impaired:
      • Font size and contrast must be clear.
      • Color changes in buttons should be noticeable.
    • Hearing Impaired:
      • Use captions with videos.

    Operable

    • All navigation should be usable by all users.
    • Keyboard navigation should be supported.
    • Sufficient time should be provided for reading or hearing content.
    • Components should be easy to find and navigate.
    • Content should not trigger seizures or physical reactions (flashing, excessive animation).
    • Hand gesture interactions should provide alternatives.

    Understandable

    • Content should be comprehensible for everyone.
    • Interactive components should not cause:
      • Drastic changes in screen or font size.
      • Cursor jumping or scrolling unpredictably.
    • Consistent navigation is essential.
    • Provide context-sensitive help.
    • Avoid excessive use of acronyms.

    Robust

    • Web content should be resilient and difficult to break or crash.
    • Content should work across different browsers and screen sizes.
    • Unexpected selections should not disrupt the functionality of the application.

    WAI-WCAG: Success Criteria (SC)

    • Each guideline has one or more success criteria.
    • Each SC is a standard, a test, or a check.
    • Conformance Levels:
      • A: All sites should meet this level.
      • AA: More complex to achieve, few sites meet all AA SC.
      • AAA: Nice to have but not required, very specific requirements.

    HTML

    • An application of SGML (Standard Generalized Markup Language)
    • Defines the structure and syntax of HTML using DTD (Document Type Definition)
    • XML (Extensible Markup Language) is also derived from SGML, but more strict and used for transferring data over networks.

    HTML History

    • W3C founded by Tim Berners-Lee: Established WWW standards in 1994 after leaving CERN.
    • WHATWG (Web Hypertext Application Technology Working Group): Formed in 2004 by Apple, Mozilla, and others.
    • W3C and WHATWG: Had different approaches to HTML development. W3C focused on a rigid XHTML structure with fixed versions, while WHATWG favored a flexible structure and a live version with continuous updates.
    • HTML 5 live version became the sole standard in 2014: WHATWG is responsible for maintaining and enhancing it.

    HTML Fundamentals

    • Tells browsers how to structure a webpage.
    • Contains elements.
    • Elements contain tags, with opening and closing pairs.

    HTML Basic Structure

    <p>See the cat</p>
    • P is the element name: Presents text as a paragraph.
    • Tags: Enclosed in "<" and ">".
    • Closing tag: Includes "/" (e.g.,

      ).
    • Element: Complete item from opening to closing tag.

    Nested Elements

    • Elements can be nested within other elements.

    Void Elements

    • Don't have a closing tag.
    • Typically used to insert elements into a document, such as an image:
    <img src="myImage.jpg" alt="My Image">

    Attributes

    • Provide additional information about elements.
    • Attribute Structure:
      • attributeName="attributeValue"

    Image Element Attributes

    • src (required): Source of the image.
    • alt: Alternative text displayed if the image cannot be loaded.
    • width: Width of the image.
    • height: Height of the image.

    Boolean Attributes

    • Example: disabled
    • Short form: Use the attribute name without a value: disabled="disabled"

    Quotes Around Attribute Values

    • Always use quotes around attribute values (single or double quotes).
    • Using one type of quote allows you to use the other type inside the value.
    • Mixing quotes causes errors.

    Structure of an HTML Document

    <!DOCTYPE html> 
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>test page</title> 
</head>
<body> 
   Playing with HTML
</body>
</html>

    HTML Document Parts

    • DOCTYPE: Historical artifact, usually included.
    • html: Wraps around all page content, the root element.
    • head: Contains metadata and elements not directly visible to users, such as keywords and description.
    • meta: Includes meta information about the page, such as the character set: meta charset="UTF-8" (encodes the majority of languages).
    • title: The title of the document displayed in the browser tab.
    • body: Contains the main content of the page.

    Minimal HTML Document

    <!DOCTYPE html> 
<html lang="en">
<head> 
    <title>test page</title> 
</head>
<body> 
   Playing with HTML
</body>
</html>

    Images

    • src: Source attribute for the image (relative path preferred).
    • alt: Alternative text in case the image can't be displayed.
    • Important: Do not use links to absolute URLs!
    • Screen Readers: If alt is blank, the screen reader will read the src attribute, which is usually meaningless.
      • If alt="", the screen reader will ignore the image, assuming it's decorative.

    The Figure Element

    • Purpose: Presents content like an image and a caption.
    • Usage:
      • Typically used when referring to the figure in the text (e.g., "As seen in Figure...").
      • Separates the figure from the main text.
      • Not limited to images, can be used for other content.
    <figure>
  <img src="myImage.jpg" alt="My Image">
  <figcaption>This is a photo of something</figcaption> 
</figure>

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    WebDev MidTerm Review.pdf

    Description

    This quiz covers the fundamental stages of web development, including the client-server model and the essential components of HTML and CSS. Test your knowledge about the structure, styling, and functionality of web pages, as well as best practices for layout and maintenance.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser