User:Garycrobinson/Sandbox/Wiki MTC Homework 4



Wiki Homework and Practice for HTML/CSS lessons (self effort)




HTML/CSS Lesson 1 on Home


HTML is the foundation of the Internet - Wikitext is the primary code used on the Wiki.



HTML/CSS Lesson 2 on Introduction


Only some informational items in this lesson



HTML/CSS Lesson 3 on Headers


Kentucky Genealogy History Vital Records Birth Certificates

NOTE: the coding above was defined as NOWIKI to show the coding without acting on it and messing up the Table of Contents

HTML headers -- able to change text color, background color, etc. Does not provide edit boxes next to the header. Wikitext headers -- allows edit boxes next to the headers. Does not allow changes to the text color, background color, etc.



HTML/CSS Lesson 4 on Lists


 Birth Certificate Land Records Probate Records</li> Census</li> Vital Records</li> </ul>

<ol> World</li> North America</li> United States of America</li> State of Missouri</li> Jackson County</li> </ol>

Wikitext - code is simpler (* for bullet, # for numbers) - not able to change parameters HTML - code is more complex - able to change parameters (bullet point style, size, color, etc.)

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 5 on Nesting Lists
</DIV>

<ul> Fruits</li> <ul> Strawberries</li> Grapes</li> Peaches</li> </ul> Vegetables</li> <ul> Peas</li> Carrots</li> Corn</li> </ul> Nuts</li> <ul> <li>Cashews</li> <li>Peanuts</li> <li>Almonds</li> </ul> <li>Grains</li> <ul> <li>Wheat</li> <li>Rye</li> <li>Barley</li> </ul> </ul>

Only unordered lists can be nested in unordered lists. The same for ordered lists. The list types can not be mixed. Wikitext - simpler to use. Can't change parameters within the coding. HTML - more complex to use. Can make changes to the parameters within the coding

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 6 on Comments
</DIV>

This exercise is exactly the same as the Comments Lesson in the Wikitext. The coding is the same.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 7 on Paragraphs
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 8 on Fonts - Changing
</DIV>

<p style="font-family:Comic Sans MS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-family:Lucida Grande">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-family:Impact">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 9 on Font Size
</DIV>

<p style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-size:28px">LLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 10 on Font Colors
</DIV>

<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="color:green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 11 on Font Bold-Italics
</DIV>

<p style="font-weight:bold">LLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-weight:bold; font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 12 on Padding
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="padding-bottom:25px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 13 on Margins
</DIV>

<p style="background-color:lightgreen; padding:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="background-color:lightblue; padding-left:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="background-color:lightcoral; padding-top:25px; padding-bottom:25px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 14 on Borders
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 15 on width and Height
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 16 on Alignment
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 17 on Tables
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 18 on Tables-Borders
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 19 on Tables-Widths
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 20 on Tables-Captions
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 21 on Tables-Column Labels
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 22 on Tables-Cells
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 23 on Tables-Rows
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 24 on Tables-Placement
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 25 on Tables-Sorting
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 26 on Tables-Scrolling
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 27 on Tables-Column Only
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 28 on Tables-Column Spans
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 29 on Tables-Row Spans
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 30 on Infobox - Creating
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 31 on Infobox - Placing
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 32 on Infobox - IF function
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 33 on Sidebars
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 34 on Navboxes
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 35 on Position - Relative
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 36 on Position - Absolute
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 37 on Miscellaneous
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Display Horizontal
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Horizontal Spacing
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Box Sizes
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Flex Wrapping
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Display Vertical
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Centering Text
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Miscellaneous Horizontal
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Miscellaneous Attributes
</DIV>