-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Open Code Chicago
authored
Aug 28, 2024
1 parent
f96ff0d
commit fa6779d
Showing
1 changed file
with
102 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>HTML/CSS Fundamentals</title> | ||
|
|
||
| <!-- This is a link tag for external CSS --> | ||
| <link rel="stylesheet" href="/styles.css" /> | ||
|
|
||
| <!-- This is a style tag for internal CSS, for styling specific elements directly in this file --> | ||
| <style> | ||
| /* CSS for different heading levels */ | ||
| h1 { | ||
| color: red; | ||
| } | ||
|
|
||
| h2 { | ||
| color: blue; | ||
| } | ||
|
|
||
| h3 { | ||
| color: green; | ||
| } | ||
|
|
||
| h4 { | ||
| color: yellow; | ||
| } | ||
|
|
||
| h5 { | ||
| color: orange; | ||
| } | ||
|
|
||
| h6 { | ||
| color: purple; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- This is a comment in HTML --> | ||
|
|
||
| <!-- This is a main heading in HTML --> | ||
| <h1>Heading</h1> | ||
| <!-- Inline CSS example that overrides other styles --> | ||
| <h2 style="color: pink">Heading</h2> | ||
|
|
||
| <!-- Other heading levels --> | ||
| <h3>Heading</h3> | ||
| <h4>Heading</h4> | ||
| <h5>Heading</h5> | ||
| <h6>Heading</h6> | ||
|
|
||
| <!-- Paragraph tag with a class for styling --> | ||
| <p class="paragraph">This is a paragraph.</p> | ||
|
|
||
| <!-- Hyperlink to another website --> | ||
| <a href="https://www.google.com">Google</a> | ||
|
|
||
| <!-- Line break for spacing --> | ||
| <br /> | ||
|
|
||
| <!-- Image tag with a source and attribute alt as alternative text for accessibility --> | ||
| <img | ||
| src="images/image.webp" | ||
| alt="Placeholder" | ||
| /> | ||
|
|
||
| <!-- Line break for spacing --> | ||
| <br /> | ||
|
|
||
| <!-- Button element for user interaction --> | ||
| <button>Click Me</button> | ||
|
|
||
| <!-- Semantic HTML elements for structure and accessibility --> | ||
| <header> | ||
| <!-- Content for the header, typically contains logo, navigation, etc. --> | ||
| </header> | ||
| <nav> | ||
| <!-- Navigation links go here --> | ||
| </nav> | ||
| <main> | ||
| <!-- Main content of the page goes here --> | ||
| </main> | ||
| <section> | ||
| <!-- A section of related content --> | ||
| </section> | ||
| <article> | ||
| <!-- An independent piece of content, such as a blog post --> | ||
| </article> | ||
| <aside> | ||
| <!-- Sidebar content, often used for advertisements or related links --> | ||
| </aside> | ||
| <footer> | ||
| <!-- Footer content, like copyright info and social media links --> | ||
| </footer> | ||
|
|
||
| <!-- Div tag for grouping and styling content, often used as containers --> | ||
| <div id="container"> | ||
| <!-- Content inside the div goes here --> | ||
| </div> | ||
| </body> | ||
| </html> |