HTML Lab #13
19. CSS comment; a. Provide a code example of a CSS comment. b. Explain why placing a CSS comment between the <body> </body> tags doesn't make sense.
/**This is a CSS comment**/ ; Placing a CSS comment inside the body tags does not make sense because you're in the HTML part of the code.
36. CSS Box Model Given the CSS code below, calculate the total width of this div element: div { width: 315px; padding: 10px; border: 5px solid gray; margin: 15px; } • Total width: _________________ • Show the calculations used to arrive at the total width:
375px = 315px + 2(10px) + 2(5px) + 2(15px).
18. HTML comment; a. Provide a code example of an HTML comment. b. Provide one reason for using an HTML comment.
<!-- This is a comment --> ; HTML comments are good for placing notifications or reminders, as well as also hiding content until you need to show it.
9. Use internal CSS and an element selector to change the text color to navy AND center the text of ALL paragraphs in a web page.
<!DOCTYPE html> <html> <head> <style> p { text-align: center; color: navy; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p> Me too!</p> <p>And me!</p> </body> </html>
30. Provide the code needed to: a. insert a global link to a web page of your choice b. Code the attribute to make the link open in a new browser tab
<a href="https://www.instagram.com/" target="_blank">Visit Instagram!</a>
14. Scenario: you are attempting to display a poem on a webpage, and you don't want to skip a line between the lines of text. Provide a code example of a two line poem that does not skip lines in between
<br> tag
26. Provide the CSS to change the color of ONE paragraph BLUE using hex color and inline CSS
<h1 style="color:#0000ff">Heading</h1>
25. Provide the CSS to change the color of ONE paragraph GREEN using rgb color values and inline CSS
<h1 style="color:rgb(0,255,0)">Heading</h1>
8. Provide a code snippet of the CSS which will change the text of an h3 heading to green using a CSS id selector. Please provide both the HTML and CSS to accomplish this.
<html> <head> <style> #head3 { text-align: center; color: green; } </style> </head> <body> <h3 id="head3">Hello World!</h3> </body> </html>
7. Provide a code snippet of the CSS which will change the text of an h3 heading to green using a CSS class selector. Please provide both the HTML and CSS to accomplish this.
<html> <head> <style> .center { text-align: center; color: green; } </style> </head> <body> <h3 class="center">GREEN and center-aligned heading</h3> </body> </html>
10. Make the following code more efficient by using a CSS grouping selector: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }
<html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
3. What is the code needed to add external CSS?
<link rel="stylesheet" href="yourfilename.css">
34. Code the attribute needed to change the following list from number markers (default) to lowercase letters. Click on this link for assistance:
<ol type="a">
5. Provide an example of how to make the text of a paragraph red using inline CSS.
<p style="color:red;">This is a paragraph.</p>
15. Show the code for making the word awesome bold in the following example: Math is awesome!! Do NOT use the <b> tag
<p> Math is <strong> awesome!!</strong></p>
16. Show the code for making the word awesome italicized in the following example: P-TECH is awesome!! Do NOT use the <i> tag
<p> P-TECH is <em> awesome!!</em> </p>
23. Write the code which will do the following: when you hover over the word CSS on a web page, it will show you "Cascading Style Sheets". Click on this link to answer the question:
<p><abbr title="Cascading Style Sheets">CSS</abbr> is a language that describes the style of an HTML document.</p>
29. Provide a code example using the HTML <sub> </sub> tag
<p>This text contains <sub>subscript</sub> text.</p>
28. Provide a code example using the HTML <sup> </sup> tag.
<p>This text contains <sup>superscript</sup> text.</p>
24. Provide the HTML tags needed to produce this list;
<sup> & <sub> tags
33. Code the CSS property needed to change the following list item markers from the default of filled in circles (default) to open circles.
<ul style="list-style-type:circle;">
32. Empty tags a. Define what is meant by an empty tag b. provide two examples of empty tags
An empty tag, is a tag with no closing tag with it. Two examples are <br> or <img>.
6. Which of the three methods to add CSS is NOT recommended and why?
Browser deafults. An inline style has the highest priority, and will override external and internal styles and browser defaults.
22. HTML symbols → use the link below to answer this question. Click on the link, find the symbol for a white star, and click on "Try It" on the right of the screen. https://www.w3schools.com/charsets/ref_utf_symbols.asp Note: the code that starts with "&#x" is the hex (hexadecimal) way to declare a symbol; without the "x" is the decimal way to code a symbol . a. Provide the decimal code needed to produce a white star ☆ b. Provide the hex code needed to produce a white star ☆
Decimal code for white star; ☆ Hex code for white star; ☆
2. Compare and contrast the function of HTML vs. CSS
HTML is the content for a web page, meanwhile CSS is the style of the web page.
31. Sue adds the necessary and correct HTML tag to her web site so that a picture of her cat Trixie will appear. When she refreshes the browser, she is upset because the picture of Trixie is not appearing. Help Sue debug this problem. What did she do wrong? She spelled the name of the image correctly and the syntax of the <img> tag is correct. Provide one reason the image would not appear on the webpage even though the code is 100% correct.
Sue's html file could not be together with her image file. They have to be together in the same folder to have the code working.
11. What does the acronym W3C stand for? What does the W3C do; what is the organization's purpose?
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.
4. Internal CSS a. How do you define internal CSS style? b. Between what other pair of tags do you declare internal CSS?
The internal style is defined inside the <style> element, inside the head section.
12. Provide the opening and closing HTML tags needed to create: a. The largest heading b. A medium size heading c. The smallest heading
a. h1 b. h3 c. h6
20. Explain what the "alt="MyImage" attribute does in the following tag: <img src="image.jpg" alt="MyImage" style="width:300px;height:200px;">
alt specifies an alternate text for the image
21. John's boss says that he wants him to use recommended coding techniques. Therefore, he wants John to take the CSS code out of his HTML file and put it in an external CSS file. John is a new programmer and forgot where to point to an external CSS file. Help John out; where in an HTML document is the correct place to point to an external CSS file: Choose one of the following choices: a. Between the <body> </body> tags b. Between the <head> </head> tags
b. Between the <head> </head> tags
13. Provide the CSS needed to change the background color of a web page to one of the colors in this list: https://www.w3schools.com/cssref/css_colors.asp
body { background-color: lavenderblush; }
1. What are the tags needed for a basic HTML5 web page template?
html, title, head, and body tags.
35. Joe is wondering why his HTML table has no borders around the table cells. He doesn't realize that by default, a table has no borders. Help Joe out by providing the CSS code to create a table border that has the specifications below. You do not need the HTML to code the table; just the CSS to make the border shown below. a. Red b. Dotted c. Is 5 pixels wide
table, th, td { border: 5px dotted red; }
27. What does the HTML <caption> tag do?
the <caption> tag defines a table caption when you have a table.
17. HTML <title> tag: a. Describe the function of the HTML <title> tag b. The <title> </title> tags appear; are nested between what other tags?
the title tag is the name that shows up on your browser tab; it is located between the head tags.