<span>Page</span>
). Then inside the span tag create a class (called red). A class is better for this feature since it is reusable. In the CSS create a selector for this class (this is a dot followed by the class name eg .red). Then inside the block change the colour to red. Since this is a specific style you should place this at the bottom of your style sheet after you have created the general styles. Throughout your site there is often a need to create these small styles that apply to just a small part of the page, this is the way to do this.:hover
which can be applied directly after any valid selector. Transition sets up the time the effect will take while transform sets up the exact change which will occur. If you go to caniuse you will note that this feature only works in the latest browsers. It is still in BETA which means you need to use special commands to get it to work in Safari and Chrome. The effect of this is that you need to write the whole command for each browser. The browser will use the commands that it knows and will ignore the others. There is another way to do animations is CSS using @keyframe
but this is more complex. @media
) followed by the device type that the query will change (all for all types, or screen for just the screen, printer for just the printer etc) and finally any special conditions such as width, orientation etc. The command has a great number of option to handle all the different types of devices and their attributes. Your lecturer has sample code which will turn the background blue when you resize the screen. display: flex
in a block level element. Everything inside this is now controlled by Flexbox, which by default creates a row block. All the elements inside the Flexbox will now adjust their size to each other. There are also lots of controls on this, see CSS Tricks for an excellent guide. Flexbox is particularly good for displaying navigation since there is no need to float elements to get them inline. The Internet is the first thing that humanity has built that humanity doesn't understand, the largest experiment in anarchy that we have ever had. Eric Schmidt, executive chairman of Google, 1997
A complete web page has content, form and user interaction. The HTML provides the content, CSS provides the form and Javascript provides the user interaction. It is best practise to place these in separate files, this makes it easier to maintain. Some large web sites (like Google) stick to this principle during development but add a deployment phase where the page is optimised.
All the content of the page needs to be marked up with Semantic HTML. Words carry meaning, not just the meaning of the words themselves but in the context that they are used. Think of how many ways you can say "Oh Yeah" and how those words can change meaning depending on how it is said. Most of the meaning comes from the context, the way it is said and any facial expressions that go with the words. The words themselves carry only a small part of the meaning.
On a web page the only way to provide that context is through the markup. When early web developers started working on Semantic markup the usual way was to wrap code in divs with specific ids. HTML5 introduced a number of elements which are specifically Semantic and this process will continue. HTML5 also allows developers to create their own markup elements. There is also research into making web page content searchable, sometimes called data mining. This is a huge area of interest for business (especially marketing firms). Another goal is developing an encyclopedia that gathers its information from web pages. Wolfram Alpha is an example of this concept.
Early CSS was static, it could not support changing screen sizes. Many developers turned to Javascript to provide this. The problem with this approach is that Javascript is slow since it operates on the CPU. Browsers can push their screen rendering off to the graphics card so can produce very fast screen displays. The newer CSS is now becoming more dynamic and takes advantage of this hardware optimisation. This means that developers are now producing dynamic web pages using just CSS.
CSS is now developing rapidly and new features are appearing on a regular basis. Many of these new features introduce dynamic effects, such as animations and 3D transformations. At the same time web pages now need to work smoothly on small phones and large desktops using exactly the same code base. This is leading to simpler, less cluttered designs of web pages so that they work well across all platforms. There are a number of libraries which provide pre-coded CSS which is ready to be applied to your website. These include: Bootstrap (Twitter's CSS library) or Compass, and languages which extend CSS such as less and JQuery Mobile. Some developers love to use these since they save development time, others prefer to create their own pages since all library pages tend to look the same.
Javascript is a complete programming language. However its initial development was rushed so it contains many serious programming flaws. This lead to most serious programmer not using Javascript in it early development. In addition CSS was also poor and web developers had to use Javascript to produce pleasing display effects. All this has meant that much of the early Javascipt code that you find on the internet is poorly done and concentrates solely of screen effects.
The rise of dynamic CSS and Ajax has rekindled interest in Javascript from serious programmers. Many Javascript libraries now exist (like Jquery, Node.js and AngularJS) where Javascript can be used without using the bad features. The focus of Javascript has now moved away from a means of enhancing screen display to now a way to develop web applications that have the full functionality of native applications. Already many applications that you place on your mobile devices are simply web pages. In Session 7 we will show you how this can occur.
Usability is a measure of the total user experience for users of your site. The HTML, CSS and Javascript combine to form part of that experience. However the greatest factor is your design decisions. This is a huge and growing area, not just related to web site but includes the design decisions for everything that humans interact with. The Commonwealth government sets out guidelines for their technologies, as does the US government.
For Web sites the landmark work has been done by Steve Krug in his book Don't Make Me Think. There are plenty of resources on the net but here are a few simple principles: