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;}

Week 3 - Colour , Images and Objects

We learnt how to add images to our html document,how to change the background colour.We learnt how to select a spechic colour for example if you wanted a certain shade blue or pink .When adding colour to your site there are two ways in which one can do this by using the Hex codes this is a six digit code (#222222)or simply by using the colour name for example red,blue,green etc

When designing a web page a colour scheme should be selected as its colour that helps bring life to a site whether It be headings ,background, paragraphs etc colour plays an important role. Anther factor to take into consideration when selecting your colours is that its preferred to use a web safe palette as colour appears different on the web than on print or onscreen.

Adding Images

Images and graphics will really let your site stand out it adds life to it imagery plays an integral role. There are several images formats png,jpeg and gif just to date a few.

To add an image to a web page img element (in angle brackets) it must contain a src attribute and the fileformatt (which ever format png,jpec etc) you can also adjust the image size by altering the height and the width.


We also learnt how to give an image description that is when the cursor hovers over the image the name would appear.

Object element is be used to embed all media types into documents, not just graphics, but also MP3 files, flash, quicktime, movies,videos etc tke in consideration , with formats that require a browser plug-in, you have to specify the program you expect to run files

Week 2 Structure of a Page

In this class we went more in depth on the structure of a page.


We looked at the four(4) main elements that forms the basic structure for every document:
1)html, 2)head>,3)title, 4)body.The elements listed should appear in every XHTML document.


I)html is the parent (most importanat) and its kids are the head and the body

II) Head element should include the title element , it may also include the link to the stylessheet.

III)The title element as the name suggestss the title for each page.Each page should be given a title and the tittle should give you an idea of the content that will appear on that page> In essence the title page describes the content for each page on your site eg. About Us page, Contact Us page etc. The title element should contain only the text for the title; it should not have any other elements.

IV) The body element comes directly after the head element what is written in the body is what will appear on the page.Included in the body are paragraphs,headings, tables, forms etc


Presentational Elements

You can change how text appears on your site by adding a presentational element in the html.


some of presentational elements includes:

Bold,Italics,Underline,Strike just to list a few.


You can also create lists in html.There are three (3) types of list which are used in html . i) Unordered Lists- looks likes bullet points II)Ordered Lists- this appears in a sequence whether letters or numbers and III) Definition Lists - this allows you to specify a term and its definition