The Image and The Web

This week was a continuation of the last as we learned more about formatting a webpage. This weeks project was recreating the homepage for Youtube, something I though would be extremely difficult, but turned out to be surprisingly manageable.

The main focus of this week was about semantics in HTML. The first article we read, A Look into proper HTML semantics (http://www.hongkiat.com/blog/html-5-semantics/) talks about how important it is to plan out the structure of your website before you start coding it. It also talks about semantics in terms of tags, which are either semantic or non-semantic. According to the article, a semantic tag is something that shows its meaning clearly to both the machine and the person coding. Something like the <img> tag is an example of this because it clearly shows that it is used for images not something like text. Non-semantic, however, does not have actual meaning. Things like <div> and <span> are examples of this, since they inherently don’t have meaning but instead are just used to separate parts of a web page.

Learning about semantic versus non-semantic definitely helped making my mock-up youtube page. It had a combination of both semantic and non-semantic tags. Although divs do not have actual meaning, they are invaluable for creating identifications for specific HTML code to target with css. Although the article seems to be against excessive use of the <div> I can’t deny the value of it in terms of adding CSS into my html.

The next article (http://blog.teamtreehouse.com/use-html5-sectioning-elements) helped to clear up misconceptions I’ve had about html. Before this article, I though that the entire html page had one header, some bodies, and a footer. When I read through this article, I realized that each section has a header, body, and footer. This made formatting infinitely easier for me, since now I could easily visualize each section and what their header, body, and footer would be, instead of trying to poorly format text using <p>. This article overall helped me to better organize the sections of my html code.

Targeting html using css (https://www.impressivewebs.com/targeting-html5-css/) was easily one of my favorite articles of this week. using ids and classes in order to target html made the youtube project less of a nightmare than it could have been. Before this, I could only have one header, footer, and body for each page because I couldn’t target specific sections as closely as I wanted. As a result, I could only use general css and poor formatting on each webpage, making a mess out of everything. After reading this article, now I can have different formatting for different sections of html code with relative ease. This article helped make html coding seem much more flexible, instead of feeling like I’m trying to move unwieldy, giant blocks of code.

This project also reinforced other topics that I’ve learned. In my project, I was trying to tinker with the hover function in the css code in order to highlight different blocks. Although I was successful with that, it was difficult to get an image that was placed using html to change at the same time as the background behind it. I had to search online how to change in image in html, since the css version seemed to only be for background images. I could only manage to get both of them to change if I hovered over the image, but if I was to hover over the background, the image itself would not change.