Week 10

Week 9

Most of us started to work on our finals and we try to incorporate all tat we have learnt. Sir was always present to help us with or problems and he gave us a few pointers and hints> He showed us how to style paragraphs. Example:


p:nth-of-type(1){
border:2px red solid;
-moz-border-radius:15px;}

p:nth-of-type(2){
border:2px red solid;
-moz-border-radius:15px;
-moz-box-shadow:10px 10px 15px blue;}


p:nth-of-type(3){
border:2px red solid;
-moz-border-radius:15px;
text-shadow:3px 3px 5px purple;}

p:nth-of-type(4){
border:2px red solid;
-moz-border-radius:15px;
opacity:.5;background-color:green;}


I'm glad we learnt how to make borders and we learnt how to make the edged rounded.We also learnt hoy to aply shadow around a box and around text this was very useful as I used it when building my webpage.

Week 8

Well I am becoming better on creating web pages and using c.s.s I now know when to use padding, position relative, margin etc. I
am able to write html codes of the top of my head almost as if i am a professional I am thrilled i am glad that i am becoming more versed in html writing and styling with c.s.s at first it was challenging and frustrating but I am comfortable with it now. We began doing mostly practical, more practicing writing more html documents .

Week 7 - Design Issues

We didn't do much mostly practical we started to build our on pages but we learnt some design issues that would affect particular parts of our pages i.e text, tables forms etc How elements and text are align affects how it appears that is if its crowded or spaced nicely. We also learnt to b careful when selecting fonts for a background image as the font and its size is important. Font chosen should be easy on the eyes.

We also learnt about div and spans these are elements you cant see on the page but it used to organize the page ( placement and positioning how the designer wants the site to look.)

Week 6- Page Structure

Deign issues when creating web page layouts several things must be taken into consideration this is what will determine its appearance. Placement of tables,objects, images , colour chosen these help to create the appearance of the site how you use theses elements is dependent on the type of website you are creating whether it be for entertainment, fashion , corporate etc the type of site you are doing will determine what you use and how you use them. Other things taken into consideration when design your web page is your audience what they would like to see on the web page and what they expect to be present on the site.


You should create the list of the key elements of each page before you even start think of placement and positioning of them. These elements would include the logo, log in box,search box, headings and categories navigation ( name of pages) these are some of the elements that you should have an idea of where you want them to appear.Another major issue is the page size this is very important as the you should know your page size. Remember when the site is active each visitor has different size monitors, so when designing it may look great, perfect on your screen and may appear unorganized on another so do not s=design for your screen. Remember each computer screen have different screen resolutions, different size monitors so it best to use preferred page sizes to fit different screens and their resolutions. The page height and width should be taken into consideration as well.



The layout of your pages is largely dependent on your style sheet and how you position your elements this also depends on what you use whether it be divs, tables or boxes or if its column ( one column, two column , three column)

Week 5- C.S.S ( Cont'd)

We did more styling techniques.


Links

You can control the presentation of links using keywords. These keywords style your links as directed. You can style your links by using a hover this style changes the color when the cursor "hovers" over the links, you can also style the visited link this styling allows you to know when you have visited a page and active used to style the links for the page or link that is currently active. You can change the colour of the links.This is used to differentiate links that is page that is active, page that was visited and pages you haven't viewed as yet.( it allows a user to know the pages they have visited and pages they are yet to visit).

You are also able to add text decoration this control the links, links are underlined.
Using the text-decoration property you can specify that your links should not be
underlined unless the user hovers over or selects one. Using background colour highlights the link, this is mostly used for hover that is the colour around the text changes colour.

Backgrounds

When using backgrounds six (6) properties are used to instruct the background how to appear: They are:

- background-image : This sets an image to be the background of a page.
- background-color : Specifies a color that should be used for the
background of the page

- background-position: This is used to position the image on the page ( top ,bottom, left,right etc)
- background-repeat:Indicates whether the background image should be
repeated across the page or box ( that is the y-axis or x-axis or if you prefer the image not repeat( no repeat).
- background-attachment: Indicates a background image should be fixed in
one position on the page, and whether it should stay in that position when the user scrolls down the
page or not

Positioning

The position property includes static this is the same as normal flow,relative the position of the box can be offset from where it would be in normal flow ( usually used along with padding, top, right, bottom etc) in order to position the div,object, video etc,absolute the box is positioned exactly from the position in the containing element using x and y coordinates from the top-left corner of the containing element.When positioning it depends on where you want your div,object, image etc to fall that determines which property you would use to style.

Week 4- Cascading Style Sheet (C.S.S)

We went more in depth with styling but we learnt how to style the html by using cascading style sheets( c.s.s) you can change where things appear on the page by positioning it,add background images and change colour of the fonts etc. In other words you can control the appearance of every element on the page.The first thing to bare in mind is to include the link tour c.s.s in the html.about this example is the presence of


In c.s.s the selector indicates which of the elements the rule applies to and the rule changes the properties of those elements. C.S.S has the ability to style several elements at once each rule is separated by a semi-colon and is in a curly bracket.Note just as you are able to style multiple elements at once a style sheet can server multiple html documents having this saves time.

Some c.s.s. properties include:font-size,font-color,padding-top,padding-left etc.The color property allows you to select the color of the text.For example, the following rule would make the content of paragraph elements violet:
p {color:#8D38C9;}