XHtml - Extended hyper text mark up language
CSS - Cascading Style Sheets
WYSIWYG - what you see is what you get
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform Resource Locator
HTTP - Hyper Text Transfer Protocol - what gets the information to their screen after they type in the url.
UI - User Interface - Not just a website, an App etc...
UX - Use Experience - you design to consider the user experience, how easy and engaging it is etc.... the experience has to be appropriate to the target audience.
Limitations are governed by this language. Below are some limitations:
Web safe colours
Only 216 colours which work across all devices. When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 "web safe colours" were identified.
These colours were reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.
Red - #FF0000
#FF0
White - #FFFFFF
#FFF
Black - #000000
#000
Red 256 x Blue 256 x Green 256 = 16,777,216
The RGB colour mode is capable of reproducing 16 million different colours.
A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be: rgb(255,0,0)
Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.
Some common font families:
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, "Times new Roman"
You must use quotations or else it will see each word as a separate font.
San Serif
Arial, Helvetica, Tahoma, Geneva etc...
CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.
However using font-face breaches licensing and copyright laws related to specific font foundries.
There are many free font websites which include free license usage for @font-face kits including font squirrel.
Size, Dimension, Pixel Resolution
When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.
800 x 600
1024 x 768 - Work with this size
1920 x 1080
2880 x 1800 (220dpi)
How do you get a website to look good on a computer but still work on the mobile device.
File Format
PNG - Portable Network Graphic
GIF - Graphic Interchange Format
PDF - Portable Document Format
JPEG - Joint Photographic Experts Group
72ppi - massively outdated pixel ratio, computers could produce at 96ppi. Keep it lower firstly because it will take ages to load, and secondly because it will cost bandwidth.
RGB
Lossy
Compressed.
Creating the website Y Frame:
768 x 1024 ppi. Top section take 160pixels off for logo and search bar etc... That leave 608 for the rest of the container.
<html> - from this point onwards we will be coding in html language .
<>
No design goes between the head tags. The only thing that goes there is the other functionalities of the website. The SEO goes in there as well. It is not visible in the design but it is in in the browser.
Anything that you want to show up has to be in between open <body> and close </body>.
Index.html = home
The website shown as running.
Why to use CSS over HTML
On html each page would have to be coded on each individual page. On CSS you can create a style sheet with all the coding, this can then be linked to each individual page. The type, colour and size etc... would then only have to be written once rather than on each individual page.
Generic CSS which links to HTML.
Open curly bracket select font family. semi-colon ends the command.
The CSS file allowed all the code to be written in one page and then inputted as code into the appropriate web pages.
The green background box was placed in the top left corner by default also with a white pixel border. The coding only works from the left side so the box had to be positioned in the -512px to the left. This meant the middle was bang on the left. Changing the top to 0 got rid of the white border. I was then able to change the left side so that it was in the middle.
No comments:
Post a Comment