Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB

Size: px

Start display at page:

Download "Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB"

Shannon Maxwell
5 years ago
Views:

1 Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB

2 Fonts and font families Font families are used in web development rather than just the name of one font The web browser looks for the fonts that are installed onto the computer and if it doesn't have (for example) Arial, then it will use the nearest equivalent serif font that it has. Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace Georgia, Times New Roman, Times, serif

3 Using unusual fonts It is important to remember when you are designing a web site that if you use a very unusual font, then the chances are that the people who use the site will not have that font on their computer, and thus will not be able to see the design as you intend. As a solution to this problem many websites now use web fonts that may be linked to at an offsite font location like Google Fonts or Typekit.

4 Colour on the web Colours used on web pages are specified by using hexadecimal colour codes. For example, the colour white is #FFFFFF. You can change the colour of page and section background, text elements, links etc using CSS For now, we will use basic html to change the background colour of a web page. This is the code: <body bgcolor="# "></body> practice.html already includes the <body> tag, so you will modify that tag by adding the code shown in red plus the numeric hex code

5 Images on the web HTML can support three image compression formats (other file formats such as.psd will not work on the web): JPEG which uses the file extension.jpg - it is the most commonly used format for photographs on the web GIF which uses the file extension.gif - it is best used for diagrams and simple images which use blocks of colour PNG which uses the file extension.png - it was designed specifically for web use as a replacement for the GIF format, The html code for inserting images on a page is the same no matter what image format you use.

6 Copyright and images Finding images and video to use in your web project Creative Commons Search Engine

7 Describing images for the visually impaired (and to help search engines) You should add a description of what the image shows for people who cannot see it this is important in terms of making your website accessible It is also useful for search engine optimization In html the alt tag is used. We will return to this when we use Wordpress later in the semester you do not need to know how to do this for the Lab Assignment

8 Image size Images are often the most byte-heavy element of a web page that has to be downloaded Important to optimize images to make the file size as small as possible so that the page renders quickly The browser will rescale images but it is much better to ensure that the natural size of the image is as close as possible to the display size Remember that when using responsive design, the width of the screen being used will trigger a resize or cropping of the image (you need to plan for this)

9 Pixels Web images are measured in pixels Always start with an image that is larger than your intended display size Trying to make an image larger will distort it Here in the Lab you can use MS Paint for simple resizing and cropping of images

10 Crop versus resize Resize: retain all of the original image but make it smaller in size (pixels height / width) - constraining aspect ratio / proportions Crop: remove part of the original image

11 Inserting an image using html Once you have resized or cropped the images you can insert them into the web page This is the code: <img src= /> The path to the image goes between the quotation marks for example <img src= eagle.jpg /> If the image is in the same folder as the html page then this is simply the filename and extension

Domain names. Web forms. Working with images and media on the web. MBA 563 WEEK 5

Domain names. Web forms. Working with images and media on the web. MBA 563 WEEK 5 DOMAIN NAME SELECTION AND REGISTRATION What is a domain name? A domain name is made up of two elements that when put together