Posts

Lab 7

Image
Lab 7 was the most difficult labs their was to code. This lab involved designing and coding. The main part of the lab was to link our web pages to one where you just click lab1-lab7 without having to go back and forth. We first did this by duplicating our folders of lab1-lab6 and copying them into lab 7. This was because we needed the files to be copied into the lab 7 directory to ensure the links wouldn't change when we create our web page. Once all files are in we have to create a index.html in lab 7 because this was the homepage and how the website would read it as index.html. After this part we had to go back into Photoshop to design our images to click for each lab. After this is created we head back into Dreamweaver to start coding the index all together. We first start by putting our heading banner which we learned in the previous lab. Then we inserted all 6 lab images using the <img> tag. An example was: <img src="Images/lab1.png" alt="Lab1" cla...

Lab 6

Image
    For lab 6 we had to create a banner and a name plate for our website. The way to do this was to go back to what we learned last year in Photoshop CC and open up a new document. This document had to be 700px by 100 px because it was going to be the head of our web page so it shouldn't be too big or too small. After this you would design the banner the way you want it to look. Now once you have a complete banner that you like its time to insert it into Dreamweaver and code it to the top of the page. We used the same code as <img> to insert it to the top by putting it as the first code in the body. After this we had to insert our nameplate at the bottom, so in order to do so you would also have to write it as the last code in the body to ensure its at the bottom. An example of how the code looked is: <img src="images/banner.png" alt="">. This is useful for every web designer because every page needs a banner or someway of identifying the companies p...

Lab 5

Image
This lab also included creating a table but this one was a bigger table with more contents inside of it. This table contained 2 columns with 6 rows. The headings range from favorite foods, favorite movies, 3 favorite subjects, 3 least favorite subjects, 3 favorite genres and a grocery list. Seems easy right? It was but very tedious because each table row contained either a ordered list(<ol>) or an unordered list (<ul>) and each one had a different way of labeling them, ranging from numbers to asterisks to open disc. This lab was not fun because it contained a lot of rewriting the table codes <tr> and <li>  and the hardest part was creating the muliordered list with the asterisks, but by far this was my best looking lab and Im very proud of it because i was able to overcome the difficulties holding me back from completing the lab. To begin you create the table which we learned in the lab before and during this lab we used a lot of CSS styles such as " list-s...

Lab 4

Image
    During lab 4 which was one of the most difficult labs for me out of the 4 because it involved  using tables and I have forgotten most of the tables command but this lab has refreshed my memory. First we started off by creating a new html page. After this i decided to do the same thing as last lab and change the background color and font color using the background-color style and font-color style. To create the table you first start by writing the table tag, <table>. After the table tag its <tr> which is table row. After this its the <tbody> which is the body of the table which includes <th> or <td> and, <th> stands for the table heading while <td> stands for the table data that you input. In this lab we had to create 3 columns with 16 rows of colors name, their hex# and the hue which displayed each color.  The first column and second column were the easiest because it was just inputting the name and the hex number of the ...

Lab 3 Reflection

Image
Good Morning since now its 12:09am and I'm rushing to finish this but anyways lets get into lab 3 which was a leap from lab 1 and 2. This lab included much more elements and took more time to create than the previous labs. Lab 3 involved creating hyperlinks with pictures included.  Like all labs we first begin by creating a new html page. My first step was changing the background color of the web page because white was to simple. In the head I created a <style> tag and selected the body and changed the background-color  to blanchedalmond. This whole code would look like this: <style>  body{background-color:blanchedalmond} </style> This code allowed to change the background of my web page, but we cant just change the background color, we also have to make sure our font color looks good on top of the background. So in the body of the html code I first centered everything using <center>, then I wrote <font color="#B94446"> to change th...

Lab 2 Reflection

Image
Que lo Que, welcome back to our second lab reflection, which was similar to our first lab but some new things were introduced in this lab and so I'm here to explain. Very similar to lab 1 because first we started by duplicating lab 1 to lab 2 because it was the same headings and paragraph tags i told you about. h1-h6 helped create the headings of the page and <p></p> allowed to write the paragraph about myself. To being lab 2 we  created the same headings from lab 1 and wrote a little bio about me using the p tags. Then for this lab we had to include an image of ourselves and in order to do this we had to use the <img> tag. With this tag we were able to add the image but that's not all. We used the <img src=""> tag but also changed the size of the img by doing <img src="ME.jpg" alt="A picture of Jason" width="25%" height="25%"> and this allowed the width and height to change according to the web pag...

Lab 1 Reflection

Image
YERRRR, lets get started with our first lab of this semester. Lab 1 was a fairly easy lab to complete because it involved simple coding using Dreamweaver. Dreamweaver is the application we use to allow us to code. This software has many different features that are very useful to a web designer. It has split code and live screens, which allow you to code but also see what the web page will look like once its uploaded. To begin first we had to create a new file of html in Dreamweaver. This new file will soon be uploaded as lab 1 as a web page. After this you had to create different headings in the body for the name of the class, number of lab, name of lab and your name. This was all created using the h1,h2,h3,h4,h5,h6 tags. The higher the number the smaller the heading would be.  As an example for the heading "Digital Design" we had to code in <h1> Digital Design </h1> and this created our first heading. In coding there will always be an open tag and a closed tag fo...