Basic HTML Tags

Basic tags:

• <h1> <h2> <h3> <h4> <h5> <h6> are heading tags, they help to display the text as header.
• <p>:- This tag is used to write the content in paragraph format.
• <br> :- This tag causes a single line break, Generally it is kept at the end of each line.
• <table> - This tag is used to create table in the webpage.
• <tr> - it specifies the no of rows in a table.
• <td> -  It specifies  the number of Data or division/columns will take place in a single row.
• <b>,<strong> - Displays the text in bold.
• <i> - Displays the text in italics.
• <strike> - Displays the text with line strike through its center.
• <text align=”___”> This tag helps to align the text left, right, center, justify.
• <font> - Helps to change the Font face, color, size, weight.
• <hr>- Displays horizontal line on Web Browser.
• <!----> It is used to display comment in html page for user while reading code.
• <img src=”abc.jpg”> It is used to display image on the webpage.

Intro to HTML

HTML

• HTML  stands for Hypertext Markup Language.
• Hypertext is simply a piece of text that works as a link.
• Markup Language is a language of writing Layout information within the document.
• HTML is a plain text file, it contains rich text ie text with tags.
• These tags are enclosed within angular brackets.
• For example <html> is a start tag and </html> is a end tag.
• Any tag mentioned with <> brackets denotes the start and </> denotes the end.

 Document Structure: -

An HTML document consist of three main parts

DOCTYPE declaration.

• <head> section.
• <body> section.

The basic structure would resemble as follow:

<!DOCTYPE....>

   <html>

      <head>

            <title> Google </title>

      </head>

            <body>

                    .......

            </body>

   </html>

Introduction to HTML

Hi Friends,

Today we will start with HTML, but before that I would like to tell you few basic things.

What is a Web Browser ?

Web Browser is a kind o f Software which is basically used to use resources on the web.

Over the networks two computers communicate with each other, when request is made by one computer then that computer is termed as Client and the one who serves the request is termed as Server.

The web browsers can browse the information on the server and hence is the name.

Various Web Browsers that are commonly used are:

• Internet Explorer.
• Mozilla Firefox.
• Netscape Navigator.
• Opera.
• Google Chrome.
• Safari.

Now when we develop our own website care has to be taken, that it should be Browser Compatible.

Web Server: -

It is a Server where web browser submits its request which is desired by the Client.

There are two types of Web Servers :-

• Apache Web Server.
• IIS Web Server.

Apache Web Server:-

• It is useful on both Windows and Unix Operating System
• It is an Open Based Product.
• It can be controlled by editing the configuration file httpd.conf

IIS Web Server:-

• It is useful on Windows Platform.
• It is vendor Specific Product and can be used on windows product only.
• For IIS Server the behaviour is controlled by modifying windows based management programs called  IIS snap in which can be accessed through Control Panel-Administrative Tool.

Helpful Links to Excel in Adobe Photoshop

Hi Friends ,

This is the last post on Adobe Photoshop, henceforth we will learn about HTML - CSS - XML and Flash in coming sections.

To polish your skills on Adobe Photoshop the below are some helpful links you should visit: -

http://www.brusheezy.com

http://psd.tutsplus.com

Learn and Enjoy.

Web Page Designing Standards

Web Page Designing Standards:-

•         Simple layout and easy to navigate through.

•         Centered orientation (message to be conveyed through banner and proper images).

•         Columns and Rows to be created to balance the view of Webpage.

•         3D effects, to be used carefully specially in Banner part.

•         Cute icons, to be used as Pointers with warm color to catch your eye.

•         Plenty of white space (that is avoiding maximum bombardment of text on the page).

•         Nice big text to be used as Heading wherever required.

Why simplicity is good

•         Web sites have goals and all web pages have purposes.

•         Users' attention is a finite resource, as he searches for his needs.

•         It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)

•         Matter on the screen attracts the eye. The more matter there is, the more different things there are to notice, and the less likely a user is to notice the important matter.

When & how to make your designs simple ?

When?

•         Always!

How?

            There are two important aspects to achieving success with simplicity

•         Remove unnecessary components, without sacrificing effectiveness.

•         Try out alternative solutions that achieve the same result more simply.

Centered orientation: -

The vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.

A few years ago, 3-column sites were the norm, and 4-column sites weren't uncommon. Today, 2 is more common, and 3 is the mainstream maximum.

Use White Space in Webpage.

Highlight Important Text and Increase its Font.

3D effects, used carefully

•         Every single one of the most recent uses gradients delicately, either to give bars a slight roundedness, to create a soft feeling of space in the background, or to make an icon stand out with embossing and subtle drop-shadows.

•         Reflections & fades are very prevalent.  Drop-shadows are still used, but with care.

•         Use White Space to avoid congestion on web page. see image above: -

•         Make the most important text on the page bigger than normal text.

•         Use bigger text to help your visitors see quickly what the page is about, what's most important, and figure out where they want to look next to find what they want.

Sample Layout developed in Photoshop

Sample Layout to be developed before you star coding in html and css they are termed as Wireframe of the Web Page.

Following are some examples how to develop a wireframe using photoshop

Basic Layout to be followed.

Sample example of e-commerce website.

Sample example for Hospital Website.

Adjustment Tool for Layer

Adjustment Tools for Layer to give Special Effects:-


Levels: - It adjusts the Brightness of the Image. Move the White Slider to brighten and Keep the Dark Slider unaffected.


Hue-Saturation:- Hue means Color. Saturation means color amount.
Keep colorize on for single color effect.


Photo Filter:- Choose any filter listed in these category and try out different effects.                        for eg:- Take Blur Filter it will make image cool.


Shadow – Highlights: - It is like Levels , it changes brightness.


Selective Color:- Pick color from the drop down – change amount of RGB – Effect thus created is very slight,  used to match one image with another.

Special Effect Tools

Brush Tool:-

When u select Brush Tool you can use the brush to fill color.

To change the setting of the Brush – Select icon placed at right hand top corner named “Toggle Brushes Panel.”

Define a Brush style:-

Take a 50 by 50 pixel file – Draw any shape of Black Color on new layer.

Select Background Layer and delete it.

Press Ctrl and Select the Layer – Go To Edit Menu – Define Brush.

Close the file – It will ask you to save – Click on NO.

Select – New File – Take Brush Tool – Choose your Brush style you created from the List – Choose Color and Draw.

Burn, Dodge Tool: -

Draw Circle – Fill color.

Take Dodge Tool – In above tool bar you will find Range there are three options ( Shadows, Midtones , Highlights.)

Select Shadow – Set Protect Tone = Off  -  Opacity = 40%.

Dodge Tool will give Lighter shade to the color applied.

Follow the same setting for Burn Tool.

Burn Tool will give Darker Shade to the color applied resembling a shadow or darker region being formed at the side where light is minimal.

The Effects created by Burn and Dodge Tool are shown in the following Image.

How to create Fire Effect

Fire Effect:-

Press D.

Press X.

File – New – Web,Image - Mode – Gray scale , BG content – BG color – Ok.

Type any Text example “Fired.”

Go To Image Menu – Image Rotate – 90CW.

Filter – Stylize – Wind (From Right)

Press Ctrl+F twice.

Again  Filter – Stylize – Wind (From Left)

Press Ctrl+F twice.

Go To Image Menu – Image Rotate – 90CCW.

Image Menu – Mode – Indexed.

Image Menu -  Mode – Color Table – Change Gray Scale to Blackbody – Ok.

Image Menu – Mode – RGB.

Take Rectangle Marque Tool

Select Add to Selection ( as shown in the image Below)

Select the Flames on Top and Bottom side.

Filter – Distort – Ocean Ripple – Ok.

To make the Text Visible Select MagicWand Tool

Select Name –Go to Edit menu – Stroke – Ok.

Image Editing Using Custom Shapes

Select New file.

Open a Image from your PC.

Select the image and move it on your New File.

Take Custom Shape from Tool Bar / Path Option, Draw Path on the Image.

Press Ctrl+Enter and the Path will be selected.

Go to Layer  - Add Layer Mask – Reveal Selection.

General Principles to be Followed

• For Web 8bits/channel is used.
• For Movies 16-32 bits/channel are used.
• For good Image Quality save your Image always in .tiff format and .psd
• Images used in websites should be stored in jpg format.
• For saving Flat Colors used in Logos, Animations and Transparency use .gif format.
• While preparing Ad or Magazine Cover for any Brand or Event always select a Image where the Model carries the Attitude of the Product, Brand he/she represents.

How to Create a Web Layout

Create a Web Layout.

We consider balance while Designing a Layout.

Take 5 (rectangles) layer and draw as shown :- (see the image file attached below)

Goto Window Menu – Color – Choose one main color eg.(Yellow) for the logo rectangle.

The other rectangles should have color near to the logo color (ranging from light yellow,lemon to dark yellow resembling some orange shade).Layer 4 can contain Gradient Color Effect.

The color should range between +15 to -15% approx.

To Create Smart Objects:-

When we develop a website we often see bullets highlighting a particular content which grabs our eyes over it. The Bullet are formed as follow in photoshop.

• Create a new Layer.
• Draw rectangle resembling it as a Button – Fill Color to it (Silver shade).
• Select Text Tool – Type Text on the Box created (eg- Submit).
• To Create a Bullet – Select Lasso Polygon Tool from Tool Box – draw a shape – Fill color (warm color like red, yellow)
• After you finish drawing your button – Select all Layers – right Click – Convert to Smart Object.

Benefits of Using Smart Object:–

• When you create a smart object all Layers are clubbed up into a single Layer.
• Any changes required to be done will be done easily without affecting other layers present.
• The Smart Object layer opens in different Window and with all individual layers arranged as before converting the layers to Smart Object.

Shortcut Keys of Photoshop

Basic Shortcut Keys to be remembered while using Photoshop:-

When you start Photoshop – go to –File – New.

A new file will be opened with a Background layer.

Always make it a habit to carry out your work on different layers as it is easy to make changes later on.

Fill Color: - 

• Add New Layer – Select Rectangular Marque Tool – Draw some shape – Select Color - Alt+Backspace (Fill Color) – Ctrl+D (Deselect).
• Transform :- Ctrl+T. (To scale,rotate etc. )
• Repeat Previous Transform: - Ctrl+Shift+Alt+T.
• Duplicate a Layer :- Ctrl+J.
• Layer via Cut:- Ctrl+Shift+T.
• Undo:- Ctrl+Alt+Z. (one step back)
• Save:- Ctrl+S (saved as psd.)
• Save for Web :- Ctrl+Alt+Shift+S.
• New Window:- F7.
• Ruler:- Ctrl+R.
• Zoom In:- Ctrl+.
• Zoom Out:-Ctrl-.
• Fit on Screen:- Ctrl 0.
• To increase Brush size :- [.
• To decrease Brush size:- ].

Adobe Photoshop

Adobe Photoshop

Before starting with Adobe Photoshop let us revise and brush up our mind as

 

to what exactly is the use of Photoshop and why it is used so vastly this days 

throughout the Globe.

Adobe Photoshop is Software designed to give Effects to the acquired Image.

With the help of  PSD we can generate Wireframe ie the Skeleton of the webpage’s of the 

Website by creating the Layout in virtual manner and then presenting it to the coder to Code it in 

Machine readable Language.

Photoshop is used to give Effects to the Images Captured via camera.

It also helps to Design Magazine Cover, Web Layouts, and Banners.

While Developing Web Layout basic Design Principle should be taken into consideration such as:-

• Balance
• Dominance
• Proportion
• Rhythm
• Unity

While developing and designing for Magazine Cover always select

New File – Clipboard – Resolution – 72 pixel.

Now the Question may come to your mind as to What is Resolution ????

Answer: - It is Pixel Density of an Image. It is 72 pixels/inch for a Website and300 pixel/inch for print ie Paper.