Week ocho!! By this time we were moving closer and closer to our mid –semesters ad finals!! Week 8 is somewhat of a continuation from week seven as tables were touched on in this lecture.
In order to work with tables, you need to start thinking in grids. Tables, just like spreadsheets, are made up of rows and columns. A table can be created in the XHTML/HTML by using the table element. Inside the table element the table is written out row by row. A row is contained inside a tr element which stands for table row. And each cell is then written inside the row element using a td element which stands for table data. After getting an idea as to how to create and insert a table in the HTML, we then went on to the table elements and attributes. The table element is the containing element for all tables. It can carry the following attributes:
1.All of the universal attributes
2. Basic event attributes for scripting.
The Align Attribute - Although it is deprecated, the align attribute is still frequently used with tables. When used with the table element, it indicates whether the table should be aligned to the left (the default), right, or center of the page.
The bgcolor Attribute- The bgcolor attributes sets the background color for the table. The value of this attribute should be either a hex code or color name, as we learnt in week 5.
The Border Attribute -If you use the border attribute, a border will be created around both the table and each individual cell. The value for this attribute is the width you want the outside border of the table to be in pixels. If you give this attribute a value of 0, or if you do not use this attribute, then you should not get any borders.
The Cellpadding Attribute-The cellpadding attribute is used to create a gap between the edges of a cell and its contents. The value for this attribute can either be the amount of space or padding you want inside each wall of the cell in pixels or a percentage value as a percentage of the width of the table.
Week 8 went on to speak about other attributes such as dir, width, cellspacing, frame, rules, summary, char, charoff, valign attributes etc…most if not all of these attributes are deprecated.
Monday, May 9, 2011
Week 7 Design Issues
Week 7!! At this point I was excited about this course, learning new tricks and appreciating the importance of youtube tutorials and PRACTICE!! Week 7 looks at design issues that affect specific parts of pages such as text, menus, tables, and forms. In week 7 I learnt how to make my page look even more awesome and available to potential viewers.
Text
You should always give your text space to breath-A page that is too cramped is not only hard to read, it also looks less attractive, whereas a page with space between navigation, text, images, and other items on the page will be easier to read and more attractive. This space between the elements of a page is what designers refer to as whitespace. There are two key terms which help to create whitespace on your page: padding and margins. Funny enough prior to reading week 7 notes when I first heard of “whitespace” I cam to the conclusion that it was white in color however this was not so. Whitespace need not be white; it just refers to the space between elements of a page such as writing, images, form controls, table borders, and links.-It is usually the same color as the background of the page.
How you align your text determines how readable it is. Most commonly, text is left-aligned. However, you can also center text, have it right-aligned or justified, or it can be put out of line by other elements on the page. In general a paragraph of text will be much easier to read if it is left-aligned although many individuals think it looks better centered it will be harder to read. Centered text is best left for headings and sometimes short paragraphs. Most people find it hard to read long lines of text on a computer screen. As the lines of text become wider it becomes harder for the user to follow onto the correct line—and this problem is exacerbated when users are scanning a page rather than carefully reading it. Therefore it can help to limit the width of your columns of text. You can control the width of text using the width attribute on a table or table cell or you can use the CSS width property on any block level element—the
Text
You should always give your text space to breath-A page that is too cramped is not only hard to read, it also looks less attractive, whereas a page with space between navigation, text, images, and other items on the page will be easier to read and more attractive. This space between the elements of a page is what designers refer to as whitespace. There are two key terms which help to create whitespace on your page: padding and margins. Funny enough prior to reading week 7 notes when I first heard of “whitespace” I cam to the conclusion that it was white in color however this was not so. Whitespace need not be white; it just refers to the space between elements of a page such as writing, images, form controls, table borders, and links.-It is usually the same color as the background of the page.
How you align your text determines how readable it is. Most commonly, text is left-aligned. However, you can also center text, have it right-aligned or justified, or it can be put out of line by other elements on the page. In general a paragraph of text will be much easier to read if it is left-aligned although many individuals think it looks better centered it will be harder to read. Centered text is best left for headings and sometimes short paragraphs. Most people find it hard to read long lines of text on a computer screen. As the lines of text become wider it becomes harder for the user to follow onto the correct line—and this problem is exacerbated when users are scanning a page rather than carefully reading it. Therefore it can help to limit the width of your columns of text. You can control the width of text using the width attribute on a table or table cell or you can use the CSS width property on any block level element—the
element. Another factor is the use of background images- photos tend to make poor choices of background images because they have varying contrasts across the picture, which makes the text harder to read. If you must use an image for a background it should be low in contrast—for example a texture rather than a photo. It should be noted that background images should be small files; otherwise they will take longer to load and also set a background color similar to the main color of the photo in case the background color shows while the page loads. Fonts, Fonts, Fonts!!! Choosing the right font for your website is never the easiest task but is very important!! When choosing which fonts (or typefaces) to use on a page, you should make sure that users will have some of the fonts you expect them to have; if users don’t have your desired font installed on their computers then the typed content of your website will not be displayed. There are fonts you can bet your life on that the potential viewer will have namely- Arial, Verdana, Courier or Courier New, and Times or Times New Roman apart from that it is best you double check.Lastly, as stated at the beginning of my blog, we touched on menus. We basically ran through the importance of the menu being quick and easy to read, achieve what visitors want t read, MUST be clearly separated from the content so as to allow users to effectively navigate the site.
Week 6 Page Layout
Week 6 basically addressed Designing and Constructing Layouts for Web pages. There are some important factors that you should consider regarding the appearance of a page. Personality and taste are key factors into deciding how attractive and colorful one would like his or her website.
We also learnt the aims of the site, the size of your page, what should appear on the page, and where each item should go on that page-and how to utilize codes to carry out these actions.
Week 6 was broken down into 4 sections so as to make it easier to comprehend:
1. Understanding the aims of the site correctly.2. Looking at a page as a whole and addressing the question of how big you should make the page.3. Knowing the elements that make up each page such as logos, headings, links, and possibly Ads.
4. Positioning the various elements within the page.Now, one should be able to understand his or her site in terms of the aim and the type of audience he or she would like to attract. Theses factors are vital so as to implement proper information on your site based on what your aim is and what audience you are appealing to. After deciding you sites aim, you can then move on to the content of your site, in other words you need to put yourself in the position of each of your potential visitors and think about what they might want to know. It is best to first list every possibility and then trim it back to the most effective and efficient ones. When generating the potential content of your site you should treat it like a brainstorming session as Mr. Shepherd would say “don’t holdback”!
It is also important to note that your site must address the needs of your visitors and what they will expect from the site, not just what you want your visitors to see. I found that looking on other sites gave me a better understanding as to what it accepted in the contemporary market and also what clients are looking for from a website. Additionally, the proper lacing of elements such as headings, logos, ads and so on must also be taken into consideration-these elements will reflect the aims of the site.
Lastly, after deciding what should go on which page, one can now look on designing the pages themselves. The page size of the site is very important as not using a proper dimension will result in you rebuilding the entire site which would be tragic. Another useful tip with web design and any design for that matter is to sketch your layout.
We also learnt the aims of the site, the size of your page, what should appear on the page, and where each item should go on that page-and how to utilize codes to carry out these actions.
Week 6 was broken down into 4 sections so as to make it easier to comprehend:
1. Understanding the aims of the site correctly.2. Looking at a page as a whole and addressing the question of how big you should make the page.3. Knowing the elements that make up each page such as logos, headings, links, and possibly Ads.
4. Positioning the various elements within the page.Now, one should be able to understand his or her site in terms of the aim and the type of audience he or she would like to attract. Theses factors are vital so as to implement proper information on your site based on what your aim is and what audience you are appealing to. After deciding you sites aim, you can then move on to the content of your site, in other words you need to put yourself in the position of each of your potential visitors and think about what they might want to know. It is best to first list every possibility and then trim it back to the most effective and efficient ones. When generating the potential content of your site you should treat it like a brainstorming session as Mr. Shepherd would say “don’t holdback”!
It is also important to note that your site must address the needs of your visitors and what they will expect from the site, not just what you want your visitors to see. I found that looking on other sites gave me a better understanding as to what it accepted in the contemporary market and also what clients are looking for from a website. Additionally, the proper lacing of elements such as headings, logos, ads and so on must also be taken into consideration-these elements will reflect the aims of the site.
Lastly, after deciding what should go on which page, one can now look on designing the pages themselves. The page size of the site is very important as not using a proper dimension will result in you rebuilding the entire site which would be tragic. Another useful tip with web design and any design for that matter is to sketch your layout.
Friday, April 29, 2011
Week 4 Cascading Style Sheets
In this class we learnt how to take control of the style of your pages, including the colors and size of fonts, the width and colors of lines, and the amount of whitespace between items on the page. The cascading style sheets specification/CSS allowed me to specify rules for how the content of elements within your document appears. In fact, I learnt how to set different rules to control the appearance of every element in my page so as to make my page pop more. Honestly,at first this was realllly difficult for me as I had to be copy and pasting each time but as time went by I new various rules out my head which made me very happy as this proved I was learning!! This class taught me to pay strict attention to detail as if even a comma or colon was missing then that would result in everything being incorrect so it took me a while but I got it..eventually. Now,the CSS rule is made up of two parts the selector and the declaration-the selector indicates which element or elements the declaration applies to while the declaration sets out the styling of each element. The declaration can be broken down into two parts namely the property and the value- the property is the element which you would like to be affected by the value for example {font-size:22px}.I also had to take note of the fact that properties are kept inside the curly brackets. Another huge factor was that of the link element, here we learnt how to link the html/xhtml documents to the CSS, this element was vital so I had to stick it in my head. We touched more in depth on attributes and id selectors and how to apply each in the CSS. Week 4 was indeed a difficult but informative one :)
Week 2 Structure of a Page
After acquiring the basic knowledge of what a webpage is all about we were then introduced to the structure of the page in week two.This class was very informative as I was now able to identify each element and its uses.The XHTML document should contain four elements namely html, head,title, and body- theses provide the structure with which you can create XHTML pages in other words they can be considered the backbone of the XHTML document. The html element is considered the containing element of the entire HTML or XHTML,head element contains dataabout the document such as a title or link, title element should contain a title which relates to the particular website you are creating while the body element is basically the "meaty" part of the XHTML as it contains the content of the document you see in the browser. In this class we were drilled on the vital point that once you open a tag you MUST close the tag at first it was a lot of information to accumulate but eventually I got the hang of it due to practice practice practice. I also learnt how about attribute groups and how each was used i the html/xhtml elements-which led to basic text formatting where I could mark up my text for example font-size, colors, type-faces,etc... Additional we did a few exercise with ordered and unordered list as well as grouping elements with divs and spans.
Colour,Images and Objects
Week 3,Week 3, Week 3!! Basically this class had everybody excited as we were introduced to ways in which we could "pimp" our website by using colors adding objects and linking images. There a two ways to insert colors namely by using Hex Codes and Color Names. In my opinion using Hex Codes is definitely the way to go as you can determine the perfect hue by just scrolling over the colorr chart for example the hex code for black is#oooooo, white #ffffff etc...By the end of the class I looked at colors in a different light in that I started to see the importance of choosing the correct colors for any design i'm doing and also what type of images to use and where to use them.
Monday, February 21, 2011
Week 1
During week 1 I learnt the basic idea of a web page and was introduced to different languages such as HTML,XHTML,CSS and javascript to a certain extent.HTML stands for Hyper Text Markup Language and is considered to be the most widely used language on Web on the other hand XHTML stands for Extensible Hyper Text Markup Language and is used for structure.CSS stands for Cascading Style Sheet-rather than that of elements or tags rules are use to say how a document should appear.I also went on to learn the difference between Elements,Tags and Attributes-a pair of tags and the content it includes in known as the element.Elements must always carry an attribute called "face'.Attributes are made up of names and values,the value should be put in double quotation marks and is separated from the name by an equal sign. Prior to this class I had no knowledge as to how a web page was very detailed in terms of coding,I jst thought copy and paste pictures here and there and a web page was created-so this was indeed a effective learning process.
Subscribe to:
Posts (Atom)