CS1102 Lecture 04: Web Development Basics
41 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the purpose of using CSS in web design?

  • To store data in databases
  • To create server-side applications
  • To apply consistent styling across multiple webpages (correct)
  • To add interactivity to web pages

    • CSS styles can only be applied to a single webpage and not across multiple pages.

    False

    What tag is used to enclose a part of the text that is to be styled?

    span

    CSS can be embedded in the ______ section of the webpage.

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

    Match the following CSS-related terms with their descriptions:

    <p>Selector = An HTML tag that is targeted for styling Declaration = Defines the styling applied to the selector Property = An aspect of the element that can be styled, like color Value = The specific setting for a property, like red for color</p> Signup and view all the answers

    What is the primary function of HTML in web development?

    <p>To structure content</p> Signup and view all the answers

    CSS is primarily used to add content to webpages.

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

    Name one type of media that can be displayed on a webpage.

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

    A webpage contains text marked up with __________ tags.

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

    Match the following elements with their function in web development:

    <p>HTML = Structure content CSS = Style webpage JavaScript = Add interactivity Web browser = Render HTML into a user-friendly format</p> Signup and view all the answers

    Which version of HTML is mentioned in the content?

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

    Web browsers can only display text and images.

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

    What is the primary function of lists in HTML?

    <p>To enhance the presentation of information under a category</p> Signup and view all the answers

    An unordered list in HTML displays items with automatic numbering.

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

    What are the two types of lists defined in HTML?

    <p>Unordered and ordered lists</p> Signup and view all the answers

    The HTML code for an unordered list begins with <> and ends with </>.

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

    Match the following types of lists with their characteristics:

    <p>Unordered List = Displays items with bullets Ordered List = Displays items with automatic numbering</p> Signup and view all the answers

    Which statement best describes the ease of using lists in HTML?

    <p>They allow easy insertion and deletion of items</p> Signup and view all the answers

    HTML line breaks directly correspond to how text appears in browsers.

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

    What does the 'li' tag represent in HTML lists?

    <p>List item</p> Signup and view all the answers

    The code example for an unordered list is found in the file named <_____>.html.

    <p>lec04-05-HTML-lists</p> Signup and view all the answers

    What does the alt attribute in an img tag do?

    <p>Provides alternate text for the image</p> Signup and view all the answers

    The img tag requires a closing tag.

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

    What can visually impaired users utilize to understand an image when using the alt attribute?

    <p>Screen reading software</p> Signup and view all the answers

    The img tag is used to display an image on a ______.

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

    Match the following HTML tags with their functions:

    <p>img = Displays an image br = Adds a line break hr = Adds a horizontal rule alt = Specifies alternate text for images</p> Signup and view all the answers

    What will happen if an image cannot be displayed?

    <p>The alt text will be displayed instead</p> Signup and view all the answers

    The img tag is an example of a block-level element.

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

    Name an example of an empty element in HTML.

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

    HTML elements that do not require an end tag are called ______ elements.

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

    Which of the following is NOT an example of an empty element?

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

    What type of URL contains the full path to a resource?

    <p>Absolute URL</p> Signup and view all the answers

    A relative URL specifies the location of a file relative to the current file's folder structure.

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

    What is the purpose of character entities in HTML?

    <p>To represent reserved characters or symbols without rendering them as tags.</p> Signup and view all the answers

    The symbol for a non-breaking space in HTML is represented by the entity name __________.

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

    Match the following URLs with their descriptions:

    <p>Absolute URL = Includes the full path to a file Relative URL = Specifies a file's location in relation to the current file Character Entity = Represents reserved characters in HTML CSS = Describes the visual presentation of HTML elements</p> Signup and view all the answers

    Which of the following is NOT a reason to use CSS?

    <p>To directly embed script functionalities</p> Signup and view all the answers

    HTML entities can only be used for displaying mathematical symbols.

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

    What does CSS stand for?

    <p>Cascading Style Sheets</p> Signup and view all the answers

    A URL starting with 'www' usually indicates a __________ URL.

    <p>web address</p> Signup and view all the answers

    What does the entity '<' represent in HTML?

    <p>Less than symbol (&lt;)</p> Signup and view all the answers

    Study Notes

    CS1102 Introduction to Computer Studies - Lecture 04

    • Lecture Topic: Web Development: HTML and CSS
    • Semester: A, 2024-2025
    • Course Information: CS1102 Introduction to Computer Studies, City University of Hong Kong, Department of Computer Science
    • Lecture materials not to be redistributed to Course Hero or other public web sites.
    • Agenda (Lecture 04):
      • Webpage and Source Code
      • HTML
      • CSS
      • Construct your own webpage
    • Webpage and Source Code:
      • Webpages show information using text, images, audio, and video.
      • HTML tags mark up webpage content.
      • CSS styles webpages.
      • JavaScript adds interactivity.
      • Web browsers render the HTML source code.
    • HTML (HyperText Markup Language):
      • HTML uses tags to structure webpages.
      • Tags are enclosed in angle brackets (<>).
      • Most tags come in pairs (opening and closing).
      • Example: <html></html>.
      • Some tags are empty elements (e.g., <img>).
      • <!DOCTYPE html>: instructs the browser about the HTML version (e.g., HTML5).
      • Each HTML file contains a head section and a body section.
      • The head section includes metadata like page title.
      • The body section contains the webpage content.
    • CSS (Cascading Style Sheets):
      • CSS describes how HTML elements are displayed.
      • Specifies colors, fonts, layouts, and placement of HTML elements.
      • Can be embedded in the HTML file or in a separate file.
      • Enables better styling and layout of webpages.
    • JavaScript:
      • JavaScript is a programming language that adds interactivity.
      • It can dynamically generate content and improve webpage function.
    • Code Editor:
      • Editors like Komodo Edit or Sublime Text improve code development
      • Editors offer features like syntax coloring, error checking, and code completion.

    Additional Points

    • Demo Code Location: Demo code for the lecture is available on Canvas.

    • HTML Features:

      • Adding a webpage title.
      • Creating headings (

        to

        ).
      • Formatting paragraphs.
      • Creating bullet lists.
      • Creating numbered lists.
      • Adding links to the webpage.
      • Inserting images.
      • Creating tables.

    • HTML Lists:

      • Unordered lists use bullet points( <ul> and <li> ).
      • Ordered lists use automatic numbering ( <ol> and <li>).

    • HTML Links:

      • href attribute contains the URL of a site
      • target="blank" attribute opens a link in a new tab or window.

    • HTML Images:

      • Images are separate files (<img> tag with src for path)
      • alt attribute provides alternative text (for users with impaired vision or when the image isn't loaded).
      • Empty tags (e.g. <br>, <hr>) take no closing tag

    • HTML Entities:

      • Entities are used to represent special characters. example: < = &lt;

    • Absolute/Relative URLs:

      • Absolute URLs: full web address.
      • Relative URLs: path relative to current page.

    • File Paths: File paths specify locations within a website's folder structure.

    • CSS:

      • Selectors: CSS styles are applied to elements by locating them using CSS selectors.
      • IDs: Unique identifiers for individual elements, specified by # followed by the ID name.
      • Classes: Tags that apply styles to multiple elements that can share the same class name, specified by . followed by the class name.
      • Group selectors: Multiple CSS selectors separated by commas are used to apply the same styles to a group of elements.
      • Color properties include RGB and hexadecimal values specifying color
      • Font properties: Set using fonts.

    • CSS Display:

      • Display property can change the way elements are rendered (e.g., inline or block-level elements).

    • GitHub Pages: A service to create a website using Git.

    • Templates/frameworks: pre-built websites are a practical alternative for creating a new webpage.

    Studying That Suits You

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

    Quiz Team

    Related Documents

    CS1102 Introduction to Computer Studies Lecture 04 - Web Development: HTML and CSS PDF

    Description

    Explore the fundamentals of web development in CS1102 Lecture 04. This session covers essential topics such as HTML structure, CSS styling, and constructing your own webpage. Learn how these technologies work together to create engaging online content.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser