My MAT 165 blog: October 2012

Sunday, October 28, 2012

#9 : What is a Favicon

Blog Topic # 9 : What is a Favicon

The favicon is the favorite icon, used in our browser favorites and bookmarks. We can also see the favicon in the browser tabs.

It is also known as a shortcut icon, Web site icon, url icon, or bookmark icon, is a file containing one or more^]small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.

Adobe Photoshop does not support the ico format natively but if one use this ICO format plugin, install it and opens the file in PS, it will ask which size image to import. The sizes are 16px X 16px, 32px X 32px and 48px X 48px.

How To create:

1. Create an image 16X16 pixels in size.

2. Save the image as an ICO file (named "favicon.ico”).

3. Upload it to your website. Put it in your root directory and the web

4. browsers that support favicons will apparently locate it eventually.

To insert it in the html

First, change the name of the favicon to "favicon.ico".
Insert the following HTML tag inside the <head> ... </head> section of your web page:

Tuesday, October 9, 2012

Blog Topic # 8 :What is Semantic Markup?

Blog Topic # 8 :What is Semantic Markup?

html markup is considered semantic when standard html tags are used to convey meaning and content structure, not simply to make text look a certain way in a browser.

Semantic markup is a fancy term for common-sense html usage: while writing a headline, we should mark it with a heading tag (<h1>, <h2>). To write basic paragraph text, we need to place the text between paragraph tags (<p>…</p>). To emphasize an important phrase, we need to mark it with strong emphasis (<strong>… </strong>).

The <head> area is where the web page declares its code standards and document type to the display device (web browser, mobile phone, iPod Touch) and where the all-important page title resides. The page head area also can contain links to external style sheets and Javascript code that may be shared by many pages in the site.

The <body> area encompasses all page content and is important for css control of visual styles, programming, and semantic content markup. Areas within the body of the page are usually functionally divided with division (<div>) or span (<span>) tags. For example, most web pages have header, footer, content, and navigation areas, all designated with named <div> tags that can be addressed and visually styled with css.

In order to add our pages to its database, a search engine (such as Google) will send out so-called crawlers, spiders or bots to harvest the text on our site. These bots cannot harvest things that are created by Javascript, or 'see' images (though they do check alt tags). It is important that the website can be found by people who are looking for its content, therefore we must serve content to search engine 'bots' in a way that they can interpret, analyse and identify how relevant it is to the search query.For this to happen, we must bring to the attention of the 'bots' important information about the page using various techniques detailed below :

· Update Frequency

· Title Tag

· Meta Description

· Key Words

· Use Semantic HTML

· Use Links in the Content

· Have a structured or planned navigation

· Have a HTML sitemap

The semantic approach to web markup is a central concept underlying efficient web coding, information architecture, universal usability, search engine visibility, and maximum display flexibility. Web content is accessed using web browsers, mobile computing devices of all kinds, and screen readers. Web content is also read by search engines and other computing systems that extract meaning and context from how the content is marked up in html.

Some designers may want to separate structure from presentation in order to ward off various woes: unmanageability, unusability, professional shame.

If we use semantically meaningless tags like <b> or <i>, we need to think of a properly styled emphasis (<em>) or strong emphasis (<strong>) tag to convey more meaning.