<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>My Name in Green</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 1: Name in Green </h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Print your name in green. </p> <!-- defines a paragraph of text -->
<h2> Hello! My name is <strong class="styled-text"> Lea J. Medrano.</strong> <!-- tag to make text bold --> </h2>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1, h2 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 20px;
}
/* Specific styling show the stylesheet is working */
.styled-text {
color: rgb(1, 172, 12);
font-style: italic;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}
<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>Numbers 1 to 10 in different colors</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 2: Numbers 1 to 10 in different colors</h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Print the numbers 1 - 10, each number being a different color. </p> <!-- defines a paragraph of text -->
<h2 class="styled-text">The numbers from 1 to 10 are: <!-- defines a Level 2 Section Heading -->
<ul> <!-- defines an Unordered List -->
<li style="color: red;">1</li>
<li style="color: blue;">2</li>
<li style="color: green;">3</li>
<li style="color: orange;">4</li>
<li style="color: purple;">5</li>
<li style="color: brown;">6</li>
<li style="color: teal;">7</li>
<li style="color: navy;">8</li>
<li style="color: maroon;">9</li>
<li style="color: black;">10</li>
</ul>
</h2>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1, h2 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 20px;
}
/* Specific styling show the stylesheet is working */
.styled-text {
color: navy;
font-style: italic;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}
/* --- ADDITIONS FOR THE NUMBER LIST --- */
/* Style the Unordered List container */
ul {
/* Remove default list bullets, as the numbers themselves are the focus */
list-style-type: none;
/* Remove the default left padding so the list aligns nicely */
padding-left: 0;
/* Center the list items if they are displayed as inline blocks */
text-align: center;
}
/* Style each individual List Item */
li {
/* Display list items side-by-side */
display: inline-block;
/* Add spacing between each number */
margin: 0 15px;
/* Make the numbers larger and bolder */
font-size: 1.5em;
font-weight: bold;
/* The text color is controlled by inline CSS in the HTML (e.g., style="color: red;") */
}
<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>My Name in Tahoma Font</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 3: Name in Tahoma Font </h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Prints your name in a Tahoma font. </p> <!-- defines a paragraph of text -->
<h2> Hello! My name is <strong class="styled-text"> Lea J. Medrano.</strong> <!-- tag to make text bold --> </h2>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1, h2 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 20px;
}
/* Specific styling show the stylesheet is working */
.styled-text {
color: navy;
font-family: Tahoma, sans-serif;
font-style: italic;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}
<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>Paragraph in Different Fonts</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 4: Paragraph in Different Fonts </h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. </p> <!-- defines a paragraph of text -->
<h2 class="styled-text">
<span style="font-family: Arial, sans-serif;">
This is the first sentence of the paragraph, and it's set in the clean, modern <u>Arial</u> typeface.
</span>
<span style="font-family: Georgia, serif;">
The second sentence immediately follows, adopting the classic, book-like appearance of the <u>Georgia</u> font.
</span>
<span style="font-family: Tahoma, sans-serif;">
Next up is the third line, which uses the geometric and humanist characteristics of the <u>Tahoma</u> font family.
</span>
<span style="font-family: 'Times New Roman', serif;">
Finally, the fourth sentence concludes our paragraph, displaying itself in the traditional, highly readable <u>Times New Roman</u> font.
</span>
</h2>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1, h2 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 20px;
}
/* Specific styling show the stylesheet is working */
.styled-text {
color: navy;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}
<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>Book Description</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 5: Book Description </h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded. </p> <!-- defines a paragraph of text -->
<h2 class="styled-text">
Dive into the <i><b>breathtaking</b></i> world of
<u>The Martian</u>, a <i><b>gripping</b></i> science fiction novel by
<u>Andy Weir</u>. The story follows astronaut <u>Mark Watney</u>, who is accidentally
stranded alone on Mars after a <i><b>fierce</b></i> dust storm. Armed only with his
<i><b>clever</b></i> wit and <i><b>stubborn</b></i> refusal to give up, he must find <i><b>ingenious</b></i> ways to
survive an <i><b>inhospitable</b></i> environment for years while NASA races against the clock
to mount an impossible rescue mission. It is a <i><b>thrilling</b></i> and <i><b>scientifically accurate</b></i> tale of human endurance.
</h2>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1, h2 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 20px;
}
/* Specific styling show the stylesheet is working */
.styled-text {
color: navy;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}
<!DOCTYPE html> <!-- declaration that defines this document to be an HTML5 document -->
<html> <!-- root element of an HTML page, all other elements live inside it -->
<head> <!-- contains metadata about the HTML document, such as its title, character set, and links to stylesheets/scripts -->
<meta charset="UTF-8"> <!-- empty element that provides machine-readable information (metadata) about the document, like the character set (`charset="UTF-8"`)-->
<title>My Name in Different Heading Size</title> <!-- sets the title that appears in the browser's title bar or tab-->
<link rel="stylesheet" href="style.css"> <!-- this attribute specifies the location (URL or path) of the external stylesheet file. In this case, the file named style.css is expected to be in the same folder as the HTML file. -->
</head>
<body> <!-- contains all the visible content of the page, such as text, images, links, and headings-->
<div style="text-align: center;"> <!-- to horizontally center content, such as text, images, or other block elements, within its parent container -->
<h1>Exercise 6: Name in Different Heading Size </h1> <!-- defines the most important heading on the page (Heading Level 1)-->
<p> Print your name to the screen with every letter being a different heading size. </p> <!-- defines a paragraph of text -->
<br>
<p><b>Hello! My name is</b></p>
<div class="styled-text">
<h2>L</h2>
<h3>E</h3>
<h4>A</h4>
<br>
<h2>M</h2>
<h3>E</h3>
<h4>D</h4>
<h5>R</h5>
<h5>A</h5>
<h6>N</h6>
<h6>O</h6>
</div>
</div>
</body>
</html>
/*
* style.css
* Styles for the basic HTML exercises.
*/
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color: #e8e8ff;
}
h1 {
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
/* Specific styling show the stylesheet is working */
.styled-text, h2, h3, h4, h5, h6 {
color: navy;
background-color: #e0f7fa; /* Light cyan background */
padding: 10px;
border-radius: 5px;
}