06:19

HTML / XHTML Quick Reference BILAL

AHMED SHAIK



HTML AND XHTML QUICK REFERENCE


Element                                        Description and Browser Support
<html> ... </html>                                      Bounds of HTML or XHTML document
<head> ... </head>                              Document head (document meta data)
<base />                                          Base URL for the document (i.e., original URL)
<isindex />                                      Simple search interface (use form instead)
<link />                                             Relationship(s) to other resources (e.g., style sheets)
<meta />                                          Document meta-information (e.g., for search engines)
<script> ... </script>                       Inline script program (e.g., JavaScript, VBscript)
<style> ... </style>                          Style sheet rules [IE3+, NN4+, OP3.6+]
<title> ... </title>                              Document title (contains text only, no markup)
<body> .. </body>                                Document body (contains what gets displayed)
<address> ... </address>             Address information
<blockquote> ... </blockquote Block quotation
<center> ... </center>                    Center element contents (use div instead)
<div> ... </div>                                Block division of document
<hn> ... </hn>                                 Headings, from h1 to h6
<hr />                                                Horizontal rule or divider
<p> ... </p>                                      Paragraph
<pre> ... </pre>                               Preformatted text (preserve white space characters)

 
<form> ... </form>                         Fill-in form
<keygen />                                Create encrypted key to identify user [NN3+, OP3.6+]
<button> ... </button>              Advanced input button [IE4+, NN6]
<fieldset> ... </fieldset>          Grouped set of input elements [IE4+, NN6]
<legend> ... </legend>      Label for a fieldset [IE4+, NN6]
<label> ... </label>                   Label for an input [IE4+, NN6]
<input />                                    General input element (text, checkboxes, etc.)
<select> ... </select>               Selectable list of items
<optgroup> </optgroup>  Group of option elements in a selectable list [No support]
<option> ... </option>  Item in list (inside select or optgroup)
<textarea> ... </textarea>       Multi-line text input area
<dl> ... </dl>                                    Glossary or description list
<dt> ... </dt>                              Term in list
<dd> ... </dd>                           Term description
<ol> ... </ol>                                    Ordered list (., numbered)
<li> ... </li>                                 List item
<ul> ... </ul>                                    Unordered list (e.g., bulleted)
<li> ... </li>                                 List item
<dir> ... </dir>                                 Directory-style listing (use ul instead)
<li> ... </li>                                 List item
<menu> ... </menu>                     Menu list (use ul instead)
<li> ... </li>                                 List item

 
<table> ... </table>                         Tabular content (columns and rows)
<caption> ... </caption>          Table caption
<colgroup> ... </colgroup>     Define groups of columns [IE4+, NN6]
<col />                                  Set column properties [IE4+, NN6]
<tbody> ... </tbody>                 Group rows making up table body [IE4+, NN6]
<tfoot> ... </tfoot>                     Group rows making up table footer [IE4+, NN6]
<thead> ... </thead>                Group rows making up table header [IE4+, NN6]
<tr> ... </tr>                                Table row (preferably inside thead,tbody or tfoot)
<td> ... </td>                        Table content -- data
<th> ... </th>                        Table content -- header (row or column description)
<multicol> ... </multicol>              Multi-column text [NN4 only]

<frameset> ... </frameset>                Frameset document (replaces body element)
<frame />                                        Defines frame content (using a URL)
<frameset> ... </frameset />        Subdivides a frame into additional frames
<noframes> ... </noframes>       Alternate content ( if frames not supported)
<body> ... </body>                   a body (containing, in turn, regular body content)

Key to this Figure

HTML Version
<tag>      Standard elements
<tag>      Netscape/Microsoft extensions avoid if possible
<tag>      Deprecated -- avoid if
possible

Element Tag Rules
<tag> ... </tag>
Element has content, and the end tag is mandatory.
<tag / Element is empty.

Element Content Rules
Right hand elements must be inside indicated left-hand element.

Left hand element can contain the indicated right- hand elements.

frameset is an alternative to the body element


Browser Support Descriptions
Elements are supported by essentially all current browsers unless a list of browsers is given in square brackets after the description. If such a list is present, then only the listed browsers support the element. The following 2- letter notation is used to describe these browsers:

IE        Internet Explorer
NN      Netscape Navigator
OP      Opera
LY       Lynx
WT      WebTV

... followed by a browser version number. This may then by followed by a '+' sign if the element is also supported by subsequent versions of that browser

For example:

IE4 Supported by Internet
Explorer 4 and greater. NN4   Supported by Navigator 4,
but not by Navigator 6.



NRI-IT
1/2
                                                         10KN1F0002
Copyright © BILAL AHMED SHAIK



HTML / XHTML Quick Reference                                                                                                                                                  BILAL AHMED SHAIK

HTML AND XHTML QUICK REFERENCE



Inline (Inclusion) Elements
<audioscope />                        Display audio chart [WT only]
<applet> ... </applet>              Inline program (applet)
<param />                           Parameter for applet
<img />                                      Inline image
<iframe />                                 Inline frame [IE3+, NN6]
<embed />                                Embed arbitrary data
<noembed> ... </noembed>  Markup alternative to embed
<noscript> ... </noscript>        Markup alternative to script
<object> ... </object>               Embed data and/or data handling program/applet [IE4+, NN4+]
<param />                           Parameter for object

Inline (Character-like) Elements
<br />                                          Forced line break
<spacer />                                 Horizontal and/or vertical spacer
[NN4+ only]
<wbr />                                       Word break
Inline (Meta-Information) Elements
<basefont />                             Set base font properties
<bgsound />                             Background audio [IE3+ only]
<map> ... </map>                    Client-side imagemap
<area />                               Region of map
<script> ... </script>                 Script program for browser
<server> ... </server>              Script program to run
on server [Netscape servers only]

Netscape Layer Elements [NN4 only]
<layer> ... </layer>                   Overlay presentation layer
<ilayer> ... </ilayer>                 Overlay layer (relative positioning)
<nolayer> ... </nolayer>         Alternative for non-layer
browsers
Inline - Hypertext Anchors
<a> ... </a>                                Hypertext anchor

Inline (Physical Markup) Elements
<b> ... </b>                                Bold face
<blackface> ... </blackface> Extra bold [WT only]
<bdo> ... </bdo>                      Bi-directional override [IE4+, NN6]
<big> ... </big>                         Bigger
<blink> ... </blink>                   Blinking [NN1+ only]
<font> ... <font>                        Change font properties
<i> ... </i>                                   Italics
<marquee> ... </marquee Scrolling text [IE3+ only]
<nobr> ... </nobr>                    No line break
<s> ... </s>                                 Struck-through [Not by Opera]
<small> ... </small>                Smaller
<span> ... </span>                   Inline text block [IE3+, NN4+, OP3.6+]
<strike> ... </strike>                 Struck-out
<sub> ... </sub>                       subscript [NN3+, IE3+, OP3.6+, WT]
<sup> ... </sup>                       superscript [NN3+, IE3+, OP3.6+, WT]
<tt> ... </tt>                                 Fixed-width/monospace
<u> ... </u>                                Underline
Inline (Logical Markup) Elements

<abbr> ... </abbr>                    Abbreviation [NN6, OP4]
<acronym> ... </acronym>     Acronym [IE4+, NN6, OP4]
<cite> ... </cite>                        Citation
<code> ... </code>                   Typed code
<dfn> ... </dfn>                         Definition
<em> ... </em>                         Emphasized
<kbd> ... </kbd>                       Keyboard input
<q> ... </q>                                Inline quotation [IE4+, NN6, OP4]
<samp> ... </samp>                Sample text
<strong> ... </strong>              Strongly emphasized
<var> ... </var>                         A variable
Special Markup: Inserted/Deleted Content
<del> ... </del>                         Deleted content [IE4+, NN6, OP4]
<ins> ... </ins>                          Inserted content [IE4+, NN6, OP4]


NOTE on Lynx Browser Support.
Lynx is a text-mode browser that does not render inline images, and that can generally only display text using  one font (with, in some cases, reverse video, boldface and underlining). Thus many inline text-formatting styles are not possible with Lynx. If you want pages to work with lynx, you want to avoid inclusion, character-like (except br) and special markup elements, and restrict yourself to only simple physical/logical elements (e.g., em, strong). You will also want to avoid table elements, and framesets.

SIMPLIFIED ELEMENT CONTENT RULES FOR INLINE MARKUP

Inclusion Elements                     If they can take content (many, like img, cannot), they take content appropriate to their context (i.e., text or inline markup if they are themselves inline, block markup if they are a block)

Character-like & Meta- Information

Generally allowed inside any non-empty block or inline element that can appear inside the
body (see also preceding page).

Netscape Layer Elements            Can contain almost any inline element or any element that can be placed inside the body
element (see preceding page) -- they cannot appear in the document head.
Physical/Logical Text Markup      Can contain text or any of the other inline or special markup elements described above Hypertext Anchors              Like physical or logical inline text markup, but cannot contain additional anchor elements. Special Markup             Can contain text or almost any block or inline element, or any element that can be placed
inside the body (see front cover)



NRI-IT
2/2
                                                    10KN1F0002
Copyright © BILAL AHMED SHAIK



05:26

Introduction to javascript and dhtml

last week you learned the basics of creating a single html page. your page had some text and some images, but the only interactivity it had was hypertext links. you've explored the web enough to have seen more advanced tricks...things like images that change when your mouse hovers over them, or windows that popup at specific sizes, or fill-in-forms that warn you when you're missing information, or even animated interfaces with menus that appear and disappear. those kinds of features on the web are outside the scope of straight html. building them requires the kind of math, string handling, and logic that you normally only find in a programming language. no surprise, then, that there actually is a programming language behind those tricks. it's called javascript.
as early as the days of netscape 1.0, web designers and developers started requiring programmatic behaviour in their pages. netscape responded by inventing livescript, a client-side programming language for web pages. before the new language was released in version 2.0 of netscape's browser, it was renamed to "javascript" as part of a marketing agreement with sun, who wanted to promote netscape's support for the unrelated, language "java". soon after, microsoft implemented their own breed of javascript known as "jscript". with both microsoft and netscape offering a relatively compatible scripting language for web pages, many content producers started incorporating programming into their pages.
it wasn't long, though, before early javascript programmers met the limits of the medium they were working in. sure, programmers could make their pages react when the user placed their mouse over a link, but what if they wanted to make it react when the user's mouse moved over a term in a paragraph? or what if they wanted to let the user drag the paragraph out of the way, or hide a toolbar? after all, as the web developed, it became clear that a site could be much more than a storage repository for networked information--a site could actually be exactly like any computer application, the only difference being that instead of writing a letter or balancing a spreadsheet, the user would purchase a sweater, or transfer funds between two bank accounts.
not wanting to lose the flexibility of markup and its data-handling abilities, but desperate to address the needs of the growing web medium, the w3c responded with a master plan for the advancement of html and web programming. first, it would support the standardization of javascript and jscript into "ecma script", a language to be maintained by the third party, ecma, a european standards organization. second, it would allow web authors to completely separate content from display by formalizing and advocating the use of css, a style sheet language that could externally dictate the appearance of the content in an html file, thereby leaving its data untouched. lastly, it would propose the marriage of client-side display with client-side programming through an updated version of html known as "dhtml", or dynamic html.
dynamic html introduces the notion of a document that is treated as a series of components, not a string of text. in dhtml, every tag in the document (and its contents) becomes an abstract object. as such, it can be manipulated by a programming language (moved, reformatted, searched), or can send events to a programming language (like mouse activity or time passing), and can be formatted by external style sheets (css), and repeatedly *re*-formatted programmatically. to accomodate for all this mutable content, the 4.0 browsers introduced the ability to layer content on the page.
in everyday web authoring terms, dhtml is usually used for animation (making things move around on the page), or advanced interactivity such as drag'n'drop, autoscrolling, and reactions to mouse use. and dhtml promised to be even more powerful than that...versions of the classic arcade games "space invaders" and "asteroids" have even been created solely with dhtml and javascript. but unfortunately, dhtml development is ridden with compatibility problems (microsoft and netscape have implemented dhtml and css differently since the beginning), and can be unstable, causing browsers to crash due to programming errors or browser bugs.
despite these problems, some web authoring tools are attempting to make dhtml production possible for the masses. macromedia's dreamweaver is currently the most successful at it, allowing authors to work in a visual environment, and writing the cross-browser code for them. macromedia also supports their product with an information resource site about dhtml called dhtmlzone. we'll be looking at building basic pages with dreamweaver, but exploring its dhtml features will be left up to you. be warned that if you use dhtml, you may end up creating an unstable site, and your site will only be accessible to people with 4.0 browsers. the rule of thumb is test, test, test. the best dhtml around these days is usually written by programmers that can hand-code fixes to problems. if your goal is strictly visual (eg. animation), you may be better of working with macromedia's flash plugin which we'll cover in the second half of the course.
intro to dreamweaver (2.0)
last week you tried making your first web page by hand-coding your own html. this week you'll try creating your second web page using a visual application, macromedia's dreamweaver. while working with dreamweaver, you'll spend most of your time in its wysiwyg mode, where you create web pages using dreamweaver's tools to visually approximate what you want it to look like. there are, however, two other aspects to basic page creation in dreamweaver: 1) code-edit mode, where you can directly hand edit the html the way you did in last week, and 2) preview mode, where you launch external browsers to check what your page is actually looking like.
let's take a look at the basic tools you'll be using to make pages with dreamweaver.
the dreamweaver workspacewhen you launch dreamweaver, you are presented with a document window and three toolbars--the properties inspector, the object palette, and the launcher. these four components contain everything you need to create basic web pages.

the document window
the page you are creating lives in the document window. as soon as dreamweaver loads, you can simply start typing into the document window, and you've already got a basic page (though you can't see it, dreamweaver adds the standard html document skeleton needed to create a valid web page). as you build your page using the tools in dreamweaver (or by typing raw code in to the html editor) the document window will display it visually.
the properties inspector
the html attributes for the element in which the cursor is located are displayed in the properties inspector. using the properties inspector you can modify the current tag's available attributes. as you move the cursor around your document, the properties inspector will change to reflect the different attributes of the html tags in your document. in addition to attributes, the properties inspector can also be used to change some tags, for instance to change a paragraph tag into an <H> tag, or into a list item. by default, the properites inspector only shows the basic attributes for each element. to see a more complete selection of attributes, click the little arrow on the bottom right of the inspector.
the object palette
you insert more complicated html components and externally embedded objects into your page using the object palette. the object palette has four panels, each of which contains a group of things you might want to put on your page. most commonly you'll use the object palette to add tables and images to your page, both of which are located in the default common panel. the other panels are: forms (for creating user-feedback forms), head (mostly for adding meta-information about your page), and invisibles (a collection of elements that don't show up on the page when added--things like comments, breaks, and script tags).
the launcher
by clicking the buttons on the launcher, you can access dreamweavers advanced page creation tools and palettes.
  1. the site window, used to manage your pages as an integrated site (creating pages, moving pages, transfering pages to a server, handling version control, etc). we won't be covering this aspect of dreamweaver, but it can be a useful means of working with your pages as an integrated whole. try going through the built-in dreamweaver tutorial to learn more about the site management tools.
  2. the library palette, used to manage components of your pages that are reused commonly. you can only use the library if you set your site up to work with dreamweaver's site management tools.
  3. the style palette, used to add css styles to your document. this is a very attractive feature of dreamweaver that we'll cover in some detail.
  4. the behavior inspector, used primarily to add javascript events to elements.
  5. the timeline inspector, used to govern animation and events that occur over time on your page. this is one of dreamweaver's claims to fame because it allows non-programmers to create dhtml-based animation and interactivity that works on both netscape 4+ and ie 4+. because of the complexity and problems inherent in dhtml, we won't be going into depth with it. instead, we'll look at using flash to create stable, vector based animation and interactivity for the web.
  6. the html inspector, used to hand-edit the actual html code dreamweaver creates.
making a page in dreamweaverin class, we'll walk through creating the same page you made last week, but this time we'll make it with dreamweaver. once we've finished making that basic page, we'll move on to making a simple table (we'll do tables as layout devices next week). here's what we'll cover while using dreamweaver:
  • starting a new document
  • examining the html skeleton using the html inspector.
  • saving your page
  • previewing your page
  • making headers (<H1>, <H2>, etc.)
  • changing font characteristics using the properties inspector (size, font face, colour, style, alignment)
  • changing font characteristics using css and the style palette
  • adding an image
  • creating a link
  • inserting a table
preview your work
dreamweaver does a decent job of giving you an idea of what your page will look like while you work on it. it is essential, however, to look at your work in all target browsers on a regular basis (a target browser is any browser you know will be used to view your site). for a site with a generic, broad audience, you should be examining every page you make in netscape 3 and 4, and microsoft internet explorer 3 and 4 on both mac and pc.
to examine your document while working in dreamweaver, you can use the preview in browser command under the file menu. choose from the browsers available, or add the browser of your choice to the list using edit browser list. if you are using css (cascading style sheets) to dictate the look of your document, it is extremely important to test in both netscape and ie as those browsers have serious differences in their css display capabilities. be aware, though, when you're using preview in browser, that dreamweaver launches a new browser window each time you issue a preview command. it's therefore probably easiest to simply open your document in a browser and switch between dreamweaver and the browser to view your pages.
another tool offered by dreamweaver for resolving compatibility issues is the check target browsers... function (found under the file menu). use check target browsers... to have dreamweaver produce a list of what it considers to be the unsupported aspects of your document per selected browser. dreamweaver will render its evaluation in your default preview browser. generally its reports are quite valid, but css differences are not covered, and really it's always best to actually test in the browsers themselves.
the table tag
at a glance, making a table might seem like something you might only use occassionally when you wanted to present data specifically suited to a row/column arrangement. in fact, tables are actually one of the foundations of web design, particularly in page layout. next week we'll cover the use of tables as a layout device, but for now we'll simply learn how the tag itself works.
the table element is like most other elements: it has a start tag and an end tag. so the basic structure of a table looks like this:
<TABLE>
</TABLE>
once you've declared the beginning of a table with the table start tag, you add rows and columns with the row tag, <TR>, and the column tag <TD>. each row and column tag has a start and end tag, and column tags are nested inside row tags.so a table with a single row and two columns looks like this in code:
<TABLE>
     <TR>
          <TD>this is content in cell one </TD>
          <TD>this is content in cell two </TD>
     </TR>
</TABLE>
which will give you a table that looks like this:
this is content in cell onethis is content in cell two

by adding attributes to your table start tag, you can affect the look of your whole table. for example, to give your table a border, use the "border" attribute and specify the border width (in pixels) as a number between 1 and 10. to change the background colour of the cells in your table, use the "bgcolor" attribute to specify a colour value in hex. by adding border and bgcolor attributes to our table start tag (above) like this: <TABLE BORDER="1" BGCOLOR="#FFCC99">, we can produce a table that looks like this:
this is content in cell onethis is content in cell two

some common table attributes are:
  • CELLPADDING="0" (remove space around content in cells; or set higher than 0 to add space)
  • CELLSPACING="0" (remove space between cells; or set higher than 0 to add space)
  • WIDTH="100%" (force table to be as wide as the browser window)
  • WIDTH="600" (force table to be 600 pixels wide; change 600 to specify desired width)
  • HEIGHT="100%" (force table to be as high as the browser window, unless the table's contents are longer than the browser window).
  • ALIGN="CENTER" (center table on screen; use "LEFT" or "RIGHT" for alternate alignments)
you can also change the look of each table cell (<TD>) with attributes. in addition to the commonly used WIDTH and BGCOLOR attributes for <TD>, you can also set the vertical and horizontal alignment with VALIGN="MIDDLE" (or "TOP" or "BOTTOM") and ALIGN="CENTER" (or "RIGHT" or "LEFT"). you can prevent the text in a table cell from wrapping by using the "NOWRAP" attribute (it's a standalone attribute that doesn't take a value).
here's a final table example that shows some of the discussed attributes in action (try viewing the table in both netscape and ie to see their different rendering of the code):

<TABLE BORDER="0" 
 CELLPADDING="10" 
 CELLSPACING="5" 
 WIDTH="80%" 
 BGCOLOR="#CC9933" 
 ALIGN="CENTER">
  <TR> 
    <TD BGCOLOR="#FFFFFF" ALIGN="LEFT">
 <FONT COLOR="#000000">this is content in cell one</FONT> 
    </TD>
    <TD ALIGN="CENTER" NOWRAP>
 <font color="#FFFFFF">this is content in cell two</font> 
    </TD>
    <TD BGCOLOR="#000000" ALIGN="RIGHT">
 <font color="#CCCCCC">this is content in cell three</font> 
    </TD>
  </TR>
</TABLE>
this is content in cell onethis is content in cell twothis is content in cell three
creating web images with photoshop
just to be clear: this is definitely not a course in photoshop. most, if not all, of you are already using that aged piece of software, so i'm only going to explain how to set it up for working on the web, and how to export images from it for web use.
setting up your work environment
  1. first, open your photoshop preferences under the file menu. select units and rulers and change the rulers units to "pixels" (not "inches" or "points" etc).
  2. while still under preferences, select saving files, and set file extension to "use lower case".
  3. when you create your new image, be sure the rulers are shown. if there are no rulers around your image, select view, then show rulers. the rulers show the exact pixel dimensions of your image, and make adding guides easy. get used to working with guides. make sure everything is pixel perfect by aligning components of your image with guides. to add a guide, click on a ruler and drag your mouse onto the work area of the image. a guide will appear, which you can move later when you have the move tool active.
  4. if you are not already in rgb colour mode, change to it now by selecting image>>mode>>rgb. do *not* use cmyk mode when creating web graphics.
  5. set the resolution of your image to 72 pixels/inch (aka "dpi") by selecting image>>image size, then entering "72" under print size>>resolution.
  6. using the chart below, set the dimensions of your image depending on your target screen width. to cover all audiences, use the 640x480 setting. anything above 600x800 is currently not recommended as you'll be excluding large amounts of most visitors from viewing portions of your site.
    to address this resolutionuse these dimensions
    640w x480h600w x 300h
    800w x 600h760w x 420h
    1024w x 768h955w x 600h
exporting an image
  1. decide what kind of image you're going to use. if your image has lots of colours or subtle gradients, try a jpeg first. if your image is fairly flat with fewer colours in bold segments, try a .gif. if you're unsure, try both.
  2. to export a .gif, follow these steps:
    1. select the area of your image you want to export as a gif.
    2. if your image is a single layer, use edit>>copy to copy your selection to the clip board. if your image is multilayer, use edit>>copy merged.
    3. create a new document (file>>new). the document should automatically size itself to match the dimensions of your selection.
    4. paste the contents of the clip board into the new document (edit>>paste).
    5. convert to indexed colour mode by selecting image>>mode>>indexed color. (yes, it's okay to flatten the layers). under "palette" choose either "exact" (if it's available) or "adaptive". under "color depth" choose "8 bits/pixel". under "dither", choose "none". under "color matching", choose "best".

      (...short colour digression: you may have noticed that there is a web option available under the "palette" setting. there are cases where using it is appropriate, but we're trying to get your images working relatively quickly without getting stuck deep in the muck of web colour optimization. if you want to serve as many audiences as possible, and produce highly consistent colours, with the smallest file size, you'll have to make a thorough study of the subject. a decent place to start is is lynda weinmann's book, coloring web graphics 2. a good rule of thumb for colour-choosing is to make all flat areas of colour use multiples of 51 as their rgb values (ie, 0, 51, 102, 153, 204, and 255). that will ensure your colours fall in the standard colour palette supported by browsers on mac and pc. anyway, back to exporting a gif...)
    6. use file>>export>>gif89a export to begin saving your file as a .gif. you'll be shown a preview of your image. to make part of it transparent, click on colours in the palette or in the preview window. any colours you select will be invisible in the browser. after you've chosen your transparent colours, click ok.
    7. name and save your image.
    8. that's a pain, right? i think so too. so i created an action for photoshop that pretty much automates the tasks outlined above. you still get to make choices along the way though, like a happy little meat bot.
    9. when you are sure you have the final image exported, optimize it with a tool like image ready, fireworks, or ulead gif saver. alternately, try an online optimization tool like gif cruncher, which yields excellent results.
  3. to export a .jpeg, follow steps 1-4 for creating a .gif, then:
    1. select file>>save a copy.
    2. name your file and select the jpeg format instead of the .psd format.
    3. under jpeg image options, choose a quality level to save at. try to balance file size with quality...export several copies until you find one that doesn't look too messy. something around 2 or 3 is often good. if you have image ready or photoshop 5.5, you can actually preview the jpeg before you save it.
    4. under jpeg format options choose baseline ("standard"). then click ok to save your image.

02:50

Home Remedy Headaches


Headaches : Home Remedies suggested by users

Proper Nutrition, Excercise, Positive Thinking

The best way to prevent headaches is to build up physical resistance through proper nutrition, physical exercise and positive thinking. As a first step, the patient should undertake a short fast, and take citrus fruit juices diluted with water every two hours from 8.00 a.m. to 8.00 p.m. daily. Thereafter, he should plan his diet in such a way as to put the least possible strain on the digestion. Breakfast may consist of fruits, both fresh and dried. Lunch may consist of protein foods. Starchy foods such as wholewheat bread, cereals, rice, or potatoes should be taken at dinner along with raw salads. Spices, condiments, sour buttermilk, and oily foodstuffs should be avoided. Drinking a glass of water (warm water in winter and cool water in summer), mixed with a teaspoon of honey first thing in the morning, is also a good remedy. Copious drinking of water throughout the day is also advised.

Other Headache Remedies

Water Treatment

Other helpful measures in the treatment of headaches are a cleansing enema with water temperature at 37 degree C, a cold throat pack, frequent applications of towels wrung out from very hot water to the back of the neck , a cold compress at 4.4 degree C to 15.6 degree C applied to the head and face, or an alternate spinal compress. Hot fomentations over the abdominal region just before retiring relieve headaches caused by stomach and liver upsets.

Hot Foot Bath

Hot foot baths are also beneficial in the treatment of chronic headaches. The patient should keep his legs in a tub or bucket filled with hot water at a temperature of 40 degree C to 45 degree C for fifteen minutes every night before retiring. This treatment should be continued for two or three weeks.

Yogasanas

Yogic kriyas like jalneti and kunjal; pranayamas like anulomaviloma, shitali and sitkari; and asanas such as uttanpadasana, sarvangasana, paschimottanasana, halasana, and shavasana are also beneficial in the treatment of headaches.


Headaches are a nuicance, but can be taken care of with some simple remedies:

Avoid:
Avoid bright lights, and loud noises or music.

Remedies:
Closing your eyes while slowly breathing in and out, while pinching the skin between your thumb and index (pointer) finger with your other thumb and index finger. Remember, if you dont feel a slight pain or pinch when you do it, it's not doing anything.

Another is to just simply sleep :) It usually relieves itself after a good night's sleep (or nap) unless it's really bad.

Hydrating yourself always helps.

Rub the affected area with slight pressure, constantly, for a few minutes.

Cold showers or hot baths :P

Just relax! Relax and think positive thoughts!

Massage your feet with pressure

Eat an apple. The natural sugars in it help your headache go away. This reigns true for all fruits, so you're not just limited to apples.

Tug on your earlobes. This doesn't usually help me, and leaves me with itchy earlobes afterward but with some other people it works. Maybe it'll work for you. It's worth a shot!

One of my personal favorites is making hot peppermint tea and putting some honey in it. While you're drinking, inhale the minty scent! :)

A moist hot towl around the neck, forehead or back of the head.

Gently pulling your hair at the affected area.


Items that help get rid of headaches:
Peppermint (Oil or otherwise)
Water (cold or hot)
Ice (or anything cold. Chewing ice helps or you can put something cold against the affected area)
Spices
Herbal Teas
Coffee, Soda (If you look at any meds they will most likely contain a high amount of caffiene which is something that helps headaches)
Dark Chocolate


And if all that doesn't work, you can takes some pills or go see a chiropractor, a masseuse, or a doctor! Wishing you the best of luck!

headaches- rubbing your feet, works much better if you have someone else do it but can be done by yourself .. works really well for children .. you have pressure points all over your feet that help with almost any aches or pains ... rub fairly hard and allover not sure of exact points but what does that matter it feels good to have your feet rubbed all over anyway .. enjoy

I sometimes get really bad head-aches and i find that this remedy always works! hold your breath and pinch your nose for as long as you can and then slowly breath out and in, do this a couple of times and the pain should go away! its always worked for me! hope you feel better soon.