assign 1 Float Tutorial

README.md

@@ -1,32 +1,64 @@
-# Understanding `a` tags in HTML
+# Understanding `float` property in CSS
 
-The `a` tag is a fundamental HTML element responsible for much of the linking goodn ess that makes HTML great!
+The `float` property in CSS lets you wrap text around an image. CSS makes this wonderful thing happen by allowing elements following a floated element in HTML markup to surround the element so it stays where you need it!
+
+Note: you can not center an object using the float element! Float values are: left, right or none.
 
 ## Components
-Let's take a quick look at how the tag works:
+Let's take a quick look at how the float element works:
+
+Begin with a simple HTML, floating some text around an image, add to HTML a header, image, and some text:
+
+<h1> Simple float example </h1>
+
+
+<img src="http://whc.unesco.org/uploads/thumbs/site_1513_0001-750-0-20160616135229.jpg" alt="Khangchendzonga National Park"/>
+
+<p> This is one of many pictures available online of the Khangchendzonga National Park. This picture was found on the unesco website.</p>
+<p> This is the national park we will be using as the subject of our class project. Stay tuned for all the interesting things we will discover as a class while working on this project. </p>
+
+
+As with any element, there's a basic structure of
+ ```
+ img {  
+      float: left;
+  }
+  ```
 
-``` html
-<a href="sourceurl">Displayed Text</a>
+The fantastic, amazing float element instructs the image where to float, either left or right or none. Let's try it out:
+
+Add this CSS to the HTML suggested above:
+
+```
+img {
+
+  float: right;
+  width: 500px;
+}
 ```
 
-As in any tag, there's a basic structure of ```<tag attr="value">content</tag>```. The fantastic, amazing attribute in the `a` tag is `href` -- short for "hypertext reference". The `href` attribute identifies a target URL; when this HTML snippet is displayed in a browser, the browser will direct you to the URL in the href attribute. Let's try it out:
+With the help of the float element the image is no longer confined to a position above or below the text!
+
+Try floating the image to the right then the left. What happens when you float: none? Now adjust the width and play around with the height until you are satisfied with the presentation of the page.
+Start with the following, then get creative!
+
+```
+image {
+  float: left;
+  width: 500px;
+  height: 250px;
+}
 
-``` html
-<a href="https://google.com">Google Owns All Your Data</a>
 ```
 
-<a href="https://google.com">Google Owns All Your Data</a>
+You can use more than one floating element but it is important to understand how multiple floating elements interact if you are to use them properly. Let us imagine there are five images inside a div that is 500px wide, and has 10px of margin (5px on the right and 5px on the left). If you multiply 5 (images) by 50px and then multiply 5 by 10px (margin) and add the two together you will discover a div with the total width of 300px will be adequate to hold your images neatly.
 
-As with most HTML tags, the `a` tag accepts a number of possible attributes. Some of them are used only rarely, but you will often see the `target` attribute in the real world. THis allows you to specify where to open the link you click on:
-- `_self` means "open here"
-- `_blank` means "open in a new tab"
-- `_parent` means "if you're looking at an [internal frame](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe), open this link in the frame's arent tab. Otherwise, just open here like in `_self`
+After you learn all about margins try this advanced challenge: search for 4 images related to Khangchendzonga National Park. Float 2 of those images to the left of the image in the above example and 2 to the right of the example image. You have now created a photo gallery that can be used on a website, congratulations!!!  
 
 ## Try it yourself
 
-You can clone this repository and load a local copy of [the tutorial page](./a-tag-tutorial.html) in your browser to see the tag in action. Then make some changes to the file to learn this yourself!
+You can clone this repository and load a local copy of [the tutorial page](./float-property-tutorial.html) in your browser to see the float element in action. Then make some changes to the file to learn this yourself!
 
 ## Learn More
 
-The [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/HTML/Element/a) has lots more detail about this and every HTML tag!
-
+The [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats) has lots more detail about this float element!