Sunday, October 14, 2018

Project 1 Favorite Movies Reflection Journal

In this project, I created a website that links to 3 other websites of my own about my favorite movies. First off, I opened up Dreamweaver and later at home Atom.io by clicking on the icon. I clicked New to create a new document. Secondly, I typed in the basic html code for my document. I typed the !doctype html tag, html tags, head tags, and body tags. Thirdly I typed inside the head tags meta charset="UTF-8", the title inside title tags which was Index.html, and style tags which I put styles for the div tags. The styles were background-color: lightgrey; width: 1000px; border: 25px solid blue; padding: 30px; margin: 25px; and color:black;. The other styles were ul {text-align: center;}, li span { position: center; }, and a {color:orange; background-color:Black;. The first 2 are to center the content of the table and the last one is to make the hyperlinks orange and readable. Fourthly, I placed a background I edited in photoshop by doing background=Fishedit.jpg inside the first body tag. I put center tags right after the first body tag and right before the last body tag. Next I put font tags after the first center tag and before the last center tag with color="orange" to make the text orange. After that, I wrote h2 tags after the first font tag. I wrote inside the h2 tags my name, date, Project 1 Favorite Movies, and Digital Design. Afterwords I wrote in the table. I put table tags, tbody tags, tr tags, th tags, td tags, and li tags. Inside the th tags I put a href with the selected movie with ending a tags 3 times for my 3 movies. Inside the td tags, I typed in the ul tags. I typed in the ul style as none for the list styles to have no bulleted points. I put inside the list tags a href with the selected movie and ending a tags. Inside the a tags I placed the image of the selected movie by img src. I placed in the alternative text and size of the image too. I did this 3 times. The favorite movies were The Peanuts Movie, The Avengers, and Hairspray. After the table, I typed in the div tags and inside wrote a brief description of the project and a br tag. Afterwords I wrote in form tags which I placed in a button for copyright. Inside the form tag I typed input value="Copyright", onclick="window.location.href='Copyright.html'", and type="button". I typed a br tag to put a space in between the content. I placed another  a tags with an id to go back to the top. I saved my work so far. Now for the next web page I created a new file. I typed in the basic html code for my document again just like last time. I typed in style tags that had the same code as the previous page. I inserted fishedit.jpg inside the body tag as the background. I typed in center tags outside the body tags and font tags inside the body tags. I wrote in color="orange" for the first font tag to make the text orange. I typed in a tags after. Inside the a tags I wrote href="https://www.foxmovies.com/movies/the-peanuts-movie", h2 id="Top" with The Peanuts Movie, and img src="the-peanuts-movie-movie-cover.jpg" alt="The Peanuts Movie" width="20%". After that I typed in a br tag 4 times separating the a href tag and a tag with the link inside and text 3 times to link to review scores. Afterwords, I typed in the the div tags and wrote inside a description of the movie and web page. Then I placed buttons after the div tags by inserting form tags with button as type, the web page it goes to as value and text, and onclick the file of the web page. I inserted an internal link by doing <a href="#Top">Back to the Top</a> to go back to the top. This specific web page I am talking about was about The Peanuts Movie. Although, the next 2 web pages were about The Avengers and Hairspray, which had and I typed in the exact same code as The Peanuts Movie except the movie is changed in place of it. After I was finished with the 3 web pages, I went onto do the copyright page. I created a new file and typed in the basic html code like before with the other web pages. I typed in Copyright as the title in the title tags and h2 tags. Inside the style tags I typed in body {background-color: cyan;}, .footer{ position: fixed; text-align: center; bottom: 0px; width: 99%; background-color: yellow;}, and a {color:white; background-color:Black;}. Inside the body tags I typed up br tags, a tags, and p tags to hyperlink the sites to my web pages, the respective sources, and copyright owner. After that I placed in <div class="footer">All rights reserved to their respective copyright owners. Any and all images used are the owner/publisher's only. Fair use laws apply since October 10, 2018.</div> to put a copyright text for the viewer. Finally, I saved all web pages and uploaded the to the servers so everyone could see. Knowing how to make web pages is important to a web designer because it enables them to do their intended job and that is to make websites.

Website:http://techteach.us/Web2020/ZWeiJian/Projects/P1/Index.html

No comments:

Post a Comment