In the last tutorial I showed you how to get started with HTML, how to add tags and how to see your results in your browser window. The reason we are starting with HTML is because it is very easy to learn, easy to understand and easy to test. I promise you we will get into some really cool stuff soon so stick with me. Today we are going to add an image or two to our page and also move things around on the screen to make them look better. If you took the time to explore the list of HTML tags and add some content of your own then you can start with the page you created in the last tutorial. If you are joining us now you can download this zip file to start where I left off. You may have noticed that in the last tutorial I did not use any images, that was on purpose because you were not adding any images. I wanted you to get used to seeing your page as text and tags. And now we are going to add a new tag to our page, the image tag. This tag does not require a closing tag and it is the first tag that I'm introducing to you that has a required attribute. Attributes are values within the tag that you set to change the behavior of the tag. This one is required which means that if you don't set it your tag will not work properly. The image tag looks like this: Can you see the attribute? It's the ‘src' and it represents the source of the image to be displayed. Images on the web are usually JPG, GIF or PNG files. It's best to stick to JPG files because they are stored compressed, download faster and display faster on the page. But feel free to experiment with all of them. You may try other formats but these are supported in all web browsers where other formats may not be. Before we can add the tag we need to have an image. Any image will do, so find an image and save it to your desktop (or the same place that you stored the page you are working on. An image was included for you if you downloaded the starter project.) Right now my code looks like this:         

Learning to Code!

  

This is the begining point of part two of the learning to code series on OurBigAdventure.com so far we have covered how to use HTML tags to allow our content to be seen in our web browser!

  

By the end of this lesson we will have some images on our page and our display will look much less like a simple outline.

  

Image Tag

  

The image tag is fun! We can add them almost anywhere!

  

Let's add some fake text here so we have more to play with. Portland street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …

  

Hella sartorial pitchfork, pabst typewriter plaid hoodie offal ethical godard before they sold out. Humblebrag stumptown 3 wolf moon four dollar toast fingerstache, gastropub slow-carb street art pitchfork sriracha asymmetrical craft beer mixtape schlitz. …

  

Whatever slow-carb trust fund, mixtape pabst flexitarian bitters ramps gluten-free. Marfa gluten-free selvage mixtape, venmo etsy master cleanse small batch DIY vice. …

  

You probably haven't heard of them ramps gentrify kitsch health goth, drinking vinegar bespoke. Ethical lumbersexual cronut, microdosing twee chartreuse humblebrag mlkshk. …

  

Sriracha you probably haven't heard of them small batch post-ironic etsy. Man bun crucifix fashion axe gluten-free deep v meditation yr. …

  

Salvia pour-over tattooed marfa offal. Pickled 8-bit celiac direct trade kale chips. Lumbersexual thundercats microdosing, keytar 8-bit messenger bag trust fund distillery vice. …

  You can see that I have a few tags mixed in probably like you do. Just pick anywhere within your content (even between other tags) and add your image like this:   

The image tag is fun! We can add them almost anywhere!

     

Let's add some fake text here so we have more to play with. Portland street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …

or this:   

The image tag is fun! We can add them almost anywhere!

  

Let's add some fake text here so we have more to play with.Portland street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …

or even this:   

The image tag is fun! We can add them almost anywhere!

  

Let's add some fake text here so we have more to play with.        Portland street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …

As long as your image tag is between the tags, and the source attribute points to an existing image it will appear on the page. Take some time to play with the image tag to see what it does when you put it in different places in your code. You can also add a few more images if you want to. Don't worry about how the look right now, we will move them around next and set their sizes as well. When you are done playing, you can continue on. So far you have been introduced to HTML tags, and have used your first tag attribute. Next we are going to introduce you to another attribute that will work in every tag along with a new list of things to play with. This attribute is the ‘style' attribute and it will allow you to control how each tag element is displayed within your page! Let's start with the tag and really change the look of our page. Add a ‘style' attribute and set the value of the background to gray like this:   Refresh your page and take a look at your changes! Most of the time you will use the hexadecimal number representation of the color. This is not a scary thing at all, it is 6 characters, the first two represent how much red to use, the middle two represent green, and the last two represent blue. The values go from 00 (no color) to FF (100% color). To set your background with the hexadecimal value for a color you would do it like this:   Luckily you don't have to guess at what the colors will be, you can use a color picker like this one to give you the correct value for the color you want to use. What do we do to set the color of our text? That's easy, we can just set the ‘color' value in the style attribute as well. Try that next:   What else can we do with our styles? How about moving things around the page! Let's start by picking one of our tags with text content like an

or a

tag. The value we want to set varies, we can control the space around our tag, the space within it, where it aligns and many other things. For now, let's control the space around it with the ‘margin' value. There are four values for the margin, the ‘top', ‘right', ‘bottom', and ‘left'. You can set them together or separately. To set all of the margins to the same value you can do something like this:  

Portland street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …

This adds a 20 pixel buffer all around this paragraph. Try this on one of yours to see what it looks like. Then, also add it to your tag to see how that changes things. Fun stuff right! As you can imagine you could spend hours and hours moving things around to get them just right. Once we get a few more lessons under our belts I will show you how you can avoid that and just use your new skills to clean things up. :) Now, if we want to set our margins separately there are two ways to do that. You can set these separately: margin-top: VALUE; margin-right: VALUE; margin-bottom: VALUE; margin-left: VALUE; OR we can set them all on the same line like this: margin: TOP_VALUE RIGHT_VALUE BOTTOM_VALUE LEFT_VALUE; The values are listed clockwise starting at the top which makes it easier to remember the order. :) Oh, and did I mention that you can also set them as percent values? The percent will get a little tricky from time to time because it's not the percent value of the overall page, it's the percent value of the parent container. So if we set a

tag to have a top margin of 10%, that is equal to 10% of the tag. So if our tag has any spacing set it will also adjust the value of that top margin that we set, much like you saw when you added the margin value to your body tag. Basically these styles cascade through the tags from outermost to innermost. (Which is why I had you indent your tags to begin with, it makes it easier to see the parent elements and will be helpful in this lesson.) Ok, take a deep breath. I know it's getting a little scary with sometimes unintended changes on your page but it's not really that bad, it just takes some practice. Now let's clear up the one thing that will confuse you if you have jumped ahead to the ‘padding' setting. Actually, let's just show you what that does so you can understand it really easily! Add a border to any tag on your page. You do that like this: Portland The border for this element is now set to be a 1 pixel thick solid blue line. You can make yours ‘dashed' if you want or even ‘dotted', it's entirely up to you. (I'll tell you where you can find out more about these styles in just a minute) Now that we have a border we can see the difference between ‘margin' and ‘padding'. Now add a padding value to the same element like this: Portland Can you see the change! Now the border has 10 pixels of padding all around the contents of this element, very cool. Ok, change it to say ‘margin' instead of ‘padding'. Portland What happened? The border is still there, everything is in the same place, but this time the 10 pixels is on the outside of the border. And keep in mind that the border is the outside edge of this element so the difference is that a margin is on the outside and padding is on the inside. That can be a tough concept in the beginning, so awesome job for getting that under your belt! It would be too much to walk you through all of the values that you can use for your new page so here is a great link for learning about everything you can set and how each one of them works: http://www.w3schools.com/cssref/ Some of the things you may want to look at for your layout would be the ‘font' options, the ‘float' options, and even the ‘max-height' and ‘max-width' options. Now let's tackle that image we added earlier. How do we set that sucker to a size that we want? Well if your image is REALLY BIG try to save a smaller version first (a size less than 1200 pixels wide or high would be great) then let's add a style attribute to that image and see how it looks:     Great! Our image has changed sizes but it also got weird. :} That's because we are setting the height and width to be a ratio that doesn't match the image. (Unless I guessed correctly on your image which would be really lucky) So let's change our style again and this time let's not be so rigid in our settings:     That's better! When we don't set the height our browser will calculate it for us, and we aren't really setting the width either, we are just setting the max-width so if our layout settings begin to squish our image it will scale and still look ok, but it will never stretch beyond 300 pixels wide. Go play with your new style skills and see what you can create. We will pick up next time explaining links, file paths and how to organize your files to make your web pages easy for you to work with in the future. OH! and before I forget, you will see ‘CSS' a lot as you play with your styles. CSS stand for Cascading Style Sheets. You understand the ‘cascade' part and the ‘style' part as well. We will cover why it is a ‘sheet' in the next lesson when we move all of your styles to their own file! It's going to be awesome. :)