From 5a09e3429245882a9acd6c422631eeb6f6a1678b Mon Sep 17 00:00:00 2001 From: dkobyshc Date: Thu, 16 Apr 2026 16:04:57 -0700 Subject: [PATCH 1/5] Add index.html and styles.css with semantic markup --- index.html | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 42 ++++++++++++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..3baa0b3 --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + Basic HTML Text Tags + + + + +
+

Basic HTML Text Tags

+

Beginning practice with the basic text formatting tags used in HTML5.

+
+ +
+ +
+

Marking up Text in Blocks

+ +

+ 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 emphasized in some way, and they can contain + links and other markup used for text (but not headings). Paragraphs are block-level elements. +

+ +

+ 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 + will not 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. +

+ +

+ Remember that you can use tags like <strong> and <em> to convey meaning + in text (these are not just to make text bold or italic, they add meaning). +

+ +
+

Excerpt from The Raven - a Poem by Edgar Allen Poe

+ +

+ Once upon a midnight dreary, while I pondered, weak and weary,
+ Over many a quaint and curious volume of forgotten lore—
+     While I nodded, nearly napping, suddenly there came a tapping,
+ As of some one gently rapping, rapping at my chamber door.
+ “'Tis some visitor,” I muttered, “tapping at my chamber door—
+     Only this and nothing more." +

+
+
+ +
+

Marking Up Text to Convey Meaning

+ +

+ 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. +

+ +

+ 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. +

+ +

+ The primary focus area must be chosen from one of the four GIT focus areas + (Front-end Web Design and Development; Commercial Photography and Video; Digital Design; Print; and Publishing; + 2D/3D Animation). The secondary focus area can be any topic that will best aid the student's career path. +

+ +

+ We used the <b> and <i> tags above, but we haven't talked about the + <u> tags. These are not often used, and can confuse the user as they style text with an underline, + the same way that links do by default. A good use for these is to highlight speling errors. +

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 446f3f4..46c70e0 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,45 @@ +/* Center page content vertically and horizontally */ +html, body { + height: 100%; + margin: 0; +} +body { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; + line-height: 1.4; + padding: 1rem; + box-sizing: border-box; +} + +/* Make the main content slightly constrained and centered */ +main { + max-width: 800px; + width: 100%; +} + +/* Title underline using a pseudo-element */ +header h1 { + text-align: center; + margin: 0 0 0.5rem 0; + font-size: 1.6rem; +} + +header h1::after { + content: ""; + display: block; + width: 50%; + height: 3px; + background: #000; + margin: 0.5rem auto 0; +} + +/* Small adjustments for footer */ +footer { + margin-top: 1rem; +} :root{ --dk-gray: #222; --lt-gray: #eaeaea; From c9703a0469efb160f4ae3c22f7d04698e973bfa9 Mon Sep 17 00:00:00 2001 From: dkobyshc Date: Thu, 16 Apr 2026 16:07:40 -0700 Subject: [PATCH 2/5] Adjust index.html to match assignment tag counts --- index.html | 145 +++++++++++++++++++++++------------------------------ 1 file changed, 63 insertions(+), 82 deletions(-) diff --git a/index.html b/index.html index 3baa0b3..30dd785 100644 --- a/index.html +++ b/index.html @@ -2,85 +2,66 @@ Basic HTML Text Tags - - - - -
-

Basic HTML Text Tags

-

Beginning practice with the basic text formatting tags used in HTML5.

-
- -
- -
-

Marking up Text in Blocks

- -

- 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 emphasized in some way, and they can contain - links and other markup used for text (but not headings). Paragraphs are block-level elements. -

- -

- 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 - will not 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. -

- -

- Remember that you can use tags like <strong> and <em> to convey meaning - in text (these are not just to make text bold or italic, they add meaning). -

- -
-

Excerpt from The Raven - a Poem by Edgar Allen Poe

- -

- Once upon a midnight dreary, while I pondered, weak and weary,
- Over many a quaint and curious volume of forgotten lore—
-     While I nodded, nearly napping, suddenly there came a tapping,
- As of some one gently rapping, rapping at my chamber door.
- “'Tis some visitor,” I muttered, “tapping at my chamber door—
-     Only this and nothing more." -

-
-
- -
-

Marking Up Text to Convey Meaning

- -

- 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. -

- -

- 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. -

- -

- The primary focus area must be chosen from one of the four GIT focus areas - (Front-end Web Design and Development; Commercial Photography and Video; Digital Design; Print; and Publishing; - 2D/3D Animation). The secondary focus area can be any topic that will best aid the student's career path. -

- -

- We used the <b> and <i> tags above, but we haven't talked about the - <u> tags. These are not often used, and can confuse the user as they style text with an underline, - the same way that links do by default. A good use for these is to highlight speling errors. -

- -
- -
- -
-

Copyright © 2023

-
- - - \ No newline at end of file + + + + + + Basic HTML Text Tags + + + + + + +
+

Basic HTML Text Tags

+
+ +
+ +
+

Marking up Text in Blocks

+ +

Beginning practice with the basic text formatting tags used in HTML5.

+ +

Comments are used to add additional information to pages that helps developers working on that code. You can also use a comment to hide content from your page.

+ +

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 emphasized in some way.

+ +

It may happen that you have text, like a poem, that requires some special formatting. You can do that with the line break tag <br>. Do not use <br> for layout—use CSS instead.

+ +

Remember that you can use tags like <strong> and <em> to convey meaning in text; these are not just to make text bold or italic, they add meaning.

+
+ +
+

Excerpt from The Raven - a Poem by Edgar Allen Poe

+ +

+ Once upon a midnight dreary, while I pondered, weak and weary,
+ Over many a quaint and curious volume of forgotten lore—
+     While I nodded, nearly napping, suddenly there came a tapping,
+ As of some one gently rapping, rapping at my chamber door.
+ “'Tis some visitor,” I muttered, “tapping at my chamber door—”
+     Only this and nothing more. +

+
+ +
+

Marking Up Text to Convey Meaning

+ +

Sometimes, you are marking up small pieces of text, including single letters and words, to convey some meaning.

+ +

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, those words should be highlighted in that paragraph.

+ +

The primary focus area must be chosen from one of the four GIT focus areas (Front-end Web Design and Development; Commercial Photography and Video; Digital Design; Print; and Publishing; 2D/3D Animation). We used the <b> and <i> tags above, but we haven't talked about the <u> tag. 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 speling errors. For example, bold text and italic text.

+
+ +
+ +
+

Copyright © 2023

+
+ + + \ No newline at end of file From de8da905c55c39f01ee6b4c1fcfce0434f1f64a7 Mon Sep 17 00:00:00 2001 From: dkobyshc Date: Thu, 16 Apr 2026 16:42:35 -0700 Subject: [PATCH 3/5] Center page content: center layout and constrain main --- styles.css | 62 ++++++++++++++++++------------------------------------ 1 file changed, 20 insertions(+), 42 deletions(-) diff --git a/styles.css b/styles.css index 46c70e0..fdcc0c4 100644 --- a/styles.css +++ b/styles.css @@ -1,45 +1,3 @@ -/* Center page content vertically and horizontally */ -html, body { - height: 100%; - margin: 0; -} -body { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - font-family: Arial, Helvetica, sans-serif; - line-height: 1.4; - padding: 1rem; - box-sizing: border-box; -} - -/* Make the main content slightly constrained and centered */ -main { - max-width: 800px; - width: 100%; -} - -/* Title underline using a pseudo-element */ -header h1 { - text-align: center; - margin: 0 0 0.5rem 0; - font-size: 1.6rem; -} - -header h1::after { - content: ""; - display: block; - width: 50%; - height: 3px; - background: #000; - margin: 0.5rem auto 0; -} - -/* Small adjustments for footer */ -footer { - margin-top: 1rem; -} :root{ --dk-gray: #222; --lt-gray: #eaeaea; @@ -57,12 +15,20 @@ footer { 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{ @@ -84,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{ From 1363c3ef0e9df3d823fcac84d7d029502fd0db53 Mon Sep 17 00:00:00 2001 From: dkobyshc Date: Thu, 16 Apr 2026 19:58:41 -0700 Subject: [PATCH 4/5] Update index.html --- index.html | 67 ------------------------------------------------------ 1 file changed, 67 deletions(-) diff --git a/index.html b/index.html index 30dd785..e69de29 100644 --- a/index.html +++ b/index.html @@ -1,67 +0,0 @@ - - - - Basic HTML Text Tags - - - - - - Basic HTML Text Tags - - - - - - -
-

Basic HTML Text Tags

-
- -
- -
-

Marking up Text in Blocks

- -

Beginning practice with the basic text formatting tags used in HTML5.

- -

Comments are used to add additional information to pages that helps developers working on that code. You can also use a comment to hide content from your page.

- -

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 emphasized in some way.

- -

It may happen that you have text, like a poem, that requires some special formatting. You can do that with the line break tag <br>. Do not use <br> for layout—use CSS instead.

- -

Remember that you can use tags like <strong> and <em> to convey meaning in text; these are not just to make text bold or italic, they add meaning.

-
- -
-

Excerpt from The Raven - a Poem by Edgar Allen Poe

- -

- Once upon a midnight dreary, while I pondered, weak and weary,
- Over many a quaint and curious volume of forgotten lore—
-     While I nodded, nearly napping, suddenly there came a tapping,
- As of some one gently rapping, rapping at my chamber door.
- “'Tis some visitor,” I muttered, “tapping at my chamber door—”
-     Only this and nothing more. -

-
- -
-

Marking Up Text to Convey Meaning

- -

Sometimes, you are marking up small pieces of text, including single letters and words, to convey some meaning.

- -

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, those words should be highlighted in that paragraph.

- -

The primary focus area must be chosen from one of the four GIT focus areas (Front-end Web Design and Development; Commercial Photography and Video; Digital Design; Print; and Publishing; 2D/3D Animation). We used the <b> and <i> tags above, but we haven't talked about the <u> tag. 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 speling errors. For example, bold text and italic text.

-
- -
- -
-

Copyright © 2023

-
- - - \ No newline at end of file From 6473baac03c483cc48f726e54f2b9fe7521d2ac9 Mon Sep 17 00:00:00 2001 From: dkobyshc Date: Sun, 19 Apr 2026 17:22:19 -0700 Subject: [PATCH 5/5] Update index.html --- index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) diff --git a/index.html b/index.html index e69de29..857c752 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,97 @@ + + + + Basic HTML Text Tags + + + + +
+

+ Basic HTML Text Tags +

+
+ +
+ +
+

+ Marking up Text in Blocks +

+
+ +
+

+ 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 emphasized in some way, and they can contain + links and other markup used for text (but not headings). Paragraphs are block-level elements. +

+ +

+ 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 + will not 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. +

+ +

+ Remember that you can use tags like <strong> and <em> to convey meaning + in text (these are not just to make text bold or italic, they add meaning). +

+
+ +
+

+ Excerpt from The Raven - a Poem by Edgar Allen Poe +

+
+ +
+

+ Once upon a midnight dreary, while I pondered, weak and weary,
+ Over many a quaint and curious volume of forgotten lore—
+     While I nodded, nearly napping, suddenly there came a tapping,
+ As of some one gently rapping, rapping at my chamber door.
+ “'Tis some visitor,” I muttered, “tapping at my chamber door—
+     Only this and nothing more." +

+
+ +
+

+ Marking Up Text to Convey Meaning +

+
+ +
+

+ 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. +

+ +

+ 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. +

+ +

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

+ +

+ We used the <b> and <i> tags above, but we haven't talked about the + <u> 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 speling errors. +

+
+ +
+ + + + + \ No newline at end of file