Ok so this was the last class for the term and web design has come to an end. At this point I feel as if I'm comfortable moving forward especially now since I've gotten much better at CSS which I thought was soooooooooo hard lol but now it actually isn't...And I've even learnt a few things from w3schools which I've implemented in my final project for example...border-top-style:dashed;border-right-style:solid;border-bottom-style:dashed;border-left-style:solid;
In addition to that, I have also learnt something really cool and that is text-decoration:blink; with this you don't have to only stick to be boring and use only bold, underline etc. and by using this it makes your page look a little more creative.
I have put alot of effort into my final project and I feel satisfied with my effort and it's really amazing how I actually remember most of the codings like the back of my hand and when I need reinforcing I check my notes or go to w3schools :)
Friday, April 29, 2011
Monday, April 4, 2011
9th Blog Post
On week 9 I learnt a few things. Firstly, if you want to repeat an image on your page all you hav to do is repeat it either on the x or y axis for eg. repeat-x or repeat-y. Next, I learnt that padding affects the whitespace on a pageso you can use this to make the page look more organized and more reader-friendly.
FInally, I learnt that if you wanted to make changes to a specific div id element for eg a specific list items you would write it like this in your CSS: #list ul li a{ }. By doing this only this particular list will be affected by the particular styling and other lists on the page wont be affected.
FInally, I learnt that if you wanted to make changes to a specific div id element for eg a specific list items you would write it like this in your CSS: #list ul li a{ }. By doing this only this particular list will be affected by the particular styling and other lists on the page wont be affected.
8th Blog Post
This week we continued with CSS and we learnt about a few designing issues when doing a webpage.
Firstly,we learnt that some fonts are lost in some background colors so it is wise that you choose a readable font (most sans-serif are good choices for eg Arial, Helvetica, Geneva and Verdana etc). Next, we learnt that not only can you attach pictures to your web page, but you can also edit them for eg. img {margin-right:8px; border-style:solid; border-width:1px; border-color:
#000000;}.
In addition, we learnt that depending on what type ofstyle you want for your layout you can achieve that (as in in terms of column layout). For eg, if you want a 2 column layout or 3 etc all you have to do is float the info you would want to the left for eg: float:left; , and info that you would want to the right for eg:float:right; etc.
Finally, we learnt that menus must be distinct from the main part of the page because most times that's where the viewer looks first.
This can be done by using bold, a different color, or underlined text for links within the body of a page and this will help users scan and register the navigation items more easily.
Firstly,we learnt that some fonts are lost in some background colors so it is wise that you choose a readable font (most sans-serif are good choices for eg Arial, Helvetica, Geneva and Verdana etc). Next, we learnt that not only can you attach pictures to your web page, but you can also edit them for eg. img {margin-right:8px; border-style:solid; border-width:1px; border-color:
#000000;}.
In addition, we learnt that depending on what type ofstyle you want for your layout you can achieve that (as in in terms of column layout). For eg, if you want a 2 column layout or 3 etc all you have to do is float the info you would want to the left for eg: float:left; , and info that you would want to the right for eg:float:right; etc.
Finally, we learnt that menus must be distinct from the main part of the page because most times that's where the viewer looks first.
This can be done by using bold, a different color, or underlined text for links within the body of a page and this will help users scan and register the navigation items more easily.
6th Blog Post
This week we learnt Css. Firstly,we learnt how to write a comment in CSS which is:<!-- comment goes here --> (this doesn't show on the page).
Secondly, we were taught that we use div id elements to divide up a page and this can be advantageous in terms of applying different styling to the different sections of a page for eg colour, text, postion etc. If we wanted to create a div for a paragraph it would be written like this...<div id="paragraph">. So, when styling it in CSS you wouldsimply write...#paragraph (to identify that specific paragraph.
Also, we learnt to apply padding,width, positioning,background-color,border-style etc. to a web page.
Apart from div id's, we learnt about class id's as well. It basically is the same as the div id but it is more specific and in CSS is represented like this: .page.
Secondly, we were taught that we use div id elements to divide up a page and this can be advantageous in terms of applying different styling to the different sections of a page for eg colour, text, postion etc. If we wanted to create a div for a paragraph it would be written like this...<div id="paragraph">. So, when styling it in CSS you wouldsimply write...#paragraph (to identify that specific paragraph.
Also, we learnt to apply padding,width, positioning,background-color,border-style etc. to a web page.
Apart from div id's, we learnt about class id's as well. It basically is the same as the div id but it is more specific and in CSS is represented like this: .page.
Friday, March 11, 2011
7th Blog Post
This week again the lecture was quite short as we have basically completed the course so quick and I guess it's because we're smart lol just joking...but once again we continued working on our own web pages for our final project and we got a few questions to practice for our CSS test on Monday.
6th Blog Post
This week's class was fun. We continued looking at CSS...We basically did a bit of revision here and there and...well lets say the lecture was short and we mainly focused on creating our own webpages for our final project.
Sunday, February 27, 2011
5th Blog Post
This week's class we continued to look at CSS. We learnt a new CSS rule which states that a selector is what is outside of the curly brace and declaration is whatever that is outside of the curly brace. We also learnt how to write a comment in CSS which is for eg /* I am pretty */. Finally, we learnt how to add a background image to a website by background-image: url("Unknown.jpeg"). This of course is an example. Lastly, we learnt how to make changes to the height, width etc. of the background of a website, font, links, the first letter of a paragraph etc.
Saturday, February 19, 2011
4th Blog Post
Ok so this week we had our first test and I got 15/20. I know I did make a few minor errors but mi proud lol. Anyways, this week we went in depth with CSS. We learnt about the block element- this puts information to be in a line and doesn't allow anything else (any other line) to be beside it. It has to come after. Also, we learnt that there are 3 types of DOC TYPE namely: strict, transitional, and frame set.<p> and <h1> are block elements. We also learnt about in-line elements for e.g. strong and emphasis. It allows sentences to be adjacent to other sentences on a page. div (a block element) and span ( a in-line element) are used for organization on a page.
Finally we learnt how to add a header and footer to our page and how to make things on the page float left and right.
<div id= "header"> is used to add a header on the page.
<div id= "footer"> is used to add a footer on the page.
<div id= "left"> is used to float things to the left on the page.
<div id= "right"> is used to float things to the right on the page.
We learnt how to add colour, width, height etc. to our headers, footers. For e.g.
P.S When writing html codes <!doc-type html> should be at the top our page.
Finally we learnt how to add a header and footer to our page and how to make things on the page float left and right.
<div id= "header"> is used to add a header on the page.
<div id= "footer"> is used to add a footer on the page.
<div id= "left"> is used to float things to the left on the page.
<div id= "right"> is used to float things to the right on the page.
We learnt how to add colour, width, height etc. to our headers, footers. For e.g.
#header
{
background-color:red; height:80px;
}
P.S When writing html codes <!doc-type html> should be at the top our page.
Thursday, February 10, 2011
Preparation for test
Ok so I've just started studying for our first test on Monday and I've decided not to go too in depth as yet just waiting for the weekend but I want to pass cause I don't wanna be know as a dunce bat lol!!
3rd Blog Post
As time progresses, our Web Layout & Design class gets even more exciting. As usual we began class with a brief revision of the previous class. We were once again reminded that HTML is about semantics, structure, meaning and not necessarily presentation. In addition, we learnt some new tags. These are <ins> (insert), <li> </li> (list items), <del> (delete). We were also introduced to the Anchor Tag which is <a> </a>. For every Anchor Tag there must be a title attribute as it gives it a description.
By using the Anchor Tag, we learnt how to link our web pages and also, how to create a link to another website foe eg <a href="http://www.youtube.com">. We also, learnt how to create a link to someone's email for eg <a href="mailto:yanikeelloyd@gmail.com.
Next piece of info I learnt was that by using href="..//..//home.html you can navigate from a page back to home. This of course is an example for you could have just put the name the page instead of the dots.
Last but not least, we learnt how to add photos to our web page by way of <img src="(name of the photo).jpg".
Looking forward to next week's class!!
By using the Anchor Tag, we learnt how to link our web pages and also, how to create a link to another website foe eg <a href="http://www.youtube.com">. We also, learnt how to create a link to someone's email for eg <a href="mailto:yanikeelloyd@gmail.com.
Next piece of info I learnt was that by using href="..//..//home.html you can navigate from a page back to home. This of course is an example for you could have just put the name the page instead of the dots.
Last but not least, we learnt how to add photos to our web page by way of <img src="(name of the photo).jpg".
Looking forward to next week's class!!
Sunday, February 6, 2011
2nd Blog Post
The second day of class basically began with a revision of the previous class. We also did in-class activities on writing simple html codes just for practice. Though this can be very tedious at times, it is also fun and can be perfected with lots of practice. In addition, the class learnt that the following html code: <html xmlns="http://www.w3.org/1999/xhtml"> must be placed at the top when writing html codes in order for it to follow the correct procedure. We also discussed in depth some notes on html tags we learnt from the previous class for example title, head etc. and we learnt about other tags such as: <prev> (which eliminates white space and changes the font too), <l-- (which is used when writing a comment), <br/> (which gives a new line. It is called an empty element because it doesn't have any content), </blockquote (which is used when you wish to cite where you got info. from) etc. Whilst we were learning about these tags we also practiced using.
P.S. Codes that are in green are comments, codes that are in red are values, codes that are in blue are html tags, and codes that are in grey are attributes.
P.S. Codes that are in green are comments, codes that are in red are values, codes that are in blue are html tags, and codes that are in grey are attributes.
1st Blog Post
On the very first day of class the class learnt (or rather) was reminded of how to create an add-on (that is firebug) on firefox. Secondly, we were also reminded of the meanings of the abbreviations HTML (Hypertext Markup Language) and CSS (Casading Style Sheet).
I learnt that the basic structure of a html code includes a head, title and a body. It was also very important that we remember that ONCE A TAG IS OPEN IT SHOULD BE CLOSED and also, one has to be very meticulous when writing html codes as the slightest mistake can produce a negative outcome. Finally, we also touched briefly on CSS, more specifically, we learnt how to change the background colour of a webpage and also the colour of the font. Each time we touched on something new in class we practiced it, therefore, there were quite a few in-class activities which helped in understanding the material more clearly.
I learnt that the basic structure of a html code includes a head, title and a body. It was also very important that we remember that ONCE A TAG IS OPEN IT SHOULD BE CLOSED and also, one has to be very meticulous when writing html codes as the slightest mistake can produce a negative outcome. Finally, we also touched briefly on CSS, more specifically, we learnt how to change the background colour of a webpage and also the colour of the font. Each time we touched on something new in class we practiced it, therefore, there were quite a few in-class activities which helped in understanding the material more clearly.
Subscribe to:
Posts (Atom)