6 HTML
Introduction
For some courses, HTML is required in lieu of CIDI Labs. This could be items like callout boxes, accordions, or images that float right. Whether you are stuck or starting from scratch, GenAI could be a resources for crafting HTML.
Suggested Guidelines
- Need to specify “no CSS” in prompt
- Use slightly different terminology/ GenAI is particular about terminology
- use “disclosure widget” instead of the term “accordion”
- specify type of list (e.g., unlisted), otherwise generates a table
- Use hex codes instead of referring to colors broadly (except for black)
- recommended resource: https://www.iu.edu/brand/brand-expression/visual-language/color/index.html
- Can’t do multiple components at once (i.e. make the whole page)
Examples
1. Disclosure Widgets
Prompt: Write the HTML for two disclosure widgets that contain #FFF4C6 backgrounds, black borders, and margin of 20px between each widget. Do not use CSS
Copilot response:
<details style="background-color: #FFF4C6; border: 1px solid black; margin-bottom: 20px;"> <summary>Widget 1</summary> <p>Widget 1 content goes here.</p></details><details style="background-color: #FFF4C6; border: 1px solid black; margin-bottom: 20px;"> <summary>Widget 2</summary> <p>Widget 2 content goes here.</p></details>What it looks like:
2. Callout Boxes
Prompt: Write the HTML for a callout box that contains a black border, a header that says “Important” in bold text, and an unordered list with three items in the body. Make the callout box 70% of the width and centered. Do not use CSS
Copilot response:
<div style="width:70%;margin:auto;border:1px solid black;">
<h2 style="font-weight:bold;text-align:center;">Important</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
What it looks like:
