HTML


 

Introduction:

  • HTML stands for Hypertext Markup Language, is the predominant markup language for web pages.
  • HTML provides it means to create a structured document such as headings, paragraphs, lists, links, quotes, and other so many items.
  • Support images and objects (audio and video) to be embedded and create a interactive WebPages.
  • Scripts languages such as JavaScript, VB script which are allow to load that affect to create a dynamic user interactive WebPages.

Attribute:

HTML elements can have a range of different attributes; the available attributes vary depending on which element you’re dealing with. Each attribute is made up of a name and a value, and these are always written as name=”value”. Some attributes are optional while others are compulsory, but together they give the browser important information that the element wouldn’t offer otherwise. For example, the image element has a compulsory “image source” attribute, the value of which gives the filename of the image. Attributes appear only in the opening tag of any given element.

 

The html Element

There are two major sections inside the html element: the head and the body.

 

The head Element:

HTML <head> tag is a Container Tag. All Header element contains like general information about page, meta-information, style sheet URL and document type information.

HTML <head> tag inside elements does not display in body part on web browser.

HTML <head> tag inside Elements is <!doctype>, <base>, <link>, <meta>, <title>, <style> and <script>.

The head element contains information about the page, but no information that will be displayed on the page itself. For example, it contains the title element, which tells the browser what to display in its title bar (the title bar is the very top part of the browser window—the part with minimize, maximize and close buttons):

<head>

<title>Untitled Document</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

</head>

The title Element

The opening

<title>

and closing

</title>

tags are wrapped around the words “Untitled Document” in the markup above.

Note that the <title> signifies the start, while the closing </title> signifies the end of the title.

The Untitled Document title is typical of what HTML authoring software provides as a starting point when you choose to create a new web page; it’s up to you to change those words.

The content of the title element is also used for a number of other purposes:

  1. It’s the name that appears in the Windows Taskbar—that strip along the bottom of your Windows desktop that show all the currently open windows—for any open document.
  2. If users decide to add the page to their bookmarks (or favorites), the title will be used to name the bookmark.
  3. Your title element is used heavily by search engines to ascertain what your page contains, and what information about it should be displayed in the search results.

Head Elements Usages

HTML <!doctype> tag use for define a type of document.
HTML <link> tag is use for linked external CSS style sheet, external javascript etc… URL define.
HTML <meta> tag use for improve a rankings in search engines means optimize webpage using proper meta data information.
HTML <title> tag define a document title.
HTML <style> tag is use for write internal CSS inside current document.
HTML <script> tag is use for create a dynamic web pages easy and more flexible in internal and external write a javascript code.

Tag

Description

<!DOCTYPE> Defines a document type and write before the <html> start tag.
<head> Defines harder information about the webpage document.
<meta> Defines meta information use to improve a rankings in Search Engines.
<title> Defines a Document Title.
<link> Defines a URL link using External Style Sheet, Javascript etc..
<base> Defines a base is used to specify a base URL to relative webpage URL links.

meta Elements

Inside the head element in our simple example, we can see a meta element, which is shown in bold below:

<head>

<title>Untitled Document</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

</head>

meta elements can be used in a web page for many different reasons.

Some are used to provide additional information that’s not displayed on screen to the browser or to search engines; for instance, the name of the page’s author or a copyright notice might be

included in meta elements. In the example above, the meta tag tells the browser which character set to use (specifically, UTF-8, which includes the characters needed for web pages in just about any written language).

There are many different uses for meta elements, but most of them will make no discernible difference to the way web page looks in the initial stage.

Self-closing Elements

The meta element is an example of a self-closing element (or an empty element). Unlike title, the meta element needn’t contain anything, so we could write it as follows:

<meta http-equiv=”Content-Type”  content=”text/html; charset=utf-8″></meta>

XHTML contains a number of empty elements, and the boffins who put together XHTML decided that writing all those closing tags would get annoying pretty quickly, so they decided to use self-closing tags: tags that end with />. So our meta example becomes:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

Other head Elements

Other items, such as CSS markup and JavaScript code, can appear in the head element.

The body Element

The body element of the page contains almost everything that you see on the screen: headings, paragraphs, images, any navigation that’s required, and footers that sit at the bottom of the web page:

<!DOCTYPE html PUBLIC “-//ABC//DTD XHTML 1.0 Strict//EN”

http://www.abc.com/AB/xhtmla/DTD/xhtmla-strict.dtd”&gt;

<html xmlns=”http://www.abc.com/2013/xhtml”&gt;

<head>

<title>Untitled Document</title>

<meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8″/>

</head>

<body>

</body>

</html>

 

What’s an Attribute?

HTML elements can have a range of different attributes; the available attributes vary depending on which element you’re dealing with. Each attribute is made up of a name and a value, and these are always written as name=”value”. Some attributes are optional while others are compulsory, but together they give the browser important information that the element wouldn’t offer otherwise. For example, the image element has a compulsory “image source” attribute, the value of which gives the filename of the image. Attributes appear only in the opening tag of any given element.

Headings and Document Hierarchy:

In the example above, we use an h1 element to show a major heading. If we wanted to include a subheading beneath this heading, we would use the h2 element. A subheading under an h2 would use an h3 element, and so on, until we get to h6. With headings, an important and commonsense practice is to ensure that they do not jump out of sequence. In other words, you should start from level one, and work your way down through the levels in numerical order. You can jump back up from a lower-level heading to a higher one, provided that the content under the higher-level heading to which you’ve jumped does not refer to concepts that are addressed under the lower-level heading. It may be useful to visualize your headings as a list:

Here’s the HTML view of heading example:

<h1>First Major Heading</h1>

<h2>First Subheading</h2>

<h2>Second Subheading</h2>

<h3>A Sub-subheading</h3>

<h1>Another Major Heading</h1>

<h2>Another Subheading</h2>

Paragraphs

 

The element we use to deal with blocks of text is the p element. It’s not difficult to remember, as p is for paragraph. That’s just as well, because you’ll almost certainly find yourself using this element more than any other. And that’s the beauty of HTML: most elements that you use frequently are either very obvious, or easy to remember once you’re introduced to them.

Lists

To include an ordered list (the HTML term for a numbered list) of items, we use the ol element. An unordered list —known as bullet points —makes use of the ul element. In both types of list, individual points or list items are specified using the li element. So we use ol for an ordered list, ul for an unordered list, and li for a list item.

To see this markup in action, type the following into a new text document, save it as lists.html, and view it in the browser by double-clicking on the saved file’s icon:

<head>

<title>Lists – an introduction</title>

<meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8″/>

</head>

<body>

<h1>Lists – an introduction </h1>

<p>Here’s a paragraph. A lovely, concise little paragraph.</p>

<p>Here comes another one, followed by a subheading.</p>

<h2>A subheading here</h2>

<p>And now for a list or two:</p>

<ul>

<li>This is a bulleted list</li>

<li>No order applied</li>

<li>Just a bunch of points we want to make</li>

</ul>

<p>And here’s an ordered list:</p>

<ol>

<li>This is the first item</li>

<li>Followed by this one</li>

<li>And one more for luck</li>

</ol>

</body>

</html>

Symbols

Occasionally, you may need to include the greater-than (>) or less-than (<) symbols in the text of your web pages. The problem is that these symbols are also used to denote tags in HTML.

The entity for the greater-than symbol is &gt;

—we can substitute it for the greater-than symbol in our text, as shown in the following simple example. The result of this markup is shown in the figure below, “The &gt; entity is displayed as > in the browser”.

<head>

<title>Stock Note</title>

<meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8″/>

</head>

<body>

<p>Our current stock of craft knives &gt; OUT OF STOCK (more due in 3 days)</p>

</body>

</html>

Many different entities are available for a wide range of symbols, most of which don’t appear on your keyboard. They all start with an ampersand (&) and end with a semicolon. Some of the most common are shown below:

&gt; >

&lt; <

&amp; &

&pound; £

&copy; ©

&trade; ™

 

Adding Structure:

A div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when combined with CSS. When you place content inside a div, it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Unlike a p element, the div does not add any margins or padding.

<div>This is a div.</div>

<div>The content of each div appears on a new line.</div>

<div>But unlike paragraphs, there is no additional padding.</div>

<div>A div is a generic block-level container.</div>

The purpose of a div is to divide (hence the abbreviation ‘div’) up a web page into distinct sections—a basic structural framework with no styling. Rather than leaving the paragraph tags as they are, you might decide to have something like this:

<div>

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

<p>So is this.</p>

</div>

You can have as many paragraphs as you like inside that div element, but note that you cannot place

div elements inside paragraphs. Think of a div as a container that’s used to group related items together.

 

Linking Between Our New Pages:

To enable site visitors to move around, we need to add navigation. Navigation relies on anchors, which are more commonly referred to as links. The HTML for an anchor, or link, is as follows:

<a href=”filename.html”>Link text here</a>

The a element might not be intuitive (it stands for “anchor”).

The a element contains the link text that will be clicked (which, by default, appears on the screen as blue, underlined text).

The href attribute refers to the URL to which you’re linking (be that a file stored locally on your computer, or a page on a live web site). Unfortunately, again, href is not immediately memorable (it stands for “hypertext reference”).

Taking a Break

The break element (br) basically replicates what happens when you hit the carriage return on an old typewriter. In HTML, the fact that you’re marking up a paragraph with <p> and </p> tags means the spacing is worked out for you automatically. However, if you just want to signify the start of a new line, rather than a new paragraph, the element you need is br, as demonstrated in here:

<p>The example,

<br/>

For line break1.

<br/>

For line break2,

<br/>

For line break3,

<br/>

For line break4.</p>

 

Will get back to you soon. :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s