Girfa : Student Help: HTML Tutorial

What Is HTML?

HTML is a markup language, not a programming language. In fact, the term HTML is an acronym that stands for Hypertext Markup Language. You can apply this markup language to your pages to display text, images, sound and movie files, and almost any other type of electronic information. You use the language to format documents and link them together, regardless of the type of computer with which the file was originally created.

HTML is written as plain text that any Web browser or word processing software can read. The software does this by identifying specific elements of a document (such as heading, body, and footer), and then defining the way those elements should behave. These elements, called tags, are created by the World Wide Web Consortium (W3C).

simple HTML page

<html>

<head>

<title>My Second Web Page</title>

</head>

<body>

Place Your Code Here

</body>

</html>

Paragraphs

In HTML, a paragraph is created whenever you insert text between the <p> tags

<p>This is my first XHTML page.</p>

Headings

HTML enables you to add six different heading tags to your pages by using the tags <h1><h6>. These tags are very simple to use.

<h1>This is Heading 1</h1>

Special Characters

You might find that you sometimes need to use symbols on your Web pages. Symbols (such as +, , %, and &) are used frequently in our everyday writing, so it's easy to understand that they would appear on a Web page as well. Unfortunately, not all Web browsers display these symbols correctly. HTML uses a little computer shorthand, either using a numerical code or a text code (called an entity character reference) to tell the browser how to interpret these symbols

Char	Code	Description
&	&	Ampersand
<	<	Less than
>	>	Greater than
©	©	Copyright
®	®	Registered trademark
±	&plusmin;	Plus or minus
²	²	Superscript 2
³	³	Superscript 3
´	´	Acute accent
`	`	Grave accent
#	#	Number

Math and Science Notations

Although HTML was first designed and used by scientists, it has yet to support mathematical and scientific notation with any degree of complexity. HTML does give you two tags to help write simple equations. Together with the codes for special characters, the <sub> (subscript) and <sup> (superscript) tags go a long way toward creating equations?

You Type	The Browser Displays
A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup>	A²+ B² = C²
CO<sub>2</sub> = Carbon Dioxide	CO₂ = Carbon Dioxide

Meta Tags

Finally, you get to do something with the <head> tag. So far, you've only seen the <title> tag used to give information about the document, but you can do a lot more with the <head> tag. What's more, aside from the <title> tag, information in the <head> tag doesn't usually appear in your document. You can use the meta information tag (<meta>) to identify the page's author, keywords used for searching, or a brief description to appear in search results. You also can use the <meta> tag to give commands to the browser. You can use as many <meta> tags as you like in your page. You'll learn how in the sections that follow.

Meta Tags

Improved Searching

Search engines add the content of your Web pages to their indexes. When a potential visitor enters a search phrase, the search engine checks its index to find that word and returns any pages that include that word. It works great. But, what if you were a realtor and you worked hard at creating a Web page that included the words houses, housing, sale, and buy; but didn't include the phrase real estate? If that was the phrase your visitor was looking for, they would never find your page.You can use the <meta> tag to include product names, geographic locations, industry terms, and synonyms that people might be searching for. There are three <meta> tags that work to help improve your chances of being found by a search engine:

Keywords Keywords are words that you feel people might use to search for your Web page, or synonyms for words that appear in your document.
Description This is usually a paragraph of information about your page. Some search engines use the information in this tag to summarize your page, but other search engines use the first few lines of text in your actual document.
Author This is your opportunity to shine. Just in case someone is searching for your name, they will find your page if you enter that information into the <meta> tag.

<html>

<head>

use to search for your page." />

your document." />

</head>

<body>

<p>Insert your text here.</p>

</body>

</html>

Hyperlinks

The easiest link to learn is the hyperlink to another location. The <a> tag with the HRef attribute and its closing tag, </a>, surround any text that you want to highlight. The default hyperlink highlighting in HTML is underlined blue text. In the following example, you would click on the words click here to jump (hyperlink) to the document found at the URL inside the quotes (http://www.microsoft.com).

Please <a href="http://www.microsoft.com">click here</a> to

open the Microsoft Web site.

Bulleted (Unordered) Lists

A bullet (usually a solid circle) appears in front of each item in an unordered list. HTML automatically creates the bullet when you use the unordered list tag (<ul>) together with the list item tag (<li>). Although the following sample HTML shows each list item as a single line of text, your list items can be as long as you want:

<ul><li>first item in the list</li>

<li>second item in the list</li>

<li>third item in the list</li></ul>

Numbered (Ordered) Lists

If the items in your list should follow a specific order, as in recipes or instructions, you want to use the ordered list tag (<ol>). With this tag, HTML automatically numbers or letters your items for you. Here's an example:

<ol><li>first item in the list</li>

<li>second item in the list</li>

<li>third item in the list</li></ol>

Definition Lists

If you need it, HTML has one more type of list available to you: the definition list, which uses the <dl> tag. Rather than using the usual <li> tag to specify the items in the list, this type of list uses the <dt> tag (for definition terms) and the <dd> tag for their definitions. Following is an example of the HTML for a definition list

<dl><dt>The Definition Term</dt>

<dd>Is defined below the term.</dd></dl>

Simple Tables

Traditionally, tables have been used for displaying tabular data (such as numbers) in rows and columns. The flexibility of HTML, however, enables Web developers to create tables that display more than just numbers. In fact, as important as the capability to display tabular data is, even more important to Web designers is the capability to control the layout of other document elements (such as text and images).

HTML tables are not difficult to create, but they do require some organization. All HTML tables begin with the <table> tag and end with the </table> tag. In between those tags are three other tags to be aware of, as follows:

· <tr> defines a horizontal row.

· <td> defines a data cell within that row.

· <th> specifies a data cell as a table heading. In newer browsers, a table heading cell is formatted as centered and bold

<table>

<tr>

</tr>

<tr>

<td>Varanasi</td>

</tr>
</table>

Adding Images

The two most frequently used graphics file formats found on the Web are GIF and JPEG. The Joint Photographic Experts Group (JPEG) format is used primarily for realistic, photographic-quality images. The Graphics Interface Format (GIF) is used for almost everything else. One new file format is gaining popularity among designers and will soon be making its presence known: The Portable Network Graphics format (PNG) is expected to replace the GIF format someday. Don't rush out to replace all your graphics, however; not all browsers support it fully yet.

You add all images by using a single HTML tag, the image source tag, <img src="location" />. By now you probably recognize that this tag is actually an <img /> tag with an attribute (src) and attribute value (location), but because all images require a src attribute, it's easier to refer to it as a single tag. You'll also notice that the image tag does not have a corresponding closing tag. It is a single tag and you'll need to remember to add the closing slash at the end: <img />.

<img src="http://www.thingstobehappyabout.com/face2.gif" />

Forms

HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Radio Button Input

<input type="radio"> defines a radio button.

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.

The form-handler is typically a server page with a script for processing input data.

<form action="action_page.php">
First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Pages

Tuesday, 9 February 2016

HTML Tutorial

What Is HTML?

Paragraphs

Special Characters

No comments:

Post a Comment