Tuesday, March 20, 2018

Code Academy: Learn HTML and CSS Modules

Students, your newest assignment is to work through the web fundamentals section on code academy. This will reinforce your new code skills and should be much easier for you now that we have a good working knowledge of html. When we complete the web fundamentals we will move on to other units. Watch your achievements grow and track your own progress, code academy makes learning programming languages fun and interactive.

Code Academy Part 1, HTML  and CSS:

  • Log onto codeacademy.com and create an account
  • Edit your profile
  • Click the "Catalog" button and search "By Language" and click on "HTML and CSS"
  • Complete all free sections in the HTML lesson
  • Complete all free sections in the CSS lesson
  • Complete all free sections in the Make a Website lesson
  • Complete all free sections in the Learn SASS lesson
  • Complete all free sections in the Learn Responsive Design lesson
  • Upon completion email me a screenshot of your achievements page to show completion.

Thursday, March 15, 2018

Introduction to Color Theory

Your next assignment is to create a color theory page that shows some color harmony palletes and a short writing assignment.

Part 1 - Short Reading / Writing Assignment:
Read the following link/article and share information from the article to answer the questions below:

Article: Introduction to Color Theory for Web Designers
  1. What is the best practice when dealing with colors and text?
  2. How does the use of contrast effect the viewer?
  3. What are some online tools that web designers can use to create effective color palettes?
On your HTML page, write a short summary of the principals discussed, shown and demonstrated in todays color theory lecture. You can search for images online and research answers also. Try to address all the questions listed below:
  1. What are the 3 primary colors? 
  2. How are secondary colors created? Cite an example 
  3. How are tertiary colors created? Cite an example 
  4. What is the difference between subtractive and additive color models? 
  5. How can color affect our perception? 
  6. How does one color affect another? 
  7. Find an example or show an example of a greyscale image. 
  8. Find an example or show an example of a monotone image. 
  9. Find an example or show an example of an image that uses complimentary color.
  10. Make sure your images are small, no more than 100 pixels wide and are compressed for optimum (small) file size with good image quality
Part 2 - Color Page:
  • Create a new HTML Page, format it with CSS and place it in a folder called it "color theory"
  • In HTML/CSS create an eye catching title for your page called Color Theory
  • Create 2 boxes with the Div tag and make them 100X100 pixels. show 2 complementary colors in these boxes and label them complementary. List the name of the colors, their RGB values or their Hex code.
  • Create 3 boxes with the Div tag and make them 100X100 pixels. show 3 split-complementary colors in these boxes and label them split-complementary. List the name of the colors, their RGB values or their Hex code.
  • Create 3 boxes with the Div tag and make them 100X100  pixels. show 3 analagous colors in these boxes and label them analagous. List the name of the colors, their RGB values or their Hex code.
  • Create 4 boxes with the Div tag and make them 100X100 pixels. show 4 quadrilateral colors in these boxes and label them quadrilateral. List the name of the colors, their RGB values or their Hex code.
  • Add the content from part 1, format for easy reading and upload to our NAS/Server

Have fun!

- Mr.W

Thursday, March 8, 2018

New Assignment: Making Animated Gifs

Hello Students,
Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.

What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frameUnfortunately they can't have sound. You can do some really cool stuff with Gif's. Check out Fluxmachine for inspiration.

What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...
This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS

Gif Assignment:
Part A
  • Create an animated gif, you can use photographs to make an animation, or a short animation with sequential drawings on paper. You can use found images as well or even short video clips. Think of something simple for the first example... just use your imagination and use this opportunity to become familiar with the gif process
  • Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop. Try a google search and you will find many tutorials and different techniques
  • This is just a quick project to get you used to creating gifs, make sure they are short, not too big in file size and loop forever. Use the Save For Web dialog box in Photoshop to adjust the file size and dimensions
  • This Gif should have at least 10 frames of animation

Part B - Gif Animation Challenge:

  • Choose one of the subjects below to animate, BUT CHOOSE WISELY! :
    • A cat with bird wings is flying over a city and shooting lasers out of it's eyes
    • Godzilla is a DJ spinning records on a turntable in a dance club
    • Find a short video clip of a sword fight and replace the swords with Light Sabers
    • A celebrity/politician removes their face to reveal their actual reptilian face
    • A cute animal is using a computer, becomes frustrated and smashes computer
    • Create a seamlessly looping Cinemagraph using still images, video or found film source
    • Create a self portrait, your head opens like a trap door revealing a cat controlling your every move

    How do I Gif?

How to make an animated Gif with Photoshop CS5:
  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers with the layer palette that you will turn into frames of animation. Im using some pictures I took of my dog.

  • Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
  • Open the Animation Palette and click on it's Sub-Menu and then select Make Frames From Layers
  • If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
  • You can now designate individual durations on each frame.
  • Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.

  • Open your Gif file in a web browser to test it. Here's my result:

Previous Student Work Samples:

Tuesday, March 6, 2018

Understanding Graphic File Formats for the Web

Hello Students,
In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images.

Take notes during todays lecture and save them.

File Format Exercise
  1. Right-click on the two images below, save them to your computer and open them in Photoshop
  2. Go to File / Save for Web & Devices
  3. Photoshop has 12 presets, save 1 example of each. Use proper self descriptive file names from low quality to high quality
  4. Compare the results
  5. Repeat step 3 using the VW Bus illustration
  6. Write a short paragraph about your results and answer these questions. Which image has the best quality? Which has the best file size? Which has the best balance of file size and quality and why?
  7. Create a new HTML file, you may use bootstrap or you may create your own CSS for the document.  Create a single HTML page that contains your notes and your assessment of the file formats that you wrote from step 6. Embed the 12 images that you created from low to high quality below your notes and written assessment.

Alias vs Anti-Alias Pixels Explained:
In Photoshop and other bitmap/pixel based programs, Anti-Aliasing is used to give objects a smooth appearance when viewed on screen, it averages the pixel colors to create a smooth transition.

Aliasing is when graphics lack that smoothing, and we can see jagged edges to the object, or "Jaggies".

Contiguous vs Non-Contiguous:
It is important to understand the difference between contiguous and non-contiguous imagery, because different image compression formats are best used for certain types of images.

Contiguous images have subtle color changes from one pixel to another, such as photograph's, paintings, hand drawn sketches or any graphics with a lot of gradients. The JPEG compression codec is best for these kinds of images, that is why most digital camera's save images in the .JPG format.

Non-Contiguous Images have large areas of flat color, shapes and lines. These can be photo's that have been converted to 8-bits, or graphics drawn without anti-aliasing.

Graphic File Formats Explained:
There are a lot of great ways to get confused while using computers - and one of the best is figuring out graphics file formats. As with so many areas of computing, standards for graphic files are great because there are so many to choose from.

They're all different and incompatible, of course, but many programs can load and/or save a wide selection of file formats. By and large, you can tell what kind of file you've got by looking at the suffix - the letters, usually three, after the dot in the filename, otherwise known as the file extension.

Better graphics software actually looks at the file data to determine what kind of file it's dealing with, but Windows software is shamefully deficient in this regard; rename happyface.psd to happyface.jpg and it's likely that the file will become unreadable on any computer.

Below is a list of all (or almost all) graphic file formats... The ones we will use the most are JPG, GIF, PSD, AI and PNG....

ADI - AutoCAD's Device-Independent Binary Plotter Format, a vector format generated by AutoCAD.

AI - Adobe Illustrator's metafile format, which is actually a flavour of Encapsulated Postscript.

AWD - Microsoft Fax At Work format, a black-and-white (one bitplane) format for storing fax images.

BMP - This is the Microsoft Windows bitmap format, also used in OS/2. It's a fairly compact (compression is optional, but usually turned on) format for images up to 24 bit. BMP is the native bitmap format for the Windows environment.

CALS - Computer Aided Acquisition and Logistics Support Raster Format; a longwinded, seldom-seen military-spec two colour document storage format. Used in Pentagon archives, and that sort of thing.

CAM - Casio Camera, the native file format of Casio's QV-series digital cameras.

CGM - Computer Graphics Metafile, an American National Standards Institute/International Standards Organization metafile format for images of pretty much any kind.

CLP - This is the format you get when you save a file from the Windows 3.x Clipboard. It is very, very large, and very very, inefficient - and, what's more, you can only view a CLP file if you're in the same resolution as the person who made it, and are using the same number of colours. CLP is an image format that should never be allowed to touch a disk. Do not use it.

CT - The most popular of the Scitex image formats, Scitex Continuous Tone images are very large and intended for use with Scitex's professional film-printing units, which produce high-grade output for publication.

CUT - The orphaned 256 colour format used by the old Doctor Halo paint program.

DIB - This is an orphaned Windows image format. It stands for Device Independent Bitmap and was part of Microsoft's Great Plan for Windows 95; the DIB code in Win 95 is designed to simplify the creation of display drivers for new video cards by doing most of the grunt work in the operating system instead of in the driver. DIB never really took off.

DLG - Digital Line Graph, a vector format for storing geographical data.

EPS - Encapsulated Postscript is a flavour of Postscript (see below) which can be included in other documents - if your software supports it.

FPX - The FlashPix format, codeveloped by Hewlett-Packard, Kodak, Microsoft and LivePicture Corporation and now an open format administered by the Digital Imaging Group. Kodak uses it in all of their digital cameras from the DC200 onwards. Flashpix's chief claim to fame is that it stores images in multiple resolutions, so a huge, high resolution image can be quickly displayed in miniature on-screen and changes made rapidly to the displayed data only, saving the CPU-grinding full processing for whenever you actually view or output the high resolution version. Of course, this only works if your image editing program supports it, and is not useful for small images. FlashPix images can also be used for Web graphics, because the server only has to send the data being viewed (which seems to the browser like an ordinary JFIF), but since FlashPix doesn't support progressive display like JFIF or GIF or PNG, it hasn't achieved much popularity. FlashPix also has no zero-loss compression option - it either uses no compression at all, and makes a vast file, or uses medium-loss JPEG-type encoding. This makes it a clumsy format for professional use, since lossy compression is a no-no for image editing.

GIF - Graphics Interchange Format (the acronym's officially pronounced "JIF", by decree of the format's creator) is a very efficient, and still quite popular picture format. There are two "flavours" of GIF, the old 87 and the newer 89a. 89a adds several extra features like transparency (so background graphics can "show through" the GIF in places) and animation. GIF animations are a very - some would say excessively - popular form of Web multimedia, because they're small and display on all current graphical browsers without needing a special plug-in or taking up much CPU time.

Unfortunately, GIF pictures can only have 256 colours, or 256 shades of grey. 256 greys is photo quality so GIF is fine for any monochrome image, and 256 colour looks OK for many pictures, but it's no use for professional imaging.

GIF images can also be interlaced, so that you can see a low resolution version of the picture before downloading very much of it. GIF interlacing has four passes, which show one out of every eight lines, then another eighth of the image, then another quarter, then the remaining half. GIF is a data-stream type format, like JFIF, so you can view partially downloaded images whether or not they're interlaced - without interlacing, a 25% downloaded picture gives you the first 25% of the lines, starting at the top.

HRF - Hitachi Raster Format, an obscure, proprietary, one bitplane format used for storing scanner data.

IFF - This is Electronic Arts' Interchange File Format, and is the image format used by Amiga and Atari ST personal computers. There are multiple IFF formats, but by far the most popular are the image and sound file ones. A file with the .IFF suffix may, therefore, be a sound, not a picture - and it might be any one of a number of other types of data. IFF images may also, uncommonly, have the suffix .ILBM, for InterLeaved BitMap, or just .LBM on DOS-based systems.

IFF pictures are not at all efficient, spacewise, but they're fast to display, which was important for poor little Amigas with a 0.7 million instruction per second (MIPS) processor. With current PCs steaming along at hundreds and hundreds of MIPS, this no longer matters at all.

IFF is peculiar in that it has two odd variants - HAM and HAM8. HAM stands for Hold And Modify, and is a technique the original Amiga designers came up with for getting 4096 colours from hardware which, traditionally, can only display 32 at once. HAM8 is the updated version, which displays 262,144 colours on 256 colour hardware. No non-Amiga computer can display HAM images exactly as they're meant to be seen, but some conversion programs can display them as 256 or higher colour images. If your display program isn't smart enough to do this, it'll assume it's loading an ordinary 32 or 256 colour image and give you a distinctive multicoloured porridge on screen. There are some very strange IFF variants which use whole different palettes on every line; pray you never meet one.

All IFF images can be compressed or uncompressed; just about all are compressed. The compression, like the whole format, is built for speed, not efficiency, and so doesn't reduce the size much.

IMG - This is the format used by the old GEM Paint program; it only works in 256 shades of grey.

IMG - See "PIC".

IMJ - A proprietary variant of the JFIF format created by Pegasus Image Corporation.

JBG - Also suffixed JBIG, this is the Joint Bilevel Image Group's data compression and transmission format.
JBG is a way of sending one-bitplane document images so that a low resolution version arrives first, then extra data to "fill in" more and more detail. Not an image format as such - a JBG "file" is just a JBG data stream dumped to disk.

JFIF - The JPEG (Joint Photographic Experts Group) File Interchange Format, commonly called JPEG and with the filename suffix .JPG, can be the most efficient image storage method of all - at a price. First to the name. Everybody might call these images JPEG, but that just describes the type of compression used for the data; it doesn't describe how the compressed data is sorted and stored. Calling JFIF "JPEG" is like calling a Ford Falcon "internal combustion".

The idea of JPEG is that as it compresses the data it throws some of it away - technically, this is called "lossy compression". You can configure how lossy you want your JFIFs to be (well, you can if you're using even a slightly well written JFIF saver); 100% quality gives you almost exactly the same result as the original picture but also gives you a gigantic, uncompressible file. 10% quality takes up much less space but looks dodgy. You have to strike a balance.

JFIF can store up to 24 bit colour, so it's suitable for professional use, and it can do interlaced display like GIF (called "progressive" JFIF), which along with its small file sizes makes it the standard format for Web graphics. Like GIF, JFIF is a data-stream format - you can view images before you've got all of the data. Also like GIF, JFIF supports interlacing.

The JFIF format also supports CMYK (process colour - Cyan, Magenta, Yellow and blacK in a subtractive colour model, as against the additive Red, Green and Blue more commonly used) images, which makes it suitable for use in publishing applications. CMYK this support was added in a later version of the standard, though. This means that quite a few JFIF display applications, including Web browsers, do peculiar things when fed CMYK images. There's no reason to use CMYK JFIFs unless you're sending the image to a CMYK output device, which a monitor definitely isn't. Usually, CMYK ones get through because someone's converted a CMYK image of some other format, like TIFF, without changing the colour model.

JPG - See JFIF and SPF.

LBM - See IFF.

MacPaint (3k) - Usually suffixed .MAC, this is the format used by the ancient original black and white Macintosh paint program. Two colours only, 576x720 resolution only, thankfully rare.

MNG - The proposed Multiple Network Graphics (pronounced "ming") format is a multi-image extension of the existing PNG format - or it will be, if it ever makes it out of the design stage.

MSP - Microsoft Paint was the early PC answer to MacPaint, and its format is just as boring. Two colours only.

PCC - see PCX.

PCD - Kodak's PhotoCD was going to set the world alight, with happy snappers having their film scanned and the high-resolution images written to CD, to access via PC or special PhotoCD players. Amazingly, it turned out that nobody was very interested in viewing their photos on their TV, and PhotoCD flopped miserably in the consumer market. It survives as a somewhat popular professional image storage format; a genuine PhotoCD has a particular directory structure containing the images, stored in five resolutions. An ordinary PCD file can be read by any application that can read the format, but unless it's on a CD with the right structure, a PhotoCD player won't recognise it.

The PhotoCD storage process is proprietary to Kodak, who no longer sell the software to make full multi-resolution images.

PCX - The ZSoft Paint format, occasionally suffixed .PCC, is ancient but still fairly widely used, simply because everybody understands it. There are three common versions, 0, 2 and 5; 0 is the original two colour one (small but not useful), 2 only does 16 colours and is hence also of little interest to owners of rather old video cards, and 5 does 24 bit. All are large for what they do, but fast to load on elderly computers. PCX is the IBM equivalent of Amiga IFF. The size listed is for v5, at full 24 bit; v2 scored 216k and v0 48.1k.

PIC - A few proprietary (one company makes software that supports them, and nobody else does) image formats use this suffix. They are not interchangeable. Some programmers need a good slapping. PIC is most likely to be the 256 colour format of the old PC Paint program, but it might also be a Micrografx Draw! vector file, a Lotus vector file, a Pegasus Imaging Corporation image file or an image file for General Parametrics' Video Show Film Recorder.

PICT - Pict is the all-in-one Apple Quickdraw metaformat. It can include bitmapped or vector images, and can use different compression schemes.

PNG - The Portable Network Graphics format, pronounced "ping", was created as a free replacement for GIF, whose LZW compression is owned by Unisys and which can't be included in commercial software without paying license fees to the owners. It handles 1 to 48 bit images, and is a lossless, well-compressed format like GIF. It still isn't very popular, though.

PS - Adobe Systems' Postscript isn't an image format, per se - it's a page description language, originally conceived so computers could send very accurate page descriptions to the then-new high resolution laser printers. You can save black and white or even colour pictures as Postscript, but you'll end up with a very large file. Postscript is not a very efficient format, but its advantage is it's all plain text - you can modify a Postscript file with any text editor, if you know what you're doing.

PSD - Adobe Photoshop's native format, which stores all of its layer and selection and miscellaneous other image data.

RAS - This is SUN Raster format, the default image format for monster SUN workstations. Only lighhtly compressed and so a rather large format, but it supports up to 36 bit images.

RAW - This may be a Photoshop RAW file, which is a PSD file with no identifying header. Or it may be a minimally formatted image data dump - see PIC.

RGB - See "PIC".

RIX - The orphaned bitmap format of the old DOS ColoRIX paint program.

RLE - This is an antique CompuServe or Windows Run Length Encoded compressed image format, which only support 256 x 192 black and white images.

RTF - Microsoft's Rich Text Format, which is normally used as a well-understood cross-platform word processing document format, but which can store pictures as well as text. As image storage formats go, though, this one's as bloated as Postscript.

SPF - SPIFF, Still Picture Interchange File Format, the "official" International Standards Organisation Joint Photographic Experts Group (ISO JPEG) image format defined in the recent Part 3 extensions to the JPEG standard. SPIFF offers more features than the current JPEG standard and is backwards compatible (a JFIF decoder can understand most SPIFF images), but has not yet achieved much popularity. SPIFF files may also be suffixed .JPG.

TGA - The real name for this format is just plain "TGA" or "Truevision File Format", but a lot of people call it "Targa", after the Truevision video card that first used it. There's a lot of this name confusion in image file formats. It supports 1 to 32 bit images and professional features like an alpha (mask) channel, gamma settings and a built-in thumbnail image.

TIF - TIFF (to give the full acronym) stands for Tag Image File Format; many people say Tagged for the first word, which is technically incorrect but minimally important. TIFF was a large, unwieldy, 24 bit format until version 6 came out, which supported compression and made it less painful. Mind you, the fact that its compression was somewhat broken and might or might not be compatible with different programs on different computers somewhat reduced the bonus, and the further fact that the compression is LZW and thus owned and licensed out by Unisys (see GIF) is another pain. TIFF is, nonetheless, a very popular professional graphics format.

WMF - This is Windows Metafile format, which is an intermediate vector format for Windows programs to use when interchanging data and, generally speaking, should never be seen anywhere else.

WPG - This is the WordPerfect metafile format, used by WordPerfect software on various platforms. It supports bitmapped, vector and Encapsulated Postscript data.

Wednesday, February 28, 2018

Learning Bootstrap: Bootstrap Tutorial and Project

Hello Students,
Your next assignment is to work through the Bootstrap tutorial on W3Schools.com and create a website using the bootstrap platform. Follow the tutorial, or follow along with the class to create an example, then create a compelling website utilizing the bootstrap framework. Bootstrap is the most popular HTML, CSS and Javascript framework being used to develop responsive and mobile friendly websites. Bootstrap is completely free and open source!

Our own schsdigitalmedia.com website was created using the bootstrap frame work to provide flexibility and ease of use for users from mobile devices, tablets, etc.

Assignment: After working through the bootstrap tutorial below, create a single/multi page website about a subject of your choice, you could create a website for a class project, document something you created or participated in, etc. Think about how this project could be used to your benefit (book report, etc). You can document your favorite hobby, band, sports, celebrity, movie, video game, etc.

Bootstrap Page Assignment Specs:
  • Single scrolling or multiple page website, subject is your choice
  • Website should be complete with information, photos or gif's, content (150 words minimum), links, resources etc
  • Website must be built with bootstrap frame work, be free of glitches or errors and function correctly when uploaded to server
  • Website must contain menu at top of page for navigation
  • Website must contain 1 external link
  • Website must contain credit with link to your email at bottom of page or contained in an "about" or "contact" section (this page created by "insert name") with email hot-linked
  • Website must be free of errors or bugs, broken links etc...
  • Final website displays good use of typography, color palettes and shows understanding of the elements and principles of design

Tutorial: Read through the bootstrap tutorial... try out each step and create your own gallery page that demonstrates the following bootstrap elements:

Download and Modify Bootstrap to Customize your Template:
Want to change the colors of your template? Download bootstrap and re-link your html file to the downloaded bootstrap CSS file.  Click the following link and un-zip the contents into your project folder. Change the bootstrap link code to embed the local bootstrap resource instead of using the online resource.

Link: Download Bootstrap

Wednesday, February 21, 2018

Advancing Your Web Skills: Layout and Responsive Design

Hello Students,
Our newest assignment is to create a progression of small web pages that demonstrate layout, responsiveness and then utilize W3C CSS to enhance the responsiveness of your page, and finally complete a single page utilizing all the W3C CSS tools to make a page with layout that is responsive, meaning it can be viewed on many different screen sizes

Work with the class, or read and work independently and develop 4 single pages, demonstrating layout, responsiveness, responsiveness with layout, and finally a full W3C CSS page:

1: Layout with HTML and CSS: W3Schools - HTML Layout

This page utilizes HTML and CSS to layout elements using the Header, Nav, Aside,  Section and Footer classes

2: Responsiveness with HTML and CSS: W3Schools - Responsive Design

This sample site uses simple block classes to "stack" elements when the screen is resized

3: Responsive Page Enhanced With W3C.CSS: W3C.CSS

Building off the previous page the block classes are replaced with the w3-container, w3-row-padding and w3-third classes for enhanced responsiveness

4: Full W3C.CSS Layout and Responsive Page: W3C.CSS Sample

This page utilizes many of the W3C.CSS features such as Header, navbar, drop down, card and container W3C.CSS features.

When these pages are complete upload them to your server space for testing or turn in via USB drive.

- Mr.W

Tuesday, February 20, 2018

Getting Closer to Validation: Metadata and Character Encoding

Character Encoding for Web Pages: HTTP file headers

Validation Assignment:

Details About Character Encoding and Validation:

Hypertext Transfer Protocol (HTTP) is the language used by a Web server and a Web browser to communicate with each other.

Every time a Web server serves a page to the browser, it adds an invisible "HTTP response header" to the file. This file header (not to be confused with the <head> section of a document) is metadata, which means it contains information about the file that it is serving to the browser. Many servers include character encoding (the character set used in the document) in this header. In other words, the server tells the browser how the document is encoded. (But, what the server says about the encoding may not be how the documents it serves are actually encoded; this is determined by your text editor when it saves a file.)

Most servers will say the files it serves are either ISO-8859-1 (Western European Latin characters) or the newer Unicode standard, UTF-8. In documents written in English there is little difference between these two standards; most noticeable differences will be in special punctuation. But if you wish to have your Web page display more than Western European languages (perhaps a page that mixes English with Chinese, for example), you cannot use ISO-8859-1; UTF-8 would be the way to go. At any rate, UTF-8 is the current standard for Web pages.

Browsers (also called "user agents") use an "HTTP request header" when requesting a file from the server. In this request header the browser identifies itself with a "user agent string." By keeping track of these user agent strings, Web traffic analysis software can create logs showing information on what percentage of users come to a site with Firefox, Safari, or Internet Explorer, for example.
Thecharacterencodingmeta tag

Many servers, but not all, indicate the character encoding in the HTTP response header. But whether or not your pages are on a server that indicates the encoding, you should do so in the document itself, by adding the appropriate character encoding meta tag to the head section. Assuming the document was encoded in UTF-8, and is using HTML 5, you simply need to add this to the <head> section:

<meta charset="utf-8">

Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the<head> section.

The HTML validator needs to know which character set the document is encoded in so it can properly evaluate it. So if your pages are on a server that does not indicate the encoding, it is necessary to add the character encoding meta tag to your HTML or the validator may not be able to properly evaluate the page. Additionally, if your pages are not being served by a Web server (they are being viewed locally, or perhaps they are to be burned onto a CD) the browser will need the character encoding meta tag in your HTML to properly display the page.

In the case where the server indicates the encoding, and you also indicate the encoding with the character encoding meta tag, there is no problem if your tag and the file header from the server indicate the same encoding. But if the server says the encoding is, for example, ISO-8859-1, and your meta tag says UTF-8, the validator will give you a "character encoding mismatch" error. In such a situation the validator assumes the server's encoding is the one to use. In other words, in the event of a conflict between your tag and the server, the server overrides your character encoding meta tag.

How to see a server’s character encoding setting:

To see what your server says about the pages it is serving, you need a way to see its invisible file response header. A tool such as Rex Swain's HTTP Viewer will allow you to see this, including the character encoding, if any is indicated. Go there and enter a URL for a server that you wish to check then look at the "Receiving header."

If you see something like:
then you know the server says the documents it is serving are encoded as UTF-8.

If you see something like:
then you know the server says the documents it is serving are encoded as ISO-8859-1.

If you see something like:
then your server is not indicating the character encoding.

Remember that if your server does not indicate the character encoding, it is even more important that your pages contain the character encoding meta tag. This will give the browser the information it needs to properly render your page (otherwise it will have to guess at the encoding, and it may guess wrong), and it will give the HTML validator the information it needs to properly evaluate your page.
Keepeverythingin synch

To make sure the browser renders your page as you intend (so that special characters such as curly quotes, apostrophes, accented characters, dashes, etc. display properly), and to enable the HTML validator to work, it is important that the server’s character encoding setting, your page’s character encoding meta tag, and the actual character encoding of the document all match.

It is recommneded that Web pages use the UTF-8 encoding. To ensure that your pages are actually encoded as UTF-8, your text editor must be configured to save your pages as UTF-8

Setting Komodo Preferences for UTF-8 / No BOM:

Launch Komodo and go to File/Preferences/Internationalization.
Uncheck the top option box to find the UTF-8 option in the pulldown menu
Change this second language-specific default encoding option to UTF-8.
Leave Signature BOM unchecked.