Lab #3 Reflection
Brandon Wilson
Lab #3 Reflection
September 27, 2018
In this lab, we were to do many things. I can assume you've noticed the two screenshots of my work space? One was for the code and the other was the display for it. This lab required us to make 3 text hyperlinks and 3 image hyperlinks that go to specific websites. These websites include, my blog on blogger, Mrs. Ramirez's website and w3schools. Specifically, we needed a gif for the blogger image, a png for the Mrs.Ramirez's website and a jpg for the w3schools website. A basic thing we had to do at the start was change the background color. Very simple, easy work is easy work. All I did was go into the heading and make a <style> tag and a closing </style> tag. Basically I'm throwing in some CSS into this, but it was what I learned from the long summer khan academy homework we were assigned. Anyways back to the task, I included the body as what I wanted to edit under the style tag, open brackets and used the option "background-color:" to change the background color. This literally took like 10 seconds.
So now lets get to the complicated stuff (not really, I enjoy doing this). First and foremost, I started the heading like in previous labs with a little different text though. In heading 1 (<h1>) I put my full name, heading 2 (<h2>) had the lab's name and number, heading 3 (<h3>) had the date and heading 4 (<h4>) had the class. My first objective was to first get the images so I had them. I just went on google to find a gif for blogger, same for a jpg of w3schools and lastly I went on Mrs. Ramirez website to get a png from there. Once I had all of these images, I put them in a folder called "img" which was in the same folder as this lab. In order to make a hyper link, you must know the basic <a> tag, or anchor tag. This is a tag that can turn images and text into a hyperlink, so if you were to click on it, it will take you to that website. The way it works is this, you make an <a> tag and you must have a closing </a> tag after whatever you want to make a hyperlink. As you may have noticed in the code, I used "href=" inside of my anchor tag. Basically that is where you are suppose to put the link you want to user to go to when they click on that hyperlink. For example, I linked Mrs. Ramirez web site in a hyperlink by doing this, <a href="http://techteach.us/index.html">. Whatever lies inside of this anchor tag will be a hyper link, this can be tested by clicking on the image or text that lies inside of it. So basically I did this for all 3 of the websites, but now how did I call the images from another folder? Well, instead of using the actual name of the file like "blog.gif" I made a pathway from the "img" folder to the image or gif I was linking to. For example, to get to the blog.gif file that I wanted to display, I used <img src="img/blog.gif". Since the image folder is in the same folder as the lab itself, we can create a path from that img folder straight to the file we want to display. These skills are important for a web designer because they would need to know how to make hyper links to transfer people from their website to other sources and websites for references, etc. Also knowing how to make a path would allow web designers to stay organized and know where everything is because you made separate folders for specific things and so on.
Lab #3 Reflection
September 27, 2018
In this lab, we were to do many things. I can assume you've noticed the two screenshots of my work space? One was for the code and the other was the display for it. This lab required us to make 3 text hyperlinks and 3 image hyperlinks that go to specific websites. These websites include, my blog on blogger, Mrs. Ramirez's website and w3schools. Specifically, we needed a gif for the blogger image, a png for the Mrs.Ramirez's website and a jpg for the w3schools website. A basic thing we had to do at the start was change the background color. Very simple, easy work is easy work. All I did was go into the heading and make a <style> tag and a closing </style> tag. Basically I'm throwing in some CSS into this, but it was what I learned from the long summer khan academy homework we were assigned. Anyways back to the task, I included the body as what I wanted to edit under the style tag, open brackets and used the option "background-color:" to change the background color. This literally took like 10 seconds.
So now lets get to the complicated stuff (not really, I enjoy doing this). First and foremost, I started the heading like in previous labs with a little different text though. In heading 1 (<h1>) I put my full name, heading 2 (<h2>) had the lab's name and number, heading 3 (<h3>) had the date and heading 4 (<h4>) had the class. My first objective was to first get the images so I had them. I just went on google to find a gif for blogger, same for a jpg of w3schools and lastly I went on Mrs. Ramirez website to get a png from there. Once I had all of these images, I put them in a folder called "img" which was in the same folder as this lab. In order to make a hyper link, you must know the basic <a> tag, or anchor tag. This is a tag that can turn images and text into a hyperlink, so if you were to click on it, it will take you to that website. The way it works is this, you make an <a> tag and you must have a closing </a> tag after whatever you want to make a hyperlink. As you may have noticed in the code, I used "href=" inside of my anchor tag. Basically that is where you are suppose to put the link you want to user to go to when they click on that hyperlink. For example, I linked Mrs. Ramirez web site in a hyperlink by doing this, <a href="http://techteach.us/index.html">. Whatever lies inside of this anchor tag will be a hyper link, this can be tested by clicking on the image or text that lies inside of it. So basically I did this for all 3 of the websites, but now how did I call the images from another folder? Well, instead of using the actual name of the file like "blog.gif" I made a pathway from the "img" folder to the image or gif I was linking to. For example, to get to the blog.gif file that I wanted to display, I used <img src="img/blog.gif". Since the image folder is in the same folder as the lab itself, we can create a path from that img folder straight to the file we want to display. These skills are important for a web designer because they would need to know how to make hyper links to transfer people from their website to other sources and websites for references, etc. Also knowing how to make a path would allow web designers to stay organized and know where everything is because you made separate folders for specific things and so on.
Comments
Post a Comment