Skip to content

Latest commit

 

History

History

html-assessments

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

25+Pure HTML Assessments

1. Basic HTML Document Structure

  • Task: Create a basic HTML document that includes the following:
    • <!DOCTYPE html>
    • <html>, <head>, and <body> tags.
    • Inside the <head>: Add a title using the <title> tag.
    • Inside the <body>: Add a heading and a paragraph.

2. Headings and Paragraphs

  • Task: Create a webpage using all six heading tags (<h1> to <h6>) and multiple paragraphs (<p> tags).

3. Text Formatting

  • Task: Format a paragraph of text using the following tags:
    • <b> (bold)
    • <i> (italic)
    • <u> (underline)
    • <strong> and <em>

4. Lists Creation

  • Task: Create an ordered list (<ol>) and an unordered list (<ul>) with at least three list items each. Nest an unordered list inside one of the ordered list items.

5. Links and Anchors

  • Task: Add three types of links:
    • An internal link to another section within the same page using an anchor (<a> tag with href="#section").
    • An external link to a different website.
    • An email link using mailto:.

6. Images

  • Task: Embed an image using the <img> tag. Set the alt attribute and adjust the image's width and height.

7. Tables

  • Task: Create a table using the <table>, <tr>, <td>, and <th> tags. Include a header row, multiple rows, and columns.

8. Forms with Input Fields

  • Task: Create a basic form with the following input fields:
    • Text input (<input type="text">)
    • Password input (<input type="password">)
    • Email input (<input type="email">)
    • Submit button (<input type="submit">)

9. Forms with Labels and Fieldsets

  • Task: Create a form with labels (<label>) for each input field. Group related input fields using the <fieldset> and <legend> tags.

10. Radio Buttons and Checkboxes

  • Task: Add radio buttons and checkboxes to a form. Create a question with multiple radio button options (only one can be selected) and another question with multiple checkbox options (more than one can be selected).

11. Dropdown Menu

  • Task: Create a dropdown menu using the <select> and <option> tags. Include at least five options.

12. HTML5 Semantic Elements

  • Task: Structure a webpage using HTML5 semantic elements:
    • <header>, <nav>, <section>, <article>, <aside>, and <footer>.

13. Embedding Videos

  • Task: Embed a video using the <video> tag. Include controls and set a poster image that appears before the video is played.

14. Embedding Audio

  • Task: Embed an audio file using the <audio> tag. Include controls so that users can play, pause, and adjust the volume.

15. HTML Forms with Action and Method

  • Task: Create a form with an action attribute that points to a URL (e.g., /submit_form). Use the method attribute with values GET or POST.

16. Block and Inline Elements

  • Task: Identify and use block-level elements (e.g., <div>, <p>, <h1>) and inline elements (e.g., <span>, <a>, <img>). Create a webpage that demonstrates the differences.

17. HTML Comments

  • Task: Add comments in the HTML code to explain the structure and purpose of various sections. Use <!-- comment --> syntax.

18. Meta Tags

  • Task: Add meta tags in the <head> section for the following:
    • description: Briefly describe the content of the webpage.
    • keywords: Add relevant keywords for SEO.
    • viewport: Set the viewport for responsive design.

19. HTML5 Canvas

  • Task: Create a simple drawing on a webpage using the <canvas> element. Include a script to draw a rectangle or a circle.

20. HTML Entities

  • Task: Use HTML entities to display special characters in a paragraph:
    • &, <, >, ", ©, ®, €, etc.

21. Favicons

  • Task: Add a favicon to a webpage by linking an image in the <head> section using the <link> tag.

22. Image Map Creation

  • Task: Create an image map with clickable areas using the <map> and <area> tags. Each area should link to a different URL.

23. Hyperlinks with target Attribute

  • Task: Create several hyperlinks using the <a> tag. Use the target="_blank" attribute to open some links in a new tab.

24. Using placeholder and autofocus in Forms

  • Task: Create a form where the input field has a placeholder text and automatically gets focus when the page loads.

25. Inline Styles

  • Task: Apply inline styles directly to HTML elements using the style attribute. Set properties like color, font-size, background-color, etc.

26. Embedding Iframes

  • Task: Embed another webpage or a video from an external site using the <iframe> tag. Set the width and height of the iframe.

27. HTML Attributes

  • Task: Demonstrate the use of various HTML attributes such as id, class, title, and style. Create a webpage that utilizes these attributes effectively.

28. Creating a Definition List

  • Task: Create a definition list using the <dl>, <dt>, and <dd> tags. Define at least three terms with their corresponding descriptions.

29. Using target, rel, and download Attributes in Links

  • Task: Create links that:
    • Open in a new tab using target="_blank".
    • Use the rel="noopener noreferrer" attribute.
    • Allow downloading a file using the download attribute.

30. HTML Tables with colspan and rowspan

  • Task: Create an HTML table that demonstrates the use of colspan and rowspan attributes to merge cells across rows and columns.