UNIT 20 D2 - Evaluate the Webpages and Discuss Improvements

D2 - Evaluate the web pages and discuss improvements
>http://adf.ly/q8ciD click here for D2 in a word document<

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

When making a website it would be important to analyse your website to look for parts that can be improved. The reason being is because websites always change and update their webpages to make sure that their users will have a smoother experience when navigating their website. This will also be done to help secure the website security from any attack from anyone.

The positive points.

The website was made and it does what it meant to. The website was made to appeal to people who wanted to stay in a luxurious hotel.  The website is very interactive and an easy to use navigation around the website. The website foundations were to make the website easy to use and interactive and it was a decision to make the website to only have information of value and short. Imagery was clear to express how great the hotel is

Over here is a shot of the slider on the home page of the website. The slider was coded to change slides every 3 seconds, which shows off the hotel in an interactive way.

Over here is the screenshot of the websites navigation. This is where you can see that every link is in the navigation is clear to and is in an easy to read text.

This screenshots shows interactivity on the navigation.  The screenshot is showing that if a user hovers over a link in the navigation then the link will highlight itself and then blink. By doing this it gives the user the idea of what they are going to click on, as well as a nice little feature to the website. 

This is a screenshot of where the hotel is located within the webpage to help people find the hotel if needed.

In this screen shot it shows that the map is able to be moved around which shows that the map itself is interactive within the website. By having this as an added feature to the website is a very good, as it helpful to the user as it gives a better sense of direction on where the hotel is located and will be easier to find it.

Bad points

The website is not compatible with every browser that is use today as it does not have any browser detection on it or another style sheet attached to the website so the website is best used on a google chrome or Firefox

The website is open within Internet Explorer and as you can see the website does not work at its best with as the style sheet read by the web browser is implemented differently to how Firefox or google chrome would see it as.

Improvements

By testing out the website I how chosen a few critical places to make huge improvements on. One place to add improvements are with and under the slider for extra interactivity as some people may find that it takes a bit too long for the slider to move, which means that the slider may not achieve its full potential and reach out to most of the users on the website. So by adding a directional arrow and a little caption within the slider then the website looks more aesthetic as the users will be getting a little bit more information than before and a will be more of a convenience. To improve this I should add two arrow buttons and a little caption on the bottom left hand side of the slider.

Because we are in the year 2014 I would the standard on the website to the standard of this current year, by having more advanced techniques to the website.  For instance I would add a much more simple method to organise the website with allot more interactivity implemented within the website. Most of the interactivity would have to be coded with JavaScript and as I don’t have all the time in the world and as I don’t know full Java coding this would take allot of time for me to do and I would have to learn how to code in java…

One other improvement would be to add forms within the website, as the website is intended to book hotel rooms because it is important for the business to have a way to accept bookings from customers online. This would be a good and convenient improvement for the website…

If the website was to be able to been seen within a search engine, it would gain customers as search engine optimisation is hugely effective and a whole great way to being in customers. Because people search for hotels on search engines the website would gain a likelihood of potential customers searching for cheaper deals in an area, so it would be wise for the hotel to use search engine optimisation to bring in customers to the website…

In concluding, I would make a number of improvements that would make the website to a higher standard. As the level of standard for all websites is increasing it is becoming allot more time consuming and harder to make to match the standard of other websites. The current website is easy to use, clean and I feel that anyone using the site will not have any problems using it. 

UNIT 20 D1- Explore How WebPages Using Scripts are Implemented in Different Browsers

D1- Explore How WebPages  Using Scripts are Implemented  in Different Browsers 

How web pages with scripts are implemented in different browsers

>http://adf.ly/q8bko D1 in a word document <

The way certain elements of JavaScript is displayed is not always going to be the same for every browser, as every different browser would have their own take on how to run the code which means that when running the code of different browsers you would always get something looking different. That is why it is always good to test your coding on every browser to try to find a close matching on every website to that each user on different browsers will have nearly the same experience within the browsers.

Browser Detection

The whole point of browser detection is to see certain things from: what web browser is in use and a number of other things. Because of browser detection, a web developer will have to use different codes to make sure that the website is working the way it needs to be in different browsers. The same goes for when a mobile user tries to use the website which means that the website itself should have a completely different way it operates to be better for when they use the site. Things that would need to be changed for mobiles uses are the layout and size of the website to match the size of the phones screen. The detection process is to make sure that the right code is used for the browser in use to allow the website to work at its best.

Here are some pictures below that are JavaScript popups which are shown on three different browsers that are Firefox, Internet Explorer and Chrome. From looking at all of these three images, it is really clear to see that the JavaScript doesn't work the same on these browsers because browser detection is not coded within the site so the browser is not told how to show what is on the website.

The reason why the popups are different is due to the fact that all browsers are programmed differently which means that client side scripts would be shown to be different on the client’s browser. CSS code should all look the same on all browsers but with JavaScript it is either in the wrong or right way. This is why it is displayed in any way unless told not to.

                     JavaScript running on Google Chrome Browser. 

JavaScript is running on the website within Firefox’s browser. 

                  JavaScript running on Internet Explorer 

This is the browser detection code to tell any web browser what to do

Here is an example of the code for the browser detection. This should detect what web browser is being used to access the website.  When the browser detection has figured out what the user is using then it would adjust accordingly.

Separate Style Sheets for Different Browsers

As you should know, all browsers work in different ways which means it is best that a different style sheet is made for them. If you were to use the same website but in different browsers without making a different style sheet for each then you would come across the website looking different for both websites.  

As you can see this is the same website that is in different browsers (Internet Explorer and Google Chrome). The website is optimal for Google chrome and not for Internet explorer as the style sheet has just been coded for Google chrome. Creating another style sheet for each browser should entirely get rid of all and any problems to do with issues of compatibility. This would work great with browser detection as it will know when to use a different style sheet when needed.  

Object Detection

There is another way that will allow the website to know what browser and the version of the browser is that the user is running. The way that the detection works is by detecting what browser and version is being used and able to add the code needed to make the website compatible with the user’s browser. It looks at the scripting language that will work on the browser and adjust it to what needs changing. The object detection works well with browser detection

Object Detection Code

This is the code that handles machines trying to access the website. The code detects the size of the screen and adjust it accordingly. 

UNIT 20 M3 Employ Good Practice in the Design and Implementation of Web Pages.

UNIT 20 M3 Employ Good Practice in the  Design and Implementation of  WebPages.

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

Be sure that you are providing a good service.

When any web developer is hired to create a website for someone they should always make sure that when making the website that it is not a mess, so what they normally do is add comments and name the tags appropriately to help with their work and to make sure that everything is organised within the website that might be used another day.

When I was making the website for the client I made sure that I was making the site to be well organised to be able to see what I was doing if I needed to come back to it a later date if any section needed adjusting. While making the site I added comments to bits of my coding to remember what needed to be moved or what was where. I also made sure that I named the tags accordingly to what they were either there for or their name.

Adding Comments

As you can see when I have ended with a section I added a comment to show and remind myself what I have done and when I have done it so for a later date if I need to change things around if the client wanted change.

Here is an example:

Adding appropriate tags accordingly

From the picture you can see that I have named each code with a tag to identify them when adding the CSS. I abbreviated  some on the tags as they would have been too long if I named them their names, so what I had done was shortened them to allow me to still remember what they were while keeping a reminder on what they were there for.

Here is an example:

Adding Indentations

Indentation inside the web designing is the gap in front of a line of code. Indentation makes the code readable to the user as it creates the flow of the code simpler when viewed.  What I've done is used indentations so I could make sure where I have begun one tag and where one ends. Indentation is mainly used for identifying tags.

Here is an example:

Adding a comment is always a good thing because you might what something to be in a place later on but you might forget, so having a comment is always a good thing to keep on track of things because it will always help you to place code where it needs to be to remember a section of code which you might or might not move. If you were to add a tag with a completely different name to it or to what it does then it would be really hard to remember what you had done or what you need to do with it in CSS as you won’t remember what the tag was connected to as the tag has nothing to do with coding. That is why it is always good to add a well name tag that either describes what the code is for or the name of what you want that relates to the code.  

I needed to add variables 

UNIT 20 M2 – Discuss How a scripting language can improve functionality

UNIT 20 M2 – Discuss How a scripting language can improve functionality

M2 in a Powerpoint and this is it >>> http://adf.ly/q8WYy <<<click on the link to be sent to  M2.
 

_____________________________

_____________________________

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

<<PowerPoint version>>

How scripting language improves functionality of a web page?
From scripting languages like java Script and PHP programming language they add functionality to websites  to make them more interactive
The whole point of them are to be used for HTML and CSS

Alerts
When it comes to alerts they mostly come up as a popup to notify a user.
Alerts normally popup when a site has finished loading or if a button is clicked.

Confirming choices
When confirming a choice is normally used for when a mistake has been made. This would allow the user to back out if mistaken
The function is normally within alert pop up box. This would only tell the user which also cause some actions depending on what the person does.

Prompting the user
The function here would be to prompt anyone for an action
This normally appears in form of confirmation box with 2 options

Redirecting the user
The redirecting role is placed within a text or button.
 This function is used for open a defined website when the visitor triggers the defined object.

Browser detection
Browser detection is a code that can be used to check and detect what browsers is in use and the version in use. This can be used to help the server know what data it would need to present to the browser.

Creating rollovers
Rollovers are the use of coding that is able to adjust an objects features in a visual appearance when an action is made
Most of the actions use a mouse to be used.

Checking/Validating input
This is a function like a automatic command that is used to ensure that each user has entered the information in the form.
This can also be bettered by the developer adding a restriction such as text or the amount of numbers used. The would help stop mistakes

Handling forms
Handling forms is a function that uses events where the input of data in needed to be passed on to a data base.
Feedback and email forms would be an example of then which are embedded within some websites. They would be a good example of handling forms because the user input is needed and then sent to the recipient.

Maintaining cookies
This would mainly be used on websites where people use often with the information frequently. The inputted data is stored as a cookie and this is because when someone revisits the site on the same computer, their information will appear again.
The use of cookies are to store information stored in a text file on a local computer.

<< A Written Version >>

How can a scripting language improve functionality?

Scripting language is a tool, which is used to gain functionality to other pieces of software. Scripting language isn’t as strong as a full programming language and it’s designed for simple tasks like creating interactive menus and searching a database. HTML is used to help create static wepages but it isn’t able to do everything, which is why java and PHP script is implemented to make the website dynamic with user interaction. Without JavaScript a website wouldn’t be functional, that’s why JavaScript it is very important in making a website. Scripting languages can be embedded within HTML are used for functionality within a webpage such as different menu styles. These types of languages, which can enable functionality, are client side scripting languages that affects the data that the end user sees in a browser.

If a website used JavaScript effectively, then it can add user prompts, navigation and assistance. The use of JavaScript is to improve the content and functionality of websites. Businesses such as Miniclip use JavaScript for their website for the gaming applications. The use of a scripting language is that it makes websites more interactive because the page will respond to the users actions instantly. On a developer side of view, JavaScript allows to have more control over the appearance and actions of the webpage.

Nevertheless, some browsers are out of date and a number of people keep the browsers’ in use still and they May not run scripting languages, this may lead to the webpage not running properly.  When the developer makes and tests the scripts to working order the time they put in is immense. The browsers that know how to implement the scripts are: Firefox, Google, Safari and Internet Explorer.

Java scripting improves website functionality, and this can be done by adding a rollover button to a webpage. A rollover button is a web button with the ability to change its appearance when the mouse moves over it. The button has three states to it, which are normal, over and down. The normal state is when the mouse is off the button, over state relates to when the mouse rolls over the button and down state applies to when the button is clicked. Rollover buttons are different to static web buttons; this is because they are vibrant in nature and gives you and option to change the colour and style of the button with the movement of the mouse.

Every website has cookies. A cookie is a small piece of information that is sent from a website that is stored on the visitors’ computer. The cookie is a message that is given by the browser to a web server. The browser stores the message in a text file for the message to be sent back to the server each time the browser contacts the web server. The use of a cookie is used to identify the user, and may hold other information about the user. The types of different type’s cookies are:

• Session cookie – this is a cookie that is only stored temporarily while the user browses the site.

• Persistent cookie – these remain on your hard drive until you erase them or they expire. 

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 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.

Client-side: The client is the system on which the web browser is running. JavaScript is the main client-side scripting language for the Web. The browser interprets client-side scripts. Client side scripting has a process, which is shown: The user requests a web page from the server that finds the page and sends it to the user. The page is displayed on the browser with any scripts running during or after display.

Client side scripting is used to make web pages change after they arrive at the browser. It is useful for making web pages a bit more interesting and user friendly. It can provide useful gadgets such as calculators, clocks, etc.

Client side scripts rely on the users computer. If that computer is slow then it may run slowly. They may not run at all if the browser does not understand the scripting language, this is one reason why it is important to have recent browsers because they have to run on the users system and the code, which makes up the script is there is the HTML for the user to look at.

Server side validation is usually performed in middle tier script and is the most important validation tool. When data is inserted, updated or deleted at the database. Trapping errors using the PHP error function is hard because it has a unnecessary network and DBMS overhead, and I is hard to present to the user is a useful way. It is better to use PHP scripts to validate data and make sure all constraints of the database are bet before modifying the database.

Server Side: the server is where the web page and other content stays. The server sends pages to the user/client when requested. The process for this is shown: The user requests a web page from the server then the script in the page is interpreted by the server creating or changing the page content to suit the user. The page in its final form is sent to the user and then cannot be changed using server side scripting

The use of HTML forms or clever links allow the data to be sent to the server and processed. The results may come back as a second web page. Server side scripting is often used for allowing users to have individual accounts and providing data from databases. It allows a level of privacy, personalisation and provision of information that is very powerful. E-commerce and social networking sites all rely on server side scripting to keep information safe.

The script is interpreted by the server, which means that it will always work the same way. The user never sees server side scripts, which is useful so they can’t, copy their code. They run on the server and generate results, which are sent to the user. Running all these scripts puts a lot of loads onto the server but nothing on the user’s system. The server side system has to be powerful so it can deal with the entire load. 

UNIT 20 P6 - Test Interactive Webpages.

UNIT 20 P6 - Test Interactive Webpages.

_________________________

____________________________

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

(there are two ways for you to do this. Scroll down to see the other way)
Website Testing

Like anything that has been made it is always a good idea to test what was made to see if it works to how you want it. Everyone tests their products to see if they are in a working condition. If not then they will either go back to the drawing board or edit what needs adjusting.

Today I am going to go through a number of tests for my clients to see if the website is ready for the client. From what I show I am sure that they would like what they see.

When someone browsers the website they first will be greeted with a java welcome popup which would make the user feel interacted and personal. The pop up screen works well but I would need to make the grey colour of the background to a dark transparent.

The use of Java script is intended to make websites interactive as they add a more personal touch to applications and websites. Java is generally entailed  when something needs to make something have more a parses,,,, to it /. java has many different effects on people as it can make people feel like there is a connection between the website and themselves.

After a user has been welcomed by the java popup the whole site will show; the website was built on and around the specific ideas of the clients to have a good subtle colours which will be easy on the eyes of the user and will allow the user to feel freely to wonder around the site before using the easy booking system.

The user wanted me to make sure that the hyperlinks were endearing to look at. After I made the website I tested the hyperlinks to see if they were working fine. The hyperlinks were working fine as for the hover over the hyperlink with mouse was working good.

The client wanted me the web developer to add in pictures to show the users what they could be getting if they sign up to the loyalty program pictures. The client wanted the pictures to come at the user once the mouse hovers over the picture.

I wrote the code for the website to allow the picture to rise towards the user and once the website was complete I tested the website and I found that the code that was tested was and still is working fine.

In conclusion and from the testing all my codes work and the client is happy with the work I have done. If I had more time I would add more JavaScript to give a better atmosphere around the website. The look and feel of the website I am satisfied with and the website does as intended.      

                       (Another way to do website testing P6) 

UNIT 20 P5 - Create Interactive Web Pages Using CSS and a Scripting Language

UNIT 20 P5 - Create Interactive Web Pages Using CSS and a Scripting  Language 

________________

_____________________

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

(link to download my website is below)

                                   This is how my website looks page by page.

Firstly you will be greeted with a welcome page. (This is Java Script and interactive)

This is the home page aka the index page

This page is the "Loyalty Program" for returning customers (incomplete)

This is the about page for the website tell customers about the company.

This is the contact page allowing the customers to contact the company with any inquiries. 

When you hover the mouse over the "your hotel" your mouse will change stat to the loading icon

When you hover the mouse over any links the links will slowly fade into another colour.

If you would like to use my website as a template to help you with your work then Click here http://adf.ly/q7vTk 

Unit 20 P4 - Design a website / ALL IT ASSIGNMENTS PASS, MERIT, AND DISTINCTION (S)

P4 Design a website - ALL IT ASSIGNMENTS PASS, MERIT, AND DISTINCTION

Unit 20 P4 Design a website

Create a wireframe for each page and a mock-up was what i was asked to do for P4.  

I made all of this within Adobe Illustrator and Adobe Photoshop 


WIREFRAMES

MOCK-UP

Made within Photoshop

This was my other mock-up as I felt the other one was a bit too simple

UNIT 20 P3 - Explain the Fundamentals of Scripting Language

UNIT 20 P3 - Explain the Fundamentals of Scripting Language

INTRODUCTION

A computer program is created with the use of a specific language, most Microsoft products would use Visual Basic and their BASIC language, some software’s will interpret CSS. Websites also adhere to the use of a language for it to be used, we know that the basis of a website would use HTML, this code would be enough to show the most simplest of things or even go more in-depth, but it looks boring and not very appealing. The use of CSS will make this of what we see of WebPages on the World Wide Web. CSS will need the use of scripting language, this language type allows for scripts to be used and so colour, movement placing and general settings can make a webpage that little bit better.

Scripting language is unique in that it can be examined and understood in a different file, this is clearly seen when you use external CSS, where you would place the scripting language on a separate CSS style sheet and then link it to whichever page would require the CSS, other languages you would find they would need to be placed within an executable file to work. The use of scripting language allows for vast interaction including Java scripting which makes for a whole new way of using WebPages. 

VARIABLES

Variables is something that will always change, it can never stay constant, depending on which programming the language is used and which software it is used for, a variable can be a beneficial add-on. Take the use in scripting language, in a script you are able to use JavaScript which can use variables, if you look at the example above, a variable can be described to be a container that holds a value. You can then assign the variable a certain name, when you use the variables together like the example above adding, you get the end result being the correct value. If you take it in Algebra terms, the boxed labelled “number1” can represent A, “number2” can be B, the “answer” box can be C. You would then apply coding to make it so that a + b = c, this would then allow for greater development chances, you don't have to do numbers but you can say implement the use of variables in website for say creating forms, two filled fields can then auto fill other fields. 

LOOP

Just as it is named, loops are continuous. In programming terms they are too the same although they loop until a task/limit is reached the program sequence ends and an event occurs. So if you look at the diagram above, it shows what will happen during the sequences, as the process starts you will reach a speed bump where the program will check to see if the condition the sequence is in currently is still there, then the sequence will loop back and constantly do this still at the point of the speed bump, the condition has been met and the sequence and loop can end. The condition can be 2 ways, there is a loop called the “do/while” loop. This loop requires the sequence to run continuously until a set limit has been met, for example if the sequence is a calculation which will keep adding itself with say the previous number has been made, and you want that sequence to end after a certain value then that can happen. The other loop is called “for/else”, this loop will require a set number set by the programmer to occur, it will then do it automatically depending on the set loops it has told to do, for example if the sequence was told to loop 5 times and multiply each number by 2, then it will loop the five times multiplying 2 by each number constantly, which would then leave an answer of 32. Loops are a good programming fundamental because it allows for a event to happen on its own without the need of a user being on hand to control it, you put in the details and it does the rest.

DECISION MAKING

A program is able to be developed in such a way that it is non linear and can go off in multiple parts. Sometimes programs are set to do a single job and that would be it, a more advanced program would be able to perform multiple tasks depending on how the user got to the stage.  The figure above is a good example of what a decision type of program is able to be made. This is all done through the use of a simple statement dubbed the “if” statement. The “if” statement suggests that when asked a question, if there is a corresponding event that can sway the result then it is that, that become the eventual result. With a program you are able to use multiple “if” statement o create a number of branches and thus creating lots of different events and end results. The logic of this structure will check the environment to see if it meets a requirement and then correspondingly create an outcome depending on that. It will go down a list of the set “if” statements and see which one matches the requirement and follow it down like a tree, it is this that can separate a simpler program to a more complex one. This is greatly used in websites because if you look at forms that people might need to fill in, some fields may require a person to fill in, if for some reason doesn't match the requirements such as not being filled in, the designed can then set an event like a message or page reload with a message  to notify the user.

FUNCTIONS
Functions are used to create a sequence that a person has to carry out to get an end result. It can be found in normal programs, each button clicked or even in an GUI operating system such as Windows, you would be faced with functions created by developers. There are a fair bit of functions that can be used, one is “calling”. This function is one that is typically seen and JavaScript can also benefit from this, what it does is it allows a person to initiate a click or action that will then correspond with a response like a popup window such as the one in the picture above. There are a number of websites who use this in order to get an event that the user is able to see take action on. Again this is useful when a person is using a website and the creator needs them to understand something if they have done something such as incorrectly filling a form, the popup can make the person take action seeing that come up face.

<DIV ALIGN="LEFT"> HANDLING EVENTS </DIV>

A typical program contains elements, this is something that is programmed to create an event when handled. This is easily noticed on WebPages with scripts, with WebPages you are able to script certain events. Take a navigation bar on WebPages, you would find that these are HTML elements that are anchor tags linked to various pages of the websites. When you proceed to click each of them, you could find that they might change colour when clicked or even when you just place your cursor over the button, you could find a change that happens. One noticeable change that Windows have incorporated is that the mouse cursor will change to a significant point type with a hand, like you would be handling events. The image above also shows a add-on of the browser Mozilla Firefox, a person has created through scripts the ability to pop-out images on the popular Facebook website. Any image on that webpage will be subject to the event, as a person who would have downloaded/installed the add-on and were to go on Facebook, any image they just simple hover over would produce a pop-out of the image in larger form.

METHODS 

Programming can be done in many different ways, it all depends on the creator and how they feel comfortable, the good thing is a program can be created in multiple ways but still come out with the same result. There are different ways in which a programmer can make their program used, you may need to write something in for the program to work, or use a mouse to click or even to select. A programmer would have to create his software from the ground up, this means that they understand their code more better then anyone else, sometimes a programmer would take other people into consideration so that if something were to happen, an equal know ledged programmer would understand through comments and naming elements with certain ID or names. Having this can also reduce problems, if there were to be a mistake a simple comment suggesting this might need to change in the future can be something that would reduce time needed having to actually go and find the problem. Naming helps with the CSS parts in WebPages, a designer would typically pick external CSS and apply every page to link with it, if every element is named properly then the whole situation becomes easier and more CSS can be applied.

UNIT 20 P1 M1 - Explain how HTML Files Access CSS and Assess Different Implementation Styles of CSS

ALL ASSIGNMENTS HERE!! PASS, MERITS AND DISTINCTIONS

UNIT 20 P1 M1 - Explain How HTML Files Access CSS and Assess Different Implementation Styles of CSS - how HTML Files Access CSS

(You do not have to write as much as me) 

During the process of website creation you would start with the basic HTML code, this can be seen on most websites if you view there HTML code. However to make a website for today’s society you need to dress it up. This is where CSS – Cascading Style Sheets, can become the dresser and make a boring website be something to marvel and enjoy, currently we are in CSS version 3 which is a much improvement from the previous that can change a lot more. CSS is a better way of making websites look better through the style sheets. Many web browsers have finally started to support version 3 but still some are not fully supported in older versions or other browsers. JavaScript is also used to make it more interactive,
but CSS is the foundation to making a website look and interact professionally. Implementing CSS is dependent on the creator because there are different implantations that a HTML code is able to access the CSS, each of the three ways: internal, external and inline have advantages and disadvantages as to why they are used.

Inline

This would be the first implementation a web designer who is a beginner might use. This form of CSS is placed within the HTML line depending on what you want it implement the CSS on. To implement an inline CSS you have to use the style on the HTML and you type out the CSS (<h3 style=”color: #00FF00”) and it is placed within what you want to apply CSS to so if it’s a heading you place within the heading HTML code.

Advantages:

·         Override any other CSS so if you want to do something specific with a HTML then it can be done

·         Changing and applying CSS will only occur on the HTML tag it is placed with and so won’t affect any other similar HTML

·         Easier to test a code (troubleshooting) and a whole website in, especially when it comes to debugging

·         For very small websites and embedded email/blogs this can be the only or best choice you have and it also is faster because not many elements are using this type of CSS

Disadvantages:

·         IT will only apply to the single HTML and is not able to work as a combination to work will all the HTML

·         Very time consuming to place each CSS on the HTML tags and can be difficult to find if many are used

·         Override any other forms of CSS therefore other CSS is affected if you have forgotten about removing it

·         Although a few inline CSS is fast, having many others on every single element will make page loading slower because of the increase in file size

Embedded

Also called internal it is an upgrade of what inline CSS implementation is. Except to place this form of CSS you would need to place it within the page you want the CSS and within the head tag which is found at the top, this means that page specifically will obtain the CSS and any specific HTML tags that is been chosen. It is also best that each HTML is named a certain way to ensure specific CSS is implemented. To placed embedded CSS you use the Style tag (<style></style>) and anything placed within those tags with the appropriate way to CSS will be done so.

Advantages:

·         Any tag that you want to implement CSS on the page can be done at once with a single line of CSS rather than going to each separate one

·         All browsers will be able to understand acknowledge the fact that there is embedded CSS on some of the tags

·         No extra download is needed for the style information to be read and used and there is not to many requests needed for the CSS to load up

·         Any element with anchor tags or has a link can be styled, this is not possible with the use of inline CSS, this means creations like hover over colour or click element can be done

Disadvantages:

·         File size is larger due to the CSS being implemented on the page for all tags to be affected

·         Only the single page is affected by the CSS rather than the whole webpage, this can be problematic if you need to style each page similarly

·         Pages load slower with this type of CSS because of the added request it has to perform to load up the CSS it can even be slower then inline if not many inline CSS are used

External

Probably the most professional for of applying CSS on a webpage, this is a separate file to apply CSS to every single page on your website, this mean however you will need to make sure tags are named correctly and efficiently. To make this CSS happen o your website all you need to do is create separate style sheet which is saved with the website folder. The CSS is then the same as external CSS however within each spate page you need to link the style sheet for the CSS to occur (<link ref=”stylesheet” href=”style.css”>) this should be placed in the head of the page.

Advantages:

·         Every single HTML tag is affected by the CSS when linked, this means all pages will be done at once and make it easier to apply to all

·         You receive a better search engine optimisation due to the scanner running quicker over your website and also making it easier to scan because it won’t be scanning through many codes rather than just the content

·         Making it into a separate file is reducing the file size and making the loading times faster

Disadvantages:

·         Te extra file does mean it too needs to be uploaded and can take up a bit of time for your website to be live

·         You will need to carefully name each HTML tag so that specific CSS can be applied which can be time consuming to do

·         To import the style sheet can require a download which again means more time wasted

Selectors

The uses of selectors have become something that every web desire should learn and use when creating their WebPages. CSS depending on which one is used will overall make it be styled; the use of selectors allows the designer to have a specific CSS styled to an element on the webpage. During the inclusion of CSS the selector is placed with the element chosen to have CSS. Any HTML element that is picked within the page will have the CSS applied, to specifically go into depth with an element you will have to name it and apply it the same with the name instead. Selectors are able to do many things; they are applied to an element after the element name within braces. There are many options selectors are able to do including changing the colour, font, font-size and many more. More than one selector can be added to an element, this is done by using a semi-colon so it gives you flexibility such as making a font size increase and adding colour too.

Selectors also have a key part in the CSS box model. It is here that the web designer can customise the box model of any element on the Webpage. We already know that the box model contains a margin, border, padding and content. With a selector, each of these parts is customisable for example with the margin you can set the amount you want, for border you can set the colour and so on. Selectors are exclusively used for only external and embedded style sheets, for embedded it is places within the head tags for external it is a similar look as embedded.

These three are ways to add CSS to your website. CSS is something that is required on websites to make it look that extra special, without it can be just boring texts that goes down in a line. Each of these ways will make CSS happen on your webpage but it depends on the creator. What an efficient website would choose is to use external CSS for the basic reason that it will cover all of you webpage, and for a professional website you will need to name each HTML tag accordingly. If you must really have a specific CSS needed then you can use inline but again if you wanted to with the correct name it can be done. The choice depends on the website designer and how they feel they wish to implement their CSS.