User:Garycrobinson/Sandbox/Wiki MTC Homework 4

From FamilySearch Wiki
Jump to navigation Jump to search

Contents

Wiki Homework and Practice for HTML/CSS lessons (self effort)[edit | edit source]



HTML/CSS Lesson 1 on Home[edit | edit source]


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


HTML/CSS Lesson 2 on Introduction[edit | edit source]


Only some informational items in this lesson


HTML/CSS Lesson 3 on Headers[edit | edit source]


<h1>Kentucky Genealogy</h1>
<h2>History</h2>
<h2>Vital Records</h2>
<h3>Birth Certificates</h3>

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[edit | edit source]


  • Birth Certificate
  • Land Records
  • Probate Records
  • Census
  • Vital Records
  1. World
  2. North America
  3. United States of America
  4. State of Missouri
  5. Jackson County

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


HTML/CSS Lesson 5 on Nesting Lists[edit | edit source]


  • Fruits
    • Strawberries
    • Grapes
    • Peaches
  • Vegetables
    • Peas
    • Carrots
    • Corn
  • Nuts
    • Cashews
    • Peanuts
    • Almonds
  • Grains
    • Wheat
    • Rye
    • Barley

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


HTML/CSS Lesson 6 on Comments[edit | edit source]


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


HTML/CSS Lesson 7 on Paragraphs[edit | edit source]


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.


HTML/CSS Lesson 8 on Fonts - Changing[edit | edit source]


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.


HTML/CSS Lesson 9 on Font Size[edit | edit source]


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.

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.


HTML/CSS Lesson 10 on Font Colors[edit | edit source]


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.


HTML/CSS Lesson 11 on Font Bold-Italics[edit | edit source]


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.

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.


HTML/CSS Lesson 12 on Padding[edit | edit source]


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.


HTML/CSS Lesson 13 on Margins[edit | edit source]


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.


HTML/CSS Lesson 14 on Borders[edit | edit source]


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.


HTML/CSS Lesson 15 on width and Height[edit | edit source]


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.


HTML/CSS Lesson 16 on Alignment[edit | edit source]


I Love Wikitext
I Love Wikitext
I Love Wikitext


HTML/CSS Lesson 17 on Tables[edit | edit source]


Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 18 on Tables-Borders[edit | edit source]


Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 19 on Tables-Widths[edit | edit source]


Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 20 on Tables-Captions[edit | edit source]


Healthy Foods
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 21 on Tables-Column Labels[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 22 on Tables-Cells[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 23 on Tables-Rows[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 24 on Tables-Placement[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat

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.


HTML/CSS Lesson 25 on Tables-Sorting[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat
Apricots Broccoli Cashews Soy Beans


HTML/CSS Lesson 26 on Tables-Scrolling[edit | edit source]


Healthy Foods
Fruits Vegetables Nuts Grains
Apples Carrots Pecans Flax
Bananas Corn Walnuts Rye
Cherries Peas Peanuts Barley
Blueberries Beans Almonds Wheat


HTML/CSS Lesson 27 on Tables-Column Only[edit | edit source]


Adair
Andrew
Atchison
Audrain

Barry
Barton
Bates
Benton

Bollinger
Boone
Buchanan
Butler

Caldwell
Callaway
Camden
Cape Girardeau

Carroll
Carter
Cass
Cedar


HTML/CSS Lesson 28 on Tables-Column Spans[edit | edit source]


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears
Cherries Corn Cashews Barley
Orange Buckwheat


HTML/CSS Lesson 29 on Tables-Row Spans[edit | edit source]


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Walnuts Oats
Cherries Cashews Barley
Orange Beans Almonds


HTML/CSS Lesson 30 on Infobox - Creating[edit | edit source]


organization name
image
President: Name of President
Address: Organization Address
Phone: Phone Number
Hours Open: Hours Open to the Public



HTML/CSS Lesson 31 on Infobox - Placing[edit | edit source]


This same exercise was completed in the Wikitext lessons so it will not be repeated here.


HTML/CSS Lesson 32 on Infobox - IF function[edit | edit source]


organization


NOTE TO SELF --- it is much easier and understandable to do the If Function in HTML than in Wikitext. There is less coding around the If statement.


HTML/CSS Lesson 33 on Sidebars[edit | edit source]


This is the coding for the Sidebar template

News and Events
Insert Info Here
Topics:
Did You Know?'
Insert Items Here



This is the inserted sidebar template and the added parameters

News and Events
All Family History Centers are closed until further notice due to COVID 19
Topics:
Did You Know?
Try This




HTML/CSS Lesson 34 on Navboxes[edit | edit source]


Links Lehi FamilySearch Center - and related information
Main Links Make Reservation · Schedule Tour · Consultant Class · Classes offered · Request Event · Discovery Experience
Services Scanning and Coversions · Consulting · Children's Area


HTML/CSS Lesson 35 on Position - Relative[edit | edit source]


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


HTML/CSS Lesson 36 on Position - Absolute[edit | edit source]






HTML/CSS Lesson 37 on Miscellaneous[edit | edit source]


This lesson has some useful tips and hints to refer back to going forward.


Flexbox Lesson --- Display Horizontal[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Horizontal Spacing[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Box Sizes[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Flex Wrapping[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Display Vertical[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5


Item 1
Item 2
Item 3
Item 4
Item 5


Item 1
Item 2
Item 3
Item 4
Item A
Item B
Item C
Item D
Item E
Item 5


Flexbox Lesson --- Centering Text[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Miscellaneous Horizontal[edit | edit source]


Item 1
Item 2
Item 3
Item 4
Item 5


Item 1
Item 2
Item 3
Item 4
Item 5


Item 1
Item 2
Item 3
Item 4
Item 5


Flexbox Lesson --- Miscellaneous Attributes[edit | edit source]


Peter
James
John