tag:blogger.com,1999:blog-35965682150362110082024-03-14T00:02:40.504+05:30Base-Tutorial HTML Online Learning Basic to AdvancedBaseTutorial is a Free Online Tutorial for HTML CSS and Javascriptsumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-3596568215036211008.post-67869500274233557012014-08-27T17:38:00.001+05:302014-08-27T17:38:50.035+05:30HTML Hyperlinks / Links<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
<span style="color: red;">HTML Hyperlinks / Links</span></h1>
<br />
<b>The HTML <a> tag defines a hyperlink.</b><br />
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.<br />
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.<br />
The most important attribute of the <b><a></b> element is the href attribute, which indicates the link's destination.<br />
By default, links will appear as follows in all browsers:<br />
<ul>
<li>An unvisited link is underlined and blue</li>
<li>A visited link is underlined and purple</li>
<li>An active link is underlined and red</li>
</ul>
<br />
<h3 style="text-align: left;">
<span style="color: yellow;">HTML Link Syntax</span></h3>
The HTML code for a link is simple. It looks like this:<br />
<b><a href="url">Link text</a> </b><br />
HTML Links - The target Attribute<br />
The target attribute specifies where to open the linked document.<br />
The example below will open the linked document in a new browser window or a new tab:<br />
Example<br />
<b><a href="http://www.basetutorial.blogspot.in/" target="_blank">Visit BaseTutorial!</a> </b><br />
<h3 style="text-align: left;">
<span style="color: yellow;">HTML Links - The id Attribute</span></h3>
The id attribute can be used to create a bookmark inside an HTML document.<br />
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.<br />
Example<br />
An anchor with an id inside an HTML document:<br />
<b><a id="tips">Useful Tips Section</a> </b><br />
Create a link to the "Useful Tips Section" inside the same document:<br />
<b><a href="#tips">Visit the Useful Tips Section</a> </b><br />
Or, create a link to the "Useful Tips Section" from another page:<br />
<b><a href="http://www.basetutorial.blogspot.in/html_links.htm#tips"></b><br />
<b>Visit the Useful Tips Section</a> </b><br />
<br />
Note: Always add a trailing slash to sub folder references. If you link like this: <b>href="http://www.basetutorial.blogspot.in/html"</b><br />
you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this:<br />
<b>href="http://www.basetutorial.blogspot.in/html/".</b><br />
<br />
<span style="color: lime;"><!DOCTYPE html></span><br />
<span style="color: lime;"><html></span><br />
<span style="color: lime;"><body></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"><p>Image Link</span><br />
<span style="color: lime;"><a href="default.asp"><img src="basetutorial.gif" alt="BASE tutorial" width="42" height="42"></a></p></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"><p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the image. To remove the border around the image, add style="border:0;" to the img element.</p></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"><p>Image-link: Still a link, but with no borders:</span><br />
<span style="color: lime;"><a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"></body></span><br />
<span style="color: lime;"></html></span><br />
<br />
<span style="color: yellow;"><b>One More Example :</b></span><br />
<span style="color: lime;"><span style="color: black;"> </span> </span><br />
<span style="color: lime;"><!DOCTYPE html><br /><html><br /><body><br /><br /><p><br /><a href="#C4">See also Chapter 4.</a><br /></p><br /><br /><h2>Chapter 1</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 2</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 3</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2><a id="C4">Chapter 4</a></h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 5</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 6</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 7</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 8</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 9</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 10</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 11</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 12</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 13</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 14</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 15</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 16</h2><br /><p>This chapter explains ba bla bla</p><br /><br /><h2>Chapter 17</h2><br /><p>This chapter explains ba bla bla</p><br /><br /></body><br /></html><br /> </span><br />
<br />
<br />
<a href="http://base-tutorial-html.blogspot.in/2014/08/html-headings.html" target="_blank">< PREVIOUS </a> NEXT > </div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-89767835155090874652014-08-27T16:47:00.001+05:302014-08-27T16:51:08.594+05:30 HTML Headings<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
<span style="background-color: black;"><span style="color: red;">HTML Headings:</span></span></h1>
<br />
Headings are important in HTML documents.<br />
<br />
Headings are defined with the <h1> to <h6> tags.<br />
<h1> defines the most important heading. <h6> defines the least important heading.<br />
Example<br />
<h1>BaseTutorial</h1><br />
<h2>BaseTutorial</h2><br />
<h3>BaseTutorial</h3> <br />
<br />
<br />
Note: Browsers automatically add some empty space (a margin) before and after each heading.<br />
<br />
<h2>
<span style="color: yellow;">Headings Are Important</span></h2>
<br />
Use HTML headings for headings only. Don't use headings to make text BIG or bold.<br />
Search engines use your headings to index the structure and content of your web pages.<br />
Since users may skim your pages by its headings, it is important to use headings to show the document structure.<br />
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.<br />
<br />
<h2 style="text-align: left;">
<span style="color: yellow;">HTML Lines</span></h2>
The <hr> tag creates a horizontal line in an HTML page.<br />
The hr element can be used to separate content:<br />
Example<br />
<p>basetutorial.</p><br />
<hr><br />
<p>Free Online Tutorial.</p><br />
<hr><br />
<p>base tutorial.</p> <br />
<br />
<br />
<h3 style="text-align: left;">
<span style="color: yellow;">HTML Line Breaks</span></h3>
Use the <br> tag if you want a line break (a new line) without starting a new paragraph:<br />
Example<br />
<p>This is<br>a para<br>graph with line breaks</p> <br />
<br />
HTML Text Formatting<br />
<br />
<span style="color: lime;"><!DOCTYPE html></span><br />
<span style="color: lime;"><html></span><br />
<span style="color: lime;"><body></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"><p><b>This text is bold</b></p></span><br />
<span style="color: lime;"><p><strong>This text is strong</strong></p></span><br />
<span style="color: lime;"><p><i>This text is italic</i></p></span><br />
<span style="color: lime;"><p><em>This text is emphasized</em></p></span><br />
<span style="color: lime;"><p><code>This is computer output</code></p></span><br />
<span style="color: lime;"><p>This is<sub> subscript</sub> and <sup>superscript</sup></p></span><br />
<span style="color: lime;"><br /></span>
<span style="color: lime;"></body></span><br />
<span style="color: lime;"></html></span><br />
<br />
<b>Comment tags <!-- and --> are used to insert comments in HTML.</b><br />
<!-- This is a comment --><br />
<br />
<p>This is a paragraph.</p><br />
<br />
<!-- Remember to add more information here --><br />
<br />
<br />
<a href="http://base-tutorial-html.blogspot.in/2014/08/html-attributes.html" target="_blank">< PREVIOUS</a> NEXT > </div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-34445903775056100532014-08-22T13:53:00.000+05:302014-08-27T16:55:54.852+05:30HTML Attributes<div dir="ltr" style="text-align: left;" trbidi="on">
<b>HTML Attributes are used to provide an additional info. to the HTML elements.</b><br />
<h1 style="text-align: left;">
<span style="color: yellow;"><b>HTML Attributes</b></span></h1>
<div style="text-align: left;">
• HTML elements can have attributes<br />
• Attributes are always specified in the start/opening tag<br />
• Attributes come in name/value pairs like:<b> name="value"</b><br />
• Attributes provide additional information to an element</div>
<h2 style="text-align: left;">
<span style="color: yellow;"><b>Attribute Example</b></span></h2>
<div style="text-align: left;">
HTML links are defined with the <a> tag. The link address is specified in the HREF attribute:</div>
<div style="text-align: left;">
Example<br />
<span style="color: lime;"><b><a href="http://www.basetutorial.blogspot.in"> link text</a></b></span><br />
<br />
Always Quote Attribute Values<br />
Attribute values should always be enclosed in quotes.<br />
Double style quotes are the most common, but single style quotes are also allowed.<br />
Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: <b>name='Sumit "Sam" Joshi’</b></div>
<h2 style="text-align: left;">
<span style="color: yellow;"><b>Tip: Use Lowercase Attributes</b></span></h2>
<div style="text-align: left;">
Attribute names and attribute values are case-insensitive.<br />
World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.<br />
Newer versions of (X)HTML will demand lowercase attributes.</div>
<h3 style="text-align: left;">
<b>Below is a list of some attributes that can be used on any HTML element:</b></h3>
<div style="text-align: left;">
<b>Attribute Description</b><br />
class Specifies one or more class names for an element (refers class in a style sheet)<br />
id Specifies a unique id for an element<br />
style Specifies an inline CSS style for an element<br />
title Specifies extra information about an element (displayed as a tool tip)</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="http://base-tutorial-html.blogspot.in/2014/08/html-elements.html" target="_blank">< Previous </a> <a href="http://base-tutorial-html.blogspot.in/2014/08/html-headings.html" target="_blank">Next ></a></div>
</div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-24418962633550499312014-08-21T16:51:00.001+05:302014-08-22T13:55:16.813+05:30HTML Elements<div dir="ltr" style="text-align: left;" trbidi="on">
HTML documents are defined by HTML elements.<br />
<h2 style="text-align: left;">
<span style="color: yellow;">HTML Elements</span></h2>
<div style="text-align: left;">
An HTML element is everything from the start/opening tag to the end/closing tag:<br />
Start tag Element content End tag <br />
<p> This is a paragraph </p><br />
<a href="default.htm"> This is a link </a><br />
<br> </br><br />
<br />
* The start tag is often called the opening tag. The end tag is often called the closing tag.</div>
<h2 style="text-align: left;">
<span style="color: yellow;">HTML Element Syntax</span></h2>
<div style="text-align: left;">
• An HTML element starts with a start tag / opening tag<br />
• The element content is everything between the start and the end tag<br />
• Some HTML elements have empty content<br />
• Most HTML elements can have attributes<br />
• An HTML element ends with an end tag / closing tag<br />
• Empty elements are closed in the start tag</div>
<h2 style="text-align: left;">
<span style="color: yellow;">Nested HTML Elements</span></h2>
<div style="text-align: left;">
Most HTML elements can be nested (can contain other HTML elements).<br />
HTML documents consist of nested HTML elements.<br />
<br />
<b>Example of HTML code</b><br />
<span style="color: lime;"><b><!DOCTYPE html></b></span><br />
<span style="color: lime;"><b><html></b></span><br />
<span style="color: lime;"><b> <body></b></span><br />
<span style="color: lime;"><b> <p>This is paragraph.</p></b></span><br />
<span style="color: lime;"><b> </body></b></span><br />
<span style="color: lime;"><b></html></b></span></div>
<div style="text-align: left;">
<br />
The example above contains three HTML elements <HTML><body><p> with their closing tags closing of opening tags done in reverse hierarchy always.<br />
<br />
<h3 style="text-align: left;">
<b>HTML Example Explanation</b></h3>
The <p> element:<br />
<p>This is paragraph.</p><br />
The element has a start tag <p> and an end tag </p>.<br />
The <p> element defines a paragraph in the HTML document.<br />
The element content is: This is paragraph.<br />
The <body> element:<br />
<body><br />
<p>This is paragraph.</p><br />
</body><br />
The <body> element defines the body of the HTML document.<br />
The element has a start tag <body> and an end tag </body>.<br />
The element content is another HTML element (a p element).<br />
The <html> element:<br />
<br />
<span style="color: lime;"><b><html></b></span><br />
<span style="color: lime;"><b> <body></b></span><br />
<span style="color: lime;"><b> <p>This is paragraph.</p></b></span><br />
<span style="color: lime;"><b> </body></b></span><br />
<span style="color: lime;"><b></html></b></span><br />
</div>
<div style="text-align: left;">
The <html> element defines the whole HTML document.<br />
The element has a start tag <html> and an end tag </html>.<br />
The element content is another HTML element (the body element).<br />
<br />
<b>Don't Forget the End Tag</b><br />
Some HTML elements might display correctly even if you forget the end tag:<br />
<p>This is a paragraph<br />
<p>This is a paragraph<br />
The example above works in most browsers, because the closing tag is considered optional.<br />
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .</div>
<h2 style="text-align: left;">
<span style="color: yellow;">Empty HTML Elements</span></h2>
<div style="text-align: left;">
HTML elements with no content are called empty elements.<br />
<br> is an empty element without a closing tag (the <br> tag defines a line break).<br />
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).<br />
<br />
<b>TIP: Use tags in Lowercase.</b><br />
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.<br />
the <b>World Wide Web Consortium (W3C)</b> recommends lowercase in HTML 4, and demands lowercase tags in XHTML.</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="http://base-tutorial-html.blogspot.in/2014/08/html-tags-elements.html" target="_blank">< Previous Chapter</a> <a href="http://base-tutorial-html.blogspot.com/2014/08/html-attributes.html" target="_blank">Next Chapter ></a></div>
</div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-36390422036717152302014-08-20T15:00:00.001+05:302014-08-20T15:05:33.569+05:30Basic<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="color: yellow;">Page Structure of HTML </span></h2>
<div style="text-align: left;">
Below is a visualization of an HTML page structure:</div>
<div style="text-align: left;">
<span style="color: lime;"><html> <br /> <body> <br /> <h1>This is a heading</h1> <br /> <p>This is a paragraph.</p> <br /> <p>This is another paragraph.</p> <br /> </body> <br /></html> </span></div>
<h2 style="text-align: left;">
<span style="color: yellow;">The <!DOCTYPE> Declaration</span></h2>
<div style="text-align: left;">
The <!DOCTYPE> declaration helps the browser to display a web page correctly.<br />
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML version and type used.</div>
<br />
Common Declarations<br />
HTML5<br />
<span style="color: lime;"><!DOCTYPE html> </span><br />
<br />
HTML 4.01<br />
<span style="color: lime;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.basetutorial.blogspot.in/TR/html4/loose.dtd"> </span><br />
<br />
<br />
<a href="http://base-tutorial-html.blogspot.in/2014/08/introduction-of-html.html" target="_blank">< Go To Previous Chapter </a> <a href="http://base-tutorial-html.blogspot.in/2014/08/html-tags-elements.html" target="_blank"> Go To Next Chapter ></a><br />
<br />
<br /></div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-7049554072266174892014-08-20T13:11:00.001+05:302014-08-21T16:53:54.546+05:30HTML Tags & Elements<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="color: yellow;">HTML Tags</span></h2>
<h3 style="text-align: left;">
<span style="font-size: large;">HTML markup tags are usually called HTML tags.</span></h3>
<div style="text-align: left;">
<span style="font-size: large;">• HTML tags are keywords (tag names) surrounded by angle brackets like <html><br />• HTML tags normally come in pairs like <p> and </p><br />• The first tag in a pair is the start tag, the second tag is the end tag<br />• The end tag is written like the start tag, with a slash before the tag name <br />• Start and end tags are also called opening tags and closing tags</span></div>
<div style="text-align: left;">
<span style="color: lime;"><b><tagname>content</tagname></b></span></div>
<h2 style="text-align: left;">
<span style="color: yellow;">HTML Elements</span></h2>
<div style="text-align: left;">
<span style="font-size: large;">In HTML, most elements are written with a start tag (e.g. <p>) and an end tag (e.g. </p>), with the content in between:</span><br />
<span style="color: lime;"><b><p>This is a paragraph.</p></b></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br />
<br />
<a href="http://base-tutorial-html.blogspot.in/2014/08/basic.html" target="_blank">< Previous Chapter </a> <a href="http://base-tutorial-html.blogspot.in/2014/08/html-elements.html" target="_blank">Next Chapter ></a><br />
<br />
<br /></div>
</div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0tag:blogger.com,1999:blog-3596568215036211008.post-35494857982880354982014-08-19T14:44:00.000+05:302014-08-22T14:40:37.629+05:30Introduction of HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="color: yellow;"><span style="font-size: x-large;">Introduction of Internet:</span></span></h2>
<div style="text-align: left;">
<span style="font-size: large;">World is endless for a human being and exploration of the whole world is not realizable, but this Unrealizable task can be possible by the use of INTERNET. Internet is very powerful tool now a days. The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to link several billion devices worldwide. The origins of the Internet date back to research commissioned by the United States government in the 1960s to build robust, fault-tolerant communication via computer networks.</span></div>
<h2 style="text-align: left;">
<span style="color: yellow;"><span style="font-size: x-large;">Introduction of Web Browser:</span></span></h2>
<div style="text-align: left;">
<span style="font-size: large;">The primary purpose of a web browser is to get information and resources and bring them to the user ("retrieval" or "fetching"), allowing them to view the information ("display", "rendering"), and then access other information ("navigation", "following links").<br />This process begins when the user inputs a Uniform Resource Locator (URL) in the browser address bar, for example http://base-tutorial-html.blogspot.in/, into the browser. The prefix of the URL, the Uniform Resource Identifier or URI, determines how the URL will be interpreted. The most commonly used kind of URI starts with http: and identifies a resource to be retrieved over the Hypertext Transfer Protocol (HTTP).Many browsers also support a variety of other prefixes, such as https: for HTTPS, ftp: for the File Transfer Protocol, and file: for local files. Prefixes that the web browser cannot directly handle are often handed off to another application entirely. For example, mailto: URI’s are usually passed to the user's default e-mail application, and news: URI’s are passed to the user's default newsgroup reader.<br />Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.<br />The major web browsers are Firefox, Internet Explorer, Google Chrome, Opera, and Safari.</span></div>
<h2 style="text-align: left;">
<span style="color: yellow;"><span style="font-size: x-large;">Introduction of HTML:</span></span></h2>
<div style="text-align: left;">
<span style="font-size: large;">HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.<br />HTML is a language for describing web pages.<br />• HTML stands for Hyper Text Markup Language<br />• HTML is a Markup language<br />• A markup language is a set of markup Tags<br />• The tags describe document content <br />• HTML documents contain HTML Tags and plain Text<br />• HTML documents are also called Web Pages</span></div>
<h2 style="text-align: left;">
<span style="color: yellow;"><span style="font-size: x-large;">HTML Versions</span></span></h2>
<div style="text-align: left;">
<span style="font-size: large;">Since the early days of the web, there have been many versions of HTML:<br /><b>Version Year</b><br />HTML 1991<br />HTML+ 1993<br />HTML 2.0 1995<br />HTML 3.2 1997<br />HTML 4.01 1999<br />XHTML 2000<br />HTML5 2012</span><br />
<br />
<br />
<span style="font-size: large;"> <a href="http://base-tutorial-html.blogspot.in/2014/08/basic.html" target="_blank">Next Chapter > </a></span></div>
</div>
sumit Joshihttp://www.blogger.com/profile/02758660605806411660noreply@blogger.com0