0% found this document useful (0 votes)
19 views4 pages

HTML Basics and Practical Assessment Guide

Questions and Answers

Uploaded by

yvonnedupreez123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views4 pages

HTML Basics and Practical Assessment Guide

Questions and Answers

Uploaded by

yvonnedupreez123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML Foundation Practical Memo

Theory
QUESTION 1
Define the term comment in HTML.
A. A special tag that changes the background color of a webpage
B. A piece of text in the code that is ignored by the browser
C. A command that makes text bold on the page
D. A function that adds interactivity to the webpage

QUESTION 2
What does the <BR> tag do in HTML?
A. Creates a horizontal line across the page
B. Inserts a line break in the text
C. Makes the text bold
D. Starts a new paragraph

QUESTION 3
Define the term debugging in HTML/programming.
A. Writing new code for a program or webpage
B. The process of identifying and fixing errors in code
C. Adding comments to explain the code
D. Testing a webpage on different browsers

QUESTION 4
What is the difference between procedural and descriptive formatting in HTML/CSS?
A. Procedural formatting uses CSS rules, while descriptive formatting uses HTML tags
B. Procedural formatting mixes content with appearance, while descriptive formatting
separates structure from style
C. Procedural formatting makes text bold, while descriptive formatting changes colors
D. Procedural formatting is used for images, while descriptive formatting is used for text

QUESTION 5
Select the three types of lists in HTML.
A. Ordered list, Random list, Sorted list
B. Numbered list, Bullet list, Dropdown list
C. Ordered list, Unordered list, Definition list
D. Paragraph list, Style list, Nested list

QUESTION 6
Select 4 guidelines for creating tables in HTML. Select 4
A. Always use tables only for data, not for page layout
B. Include headings <th> to describe column or row content
C. Use captions <caption> to give the table a title
D. Avoid adding borders to keep the table invisible
E. Keep tables simple and easy to read

QUESTION 7
How would you set a background graphic for a web page?
A. By using the <img> tag inside the <body> tag
B. By setting the background-image property in CSS
C. By using the <bg> HTML tag
D. By inserting the picture directly into the text
HTML Introduction (2) Page 2
ASSESSMENT

QUESTION 8
Select the tag you would use to create an email link in HTML.
A. <link>
B. <mail>
C. <a href="[Link]
D. <email>

QUESTION 9
Select four common design elements you should use in your website. Select 4
A. Consistent navigation menus
B. Clear headings and subheadings
C. Balanced use of text and images
D. Long paragraphs of unbroken text
E. Readable fonts and colors
F. Hidden links without labels

QUESTION 10
Define the term Helper Application in web design.
A. A program that helps you write HTML code
B. A separate application that runs outside the browser to handle specific file types
C. A browser extension that changes the appearance of websites
D. A tool used to debug HTML and CSS errors

QUESTION 11
Which four tags do all HTML files contain (opening and closing tags)? Select 4
A. <html> ... </html>
B. <head> ... </head>
C. <body> ... </body>
D. <title> ... </title>
E. <h1> ... </h1>
F. <p> ... </p>

QUESTION 12
Select three types of GIF files. Select 3
A. Static GIF
B. Animated GIF
C. Transparent GIF
D. Layered GIF
E. Interactive GIF

QUESTION 13
Select three types of links found in HTML. Select 3
A. Internal link
B. External link
C. Anchor link
D. Email link
E. Video link
HTML Introduction (2) Page 3
ASSESSMENT

QUESTION 14
Select two HTML tags you can use to format characters (opening and closing tags). Select 2
A. <b> ... </b>
B. <i> ... </i>
C. <br> ... </br>
D. <p> ... </p>
E. <h1> ... </h1>

QUESTION 15
Select two HTML tags you can use to format paragraphs. Select 2
A. <p> ... </p>
B. <br> ... </br>
C. <b> ... </b>
D. <i> ... </i>
E. <h1> ... </h1>

Practical
Create a small three-page website named FoundationPractical(StudentNr) (e.g., Home, About,
Contact) using the skills you have learned
1. Page Structure
 Proper HTML structure on all 3 pages (<html>, <head>, <title>,
<body>) – 4 marks
o 2 marks per page (partial if some tags missing)
 Meaningful <title> on each page – 2 marks
o 1–2 marks if only partially meaningful

2. Navigation & Links


 Internal links connect all 3 pages – 4 marks
(2 marks per correct link, partial if broken)
 At least 1 external link – 2 marks
 Bookmark link (e.g., “Back to Top”) – 3 marks

3. Images / Graphics
 At least 2 images inserted – 2 marks
 One image is clickable as a link – 2 marks
 ALT attributes used correctly – 2 marks

4. Tables
 Table created with at least 2 columns and header row – 3 marks
 Table contains meaningful data – 3 marks

5. Lists
 Ordered or unordered list included – 3 marks
 Definition list or nested list included – 3 marks

6. Formatting
 Character formatting applied (<b>, <i>, <strong>, <em>, etc.) – 2
marks
 Paragraph formatting used (<p>, <br>, <blockquote>) – 2 marks
 Horizontal rule <hr> inserted – 2 marks
 Special character included (e.g., &copy;, &reg;) – 3 marks
HTML Introduction (2) Page 4
ASSESSMENT

7. Backgrounds & Colors


 Background applied (color or image) – 3 marks
 Different text colors for headings vs. body text – 3 marks

8. Design & Consistency


 Headings used appropriately (<h1> – <h3>) – 4 marks
 Consistent layout across all 3 pages – 3 marks
 Web design guidelines applied (readability, navigation, balance of
text/images) – 5 marks

Bonus: Imagination & Creativity (Up to 3 marks)


 Extra features such as:
o Email link with mailto:
o Inline styles / CSS for design
o Creative layout, banners, or special effects

Common questions

Powered by AI

Applying consistent navigation menus and maintaining a balanced text/image ratio are crucial design elements that contribute to creating an effective website layout. Consistent navigation menus ensure that users can easily find and access different sections of a website, enhancing usability and user experience by providing intuitive navigation across pages. A balanced text/image ratio prevents overwhelming users with unbroken text or excessive graphics, supporting visual appeal and engagement by making content digestible and aesthetically pleasing. Together, these elements help structure a cohesive and professional-looking site that appeals to users and facilitates seamless browsing .

Setting a background image for a webpage should involve guidelines that ensure aesthetic appeal and performance optimization. Using the CSS background-image property rather than embedding images directly into the HTML allows for better separation of style and structure. The image should be optimized for web use through appropriate compression to reduce file size, thus enhancing loading times without compromising quality. Ensuring the image's dimensions are responsive and suitable for different screen resolutions helps maintain design consistency across devices. Additionally, alternative background colors should be defined for scenarios where the image may not load, maintaining visual integrity and user experience .

Helper applications enhance multimedia interactions by handling specific file types that a browser cannot natively process, such as certain video, audio, or document formats. These applications run separately from the browser, providing the functionality to view or interact with complex multimedia elements seamlessly. Unlike browser-based operations, which are limited to the capabilities coded into the browser itself, helper applications extend these capabilities without requiring the browser to be directly involved, thus facilitating a wider range of media interactions and providing users with a richer browsing experience .

GIF files offer several benefits in web design, primarily through their ability to display animations and support transparency, which can enhance the visual appeal of a website. Static GIFs provide a simple, non-moving image format that benefits sites requiring compact and universally compatible graphics. Animated GIFs allow for motion illustrations without the need for complex programming or plugins, adding dynamic content that can catch users' attention or convey information efficiently. Transparent GIFs enable the overlay of images onto different background colors or patterns seamlessly, contributing to cleaner and more integrated design elements across webpages .

The HTML <BR> tag inserts a line break within text content, enhancing readability and organization by allowing control over where text flows on a webpage. This is particularly useful in scenarios where developers need to separate lines within a single paragraph without starting a new paragraph, such as in poetry, addresses, or short-form content. The use of <BR> ensures that text is displayed as intended, maintaining the semantic structure and conserving visual spacing, thereby improving the user's reading experience .

Procedural formatting mixes content with appearance by directly using HTML tags to implement styles, whereas descriptive formatting involves separating structure from style by utilizing CSS rules. The impact of this distinction is significant in web development as procedural formatting leads to a lack of flexibility and potential redundancy, making it harder to maintain or update the site's appearance without altering the HTML. Descriptive formatting, on the other hand, ensures a clear separation between the HTML structure and styling, enhancing the ability to consistently apply style changes across multiple pages through external CSS files, thus supporting scalable and maintainable design practices .

Proper character and paragraph formatting using HTML tags like <b> for bold text and <i> for italic text enhances the visual hierarchy by distinguishing important or emphasized content from regular text. Paragraph elements, such as <p> for paragraphs and <blockquote> for quoted sections, organize text semantically and visually, ensuring that content is presented in a structured, readable format. This use of formatting helps readers quickly identify key content and understand the layout and flow of the text, thereby improving overall readability and comprehension on a webpage .

Using specific elements such as internal links, external links, and email links allows developers to optimize both functionality and user experience on a website. Internal links facilitate navigation within the same website, guiding users efficiently through the site's content. External links provide access to relevant information or resources on other websites, broadening the scope and informational depth available to users. Email links, created via <a href="mailto:...">, enable direct communication with the site owner or organization, enhancing user engagement and support options. Each link type is explicitly designed to perform its function effectively, contributing to a well-structured and user-friendly navigation experience .

The comment tag in HTML allows developers to write notes or explanations within the code that are ignored by the browser, thus not affecting the webpage's display. This feature is crucial for optimizing code maintenance and collaboration during web development. By using comments, developers can leave important notes or hints about the code's functionality or complex logic, which aids in understanding the code at a later date or by another developer. This practice enhances the maintainability of the code and facilitates teamwork, as it clarifies the intention behind specific code segments without cluttering the output of the webpage .

To create an accessible HTML table, it's essential to include elements such as headers and captions. Headers (<th> tags) are used to describe the content of each column or row, aiding in the understanding of the table's structure when read by screen readers. Captions (<caption> tags) provide an overall title to the table, summarizing its purpose and content, which can be crucial for users who rely on assistive technologies. Additionally, keeping tables simple and easy to read, ensures that data is conveyed clearly to all users, facilitating improved usability and comprehension .

You might also like