start links and images of html section

2023-04-04 03:22:32 -07:00 · 2023-04-04 03:22:32 -07:00 · 4d2367c3cb
commit 4d2367c3cb
parent f8cf891438
8 changed files with 69 additions and 5 deletions
--- a/Markdown/TheOdinProjectNotes.md
+++ b/Markdown/TheOdinProjectNotes.md
@ -54,7 +54,7 @@ cat ~/.ssh/id_ed25519.pub
 git remote set-url origin https://'username':'password'@repositorylink
 ```
 ## Using Git
- Check git version by using ```git --version```
+- Check git version by using `git --version`
 - After creating a new repository you can clone it to your current directory by using ``` git clone <repolink>```
 - After the cloning, check the url with ```git remote -v``` 
 - Use ```git status``` to check the status of the current files within your directory
@ -175,13 +175,77 @@ git remote set-url origin https://'username':'password'@repositorylink
 </html>
 ```
 - **VSCode can generate the entire boilerplate by entering `!` into a blank `.html` document**
-## Working With Text
-### Paragraphs
+### Working With Text
+#### Paragraphs
 - If text is not preceded by a `<p>`, then it will all clump together as one large body of text
 - ![](images/chrome_dnDCL9ylH1.png)
 - ![](images/chrome_r0YaBjn2YV.png)
-### Headings
+#### Headings
 - These use the `<hx>` tag where `x` is the number that changes the font
  - `<h6>` is the smallest font
 - ![](images/chrome_drT4PQKjhb.png)
- 
+#### Strong Element
+- The `<strong>` tag makes text **bold**
+- It also marks text as important semantically 
+  - This affects tools like screen readers for visual impairments
+  - It will change the tone of the voice for the content within the `<strong>` tag
+```HTML
+<strong>Showing bolded wording</strong>
+```
+- ![](images/chrome_qSqVJNFNTe.png)
+#### Em Element
+- The `<em>` tag makes text italic and also emphasises in text to speech
+- ![](images/chrome_qzKKOkOr72.png)
+#### Nesting and Indentation
+- Elements are nested for legibility 
+  - Also known as parent/child/sibling elements
+  - Similar to braces for code
+```HTML
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+ ```
+- ![](images/chrome_AhnmdRAmL7.png)
+#### HTML Comments
+- Comments are not visible when the page is rendered
+  - Useful for reading page format when performing maintenance
+  - Comments are written with `<!--     -->`, where the comment is inside the whitespace
+```HTML
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+- ![](images/chrome_jpELgY8wjN.png)
+### Lists
+- Lists are one of the most commonly usedd elements/data structures because they neatly organize many items
+#### Unordered Lists 
+- The order is random or irrelevant, then using an unordered list is the right choice
+- It's created by using the `<ul>` tag, with each element inside of the list using the `<li>` tag
+```HTML
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+- ![](images/capture1.png)
+#### Ordered Lists
+- Useful when the order of the list matters
+- It's created by using the `<ol>` tag instead with the same `<li>` elements inside of it
+```HTML
+<ol>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ol>
+```
+- ![](images/capture3.png)
+### Links and Images
--- a/Markdown/images/capture1.png
+++ b/Markdown/images/capture1.png
--- a/Markdown/images/capture3.png
+++ b/Markdown/images/capture3.png
--- a/Markdown/images/chrome_3i5DrmVUD3.png
+++ b/Markdown/images/chrome_3i5DrmVUD3.png
--- a/Markdown/images/chrome_AhnmdRAmL7.png
+++ b/Markdown/images/chrome_AhnmdRAmL7.png
--- a/Markdown/images/chrome_jpELgY8wjN.png
+++ b/Markdown/images/chrome_jpELgY8wjN.png
--- a/Markdown/images/chrome_qSqVJNFNTe.png
+++ b/Markdown/images/chrome_qSqVJNFNTe.png
--- a/Markdown/images/chrome_qzKKOkOr72.png
+++ b/Markdown/images/chrome_qzKKOkOr72.png