HTML ~ ElearnSchool

HTML Tutorial

HTML or Hypertext Markup Language is the most comprehensively used lingo on Web. Indeed, HTML is not a programming vernacular, yet rather a markup lingo. This instructional activity gives a complete cognizance on HTML.

HTML Introduction :

Before you begin, it's essential that you know Windows or UNIX. A working data of Windows or UNIX makes it significantly less requesting to learn HTML.

You should be familiar with:

•Basic word planning using any substance device.

•How to make inventories and archives.

•How to investigate through different inventories.

•Basic understanding on web skimming using a system like Internet Explorer or Firefox et cetera.

HTML stays for Hypertext Markup Language, and it is the most extensively used vernacular to make Web Pages. As its name suggests, HTML is a markup tongue.

•Hypertext insinuates the course in which Web pages (HTML records) are associated together. When you click an association in a Web page, you are using hypertext.

•Markup Language depicts how HTML capacities. With a markup tongue, you essentially "stamp up" a substance record with names that prompt a Web program how to structure it to appear.

At first, HTML was created with the desire of portraying the structure of documents like headings, areas, records, and so forth to energize the sharing of exploratory information between experts. All that you have to do to use HTML is to acknowledge what sort of markup to use to get the results you require.

Making HTML Document:

Making a HTML record is straightforward. To begin coding HTML you require only two things: a direct substance director and a web program. Scratch cushion is the most fundamental of essential substance instruments and you will probably code an average measure of HTML with it. You can use our HTML Online Editor to learn HTML. Here are the essential steps to make a crucial

HTML record:

•Open Notepad or another word processor.

•At the most astounding purpose of the page sort <html>.

•On the accompanying line, indent five spaces and now incorporate the opening header tag: <head>.

•On the accompanying line, indent ten spaces and sort <title> </title>.

•Go to the accompanying line, indent five spaces from the edge and implant the end header tag: </head>.

•Five spaces in from the edge on the accompanying line, type<body>.

•Now drop down an alternate line and sort the end mark straightforwardly underneath its mate: </body>.

•Finally, go to the accompanying line and sort </html>.

•In the File menu, pick Save As.

•In the Save as Type decision box, pick All Files.

•Name the record template.htm.

•Click Save.

You have key HTML record now, to see some result put the going with code in title and body names.

<html>

<head>

<title>This is report title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document portrayal goes here.....</p>

</body>

</html>

In the blink of an eye you have made one HTML page and you can use a Web Browser to open this HTML record to see the result. Trust you grasped that Web Pages are just they are direct HTML records with some substance which can be rendered using Web Browsers. Here <html>, <head>...<p>, <h1> et cetera are called HTML names. HTML names are buildingieces of a HTML report and we will understand the entire HTML marks in coming about areas.

NOTE: One HTML archive can have development as .htm or .html. So you can use them two in light of your comfort.

HTML Document Structure:

A HTML document starts and terminations with <html> and >/html> names. These marks tell the project that the entire document is made in HTML. Inside these two names, the chronicle is part into two portions:

•The <head>...</head> parts, which contain information about the file, for instance, title of the record, maker of the report et cetera. Information inside this tag does not appear outside.

•The <body>...</body> parts, which contain the honest to goodness substance of the report that you see on your screen.

HTML Tags and Elements:

HTML vernacular is a markup lingo and we use various names to markup content. In the above representation you have seen <html>, <body> et cetera are called HTML marks or HTML parts. Every name contains a name, from time to time took after by an optional summary of mark qualities , all set highly involved with opening and closing areas (< and >). The most clear tag is essentially a name suitably encased in segments, for instance, <head> and <i>. More entrapped names contain one or more attributes , which show or change the behavior of the tag. According to the HTML standard, tag and quality names are not case-fragile. There's no refinement in fact between <head>, <Head>, <HEAD>, or even <Head>; they are all proportionate. Regardless, with XHTML, case is basic: all present standard tag and property names are in lowercase.

HTML is overlooking?

A nice quality associated with each one of the projects is that they would not give any error in case you have not put any HTML tag or trademark properly. They will essentially dismiss that tag or property and will apply simply right marks and qualities before demonstrating the result. We can not say, HTML is exonerating in light of the fact that this is just a markup tongue and required to setup files.

HTML Basic Tags

The essential structure for all HTML documents is fundamental and should fuse the going with minimum parts or names:

•<html> - The essential holder for HTML pages

•<head> - The holder for page header information

•<title> - The title of the page

•<body> - The essential body of the page

Remember that before an opening <html> tag, a XHTML report can contain the optional XML certification, and it should reliably contain a DOCTYPE presentation exhibiting which type of XHTML it jobs. In a matter of seconds we will clear up each of these names one by one. In this instructional activity you will find the terms part and tag are used on the other hand.

The <html> Element: The <html> segment is the containing segment for the whole HTML record. Each HTML record should have one <html> and each report should end with an end </html> tag. Taking after two segments appear as prompt posterity of a <html> part:

•<head>

•<body>

In like manner, start and end HTML names encase the different HTML names you use to depict the Web page. The <head> Element: The <head> part is just a compartment for all other header segments. It should be the primary concern to appear after the opening <html> tag. Each <head> part should contain a <title> segment showing the title of the report, in spite of the way that it may similarly contain any mix of the going with segments, in any solicitation:

•The <base> tag is used to areate a "base" url for all associations on the page. Check HTML Base tag.

• The <object> tag is planned to consolidate pictures, JavaScript objects, Flash activitys, MP3 records, QuickTime movies and distinctive portions of a page. Check HTML Object tag.

•The <link> tag is used to association with an external record, for instance, a layout or JavaScript report. Check HTML Link tag.

•The <style> tag is used to join CSS rules inside the report. Check HTML Style tag.

•The <script> tag is used to join JAVAScript or VBScript inside the report. Check HTML Script tag.

•The <meta> tag joins information about the report, for instance, watchwords and a depiction, which are particularly valuable for request applications. Check HTML Meta tag.

Case: Taking after is the situation of head tag.

<head>

<title>HTML Basic tags</title>

</script>

</head>

The <title> Element: You should decide a title for every page that you form inside the <title> segment. This part is a posterity of the <head> segment). It is used as a part of a couple ways:

•It appears at the particularly top of a system window.

•It is used as the default name for a bookmark in projects, for instance, IE and Netscape.

•It is used by means of web searchers that usage its substance to rundown pages.

In this way it is key to use a title that really delineates the substance of your site. The <title> segment should contain only the substance for the title and it may not contain some different segments.

Case: Here is the situation of using title tag.

<head>

<title>HTML Basic tags</title>

</head>

The <body> Element: The <body> component shows up after the <head> component and contains the part of the Web page that you really find in the primary program window, which is in some cases alluded to as body substance. A <body> component may contain anything from two or three sections under a making a beeline for more convoluted designs containing structures and tables. The opening <body> labels and shutting </body> labels.

Illustration: Here is the illustration of utilizing body tag.

<body>

<p>This is a passage tag.</p>

</body>

Assembling all: Now on the off chance that we will assemble every one of these labels, it will constitute a complete HTML report as takes after:

<html>

<head>

<title>HTML Basic tags</title>

<meta name="Keywords" content="HTML, Web Pages"/>

<meta name="description" content="HTML Basic Tags"/>

<base href=" http://elearnschool.blogspot.in/"/>

<link rel="stylesheet" type="text/css" href="ess.css"/>

<script type="text/javascript">

</script>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

To Become more agreeable –

Do Online Practice HTML Meta Tags HTML gives you a chance to indicate metadata - data around an archive as opposed to report content - in an assortment of ways. The META component can be utilized to incorporate name/esteem sets portraying properties of the HTML archive, for example, creator, Expiry Date, a rundown of catchphrases, creator and so forth. The <meta> tag is a vacant component thus does not have an end tag, rather, <meta> labels convey data inside of properties, so you require a forward slice character toward the end of the component. Metadata gave by utilizing meta tag is a vital part of the web. It can help web crawlers in finding the best match when a client performs an inquiry. Web crawlers will regularly take a gander at any metadata joined to a page - particularly catchphrases - and rank it higher than another page with less applicable metadata, or with no metadata by any means.

Adding Meta Tags to Your Documents:

You can add metadata to your website pages by setting <meta> labels between the <head> and </head> labels. The can incorporate the accompanying qualities:

Quality Description Name for the property. Can be anything. Samples incorporate, watchwords, depiction, creator, changed, generator and so on substance Specifies the property's estimation. plan Specifies a plan to use to translate the property's estimation (as announced in the substance quality). Http equiv Used for http reaction message headers For instance http-equiv can be utilized to revive the page or to set a treat. Values incorporate substance sort, terminates, invigorate and set-treat.

NOTE: Core characteristics for every one of the components are examined in next part.

Meta Tag Examples: We should see minimal imperative utilization of Meta Tags.

Indicating Keywords: We determine catchphrases which will be utilized by the web crawler to look a site page. So utilizing taking after label you can indicate essential watchwords identified with your page.

<head>

<meta name="keywords" content="HTML, meta labels, metadata"/>

</head>

Archive Description: This is again essential data and numerous web index utilize this data too while looking a site page. So you ought to give a fitting portrayal of the page.

<head>

<meta name="description" content="Learn about Meta Tags."/>

</head>

Archive Revision date: This data tells about last time the report was overhauled.

<head>

<meta name="revised" content="Elearnschool, 6/05/2016"/>

</head>

Archive Refreshing: You can indicate a span after which your website page will continue invigorating. In the event that you need your page continue reviving after like clockwork then utilize the accompanying language structure.

<head>

<meta http-equiv="refresh" content="10"/>

</head>

Page Redirection: You can determine a page redirection utilizing Meta Tag. Taking after is a sample of diverting current page to another page. You can indicate a term after which page will be diverted.

<head>

<meta http-equiv="refresh"

content="10"; url = "http://elearnschool.blogspot.in/"/>

</head>

On the off chance that you don't give a span then page will be diverted quickly.

Setting Cookies: You can utilize Meta Tag to store treats on customer side later data can be utilized by then Web Server to track a website guest.

<head>

<meta http-equiv="cookie" content="use r id =xyz"; expires=Wednesday, 08-Aug-98 23:59:59 GMT;/>

</head>

On the off chance that you do exclude the lapse date and time, the treat is viewed as a session treat and will be erased when the client leaves the program. Check PHP and Cookies instructional exercise for a complete point of interest on Cookies.

Setting Author Name : You can set a creator name in a website page utilizing Meta Tag. See a case beneath.

<head>

<meta name="author" content="Ved Narayan Shukla/>

</head>

On the off chance that you do exclude the termination date and time, the treat is viewed as a session treat and will be erased when the client leaves the program.

HTML Attributes :

Traits are another essential piece of HTML markup. A credit is utilized to characterize the attributes of a component and is put inside the component's opening tag. All characteristics are comprised of two sections: a name and a quality:

• The name is the property you need to set. For instance, the <font> component in the case conveys a quality whose name is face, which you can use to show which type face you need the content to show up in.

• The worth is the thing that you need the estimation of the property to be. The main sample was expected to utilize the Arial typeface, so the estimation of the face property is Arial.

The estimation of the property ought to be placed in twofold quotes, and is isolated from the name by the equivalents sign. You can see that shading for the content has been indicated and in addition the type face in this <font> component:

<font face="arial" color="#CC0000">

Numerous HTML labels have their very own exceptional arrangement traits. These will be examined as every tag is presented all through the instructional exercise. At this moment we need to concentrate on an arrangement of bland characteristics that can be utilized with pretty much every HTML Tag in presence.

Center Attributes: The four center characteristics that can be utilized on the larger part of HTML components (in spite of the fact that not all) are:

• id

• title

• class

• style

The id Attribute:

The id credit can be utilized to interestingly recognize any component inside of a page ( or template ). There are two essential reasons that you might need to utilize an id characteristic on a component:

• If a component conveys an id characteristic as an exceptional identifier it is conceivable to recognize just that component and its substance.

• If you have two components of the same name inside of a Web page (or template), you can utilize the id credit to recognize components that have the same name. We will talk about template in discrete instructional exercise. For the present, the id ascribe could be utilized to recognize two section components, similar to so:

<p id="html">This para clarifies what is HTML</p>

<p id="css">This para clarifies what is Casecading Style Sheet</p>

Note that there are some extraordinary standards for the estimation of the id quality, it must:

• Begin with a letter (A.Z or a.z) and can then be trailed by any number of letters, digits (0.9), hyphens, underscores, colons, and periods.

• Remain special inside of that report; no two traits may have the same worth inside of that HTML archive.

The title Attribute: The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip or while the element is loading.

For example:

<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

Above code will generate following result: Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and see the result.

The class Attribute:

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it. The value of the attribute may also be a space-separated list of class names. For example:

class="className1 className2 className3"

The style Attribute:

The style attribute allows you to specify CSS rules within the element. For example:

<p style="font-family:arial; color:#FF0000;">Some text...</p>

Internationalization Attributes:

There are three internationalization attributes, which are available to most (although not all) XHTML elements.

· dir

· lang

· xml:lang

The dir Attribute:

The dir attribute allows you to indicate to the browser the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows:

Value Meaning ltr Left to right (the default value) rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example:

<head>

<title>Display Directions</title>

</head>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

</html>

When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.

The lang Attribute:

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents. When included within the <html> tag, the lang attribute specifies the language you've generally used within the document. When used within other tags, the lang attribute specifies the language you used within that tag's content. Ideally, the browser will use lang to better render the text for the user.

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

Example:

<head>

<title>English Language Page</title>

</head>

<body>

This page is using English Language

</body>

</html>

The xml:lang Attribute:

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.

Generic Attributes:

Here's a table of some other attributes that are readily usable with many of HTML's tags. Attribute Options Function align right, left, center Horizontally aligns tags valign top, middle, bottom Vertically aligns tags within an HTML element.

bgcolor numeric, hexidecimal, RGB values Places a background color behind an element background URL Places an background image behind an element id User Defined Names an element for use with Cascading Style Sheets. class User Defined Classifies an element for use with Cascading Style Sheets. Width Numeric Value Specifies the width of tables, images, or table cells. Height Numeric Value Specifies the height of tables, images, or table cells. title User Defined "Pop-up" title for your elements. We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List. HTML Formatting Tags If you want people to read what you have written, then structuring your text well is even more important on the Web than when writing for print. People have trouble reading wide, long, paragraphs of text on Web sites unless they are broken up well. This section will teach you basic text formatting elements like heading elements and paragraph elements.

ElearnSchool

Main menu

HTML

1 comment:

stat counter

Advertise

Blogroll

Contact Form

About Me