Notes of Web Technology/HTML

What is WWW or W3 (World Wide Web)?

The WWW are abbreviation of World Wide Web also called W3 and commonly called Web. WWW is a way of accessing the hyperlink document through internet.

What is HTML?

HTML is a markup language for creating web pages. HTML is abbreviated from Hyper Text Markup Language, where markup language is a set of markup tags. These tags tell the browser how to display the text.

What is DHTML?

In DHTML, D is abbreviated from Dynamic and HTML means Hyper Text Markup Language. DHTML is a collection of different technologies which are used together to create an interactive and animated web sites by using a combination of a static markup language HTML , client-side scripting language such as JavaScript , PHP, CSS , and the Document Object Model.
There are four parts to DHTML:
Document Object Model (DOM) (definition)
Scripts
Cascading Style Sheets (CSS)
XHTML
Document Object Model (DOM): -
The DOM is what allows you to access any part of your Web page to change it with DHTML. Every part of a Web page is specified by the DOM and using its consistent naming conventions you can access them and change their properties.
Scripts: -
Scripts written in either JavaScript or ActiveX are the two most common scripting languages used to activate DHTML. You use a scripting language to control the objects specified in the DOM.
Cascading Style Sheets: -
CSS is used in DHTML to control the look and feel of the Web page. Style sheets define the colors and fonts of text, the background colors and images, and the placement of objects on the page. Using scripting and the DOM, you can change the style of various elements.
XHTML: -
XHTML or HTML 4.x is used to create the page itself and build the elements for the CSS and the DOM to work on. There is nothing special about XHTML for DHTML - but having valid XHTML is even more important, as there are more things working from it than just the browser.

Features of DHTML

There are four primary features of DHTML:
Changing the tags and properties
This is one of the most common uses of DHTML. It allows you to change the qualities of an HTML tag depending on an event outside of the browser (such as a mouse click, time, or date, and so on). You can use this to preload information onto a page, and not display it unless the reader clicks on a specific link.
Real-time positioning
When most people think of DHTML this is what they expect. Objects, images, and text moving around the Web page. This can allow you to play interactive games with your readers or animate portions of your screen.
Dynamic Fonts
This is a Netscape only feature. Netscape developed this to get around the problem designers had with not knowing what fonts would be on a reader's system. With dynamic fonts, the fonts are encoded and downloaded with the page, so that the page always looks how the designer intended it to.
Data binding
This is an IE only feature. Microsoft developed this to allow easier access to databases from Web sites. It is very similar to using a CGI to access a database, but uses an ActiveX control to function. This feature is very advanced and difficult to use for the beginning DHTML writer.

Writing and Testing HTML file

You can write an edit HTML file in any simple text editor such as Note Pad in windows etc .So open your text editor and start writing HTML code.
<HTML>
<HTML> is the very opening for any HTML Web Page. All the other element are written between <HTML> and </HTML> tag. </HTML> tag is placed in the end. <HTML> tell to the browser that this is an HTML Page.
So far what you have coded looks like this:
<HTML>
</HTML>

After opening your document with <HTML> you will start a new line and code
<HEAD> and </HEAD>
<HEAD> and  </HEAD>
The <head> tag is basically container tag which contain some informational tag for browser and Search engine. For example <Title> tag which is not only display on the title bar as title of page also tell to search engine that what is in this page. Head tag also contain some more information about the author, copyright, keywords etc.
In this simple page we Placed only Title Tag between Head Tag .Title tag defines the title of the document and also Title tags tell search engines what your page is about. Every thing in title tag is appear on the title bar.
Now your page coding is look like :
<html>
<head>
<Title> This is my first page </Title>
</head>
After Head tag we place another tag which is body tag. This tag contain actual contents which will be viewed on your Web page. After typing all contents write tag . So far your total coding in the text editor looks like this:
<html>
<head>
<title>My First Page</title>
</head>
<body>

</body>
</html>
Now Write some thing in between <BODY> and </BODY> Tag this mater is display of your HTML Web Page.
For Example:
<html>
<head>
<title>My First Page<title>
</head>
<body>
Hello HTML , This is My First page and contain HTML , HEAD , TITLE and BODY Tag.
</body>
</html>
Now Save this File and give a name. Normally your text editor save the file as text file with txt extension so when you are going to save this file first select All file in Save as Type. and then give the file name with extension. for example learning.html After saving this open this file in your browser.

What is HTML TAGS or HTML Commands

HTML is a markup language, these markup are called tags which tell to the browser how to display the text on user screen. In HTML Document tags element make the structure of Webpage and when user open this code in its browser then these element tells the browser how your website display. All the tags in HTML consists on a start tag and end tag but some element may be have only start tag. These element are called Void element. for example <BR> which is used to break the line.
An HTML element starts with a start tag is also called opening tag and ends with an end tag is called closing tag . Some HTML elements have empty content Empty elements are closed in the start tag. Most of HTML elements may have some attributes.
For example, a paragraph, which is represented by the p element, would be written as
<p>In the HTML syntax, most elements are written ...</p>

What are HTML Tag attributes?

Attribute are the Additional information about that tag which define the characteristics of an element for example Height, Reference, Color etc. The Attribute have two part one is attribute name and other is its value. Below we briefly discuses the different attribute in HTML. The general syntax is as follows:
<tag attribute 1 = "value" attribute 2 = "value" ... >
For example :
<body bgcolor="#E6E6FA">

The Doctype

In HTML you must declare the document type at very first line before the <HTML> tag . The <!DOCTYPE> declaration tell to the web browser about the version of HTML on this page you used.
In each version of HTML the Declaration of Document type is different.
For example
In HTML 5 we declare the document Type as:

<
<!DOCTYPE html>
in HTML 4.01 Strict we can use all HTML elements and attributes. One restriction is that we can not include any presentational elements. In this version  Framesets are not allowed. The document type declaration for HTML 4.01 Strict is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In This version we can use all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The document type declaration for HTML 4.01 Transitional is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
In This version we can use all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). In this version we cal also use The Framesets. The document type declaration for HTML 4.01 Frameset is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>
  </body>
</html>


In the example above, the doctype relates to HTML 4.01 Strict.
< HMTL > and </HTML>Tags
The <HTML> tag is very starting element of the HTML page which is indicate that every thing in between <HTML> and </HTML> are HTML code and also indicate the browser that this is an html file.

<HEAD> and </HEAD>

The <head> tag is basically container tag which contain some informational tag for browser and Search engine. For example <Title> tag which is not only display on the title bar as title of page also tell to search engine that what is in this page. Head tag also contain some more information about the author, copyright, keywords etc.

<TITLE> and </TITLE> Tag
<Title> is part of the Head tag . This is written between <Head> and </Head> tag. Title tag is a descriptive tag, it defines the title of the document and also Title tags tell search engines what your page is about. Every thing in title tag is appear on the title bar. The maximum length of your title must between 20 words. The title appears at the very top of the browser page on the title bar.

<META> Tag
The meta tags are used to describes the information about the HTML page. The meta Tags are very help full for the search engines to understand and categorize your web pages. when people search then your meta tags provide the complete information about the contents of your page. There are many different types of meta tags that can be used for many different purposes.

Meta Descriptions

Meta description provide the main purpose of your webpage.
for Example
<meta name="description" content="learning hints is a learning website of different IT Subject">
if you not specify the meta description then search engines will generate a description from the content of your webpage.
Meta Author
Meta author describe the author the page for example
<meta name="author" content="Tauqeer Shah">

Meta Charset

The charset meta tag tell to web browser about the character encoding of your content. An HTML page can have only a single charset. For most web pages, you should use the UTF-8 character encoding. <meta charset="UTF-8">

Meta Copyrights

<meta name="copyright" content="Learning Hints" />

Meta Copyrights

Meta copyrights tag protect your photos and the text on your website.
<meta name="copyright" content="the Meta Tags Company">

Meta Keywords

Keyword meta tag is very help full for search engine. Search engine put your provide keyword in indexing. Its create great impact to improve your ranking.
<meta name="keywords" content="Text tutorials, video tutorials, notes, exam papers">

Meta language

This meta attribute define the language of the webpage.
<META NAME="language" CONTENT="English">

<BIG> Element In PHP

The <big> element increases the font size by one size increment on the text which is written between <big> and </big>.
<p> This is simple Text but <big> Now This is Some Bigger Text in size </big> This is again normal text </p>

Element In HTML

When a text appear and the disappear alternately the this process is called blinking of text. The text between <blink> and </blink> will be blink when its open in browser.
For example:
<p>
This is simple text <br/>
<blink> This is blinking text </blink>
</p>

<center> Element In HTML

<center> tag aligned the text center of the page or center of the cell of table.
For Example:
<center>This is centered</center>
<center>So is this</center>
<center>And this is centered too</center>
The above markup shown as :

This is centered

So is this

And this is centered too

Now This IS Normal Text

HTML Comments

Comments are used for further description (notes) of HTML code or if you want to make some code ignorable by browser temporarily rather than removing them. These notes will not display in browser window. Comments are also have opening and closing tag.
For example:
This is simple text <Comments> This is test line about comments and not display </comments> ok this is end of the line
This is batter that instead of <comments> we use the standard HTML comment syntax of <!-- comment here -->. Where <!-- is starting tag and --> is closing tag.
For example
<!--   This text not show in the browser window    -->

<i> element in HTML

The i short from italic. its make the text italic. The text between <i> and </i> will display italic in browser window.
<p>
This is simple text<br/>
<i> This is italic text </i>
</p>
The Out Put is look like Like :
This is simple text
This is italic text

Font Element In HTML

Font is very important element of HTML. With font tag you can increase the font size which make the contents more readable. You can apply different font on your heading and give different color. You can also use a <basefont> tag to set the over all of your text to the same size, face, and color. The font tag are used with three attributes which are size, color, and face to customize your fonts.
Font Size Attribute
You can set content font size using size attribute. The size attribute value can be absolute or relative.
Absolute Font size
Absolute font size always fixed and remain the same in all browser and user can not change. When you know about the physical size of the output for example screen resolution etc then use Absolute font size.
when you do not specify a font size then default font size of normal paragraphs is 16px or 3 or 1em or 12pt.
There are different number from 1 ( which is smallest value of font size ) to 7 (which is largest value of font size) are used to define the size of text in your webpage.
<font size="1">Font size="1"</font><br /> <font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
This will produce following result:
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

You can also define the font size in pixel and em and point. for example
<font size="16px">This is font size in pixel</font>
<font size="1em">This is font size in pixel</font>
<font size="12pt">This is font size in pixel</font>

 <A> anchor Tag

The <A> tag defines an link to another document, by using the href attribute or to define a bookmark inside a document, by using the name attribute. The most important attribute of the anchor tag is the href attribute, which describe the destination page.
Attribute of <A> tag
Href : -
href Specifies the destination of a link. The link can be to another page, a part of a page or any other location on the web. Hreflang: -
Specifies the language of a linked document
Name: -
Specifies the name of an anchor.
Target: -
Specifies where to open the linked document. For Example: -
<a href="http://www.learninghints.com">  visit for Turoials </a>
<a href="#content"> This is an example of Link to a page anchor </a>

List In HTML

In html we display the information in shape of list for example if we want to display the name of subject:
1 Math
2 Computer
3 English
HTML offers several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain: 1- Unordered List.
2- Ordered List.
3- Definitions List.

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. An unordered list typically created with bulleted. You can also customize the bullets and to wrap list items horizontally or vertically for multicolumn lists.
The opening list tag must be <UL>. It is followed by an optional list header (<LH>caption</LH>) and then by the first list item (<LI>). For example:
<ul>
<lh>Subject Name</lh>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ul>

which could be rendered as:
Subject Name
Math
Computer
English

We can also pass argument for example
                    <ul type=" disc | square | circle ">
For Example: <ul  type="disc">
<lh>Subject Name</lh>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ul>
The Out Put is loock like following:

    Subject Name
  • Math
  • Computer
  • English

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ol>

The Output of the above is loock like :

  1. Math
  2. Computer
  3. English

We can also pass argument for example
             <ol type="1|a|A|i|I">
For Example

<ol type="A">
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ol>

The Out put will be :

  1. Math
  2. Computer
  3. English

html definition term lists

HTML definition lists display the terms and there definition. The definition list created with <dl> tag.
<dl> - This is start of List
<dt> - Definition term
<dd> - Definition of the list item
You can bold the list item with <b> tag.

Example of HTML Definition List
<dl>
<dt><b>CPU</b></dt>
<dd>Centeral Processing Unit.</dd>
<dt><b>IT</b></dt>
<dd>Information Technology.</dd>
</dt>
</dl>
You can bold the list item with <b>

tag. Out Put IS:
CPU
Centeral Processing Unit.
IT
Information Technology.

Image tag and Attributes of Image Tag

Image tag is used for inserting the image in your webpage. The image is a separate file and we make this file as part of our webpage so user can view this image in web browser.
For inserting an image in a webpage is possible with image element. Below we discus Image tag and its different attribute.
Syntax:
<img src="image1.jpg">
Image Element Attribute
Source Attribute
The Source attribute " src " is major attribute of image element which tell the browser that where the image file is save. For example :
<img src=" images/html.gif ">
will display the image which is store in images folder of root directory.
Size Attribute
The size attributes control the the width and height of the image.
For example :
<img src="image.jpg" width="200" height="150">
Alt & Title Tags Attribute
if you add an image but when user open your webpage and the image source is not found then a blank space display instead of image. So we specify the alternative text which appear in case of image source is not found. This is Alternative text which is define with ALT attribute. For example
<img src="image.jpg" alt="Picture Not Found">
on the other hand Title attribute specify the tool-tip text. When user move mouse over your image the tool-tp text appear.
For example:
<img src="image.jpg" alt="Picture Not Found" title="Learning Hints.com">
Border Size Attribute
The border attribute set the border border size around your image. In the following example a 1-pixel border is applied:
<img src="image.jpg" border="1">
Note : - The alt attribute is also an attribute which provide the image title to search engines, when search engine looking for images searching.
Image Align Attribute
Align attribute is used for horizontally alignment of the image. Image elements are aligned to the left by default.
For example :
   <img src="sunset.gif" align="right">

<Marquee> Tag

The HTML <Marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings. <Marquee> This is basic example of marquee</Marquee> Attribute
behavior:
Defines the type of scrolling.
<marquee behavior="Scroll/Slid/Alternate" >
bgcolor:
Specifies the background color.
<marquee bgcolor="rgb(x,x,x) or #colorHEX Code or Color name" >
Direction
Defines the direction of scrolling the content.
 <marquee Direction="up or down or left or right" >
height:
Defines the height of marquee.
<marquee Direction="size in pix or in %age" > loop :
Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.

<Frameset> Tag

The frameset element holds two or more frame elements. Each frame element holds a separate document. The frameset element states only how many columns or rows there will be in the frameset.
Frame Set Tag has following attributes:
Row and Cols: -
Rows and columns are described by a list of widths or heights. For example COLS="25%, *, 40%" says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over".

<Frame> tag

Frames tag allow you to divide the page into several rectangular box and you can display a separate document in each box. These rectangles box are called a "frame". Frames are one of the most controversial uses of HTML, because of the way the frames concept was designed, and because many web framed web sites are poorly implemented. Each frame in a frameset have different attributes fro example border, scrolling, the ability to resize, etc. Attribute of Frame:
Frame Border:
The frameborder attribute specifies whether or not to display a border around a frame.
Marginheight: -
Specifies the top and bottom margins of a frame.
Marginwidth: -
Specifies the left and right margins of a frame.
Name: -
Specifies the name of a frame.
Noresize: -
Specifies that a frame cannot be resized.
Scrolling: -
Specifies whether or not to display scrollbars in a frame.
Src: -
Specifies the URL of the document to show in a frame.

Forms in HTML

Forms is an input tools in HTML. Like form on paper , HTML form also allows the user to enter requested information on line and submit. For this purpose in HTML you can use <Form> and </Form> Tag. A HTML form contain input elements like text box, checkboxes, radio-buttons, submit buttons etc.
Form attributes
Action: - This attribute specifies the target file where to send the form-data when a form is submitted.
Method: - Method determine the way of sending the data to destination file. There are two method send the data through a URL variable with GET Method and post through HTTP with POST method.
Name: -
Name Specifies the name for a form.

Element of Form

Element

Input elements are used to create data entry field. The following attribute are used with input element.
TYPE: The name of input type. for example Text , option button etc.
NAME:
Give the name to your Input filed.
VALUE: The value of filed.
SIZE: The width the of input field.
MAXLENGTH: The maximum number of the characters of you input.
CHECKED: This is used for checkbox or radio button input filed, are check box or radio button selected or not.
READONLY: The value of this field cannot be changed.
DISABLED: Field is disabled and any user nothing to do anything with this field
TABINDEX: This will set the Tab order.

The following Input type will be used in HTML form
Input Type Text Box This will be create a text box for and user can type the information in this text box which is required.
For example:
<form>
Name of Student:<input type="text" name="sname">
Address:<input type="text" name="address">
</form>
Out Put is :

Name of Student:
Address:

Input Type Password

This will be create a text box for password. when anyone enter the pass word in this box then character will replace with dots.
For example :
<form>
Enter The Password:
<input type="password" name="passed">
</form>

Enter The Password:

Input type Checkbox

Checkbox are also input type which will provide many predefine option and user can select one or more option at at a time.
For example:  <form>
Select any Game:
<input type="checkbox" name="Cricket" value="Cricket">Cricket
<input type="checkbox" name="Football" value="Football">Football
</form>

Select any Game:
Cricket
Football

Input type Radio Button

Option button also predefine input way but user can select one at a time from the given set of input choice.
For example:
<form>
<input type="radio" name="gender" value="male" checked>Male
<br>
<input type="radio" name="gender" value="female">Female
</form>
Out Put is :

Male
Female

Select Element

The <select> element in HTML form create a drop-down list and user can select any option from the list. Select element use with

FILE Element

File element display the brows button to select any file for upload from user system.
For Example:
 <form >
<input type="file" name="userpicture" accept="image/*">
</form>

TEXT AREA Element

The <textarea> element is an input control which is used for multi-line text.
Text aria element have following attribute
Name: name of this form field
Cols: how many characters wide
Rows: how many rows
Wrap: how to wrap the text
Readonly: don't let the user change the contents of the field
For example:
<textarea rows="6" cols="50">
Write your comments
</textarea>
For Example :

Labels Element

The <label> element define the title (Label) for any input element.
For Example: -

<form>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="gender" id="female" />
</form>
 
Out Put is:


Cascading Style Sheets( CSS)

The <style> tag is used to define style information for an HTML document.
There are three kinds of ways to attach style rules:
Inline Style Attribute
In-page Style Tags (Internal Style Sheet)
External Style Sheet

Inline Styles

In Inline style you have to define the style each time when you use a element. Its means that instead of defining the style once in whole document you define the style of each element again and again when you use an element. For example if you define the style one time for paragraph element then its apply on all the paragraph which you use in you document in the same way. But in Inline style you must define the style of every and each Paragraph tag. The main reason of inline style is that you can apply the different formation option with different way on each element. For example on one paragraph tag font size is 16px and on other paragraph tag 20px.
The example below shows how to change the background color of a paragraph with inline style (you can use all the property of CSS in style element as attribute).


<html>
<body>
<p> This is simple paragraph </p>
<p  style="background-color : yellow ;"> This paragraph contain yellow back ground color </p>
</body>
</html>

In-page Style Tags (Internal Style Sheet)

If you want to define a style for all the same type of element. for example for H1 heading element, font color is Red then you can define Internal or In-page style. In this type you can define style once and it apply on the whole page. Internal styles are defined in the Head section of an HTML page.
Now we take an example .
in previous example you noticed that we have tow paragraph but only the color of one paragraph is changed in which we use style attribute. and other remain simple this is inline style. Now we declare the in-Page style for example:


<html>
<head>
<head>
<style>
p
{
background-color : yellow ;
}
</style>
</head>
<body>
<p> This is first paragraph</p>
<p> This is second paragraph</p>
</body>
</html>

In this example you specify style once in the head section and then it will be apply each instance of that style.
Attributes of In-page Style Tags (Internal Style Sheet)
This element includes the global attributes.
Type:This attribute defines the styling language. The language 'text/css' is assumed if this attribute is not present absent.
Media: Select the media on which this style is applied. For example for graphical displays, screens, print etc.).
Scoped:If we used scoped attribute then the style applies only to its parent element. if we don't use this attribute style applies to the whole document.
Title: Specifies alternative style sheet sets.

External Style Sheet

When you want to apply a style on many pages in your website then you create an external style sheet. With the help of external style sheet you can change the look of entire website by changing in a single file which is called external Style Sheet. The external style sheet separately save with CSS extension. Each page of your website linked to the style sheet using the <link> tag. The <link> must be written in Head Section of each page. For example:


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

Where pagestyle.css is external style sheet.
Example of External style sheet:
Open any text editor for example Notepad in windows and write the following code for external style sheet and save it as pafestyle.css.


body
{
background-color: gray;
}
p
{
color: blue;
font-size=18px;
}
h1
{
color: white;
}

Now link this file in your HTML file in the head section.

<HTML>
<head>
<Title> Learning hints  </Title>

<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>
<body>
<p> This is paragraph of you web page formatted by external style sheet.</p>
<h1> This heading also formatted by external style sheet</h1>
</body>
</html>