Advantages and disadvantages of CSS writing styles

Advantages and disadvantages of CSS writing styles

When writing CSS, there are 3 styles of scripting; inline, internal and external. These scripting styles have advantages and disadvantages, which can be used in a specific scenario.

Inline

Inline scripting, allow is a form allow a web developers, to change the presentation of a specific html tag, such as “<p></p>” Using inline scripting allow the web developer to change the properties of this tag.

Advantages

Using inline scripting is not recommended when creating a website with multiple web pages, but does have advantages. Firstly inline scripting, is good for testing codes. Using inline to test is very efficient as it quick and easy to implement and remove.

Disadvantage

The problem with using inline is; it’s time consuming when modifying the website, with a varity of html elements. This is because, you are unable to change all the elements at a single time, instead you have to check every individual tag, and change that manually, which can be time consuming for complicated website such as amazon, eBay.

Internal

Internal CSS also known as imbedded, is a where the code, is stored, near the top of webpage, in the “head” section, where a new tag called “style” is created.

Advantages

When making changes to a website, using internal is quick than inline, as it only requires you change few a line of codes, to affect the webpage. For example if a web developer needed to makes changes to all the “<H1></H1>” on a single webpage, they can do that very simply by change the style code for the “h1”.

Disadvantage

This disadvantage of using internal, is it’s slower that external css. When it comes to making changes internal is slow than external, this is because when making changes, a web developer has to change the code for every page, this can time consuming when modifying a website, with several pages

External

External CSS is code that is stored of an external file with the extension .css that is linked to a website.

 Advantage

By using external CSS, the webpage looks cleaner, which makes viewing code friendlier for developers. Secondly when making modifications, using external CSS is the fastest, because it is used to make changes across a website, and you are only required to do it once, for the change to happen.

Disadvantage

Using external, can make changes quicker, however using external CSS, the loading of website increases, as devices have to download CSS file, as well, to view the website; if the CSS file is not downloaded, the webpage could look incorrect and unusable. Secondly with loading times increased, the can be slow especially on mobile devices, and users will be looking for other site, that can load information quicker.

HTML and CSS

Html and CSS

HTML and CSS are key elements that help make and shape websites, and web content that we see today. In this blog, you will understand the difference between both and how they work together.

HTML-Hypertext mark-up language

HTML is the language used to code websites, and what web browsers can understand. They effectively translate HTML to words and pictures  We are currently using HTML5, which has features such as easy implementation of email field, lists. It also has local storage, which improves the loading the time of a website that has been previously opened. Finally html is allow better optimisation for mobile web browsers

HTML is the name given to the script behind the web page. All web pages, start and end with “<html> </html>”, and can be created in simple programs such as Notepad. Other examples include href links- href, <p>  </p>,- paragraph , <h1> <h1/>- headings.

<h1>  Boy killed and woman injured in house fire </marquee> </h1>

<p>Firefighters were called to a home on Platt Avenue, Sandbach, at 2.50am on Sunday where they found a woman outside with serious burns.

The 35-year-old, believed to be the boy's mother, was said to have been screaming after the boy was left inside the burning house.

The eight-year-old was rescued from the upstairs of the property, but died at around 5am.

The woman was taken to Leighton Hospital, Crewe, in a stable condition.

The pair has been named in reports as Kelly-Ann Carter and Lucas Carter.

One neighbour described how he smashed a window in an attempt to save the boy, before being overcome by the fire.

Cheshire Fire and Rescue Service said four crews were sent to the property and extinguished the fire. 

Police have opened an investigation into the blaze.

A spokesperson for Cheshire Constabulary said: "Our thoughts at the current time are with the family of the boy and we request for their privacy to be respected at this difficult time. 

</p>

</body> 

The example above shows the HTML coding for a website, which consist of <p> tags which are used to layout paragraphs and, <h1> tags which are heading given to a piece of text. With the <h>, there are 6 <h> tags, which are differentiate from each other, e.g. <h1>,<h2> etc.

This image shows the CSS code of the website. CSS allows you to change the properties of html elements; for example, with CSS you are able to change the properties of individual  tags e.g size, font, background. With CSS you can make a website more presentable, and keep the code clean by having it on a separate ".css" file and linking the website to it.

CSS- Cascading style sheets

CSS is a language that is used to present a website and how it looks. This includes dimensions, and layouts of web pages. With CSS web developers are able to create website that can be suited for different devices such as phone and tablets. The purpose of CSS is to allow web developers, to get more precise measurements of websites and web based elements such as; position of images position of text, font and colour.

    

How does HTML and CSS work together?

HTML and CSS are both vital elements when creating websites. HTML allows web developers to create basic layout of a web page and defines, where tags, and paragraphs appear on the page e.g. above or below picture.

CSS however allow web developers more control of the website, by being able to change the properties of individual tags.By adding colour  and changing page margins, which can make a web page more interactive. In conclusion HTML is the main coding for the website, and CSS is used to change the properties of the website.

http://www.w3schools.com/html/html_intro.asp

http://www.yourhtmlsource.com/starthere/whatishtml.html

http://www.w3schools.com/css/css_intro.asp

https://www.w3.org/standards/webdesign/htmlcss

Assignment 3

Assignment3

In this  assignment, I will be creating a website based on a TV show I am currently watching. My website is about the TV show called The Office (US). In the website I will give information about the TV show and and provide information about the main 3 characters in the show: Michael Scott, Jim Halpert, Dwight Shrute. My website will also include an e-commerce element, where people are able to buy merchandise dedicated to the TV show. The website is designed for everybody, that includes people have just started watching the TV, people who would like to watch it. The website is suitable for all ages as it uses simple words and large pictures.

Colour Sheme

This is the colour scheme I have chosen to use throughout the website.

•  yellow- for header text, makes it stand out against black background
• Green- I used for navigation bar
• Black- I have used black font colour throughout the website, as it goes well with background
• white- White I used for the container,
• Blue- I have used blue for the background of the website, as black text is clearly legible against it.

Fonts

The font I used is Pangolin from google fonts which I embedded.

Logo        

This is my website logo I have created using  Adobe Illustrator. The logo is based on the company that the characters work at. The logo is black and white, like paper as the company is a paper company.

Interactivity

Throughout the website  have i have implemented various forms of interactivity to keep the user engaged while browsing the website. I have included working links, in the navigation bar. I have also used radio buttons and combo box on the checkout page to make data entry efficient.

Images I intend  on using on my website

Wire frames and sitemap

this is my design for my page on Dwight Shrute. The top part of the page is a picture of the character, with a description of the character.

This will be my first page of my website, which will contain information about the show and a picture of the cast

This is my 3rd page, which will contain an image and a small description.

This is my merchandise page, which contains an image, a description and a button that will take you the checkout page.

This will be my second page, which follows the same layout as the other webpages

This is my checkout page, which contains a forum for placing an order. It will contain labels,text boxes,radio buttons and a combo box.

This is my sitemap, which shows which pages are accessible from the homepage.

JavaScript and jQuery

In website development, developers use JavaScript and JQuery to improve their website by adding functionality. In this document I will describe the advantage of using JavaScript and JQuery in website development, and how it can reduce, the build time of a website

JavaScript

JavaScript is a scripting language. JavaScript works in conjunction with HTML to make websites,
  HTML content and CSS more interactive . Although JavaScript is a coding language, it is classified as a scripting language due to the fact, it has limitations of what it can perform. This is because it is a security risk, where coders could create malicious code, to affect your computer such as erase the hard drive.JavaScript is an open source client side language that has various functions in HTML, such as creating high responsive interfaces, and is compatible with all browsers. JavaScript can be used for validation on forms and data entry, e.g. checking all field are filled in. which speeds up loading times on a website, and reduces bandwidth use on the server; this works by checking the information on the page, before sending it to the server. If JavaScript is was not used, the server would be checking the information and sending the page back to user if any entries are incorrect, which uses up bandwidth. and slows loading times.
This can be useful on e-commerce website such as Amazon and Ebay, as it be used to update information in real time e.g. deleting items in baskets. JavaScript consists of variables and parameters to perform certain actions such as calculations from user entry and store store user entry for use on a different page.Apart from performing actions, JavaScript is mostly used for adding interactivity. This includes: buttons,rollovers, carousel.

The image above shows an example of JavaScript for a simple addition. It uses variables to assign values. For example the code is written under a script tag. It uses "var" to set variables, in the example above the variables are "5" and "6".When the script is run the values for "x" and "y" will be added to give you the z, in this case "5+6=11"

JQuery

jQuery is a library of JavaScript code, that is open source. This library is very useful for developers as it can speed up time of creating java script code, because they can use code that is in the library. For example if a developer wanted to add code for a resize able box, they can add the code from the library, instead of writing it from scratch. JQuery is versatile as it contains code for various purposes such as, HTML animating,  optimizing file upload through drag&drop. JQuery is useful when working with JavaScript, as  the developer is only required to write a few lines of code, that link the function to the external sheet, compared to writing a lot of lines for a function. Because this open source, developers can use them in any way without getting in trouble.

The image above is an example of how jQuery is implemented in HTML. The source for the function is linked to a server, where the JavaScript code is stored. Using jQuery is much simpler, as you are only required to have the page link of where it's stored. From the code, you can, see that the code in written under a script tag, and uses a click function. When you click on the paragraph, the following text will be hidden.





Refrences

https://www.w3schools.com/jquery/jquery_intro.asp

http://study.com/academy/lesson/what-is-javascript-function-uses-quiz.html
https://www.w3schools.com/jquery/jquery_selectors.asp
http://study.com/academy/lesson/what-is-javascript-function-uses-quiz.html