Breaking News

HTML basics-Learn web development | SCIKEEDA

What is an HTML File?


  •  HTML stands for Hyper Text Markup Language 
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page 
  • An HTML file must have an htm or html file extension 
  • An HTML file can be created using a simple text editor
If you are running Windows, start Notepad.
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of
your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open".
Now you should see an address in the dialog box, for example
"C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained::

  • -The first tag in your HTML document is <html>. -This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>.
  • -This tag tells your browser that this is the end of the HTML document.
  • -The text between the <head> tag and the </head> tag is header information.
  • -Header information is not displayed in the browser window.
  • -The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.
  • -The text between the <body> tags is the text that will be displayed in your browser.
  • -The text between the <b> and </b> tags will be displayed in a bold font.



HTML Or HTML EXTENSION

When you save an HTML file, you can use either the .htm or the .html extension.
We have used .htm in our examples. It might be a bad habit inherited from the
past when some of the commonly used software only allowed three letter
extensions.
With newer software we think it will be perfectly safe to use .html.
Note on HTML Editors:
You can easily edit HTML files using a WYSIWYG (what you see is what you get)
editor like FrontPage, Claris Home Page, or Adobe PageMill instead of writing your
markup tags in a plain text file.
But if you want to be a skillful Web developer, we strongly recommend that you
use a plain text editor to learn your primer HTML.
HTML Elements
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
HTML Tags
 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

HTML Elements

Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed
as bold.
This is also an HTML element:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag
</body>.
The purpose of the <body> tag is to define the HTML element that contains the
body of the HTML document.
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B> means the same as
<b>. When you surf the Web, you will notice that most tutorials use uppercase
HTML tags in their examples. We always use lowercase tags. Why?
If you want to prepare yourself for the next generations of HTML you should start
using lowercase tags. The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML 4 recommendation, and XHTML (the next generation
HTML) demands lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the
HTML elements on your page.
This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page
should be red, like this: <body bgcolor="red">.
This tag defines an HTML table: <table>. With an added border attribute, you can
tell the browser that the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: name="value".
Attributes are always added to the start tag of an HTML element.
Quotes Style ,"red" or 'red' ?
Attribute values should always be enclosed in quotes. Double style quotes are the
most common, but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is
necessary to use single quotes:
name='John "ShotGun" Nelson'

HTML TAGS

Basic HTML Tags

The most important tags in HTML are tags that define headings,
paragraphs and line breaks.
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. You can use comments to explain your
code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before
the closing bracket.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic
text.
How to View HTML Source
Have you ever seen a Web page and wondered "How do they do that?"
To find out, simply click on the VIEW option in your browsers toolbar and select
SOURCE or PAGE SOURCE. This will open a window that shows you the actual
HTML of the page.
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead



HTML Character Entities

Some characters like the < character, have a special meaning in HTML,
and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character entity.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display these
characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: &lt; or &#60;
The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your
text HTML will remove 9 of them. To add spaces to your text, use the &nbsp;
character entity.
The Most Common Character Entities:
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; &#39;
Some Other Commonly Used Character Entities:
Result Description Entity Name Entity Number
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;
Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)

HTML Tables

With HTML you can create tables.
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the
<tr> tag), and each row is divided into data cells (with the <td> tag). The letters
td stands for "table data," which is the content of a data cell. A data cell can
contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any
borders. Sometimes this can be useful, but most of the time, you want the borders
to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Note that the borders around the empty table cell are missing.
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the
borders visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer

HTML Images

With HTML you can display images in a document.
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has
no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to display
on your page.
The syntax of defining an image:
<img src="url">
The URL points to the location where the image is stored. An image named
"boat.gif" located in the directory "images" on "www.schools.com" has the URL:
http://www.schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you
put an image tag between two paragraphs, the browser shows the first paragraph,
then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of
the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">
The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text instead
of the image. It is a good practice to include the "alt" attribute for each image on a
page, to improve the display and usefulness of your document for people who
have text-only browsers.
Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map


HTML Backgrounds

A good background can make a Web site look really great.
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.
Bgcolor
The bgcolor attribute sets the background to a color. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background color to black.
Background
The background attribute sets the background to an image. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the
browser window, the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">
<body background="http://www.schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second
line above).

No comments

Thank You For your Query !! Please Contact Us via Contact Form For any kind of Information.