Friday, 7 June 2013

Unit 20- P1:Explain how HTML files access CSS

Introduction
...................................................................................................................................................................

INLINE - Inline CSS adds styling to single HTML elements using a type of attribute of an element called <style>. They can be an advantage if you want a specific page to have a different type of CSS than others. But if not inline CSS must be applied to each HTML element you wish to style. This can be very time consuming.


<h1 style="font-size: 1.2em">



...................................................................................................................................................................

INTERNAL- Means the code that is stored in the web page inside the head tag e.g. When using internal CSS, you must add a new tag, <style>, inside the <head> tag. If any CSS is used within the page it will inherit the formatting e.g. if the font colour is red everything will change. The HTML code below contains an example of <style>'s usage. When using internal CSS, you must add a new tag, style, inside the tags.
 <head>
               <style>

               <style>

</head>

...................................................................................................................................................................

EXTERNAL-

The line below which is underlined is in HTML and put in between the <head> and </head> tag. The HTML code links to style sheet which then links to the style sheet code. HTML and CSS codes separate in the pages however they are link together using the underlined code below. External codes are easy to find and read which benefits the user. External CSS also allows you to manage the layout of the web page by only having to change it once for the whole web site and not for every single file.

<head>

            <link rel="stylesheet" href="style.css">

</head>
...................................................................................................................................................................

Reference:
http://bit.ly/FlQ1D
http://www.w3schools.com/css/css_howto.asp

Posted by at 1 comment:

Unit 20 - P2 Explain the features of the box model for CSS

P2 - Explain the features of the box model for CSS

This blog will give you an explanation in detail of the features within a box model for CSS (Cascading Style Sheet), for example the margin, padding, border and content area. I will also provide you will illustrations to give you an idea of what it looks like on screen.

Within CSS, there are several different elements that are used to display things on a web page which are either box's and contain. The elements consist of Margins; the one around everything which keeps space between the border and the browser and next box within the screen), the Border; the one that stays around the outside of the padding and the content, Padding; the one keeps a space around the element/content and the content in the centre of all these which includes the element. Below is an example of this:



Margin:

The margin is a transparent box around the border of the content, this means that it would not effect any background colours behind the content and margin. The margin clears a specific area that has been coded with the size's of the space around the element. The margin is in between the browser and the border and gives the content enough space from the edge of the web page's. Margins are usually measured as pixels, also known as px for example margin:25px. The top, right, bottom and left margins can always be changed, however they must be changed independently using separate properties.

For example: 
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Border:

The border is includes several different values that can be used to design the element. The border is used to make the content stand out a bit more. You can edit the border-thickness, border-style and the border-colour. The border thickness can be made as bold or as thin are the user wants it to be. You can also put the size of the distance you want it to have from the padding box. There are different styles of the border that could used e.g. dotted, dashed or solid. The colour of the border could also be changed to any/most colour you want, from white (#000000) to black (#FFFFFF).

For example:
{
border-style:dashed;
border-colour:#98bf21;
border-width:5px;
}

Padding:

The padding gives space in between the content (which is in the centre) and border but inside the border. The borders top, right, bottom and left can have padding changed independently using separate properties. The padding colour around the content can be changed and also different for each side, top and bottom using separate properties. However the padding around the content is affected when the background colour of the box is changed.

For example:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;


ID:

ID selectors allow you to set the style format of your elements within your web page. They are used for specific styles for one unique element and are known by using a hast tag (#). ID selectors are a unique identifier to an element and they define a special case for a specific element within the web page.

Below is an example of a ID Selector:

#para1
{
text-align:center;
color:red;
}

Class:

Class Selectors allow you to set a specific type of style for several different HTML elements which have the same class and this type of selector is also used to identify a group of several different elements. An example would be; using classes when wanting to have the same style of one paragraphs for all of your paragraphs in your web page. The Class selectors are known by using a dot (.) before the code. If there is this type of selector in any HTML elements they will be centre-aligned.

Below is an example of a Class Selector:

.center {text-align:center;}

The difference between both selectors are that ID selectors can only be used when trying to identify one element, however Class elements can be used to identify several different elements with in a web page.

CSS backgrounds:

CSS allows the user to set the background colour and/or an image on their web page. When designing your CSS background, you have the opportunity to choose how you want it to be displayed,  so you have control over the background. Whether it is in a fixed position or scrolls down the page when the user scrolls down, its up to you to decide how you would like the format. The background properties can also be used to define the background effects of a specific element.
Some images should be repeated only horizontally or vertically, or they will look strange. The background image repeats an image horizontally and vertically and some images within the web page should be either of these two as the images may come out strange. The back ground image is set as default. 

CSS properties used for background effects:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Reference:

Posted by at 22 comments:

Friday, 3 May 2013

Tools and Techniques

HTML; Hyper Text Mark-up Language is a language which describes web pages. HTML is a mark-up language and is designed for the definition, processing and presentation of text within a web page. Both the layout and style within a text file is specified by the code language for formatting. A mark-up language is a set of mark-up tags and these tags describe document content.

For example:

<HTML>

<body>

<h1>FIRST HEADING</h1>
<p>FIRST PARAGRAPH</p>

</body>

</head>

CSS: Cascading Style Sheets are styles that basically define how HTML are going to be displayed. External Style Sheets can save a lot of work and are stored in CSS files. The styles are saved in external .css files. By editing a single file, external style sheets allows you to change the appearance and layout of all the pages in all the web page. External style sheets are stored in CSS and CSS are used to create a number of styles and then consistently apply these styles throughout a web site. CSS allow you to give a site a consistent look, save you time, tidies up your HTML code and allow you to change an entire site

Komodo Edit: This is a multi-language editor that allows the user to enter simple codes which lead to creating simple layouts and formats on a web page. It is a free and open source software and is available to users on Windows, Linux and MAC. A good thing about this software is that it allows you to open a project as a template or allows you to use a file that was recently saved.

Wire frame tools: This is framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc. enables th4e user to easily create the navigation of the users website with built in tools such as boxes, diagrams and being able to add text.

Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www.loremipsum.com.

Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.

Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp
......................................................................................................................................................................
Posted by at No comments:

Unit 20 - P4 Website Design

Deals on Wheels

This post will contain a brief description about my website and what it will contain. My website is about different cars and will contain information about the name, age and price of each car. My website will include 5 different pages which are linked together. The main "Home" website will include a navigation button which links to the different pages. I will also include images and and specific information about certain cars such as the Price, Make, Model etc. I will also have a navigation chart which links all my pages together. This website has been made for customers who are fascinated by different types of cars such as the on in my website e.g. Classic cars and Super cars.

My website will also contain a constant colour scheme which will be Blue and White and stay throughout my whole website.

 The pages I will have are as follows:

- PAGE 1: Home: Welcoming the user to the website with images included and a overview of the whole website. The web page will include the navigation links that link to the other pages.

- PAGE 2: About us: A brief description of our website and what we provide our customers. It will describe a few of the cars that are shown on our website.

- PAGE 3: Super Cars: Images of different super cars and a brief description of each one of them.

- PAGE 4: Classic Cars: Images of different super cars and a brief description of each one of them.

- PAGE 5: Contact us: A page containing ways that the customer can contact us for information about the cars. For example Telephone Number, Email Address or Fax.

Navigation layout of the website

 

------------------------------------------------------------------------------------------------------------

HTML; Hyper Text Mark-up Language is a language which describes web pages. HTML is a mark-up language and is designed for the definition, processing and presentation of text within a web page. Both the layout and style within a text file is specified by the code language for formatting. A mark-up language is a set of mark-up tags and these tags describe document content.

For example:

<HTML>

<body>

<h1>FIRST HEADING</h1>
<p>FIRST PARAGRAPH</p>

</body>

</head>

CSS: Cascading Style Sheets are styles that basically define how HTML are going to be displayed. External Style Sheets can save a lot of work and are stored in CSS files. The styles are saved in external .css files. By editing a single file, external style sheets allows you to change the appearance and layout of all the pages in all the web page. External style sheets are stored in CSS and CSS are used to create a number of styles and then consistently apply these styles throughout a web site.  CSS allow you to give a site a consistent look, save you time, tidies up your HTML code and allow you to change an entire site

Komodo Edit: This is a multi-language editor that allows the user to enter simple codes which lead to creating simple layouts and formats on a web page. It is a free and open source software and is available to users on Windows, Linux and MAC. A good thing about this software is that it allows you to open a project as a template or allows you to use a file that was recently saved.

Wire frame tools: This is framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc. enables th4e user to easily create the navigation of the users website with built in tools such as boxes, diagrams and being able to add text.

Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www.loremipsum.com.

Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.

Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp

......................................................................................................................................................................
Design for each page:
Page 1 Design:

This is my first page. The home page will include the image that i have used in the design, text welcoming the customers to my website. It will also include the my own logo. All 

Page 2 Design:

 This is my second page. The About us page will include one image of a car and provide you a brief explanation of what the website is about and what they include.

Page 3 Design:


 This is my third page.The classic cars page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price.

Page 4 Design:


 This is my fourth page.The super page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price. This will have the same layout as page 3 as it is roughly about the same thing

Page 5 Design:


This is the fifth page. The Contact Us page will include a image or two of either a mobile phone or a map to show where we are located and the contact details. 


As the design images above shows that the back ground is white, the actual website includes a background coloured blue behind the logo, a banner going across the bottom in line with the "Copyright: Raad Begh" and also include a dark blue border which will make everything inside the page stand out.





Posted by at 8 comments:

Unit 20 - P3 + M2 Explain the fundamentals of a scripting language

P3 + M2: Explain the fundamentals of a scripting language
 
This blog will give you explanations of the different fundamentals of scripting language. I will explain why it is different to other programming languages, what it interpreted and provide you examples of client and server side scripting languages. I will also give you two types of scripting languages for web purposes and explain what J query is.
 
1) What is a scripting language?
 
Scripting language is a high level programming language which is interpreted instead of compiled meaning that the “English” language code that is being written out by the user is translated into a language that the computer system understands. Scripting languages allow rapid development and can communicate easily with programs written in other languages. Scripts are used to develop simple programs. There are a number of scripting languages such as Flash (action script), pearl script, Java Script, VB script etc.
 
There are some scripting languages which can be embedded within HTML and are usually used to add functionality to a web page. For example, adding a menu style or displaying different graphics. This language type is a client side scripting language which changes and affects the data that the end user see’s in a browser window. However, server side scripting languages are used to manipulate the data. The sights and sounds you create on your web page are all created with script programs.
 
Each script represents a text document which contains a list of instructions which need to be followed by a certain program so that the required actions can be proceeded. This is an advantage to users as it prevents them from having to go through every complex steps in order to achieve certain results. Scripts are used to add interactivity to otherwise static Web pages. They also can perform repetitive tasks like automatically filling out parts of Web-based forms.
 
 
2) What does the interpreting?
 
Scripting languages are usually interpreted by web browsers such as Internet Explorer. Web browsers interpret scripts as well as HTML which is the language that web pages are written in. This process can be done in two ways, firstly; the programs written in scripting languages can run directly from a server, secondly; the script can be included directly with the HTML webpage when someone downloads it to the computer.
 
What is Java Script?
 
Java script is a client side scripting language meaning it is a computer programming language that runs inside an internet browser. Java script is a programming code which can be inserted into HTML pages which then can be executed by all modern web browsers. Simple web pages are made up from just text and some sort of code which indicates to the browser how to display the text on the page.
Complex web pages that change in response to the user input require programs such as JAVA or JAVA script to make them work. Inside a normal Web page you place some JavaScript code. When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it. JavaScript is widely used on Web pages for calculations as well as for displaying messages, drop-down menus and other user interface elements. Many Web sites gather information from users in online forms, and JavaScript can help validate entries. For example, the programmer might validate that a person's age entered into a form falls between 1 and 120.
 
What is JQuery?
 
JQuery is a type of framework which is built using Java script. It is used to navigate HTML documents and also allows the user to modify text, process form data, move elements on a page, and perform animations.JQuery is a JavaScript library that allows web developers to add extra functionality to their websites.
 
JQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical functionality by writing very small amount of code. Below are some advantages of JQuery:
·         It helps to improve the performance of the application
·         It helps to develop most browser compatible web page
·         It helps to implement UI related critical functionality without writing hundreds of lines of codes
·         Chaining capabilities are very powerful.
·         Its light weight when compared to other javascript framework
·         Save Time – Five lines of JQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
·         Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
·         Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript.

M2





Client side scripting language:
Java Script – JavaScript has the ability to interact with HTML code, enabling developers to create more interactive, appealing Web sites without having to learn a complicated programming language. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license . Client side scripting language allows you to interact within the web page. The reason JavaScript is called a client side language is because it runs scripts on your computer after you've loaded a web page.
Example of java code:
<script>
document.getElementByid(“hello”).innerHTML=’hello’;
</script>

 
Server side scripting language:
PHP – It is used to enhance web pages. With PHP, you can do things like create username and password login pages, check details from a form, create forums and surveys etc. PHP is known as a server-sided language. That's because the PHP doesn't get executed on your computer, but on the computer you requested the page from. The results are then handed over to you, and displayed in your browser.
Example of PHP code:
<h1 id=”hello”><?php echo ‘Hello’; ?></h1>

Another example would be Google. This is a search engine which uses server scripting language

Client side scripting has 2 main purposes:
Validation: checking if data on input is valid and used a lot on web forms to make sure that what you are doing is valid. A number of checks are carried out such as presence check which is done to check if data is there or not, another check is carried out which age/date is/ validity range check.
Speed is an an advantage on client side validation. The validation is done by the client, so it happens on the user’s computer system in the browser. The server saves on processing as the validation tasks are carried out on the client’s machine.





Why is scripting language different from a programming language?
Programming languages are a set of instructions which are carried our directly by the computer hardware such as the operating system, however scripting languages are a set of instructions which are carried out by programs installed on the computer system such as text command line processors or Web Browsers.
Scripting language run with an interpreter that translates the English code that the user writes into a language that the computer understands, however with programming language the code would already be written out. Scripting language is interpreted using Web browsers.
Another difference between the two is that scripting language code are interpreted when they are run meaning when the user wants to run the program, there is a separate program which needs to read the code and interpret it and then follow instructions that the code carries. Such as Visual Basics, JavaScript etc.
On the other hand programming codes are compiled before they are run meaning that it can run any number of times. This is because the code which has been compiles already has been interpreted into a machine language e.g. C, C++ etc. Javascript is widely used on web ages for calculations as well as displaying messages, drop down menus an other user interface elements. Scripting languages allow rapid development and can communicate easily with programs written in other languages.

User interface:
Most Web Pages in modern days are dynamic. This gives the user feedback when a mouse or keyboard event takes place. When a user wants something, it happens such as when a user pressing the power button on the computer, the computer turns on or if we press the switch the lights should turn on. J Query is a java script library.

Most hardware devices include a user interface; it is not as complex as software interface. For example user interface are things such as a hardware device such as a remote control. A typical TV remote has a numeric keypad, volume and channel buttons, mute and power buttons, an input selector, and other buttons that perform various functions. This set of buttons and the way they are laid out on the controller makes up the user interface.
 

REFERENCE:
http://www.webopedia.com/TERM/V/Visual_Basic.html
http://ecommerce.hostip.info/pages/1058/Web-Scripting-Language.html
http://wiki.answers.com/Q/What_is_the_difference_between_scripting_language_and_programming_language
http://www.javascripter.net/faq/whatisja.html
http://www.bbc.co.uk/webwise/guides/java-and-javascript
 


Posted by at 5 comments:

Friday, 8 February 2013

Unit 20 - M1 Assess different implementation styles of CSS

M1 - Assess different implementation styles

In this blog I will be assessing CSS and the different implementation styles that are used within CSS coding which are Internal, External and Inline. I will provide you with clear explanations, examples and the advantages/disadvantages of each of the style sheets.

CSS (Cascading Style Sheets): this is basically codes which are used to produce and design web page appearance and also include adding text to the page. They are mainly used to design web pages for the internet and codes within the style sheet are written up in a“mark-up language”.

The elements within HTML are displayed by Styles and all the HTML tags have CSS built within them. CSS. CSS is basically designed to separate the content of a web page from its presentation which include elements such as “colors”, fonts and the layout. The documents consists of different tags which are used to create what has been displayed on the screen, bellow is an example of some of the tags

There are three main implementation of CSS style sheets that I will explain as well as giving you advantages and disadvantages for each one. The three that I will explain are below:

  • External style sheets

  • Internal style sheets

  • Inline style sheets

External:

An external style sheet allows you to change the appearance (e.g. the layout, the colour) of all pages within the web page. External style sheets are mainly used for when having to apply many appearances to many pages on a web page/page's. By using this type of style sheet the HTML files are linked to one CSS file; this allows you to make changes to the web page's layout using only one .css file if necessary instead of having to go through all the files.

When writing out the codes you must make sure that you keep the code for the style sheet within a link tag and the code should also start with a <link> tag so it links the page to the style sheet. Bellow is an example:

< head>
<link ref="stylesheet" type="text/css" href="mystyle.css">
</head>

Advantages:

· External style sheets allow you to change the appearance and layout of all the pages with in website and for every web page and this is done by only having to edit one file.

· The mostly useful feature of CSS is that all of the style and layout is removed from the html, so the html page size is very much smaller which makes the web page run more efficiently.

· By CSS having reduced bandwidth for the users server, it also allows faster downloads for other users

· When creating a web page, external style sheet gives the user more accurate formatting, easier to maintain the site and web accessibility.

Disadvantages:

· CSS doesn't work at all in very early versions of Internet Explorer. Some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

· You must download the css in order to work with external style sheet

· When trying to make a complex and different layout instead of a simple one, it could be quite hard to edit the code.

· When a style is not in use and you have a small number of styles within your code, it could increase how complex your site becomes when trying to work on it; this could lead to making errors within the code which will then lead to your web page not working.

...................................................................................................................................................................

Internal:

An internal style sheet is basically all the tags within the code of the web page, for example <head>, <style> and <body>. These tags visually do not show anything however they inform the browser that there will be some sorts off CSS on the web page. The tags themselves only have an affect on the document of the web page that they're are in, unlike external you can't edit one and the rest change.

When writing up the codes you must keep in mind with the internal tags are that they must always have an open tag (e.g. <head>) and a close tag (e.g. </head>). Bellow I will show you a few examples of the sorts of tags I am talking about:

1.      < head> </head>

2.      < style> </style>

3.      < body> </body>

The tags shown above are the common tags that would be used, so all you would need to do is fill in between each tag what's going to go into the CSS and how you want the layout/colour/text to be. Bellow is an example of them some of them put together as one code:

< head>

<style>

h1{

Color:green}

</style>

< /head

Advantages:

· There are no additional downloads necessary in order to receive style information and or there are less HTTP request

· Testing with internal CSS is another advantage as it allows you to test the different styles that are in the context of the website and the web page. You could be testing these before actually submitting them on a larger site.

· Elements within another element do not need to have internal styles applied to them, if you wanted your paragraphs within one web page to have the font as “Calibri”, then you would have to add an Inline style tag <P> in your Internal Style document. This is what includes both the maintenance work for the creator/designer of the web page and also downloading time for the users.

Disadvantages:

· As well as having less HTTP requests as an advantage, it is also a disadvantage as the reduced request for HTTP within the internal CSS is also slow compared to the other CSS such as Inline and External.

· File Size- When the web developers are working, the page size increases. Although it is helpful for the developers when working offline, it can cause the site to load slowly when they are online.

· If i have <h2> in my document i need to repeat that code for every single page. By having to right out the code again and again separately for each heading just to change anything such as the colour it could be very time consuming which is one of the major problems

...

Inline:

Inline CSS adds styling to single HTML elements using a type of attribute of an element called <style>. They can be an advantage if you want a specific page to have a different type of CSS than others. But if not Inline CSS must be applied to each HTML element you want to style. This can be very time consuming when having to go through each and every element repeatedly. Inline is good for creating small file sized web pages such as things like blogs or even forums, because of this the web page would be delivered on the screen much quicker and efficiently.The purpose of inline styles is to allow you to overrule an embedded or linked style rule, or to make a quick change of style. Bellow is an example of an Inline where I changed to style of font size:

<p style="color: blue; margin- right: 25px;"> My name is Raad Begh



This would show the paragraph as:






" My name is Raad Begh"




Advantage

· One of the main advantages of Inline would be that it is good for a quick and simple test without having to go back an forth between the .css document and the actual HTML file.

· You don't need to edit a new element in the head of your document (as you would with an internal style sheet). Inline are therefore very easy to add and can save a lot of time.

· This is a advantage Inline CSS as it has lower HTTP requests. This means that Internal CSS websites load much faster than External CSS websites.

Disadvantages:

· Separates both the content and logical code from the style sheet, because the CSS is mixed up with the HTML code

· Inline is not good for making large, high quality web sites

·         Must be used on every Element-The Inline style must be used for every element you want it on so it can be much more time consuming if you are creating a large site. For example if you wanted all your headings to have a font of "Ariel" you would have to add an inline < p> < /p> tag in your documents. This will also add download time for the website user when they are opening the site.

Reference









Posted by at 90 comments:
Subscribe to: Posts (Atom)