Lab #2 Reflection
Brandon Wilson
Lab #2 Reflection
September 26, 2018
In this lab, we duplicated the code from lab #1 but instead we changed the lab number to lab #2, we changed to date to match the date we were working on this, which is 9/26/18 and we changed the "my first HTML document" to a new title which is "A little about ME!!!!". All the headings were kept to display general information. <h1> has the class, <h2> has the lab number, <h3> has the date, <h4> has the lab name and <h5> has my name. We did multiple things in this lab to change ti up. We changed the text in our <p> tag to describe a little about ourselves. Basically a copy and paste of our blog into we made on blogger :) . Lastly we took a quick selfie our ourselves, yes I know I look bad. Here's what we did to get it into our HTML. First we moved the picture of ourselves to our DD and put it in the same folder as our lab #2 html file. Now since our folder has both the picture and the html file we are editing, we can easily call it using the filename as an image source. So we set up an <img> tag since we want to make an image in our html document, then inside of it we add "src=" and inside that we add the exact file name of the image which we named "me.jpg". So in all, it would be <img src="me.jpg">. That is the basic code for an image. The special thing about and image tag is that there is no end tag for it. That means </img> doesn't exist. This is because wherever you place the <img> tag, it created the image in that place, meaning you don't need to state and endpoint. However, that doesn't limit you to customization of it. When I first placed the image it was way too big for the screen. So in order to make it smaller I adjusted the width by adding "width=" inside the <img> tag. You could also edit the height (height=) but that would screw up the aspect ratio that picture tries to maintain. So I would recommend editting only either height or width but never both. In my case, I edited the width to have 20% of its normal width, which made it small enough to fit on the page and not make you have to scroll in order to see it. Oh and one last thing, we added a <center> tag at the beginning of our code and a </center closing tag at the end to align all the text and the image to the center of the page. These skills are important for a web designer because they would need to know how to insert an image in their web page to attract the attention of consumers or other people. Not only does it make it look better, but if you learn how to do this, you increase the amount of things you can do on a web page allowing for more customization and creativity. Also being able to know how to center text can make it a lot more attracting then having it to the left or right, which is dependent on the styling of the web designer and what kind of website they are making. Knowing how to call images using src= can also be tricky at first but once a web designer get a clear understanding of this, they will be able to call images not only in the same folder as their work but also from other folders or locations using a path.
Lab #2 Reflection
September 26, 2018
In this lab, we duplicated the code from lab #1 but instead we changed the lab number to lab #2, we changed to date to match the date we were working on this, which is 9/26/18 and we changed the "my first HTML document" to a new title which is "A little about ME!!!!". All the headings were kept to display general information. <h1> has the class, <h2> has the lab number, <h3> has the date, <h4> has the lab name and <h5> has my name. We did multiple things in this lab to change ti up. We changed the text in our <p> tag to describe a little about ourselves. Basically a copy and paste of our blog into we made on blogger :) . Lastly we took a quick selfie our ourselves, yes I know I look bad. Here's what we did to get it into our HTML. First we moved the picture of ourselves to our DD and put it in the same folder as our lab #2 html file. Now since our folder has both the picture and the html file we are editing, we can easily call it using the filename as an image source. So we set up an <img> tag since we want to make an image in our html document, then inside of it we add "src=" and inside that we add the exact file name of the image which we named "me.jpg". So in all, it would be <img src="me.jpg">. That is the basic code for an image. The special thing about and image tag is that there is no end tag for it. That means </img> doesn't exist. This is because wherever you place the <img> tag, it created the image in that place, meaning you don't need to state and endpoint. However, that doesn't limit you to customization of it. When I first placed the image it was way too big for the screen. So in order to make it smaller I adjusted the width by adding "width=" inside the <img> tag. You could also edit the height (height=) but that would screw up the aspect ratio that picture tries to maintain. So I would recommend editting only either height or width but never both. In my case, I edited the width to have 20% of its normal width, which made it small enough to fit on the page and not make you have to scroll in order to see it. Oh and one last thing, we added a <center> tag at the beginning of our code and a </center closing tag at the end to align all the text and the image to the center of the page. These skills are important for a web designer because they would need to know how to insert an image in their web page to attract the attention of consumers or other people. Not only does it make it look better, but if you learn how to do this, you increase the amount of things you can do on a web page allowing for more customization and creativity. Also being able to know how to center text can make it a lot more attracting then having it to the left or right, which is dependent on the styling of the web designer and what kind of website they are making. Knowing how to call images using src= can also be tricky at first but once a web designer get a clear understanding of this, they will be able to call images not only in the same folder as their work but also from other folders or locations using a path.
Comments
Post a Comment