WEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34

Size: px

Start display at page:

Download "WEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34"

Antony Owen
5 years ago
Views:

1 WEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34

2 OUTCOME 1 Knowledge requirements Web page construction methods File formats Terminology html type Web safe colours

3 WEB PAGE CONSTRUCTION METHODS HTML (Hyper Text Mark-up Language) is computer code and is used to instruct software (web browsers) how to read and display the intended design for the web page including formatting, hyperlinks, images and other content. The current standard (version) of HTML is HTML 5 You can create HTML in any text editor although there are specific HTML editors and apps that can help by automatically putting in parts of the code so that you do not have to type it all. Coding your HTML by hand (rather than using an application where no HTML knowledge is required) is the best way to ensure your code meets certain standards.

4 WEB PAGE CONSTRUCTION METHODS The standards are agreed by The Internet Society and various bodies work on new standards from within the industry. The Internet Society has various major world organisations as members that drive forward any changes and agreed future developments. Standards are required to ensure the internet does not become a mass of chaos with no-one able to view very much within their web browsers. Web pages can be developed using many different applications, some are even online now. WYSIWYG (What You See Is What You Get) design software packages are available but the code would need to be cleaned and some applications require specialist software on the web hosting server. Another down side could be the lack of standardised code for the popular web browsers as well as causing difficulty with other coding being added. See the next slide for an example html code

5 HTML CODE EXAMPLE An example of a basic web page using html coding, noting the use of tags opening and closing: <html> <head> <title>appearing in the web browser title bar</title> </head> <body> This text will appear in the web browser as the web page. <b>formatting tags are required.</b> <p>this would be a new paragraph due to the formatting tag. A lot of formatting is kept within CSS files that are Cascading Style Sheets. </p> </body> </html>

6 WEB PAGE CONSTRUCTION METHODS Web page layouts are usually constructed using: Divs and cascading style sheets (css) Tables Frames / iframes Today the standard method for constructing your layout is done by using div tags in your HTML code for positioning various areas / elements of your page and css for the formatting (how it looks). Open a few different web pages. Your lecturer will guide you to viewing the code to enable you to see how the page is built using html and other languages. Don t be disturbed by the amount of code or the complex nature of some pages you will have a look at the building blocks. Your learning will continue to understand more of that code. Take a screenshot of at least two different web pages and their code. Save the file containing the screenshots and the web addresses as a Word document named: samplecode

7 FILE FORMATS File formats used in web design:.htm /.html.css.jpg.gif.png.bmp.svg.swf.flv Use the internet to research web and briefly write out where these formats are used and why, also find out about image maps, rollovers, hyperlinks (textual). Discuss your findings with your peers and lecturer. Ensure you are aware of the main relationship with web pages and how these files impact upon web design. Investigate more if you need more information. Type up your research in your own words into a Word document and save with the file name of: fileformats

8 TRY HTML YOURSELF Try a basic web page yourself and start to add in some formatting tags as directed by your lecturer. Manually code the web page using Notepad without the help of any other application to get you knowledgeable about the code and to have fun editing to see the instantaneous result. Save the file using the correct naming convention (you should know from a previous task but your lecturer will keep you right). View the web page in your web browser. Change it again. Have fun!

9 TERMINOLOGY Your lecturer will give you some notes relating to this part. Meanwhile, investigate the use of <alt> tags and the legal implications. Type up your findings within a Word document and save the file naming it: alt

10 HTML TYPE Use of popularly installed fonts should give a good degree of reliability in your site being displayed on any system that is used to visit it. Web safe fonts (click to open page) (Using word to type out your answer) what is the difference between a serif and a sans-serif font. Choose an example of each and format some text on your word document to show these fonts. Save the file as a Word document named: fonts

11 COMMON FONTS The most common fonts (type) for most computers are: Arial Courier New Georgia Tahoma Times New Roman Trebuchet MS Verdana Font families (groups) of fonts will assist web browsers on differing platforms to hopefully provide the closest to the intended displayed text.

12 WEB SAFE COLOURS This is a 216 colour palette that should display colours as intended on any system/platform that may be used to visit a site. Not so long ago, monitors and graphics cards could only accommodate 216 colours this was an improvement upon the basic 16 colours available in earlier internet and web history. Colours can be defined best within code with their hexadecimal value. An example of hexadecimal is: White #FFFFFF and Black is # based upon two characters for each of the RGB (Red, Green and Blue) being the primary colours for monitor display (VDU Visual Display Unit). Colours can be used for backgrounds, text and other components of web pages.

13 WEB SAFE COLOURS TASKS Using the internet, find and note the name of a website containing a web-safe colour table. Remember that you need to know the hexadecimal value of these colours so a colour chart giving you both the colour and the value would be most useful. You could screenshot the web-safe colour table to refer. Save the file containing the details (possibly with the screenshot) and hyperlink to the website as a Word document named: colours Create a simple web page and try some of these colours on the background and text your lecturer will guide you to building a basic page that will provide sufficient code to allow your task to be completed. Save the file with the correct file name and type for a web page.

Lab Introduction to Cascading Style Sheets

Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,