TechSmart

Planning, organizing, and visualizing website and web page layout important than coding using HTML.

• The web designer should determine the purpose of the website commerce, entertainment, marketing, information, promotion, press march and education, technical support etc.
• No matter how the site is structured, it is important to keep it cohesive and logical.
• Establishing a consistent look and feel for the site is rather important regardless of the multitude of functions it serves.
• User should feel comfortable moving through and traversing through the paper and not feel lost on the website.
• Even if the website is built in modules, a consistent user interface breed familiarity and generates unanimous feeling. An inconsistent interface may lead to confusion while the user navigates and explores the website.
• A web designer should audience.

2. Website Organization

• Hyperlinks can be provided using attractive graphical objects. Graphical links enhance the appeal of the website.
• The only disadvantage of graphical objects in that they may take a long time to download. Moreover, graphical elements may be suppressed if the use turn off graphics for the browser. The user may not be able to navigate the other pages in this case.
• Keeping navigation graphics simple and reusing the same graphical throughout your web site may allow the navigation graphics to be loaded in the user's cache and the server does not have to download it again for subsequent pages.
• The graphics can be standardized so that they provide predictable navigation cues for the user.
• Even though graphite-based links enhance the feel of the website, text-base links should also be provided in addition to graphic-based links so even if the graphics or icon are not displayed due to any reason the user can navigate through text-based links.

Text-Based navigation versus Graphic-based Navigation

Pictures, logos, and other graphical effects are placed into a document using and the <IMG> tag. Pictures, graphics and multimedia objects enhance the lock and feel of a website.

<body>
<img src="image.img" alt="photo"/>
</body>

Linking using an Image

The image can be hyperlinked to different sections of the website using:

<a href="gallery.html"><img src="photo.jpg"/></a>

       The above code allows image to be linked to gallery page. Here a single image is linked to single web page. However an image can be multi-linked to various pages using <MAP> and <AREA> tags along with <IMG> tag. This called Image Mapping. If the image mapping is created on the client side then the browser will process the same as is called Client-side.
       Image Mapping where an if created on the server side then it is processed b the server and in called a Server-side Image Mapping.

Following is the code for renting client-side Image map

<lmg width=600 height=120 src="/images/logo.gif " alt ="Welcome to Techsmart Publication" USEMAP="# main"

Here the <IMG >tag has "src" attribute to specify the url of the image which is mapped, "alt" attribute carries information of the alternate content and USEMAP specific client-side map name.. Therefore we include <MAP> tag to include the mapping information.

Attributes of CIMG

• SRC - Specifies the URL of the image file 
• ALT - A text-based description of the image content (alternative text).
• WIDTH and HEIGHT -Gives the width and height of the image in pixels 
• ISMAP-identifies the image as being used as a part of a server-side imagemap
•  USE MAP - Not equal to the name of the client-side image map to be use with the image 

Many browser display it as tooltip when mouse is moved over the image 

Image Mapping Tags

<MAP> and<AREA>tag are used to specify mapping information for the image so that it can be multilinked.

Example: 
< MAP NAME="main">
 <AREA SHAPE ="POLY" HREF="product.html" COORDS="35,80,16 8,99.92.145"><AREA SHAPE="CIRCLE" HREF="contact.html" COORDS=" 288306268334 "<AREA SHAPE="DEFAULT" HREF="home.html">
< /MAP >
<MAP> contains HTML tags that define the clickable regions (hot regions) of an image map

Attribute of <MAP>
 NAME - Gives the map information unique name can be referenced by the USEMAP attribute in the <IMG>to that places the image map graphics
<AREA> Defines a hot region in a diet-side image map.

Attributes of <AREA>

• ALT - Provide a text alternative for the hot region in the event that the image does not load defined SHAPE Specifies the shape of the hot region being defined.
• Possible values of SHAPE include: REACT . rectangles CIRCLE - circles POLY-polygons DEFAULT - for any point on the image not part of another hot region
• HREF - Set equal to the URL of the document to associate with the hot region
• HREFLANG. A two-letter language code that specifies the language of the linked document, e.g., MEDIA - Specifies what media device the target URL is best, eg, Printer, speaker, monitor, etc.
• REL - Specifies the relationship between target document and current document
• TARGET - Specifies into which frame to load the linked document 
• TYPE - Specifies the MIME type of the target URL 
• COORDS - Specifies coordinates that define the hot region in different shapes as follows:

      Reet xl, y1, x2, y2 coordinates of the top-left comer and the bottom-right corner of the rectangle)          Circle: x, y, radius (coordinates of the circle x and y which will provide us the center and the radius)
     Poly:x1, y1, x2, y2,...... xn, yn coordinates of the edge of the polygon)

Example of Client-side Image Map

<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG WIDTH=400 HEIGHT=SRC=''/images/logo.gif'''  ALT=''Welcome to techmax
Publication''USEMAP=''#main''>
<MAP NAME=''main''>
<AREA SHAPE=''POLY''HREF=''profile.html''COORDS=''35,80,16 8,99,92,145''>
AREA SHAPE=''CIRCLE''HREF=''feedback.html''COORDS=''288,306,288,334''>
<AREA SHAPE=''DEFAULT''HREF=''index.html''>
</MAP>
</BODY>
</HTML>

Example of Server Side Image map :

<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG WIDTH=400 HEIGHT=100 SRC=''/images/logo.gif'  ALT=''Welcome to Techmax
Publication'' ISMAP>
</BODY>
</HTML>

Redirecting to Another URL

•  A redirect happens when a web page is visited at certain URL, but it changes to a different URL.
•  For e.g a person tries to visit ''techsmartbooks.com/page-a'' in their browser and he/she is redirected to "Techsmartbooks.com/page-b"  instead.
• This is very useful if we want to redirect a certain page to a new location change the URL structure of a site like removing "www." portion of the URL or even redirect the users to entirely another website.
• While designing a website, it is often required to change the location of a web page
•  However, if the page is visited frequently, users may have already linked to it
• Moreover, the search engines have already indexed the page. Therefore best to replace your page with a new page that will redirect the users to the new page
• However, when using this HTML redirect code, make sure that it is not used to trick the Search Engine. There are alternative ways to drive traffic to a desired web site.

<meta HTTP-EQUIV="REFRESH" content=" 2";
url="http://www.techsmartbooks.com/index.html">

• The above HTML redirects the users another web page instantly Content="2; may be changed to the number of seconds the browser should wait before redirecting.

Thanks for visiting

• HTML5 is a descendant from HTML, though it has major similarities with some added features and more tags and simplified coding (better for programmers/web developers).

Key Differences

• Audio and video were not part of previous HTML version specifications; however, both are the integral part of HTML5 specifications.
• Vector graphics is also an integral part of HTML5 such as SVG and canvas while vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.
• In HTML, browser cache can be used as temporary storage. In case of HTML5, application cache, web SQL database, and web storage is used.
• HTML doesn't allow JavaScript to run in web browser, it runs in same thread as browser interface. HTML5 allows JavaScript to run in background that is possible because of JS Web worker API in HTML5.
• HTML works smoothly with all old browsers while most of the modern web browsers have started supporting HTML5 specifications.
• These browsers include: Firefox, Mozilla, Chrome, Opera, Safari, etc.
• The aim of HTML5 is to improve the language by support of latest multimedia while keeping it user friendly and easily readable by humans and consistently understood by computers and devices such as web browsers parser, etc.
• Various other tags are added in HTML5 to enhance the web development and user interaction.

1. HTML 5 Basic Structure

<!DOCTYPE html> 

<html>

 <head>
<meta charset="UTF-8">

 <title>Title of an HTML page </title>

 </head>
<body> 

Contents of the page

</body>

</html>

     In HTML5, the differences is <!DOCTYPE> and <meta charset > declaration.

• The <DOCTYPE> declaration is not an HTML tag. It gives information to the web browser about the version of an HTML pages.
• A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a web-page) with a document type definition (DTD) for example , the formal definition of a particular version of HTML 1.0 - HTML 4.0).
• In earlier version of HTML5 i.e. HTML 4.01, the <!DOCTYPE> declaration refers to a DTD(Document Type Definition), because HTML 4.01 was based on SGML.
• The DTD specifies set of rules for the markup language, so that the web browsers render and interpret the content/information correctly.
• Since, HTML5 is not based on SGML; it does not require a reference to a DTD (Document Type Definition).

3. <Meta charset>

• To understand that we need to first know how internet works. "Internet"-a short acronym of "Inter network connections". Internet is a connection of several machines via cables, wires, wireless and many other peripheral devices.
• The files are transferred over the network from one machine to other using electronic signals. HTML files are created in such way that they can travel over the network using electronic signals.
• The HTML files are hosted on a web server which in a machine kept at remote location which runs 24x7 and keeps rendering the data which is asked by the client machine a client machine means the computer device at the user end).
• Once the request is processed by the web server, HTML data is sent to the requesting client. This client copies all the HTML files from the server and stores it in the computer memory temporarily.
• The web browser (like Chrome, Firefox, Edge) then reads these files and interpret its functionality and display the Information over the browser screen.
• Web browser is application software used to read and interpret the data received in Hyper Text form over the internet.
• The interpretation of the functionality is understood with help of HTML Tags.

2. HTML Element 

• To write HTML document we use a simple Notepad editor, which is readily available with every operating system with different names.
• Like windows users can use "Notepad", Mac users can use "TextEdit" and so further. There is some special editor software also available in the market like "Notepad++" for windows.
• You can use these raw editors and write the HTML Tags and Text and save it with the file extension as "html". e.g.: "myfirstfile.html".
• The operating system recognizes these extensions and assigns the default application software (i.e. Web browser) to open/read the document.