Skip to content

Changes #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dkobyshc wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Changes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a09e34
Add index.html and styles.css with semantic markup
dkobyshc Apr 16, 2026
c9703a0
Adjust index.html to match assignment tag counts
dkobyshc Apr 16, 2026
de8da90
Center page content: center layout and constrain main
dkobyshc Apr 16, 2026
1363c3e
Update index.html
dkobyshc Apr 17, 2026
6473baa
Update index.html
dkobyshc Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Text Tags</title>
</head>

<body style="margin:0; font-family: Arial, sans-serif; background-color:#f5f5f5;">

<header style="background-color:#d3d3d3; padding:30px; text-align:center;">
<h1 style="border-bottom:3px solid purple; display:inline-block; padding-bottom:5px;">
Basic HTML Text Tags
</h1>
</header>

<main style="max-width:800px; margin:40px auto;">

<section style="text-align:center;">
<h2 style="border-bottom:3px solid orange; display:inline-block;">
Marking up Text in Blocks
</h2>
</section>

<section style="text-align:left;">
<p>
When you have text that is displayed in a block, usually with multiple lines, it's considered a paragraph.
Paragraph text can include words or phrases that are <em>emphasized</em> in some way, and they can contain
links and other markup used for text (but not headings). <em>Paragraphs are block-level elements.</em>
</p>

<p>
It may happen that you have text, like a poem, that requires some special formatting. You'd need to ensure
that each line displayed at a proper length, and you can do that with the line break tags. These
<strong>will not</strong> be used outside of that purpose or for formatting an address in an address tag.
Don't add line breaks to paragraphs, forms, or other page elements. Use CSS for styling.
</p>

<p>
Remember that you can use tags like <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> to convey meaning
in text (these are not just to make text <strong>bold</strong> or <em>italic</em>, they add meaning).
</p>
</section>

<section style="text-align:center;">
<h3 style="border-bottom:3px solid blue; display:inline-block;">
Excerpt from <cite>The Raven</cite> - a Poem by Edgar Allen Poe
</h3>
</section>

<section style="text-align:left;">
<p>
Once upon a midnight dreary, while I pondered, weak and weary,<br>
Over many a quaint and curious volume of forgotten lore—<br>
&nbsp;&nbsp;&nbsp;&nbsp;While I nodded, nearly napping, suddenly there came a tapping,<br>
As of some one gently rapping, rapping at my chamber door.<br>
“'Tis some visitor,” I muttered, “tapping at my chamber door—<br>
&nbsp;&nbsp;&nbsp;&nbsp;Only this and nothing more."
</p>
</section>

<section style="text-align:center;">
<h2 style="border-bottom:3px solid orange; display:inline-block;">
Marking Up Text to Convey Meaning
</h2>
</section>

<section style="text-align:left;">
<p>
Sometimes, you are marking up small pieces of text, including single letters and words, to convey some meaning.
When doing this, you want to use the most appropriate tags you can.
</p>

<p>
For example, if your page offered search results, it's likely that you'd want to highlight the terms the user
searched for in the results you return. If the user searched for "focus area" and the following paragraph was
returned, those words should be highlighted in that paragraph.
</p>

<p>
The primary <mark>focus area</mark> must be chosen from one of the four GIT <mark>focus areas</mark>.
The secondary <mark>focus area</mark> can be any topic that will best aid the student's career path.
</p>

<p>
We used the <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> tags above, but we haven't talked about the
<code>&lt;u&gt;</code> tags. These are not often used, and can confuse the user as they style text with an underline.
A good use for these is to highlight <u>speling</u> errors.
</p>
</section>

</main>

<footer style="background-color:#eaeaea; padding:20px; text-align:center;">
<p>Copyright © 2023</p>
</footer>

</body>
</html>
20 changes: 20 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,20 @@

body{
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center; /* vertical centering */
align-items: center; /* horizontal centering for direct children */
box-sizing: border-box;
padding: 1rem;
}

header, footer{
text-align: center;
padding: 1.5rem;
background-color: var(--lt-gray);
width: 100%; /* keep header/footer full-width while centering their content */
}

h1, h2, h3{
Expand All @@ -42,6 +50,18 @@ h3{
p{
max-width: 65ch;
margin: 1rem auto;
text-align: left; /* keep paragraph text readable */
}

/* make main content constrained and centered */
main{
width: 100%;
max-width: 900px;
}

/* center block-level sections inside main */
main > section{
display: block;
}

code{
Expand Down