Thursday, 21 February 2013

Putting It All Together (HTML BY GOPAL KRISHNA)



--: Putting It All Together :--


The following code incorporates all of the methods that have been explained in the previous pages:



<html>

<head>
<title>My first web page</title>

</head>

<body BGCOLOR="BLUE">

<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML. 

<strong>A simple page put together using HTML.</strong> 

A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>
<h2>Why this is</h2>

<ul>

<li>To learn HTML</li>

<li>

To show off

<ol>

<li>To my boss</li>

<li>To my friends</li>

<li>To my cat</li>

<li>To the little talking duck in my brain</li>

</ol>

</li>

<li>Because I've fallen in love with my computer and

want to give her some HTML loving.</li>

</ul>

<h2>Where to find the tutorial</h2>

<p><a href=" http://ergopalkrishnawithhtml.blogspot.in/ "><img

Src=" https://www.facebook.com/photo.php?fbid=353410591376351&set=a.181915378525874.61153.100001222395685&type=1 " width="157"

height="70" alt="KRISHNA" /></a></p>

<h3>Some random table</h3>

<table>

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

<td>Row 1, cell 3</td>

</tr>


<tr>

<td>Row 2, cell 1</td>

<td>Row 2, cell 2</td>

<td>Row 2, cell 3</td>

</tr>

<tr>

<td>Row 3, cell 1</td>

<td>Row 3, cell 2</td>

<td>Row 3, cell 3</td>

</tr>

<tr>

<td>Row 4, cell 1</td>

<td>Row 4, cell 2</td>

<td>Row 4, cell 3</td>

</tr>

</table>

<h3>Some random form</h3>

<p><strong>Note:</strong> It looks the part, but won't do a

thing</p>

<form action="somescript.php" method="post">

<p>Name:</p>

<p><input type="text" name="name" value="Your name" /></p>

<p>Comments: </p>

<p><textarea rows="10" cols="20" name="comments">Your

comments</textarea></p>

<p>Are you:</p><p><input type="radio" name="areyou" value="male"

/> Male</p>

<p><input type="radio" name="areyou" value="female" /> Female</p>

<p><input type="submit" /></p>

<p><input type="reset" /></p>

</form>

</body>

</html>

There you have it. Save the file and play around with it - this is the best way to understand how everything works. 
IT IS TOO WIDE . SIMPLE CODES LIKE <body BGCOLOR="BLUE">  I NOT MENTIONS .


.. AND IF YOU WANTS TO KNOW MORE IN HTML THEN PLEASE LEAVE COMMENTS ..

When you're happy, you can move on to
 the  CSS Beginner's Guide. 

## THANKS YOU ## 

 (HTML BY GOPAL KRISHNA)

Forms (HTML BY GOPAL KRISHNA)


--: Forms :--

Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email, such as the one used on this website.
On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside of the remit of this website. If you use an internet
service provider to host your HTML, they will be able to help you with this and will probably have clear and simple instructions on how, for example, to make a form-to-email form work.
The tags used in the actual HTML of forms are form, input, textarea, select and option. form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get
latches the information onto the URL).

So a form element will look something like this:

<form action="processingscript.php" method="post">
</form>

The input tag is the daddy of the form world. It can take ten forms, outlined below:


_ <input type="text" /> is a standard textbox. This can also have avalue attribute, which sets the text in the textbox.


_ <input type="password" /> is the same as the textbox, but will displayasterisks instead of the actual characters that the user types.


_ <input type="checkbox" /> is a checkbox, which can be toggled on andoff by the user. This can also have a checked attribute, which would beused in the format <input type="checkbox" checked="checked" />.


_ <input type="radio" /> is similar to a checkbox, but the user can onlyselect one radio button in a group. This can also have a checkedattribute, used in the same way as the checkbox.

_ <input type="file" /> is an area that shows the files on your computer,like you see when you open or save a document in most programs.


_ <input type="submit" /> is a button that when selected will submit theform. You can control the text that appears on the submit button (as youcan with button and reset types - see below) with the value attribute, forexample <input type="submit" value="Ooo. Look. Text on abutton. Wow" />.


_ <input type="image" /> is an image that when selected will submit theform. This also requires a src attribute, like the img tag.


_ <input type="button" /> is a button that will not do anything withoutextra code added.


_ <input type="reset" /> is a button that when selected will reset theform fields.


_ <input type="hidden" /> is a field that will not be displayed and is usedto pass information such as the page name that the user is on or the emailaddress that the form should be posted to.Note that the input tag closes itself with a '/>' at the end.


A textarea is, basically, a large text box. It requires a rows and cols
attribute and is used like this:


<textarea rows="5" cols="20">A big load of text here</textarea>The select tag works with the option tag to make drop-down selectboxes.


They work like this:


<select><option value="first option">Option 1</option><option value="second option">Option 2</option><option value="third option">Option 3</option></select>

When the form is submitted, the value of the selected option will be sent. Similar to the checked attribute of check boxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format 

<option value="mouse" selected="selected">Rodent</option>.


All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added,
 for example 
 <input type="text" name="talkingsponge" /> 

A form might look like the one below. (Note: this form will not work unless here is a 'contactus.php' file, which is stated in the action attribute of the form tag, to handle the submitted date)


<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p><p><textarea name="comments" rows="5"
cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p></form>

There is a whole other level of complexity you can delve into in the HTML Advanced Guide if you are so inclined.




TRY IT AND GO TO NEXT .........
 (HTML BY GOPAL KRISHNA)

Tables (HTML BY GOPAL KRISHNA)


--: Tables :--

Across the worldwide web, HTML tables are used and abused to layout pages. We will come across how to layout a page without tables, in the CSS Advanced Guide. The correct use for tables is to do exactly what you would expect a table to do - to layout tabular data.
There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginners Guide.
Copy the following code into the body of your document and then we will go through what each tag is doing:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>


The table element defines the table. The tr element defines a table row.
The td element defines a data cell. These must be enclosed in tr tags, as shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.


DANA’S TABLE WITH ADDITIONAL ATTRIBUTES :

<table width="800" border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top">&nbsp;</td>

<td valign="top">&nbsp;</td>

</tr>

<tr>

<td valign="top">&nbsp;</td>

<td valign="top">&nbsp;</td>

</tr>

</table>


NEW TERM :  &nbsp   IT PROVIDES 1 SPACE  .




TRY IT  AND GO TO NEXT....... 
(HTML BY GOPAL KRISHNA)

Images (HTML BY GOPAL KRISHNA)

--: IMAGE :--



Things might seem a little bland and boring with all of this text formatting. Ofcourse, the web is not just about text, it is multi-media and the most common form of media is the image.
The img tag is used to put an image in an HTML document and it looks like this :

<img src="http://ergopalkrishnawithhtml.blogspot.in//logo.gif" width="157"
height="70" alt="HTML HTML : Tutorials For Beginner logo" />


The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as
'alienpie.jpg' in a directory called 'images' then the code would be 

<img src="images/alienpie.jpg"...


The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with '/>'

NOTE :  

The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things...
The most commonly used file formats used for images are GIFs and JPEG. They are both compressed formats, and have very different uses.


GIFs can have no more than 256 colours, but they maintain the colors of the original image. The lower the number of colors you have in the image, the lower the file size will be.
GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLORS.

JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.
JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.

Images are perhaps the largest files a new web designer will be handling. It is a common mistake to be oblivious to the file size of images, which can be extremely large. Web pages should download as
quickly as possible, and if you keep in mind that most people use modems that download at less than 7Kb a second (realistically it is less than 5Kb), you can see how a large file will greatly slow down the
download time of a full page.

You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress  images and the best way to figure out what is best suited for yourself
is trial and error.


TRY IT 
AND GO TO NEXT
 ...
(HTML BY GOPAL KRISHNA)

Links (HTML BY GOPAL KRISHNA)

--:  LINK  :--


So far you've been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it all links together.

The 'H' and 'T' in 'HTML' stand for 'hypertext', which basically means a system of linked text.

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag -
 the destination of the link.

Add this to your document:


<html>

<head>

<title>My first web page</title>

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML</p>

<h2>Why this is</h2>

<p>To learn HTML</p>

<h2>Where to find the tutorial</h2>


<p>

<a href="http://ergopalkrishnawithhtml.blogspot.in/">HTML : Tutorials For Beginner</a>

</p>

</body>

</html>



The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as ' http://ergopalkrishnawithhtml.blogspot.in/ , or it can be relative to the current page.

So if, for example, you had another file called 'love.html' then the line of code would simply be <a href="love.html">Love is God</a> or something like this.

TRY IT  AND GO TO NEXT ...
(HTML BY GOPAL KRISHNA)

Lists (HTML BY GOPAL KRISHNA)


--: LIST :--


There are three types of list; unordered lists, ordered lists and definition
lists. We will look at the first two here, and definition lists in the HTML
Intermediate Guide.
Unordered lists and ordered lists work the same way, except that the former
is used for non-sequential lists with list items usually preceded by bullets and
the latter is for sequential lists, which are normally represented by
incremental numbers.
The ul tag is used to define unordered lists and the ol tag is used to define
ordered lists. Inside the lists, the li tag is used to define each list item.
Change your code to the following:


<html>

<head>

<title>My first web page</title>

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML</p>

<h2>Why this is</h2>

<ul>

<li>To learn HTML</li>

<li>To show off</li>

<li>Because I've fallen in love with my computer and want togive her some HTML loving.</li>

</ul>

</body>

</html>


If you look at this in your browser, you will see a bulleted list. Simply change
the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:


<ul>
<li>To learn HTML</li>
<li>To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my dog</li>
<li>To my *****</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to
give her some HTML loving  :* .</li>
</ul>


 A list within a list. And you could put another list within that And another within that. And so on and so forth. It is nested list . 

TRY IT AND GO TO NEXT ...

(HTML BY GOPAL KRISHNA)

Headings (HTML BY GOPAL KRISHNA)

--: Headings :--

The p tag is just the start of text formatting.
If you have documents with genuine headings, then there are HTML tags specifically designed just for them.
They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.

Change your code to the following:

<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
</body>
</html>


Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h2 to h6 however, can be used as often as is desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2 .



Try it AND GO TO NEXT ......
 (HTML BY GOPAL KRISHNA)

Paragraphs (HTML BY GOPAL KRISHNA)

--: Now Paragraphs  :--


Go back to notepad and .............try to do this ........ .



<html>

<head>

<title>first web page</title>

</head>

<body>

This is my first web page How exciting

</body>

</html>



Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see something like:
This is my first web page How exciting.

This is because web browsers don't usually take any notice of what line your code is on . It also doesn't take any notice of spaces (you would get the same result if you typed 'This is my first web page How exciting').If you want text to appear on different lines, you need to explicitly state that.


Change your two lines of content so that they look like this:


<p>

This is my first web page

</p>

<p>

How exciting

</p>

The p tag is for 'paragraph'.
The two lines will now appear on two lines.The HTML content should be seen just like a book - with paragraphs where appropriate .


--: Emphasis :--

You can emphasise text in a paragraph using em and strong. These are two

ways of doing pretty much the same thing, although traditionally, browsers

display em in italics and strong in bold.

<p>Yes, that

 <em>is</em> 

what I said. How

 <strong>very</strong>

exciting.

</p>


--: Line breaks :--

The line-break tag can also be used to separate lines like this:

This is my first web page<br />

How exciting .

However, this method is over-used and shouldn't be used if two blocks of 

text are intended to be separate from one another.

(Because nothing appears between the line-break tag, there is no closing tag

and it closes itself with a '/' after the 'br').






Try and Look at the results of this. ........

 (HTML BY GOPAL KRISHNA)

Page Titles (HTML BY GOPAL KRISHNA)

All HTML pages should have a page title. 

To add a title to your page, change your code so that it looks like this:



<html><head>


<title>Krishna says Welcome</title>


</head><body>This is my first web page</body></html>


We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).

The head element which starts with the <head> opening tag and ends with the </head> tag appears before the body element which starting with <body> and ending with </body> and contains information that will load before the body information. 

If you look at this document in the browser (save and refresh as before) .
 you will see that '
Krishna says Welcome' will appear on the title bar of the window (not the actual canvas area). 
The text that you put in between the title tags has become the title of the document (surprise!). 


TRY IT .....
 (HTML BY GOPAL KRISHNA)

Tags, Attributes and Elements (HTML BY GOPAL KRISHNA)


Now you know this , basics of HTML are plain text, we need a bit more to make it a  valid HTML document.



Tags :

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.

Change your document so that it looks like this:


<body>
My HTML TEACHER IS ER. GOPAL KRISHNA.
</body>


Write everything in body section  as i say previously .

Now save the document again, go back to the web browser and select
'refresh' (which will reload the page).  


The appearance of the page will not have changed at all, but the purpose of
HTML is to apply meaning  .


Not all tags have closing tags like this (<html></html>) some tags, which do
not wrap around content will close themselves. 

The line-break tag forexample, looks like this : <br />. 


We will come across these examples later.

All you need to remember is that all tags must be closed and most (those
with content between them) are in the format of opening tag - content -
closing tag.



Attributes:

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag  attribute="value">Margarine</tag>.

We will come across tags with attributes later.



Elements:

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, 
that everything that is in-between and includes the <body> and
</body> tags is the body element. 

As another example,

 whereas '<title>'and '</title>' are tags, 

<title>Rumple Stiltskin</title>' is a title element.




TRY IT ......
(HTML BY GOPAL KRISHNA)

Creating HTML Document (HTML BY GOPAL KRISHNA)

Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and a web browser. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.




 Open Notepad or another text editor.

 At the top of the page type <html>.

 On the next line, indent five spaces and now add the opening header tag: <head>.

 On the next line, indent ten spaces and type <title> </title>.

 Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>.

 Five spaces in from the margin on the next line, type<body>.

 Now drop down another line and type the closing tag right below its mate: </body>.

 Finally, go to the next line and type </html>.

 In the File menu, choose Save As.

 In the Save as Type option box, choose All Files.

 Name the file .html .

 Click Save.


Now you have created one HTML page and you can use a Web Browser to open this HTML file to see the result. Hope you understood that Web Pages are nothing but they are simple HTML files with some content which can be rendered using Web Browsers.

CODE :

<html>
 <head>
 <title>This is document title</title>
 </head>
<body>

 <h1>This is a heading</h1> *


<p>Document description goes here.....</p>*


 </body> 
</html>


NOW CODING OF EVERYTHING IS WRITTEN IN BODY SECTION .
EX. :

 This is a heading

Document description goes here....




TRY IT AND GO TO NEXT ... 
(HTML BY GOPAL KRISHNA)


Contents (HTML BY GOPAL KRISHNA)

So contents are : 



Getting Started - 


your first HTML page .  i know it is blank ... ;)

Tags, Attributes and Elements -


 The stuff that makes up HTML .

Page Titles - 


Titles. For Pages.  it is shown in your tab . 

Paragraphs - 


Structuring your content with paragraphs.

Headings - 


The six levels of headings.

Lists - 


How to define ordered and unordered lists.

Links -


 How to link things together.

Images - 


Adding something a bit more than text...

Tables - 


How to use tabular data.

Forms -


Text boxes and other user-input thingamajigs.


Frame -


how to show two or more pages in one html page . 



SO READY ???
(HTML BY GOPAL KRISHNA)

HTML Introduction (HTML BY GOPAL KRISHNA)

I am Er. GOPAL KRISHNA  
providing you HTML Guideline and assumes that you have no previous knowledge of  HTML or CSS .



Now question arise : 


What is HTML :


So HTML stands for Hyper Text Markup Language .


Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext .

Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display .

It is the main markup language for creating web pages and other information that can be displayed in a web browser . 




Before your begin:

You should be familiar with :

 Basic word processing using any text editor.

 How to create directories and files.

 How to navigate through different directories.

 Basic understaning on internet browsing using a browser like Internet Explorer or Firefox etc.





Originally, 
HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

All you need to do to use HTML is to learn what type of markup to use to get the results you want.

now a days HTML 5  ARE IN USE .... :) 


YOU SHOULD KNOW ABOUT THESE CONCEPTS AND TAGS WHICH I PROVIDE YOU IN THIS TUTORIAL .  

WHEN YOU KNOW THIS THEN I PROVIDE YOU A S/W WHICH IS BASED ON G.U.I.  AND CODING IS  AUTOMATICALLY GENERATED . 


SO JUST STARTS .......
 (HTML BY GOPAL KRISHNA)