Tuesday, May 3, 2016

HTML এর গুরুত্বপুর্ন কিছু Tag

Heading And Pragraph

Heading

Headings are defined with the < h1 > to < h6 > tags.
< h1 > defines the most important heading. < h6 > defines the least important heading.
Example:
<h1> This is a heading</h1> <h2> This is a heading</h2> <h3> This is a heading</h3> Output:

This is a heading

This is a heading

This is a heading


Pragaph

The HTML < p > element defines a paragraph.
Example:
First Pragraph
Secound Pragraph

Output:
First Pragraph
Secound Pragraph
Link and List

Link


Link Syntax:
< a href="url" >link text</ a >
Example:
<a href="http://fb.com/">facebook</a> Output:

List

Unordered List:


Example:
<br /> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Output:
  • Coffee
  • Tea
  • Milk

Ordered List:


Example:
<br /> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Output:
  1. Coffee
  2. Tea
  3. Milk
Ordered list Type:
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Example:

  1. Coffee
  2. Tea
  3. Milk

Output:
  1. Coffee
  2. Tea
  3. Milk

Description List:


Example:

Coffee
Tea
Milk
Output:

Coffee
Tea
Milk

Image

Image Syntax:

< img src="url" alt="some_text" >

Example:
<img alt="my photo View" o="" src="image/mypic.jpg" style="height: 300px; output: &lt;/b&gt;&lt;br/&gt; &lt;div id=; width: 250px;" /> <img alt="my photo View" src="https://lh3.googleusercontent.com/-fIdvRJbFQh8/VxX8VckmPYI/AAAAAAAAATM/ps2BmsxQyZANSdr6z3fwImuPPmLBpx6Rw/w736-h538-no/tarik.JPG" style="height: 300px; width: 250px;" />

Table


Tables are defined with the < table > tag.
Tables are divided into table rows with the < tr > tag.
Table rows are divided into table data with the < td > tag.
A table row can also be divided into table headings with the < th > tag.

Example:

<table border="1" style="width: 100%;"> <tbody> <tr> <th>roll</th> <th>name</th> <th>department</th> </tr> <tr> <td>13102</td> <td>Hasnat</td> <td>CMT</td> </tr> <tr> <td>13103</td> <td>Munni</td> <td>CMT</td> </tr> </tbody></table>

Output:


roll name department
13102 Hasnat CMT
13103 Munni CMT

Span Many Columns:

Example:

<table border="5px" style="width: 100%;"> <tbody> <tr> <th>Name</th> <th colspan="2">Mobile No</th> </tr> <tr> <td>Tarik</td> <td>01781371287</td> <td>01942081518</td> </tr> </tbody></table>

Output:


Name Mobile No
Tarik 01781371287 01942081518

Span Many Row:

Example:

<table border="5px" style="width: 100%;"> <tbody> <tr> <td>Name</td> <td>Tarik</td> </tr> <tr> <td rowspan="2">phone no</td> <td>01781371287</td> </tr> <tr> <td>01942081518</td> </tr> </tbody></table>

Output:


Name Tarik
phone no 01781371287
01942081518

Iframes


Syntax:


The syntax for adding an iframe is:
< iframe src="URL" ></ iframe >

Example:

<iframe height="300" src="image.html" width="600"></iframe>

Output:

Target for a link

Example:

<iframe name="iframe_a" src="http://google.com"></iframe>
facebook.com

Output:

facebook.com

Form

Syntex:
< form >
.
form elements
.
< /form >
Text input

Example:
First name:
Last name:
Output:
First name:
Last name:
Radio Button Input

Example:
Male
Female
Output:
Male
Female
Submit Button

Example:
First name:
Last name:

Output:
First name:
Last name:

Drop-Down List

Example: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> Output:

Button:

Example: <button onclick="alert('Tarik BIlla- student of computer engineering')" type="button">Click hear!!!!!</button> Output:

Audio

Example: <audio controls=""> <source src="Audio/audio101.mp3" type="audio/mpeg"></source> </audio> Output:

Video


Example: <video controls="" height="240" width="320"> <source src="Video/video121.mp4" type="video/mp4"></source> Your browser does not support the video tag. </video> Output:

Youtube


Example: <iframe height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="420"> </iframe> Output:

All Tags

Tag Description
<!--...--> Defines a comment
<!DOCTYPE>  Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<acronym> Not supported in HTML5. Use <abbr> instead.Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Not supported in HTML5. Use <object> instead.Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5. Use CSS instead.Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element 
<colgroup> Specifies a group of one or more columns in a table for formatting
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Represents the defining instance of a term
<dialog> Defines a dialog box or window
<dir> Not supported in HTML5. Use <ul> instead.Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text 
<embed> Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<font> Not supported in HTML5. Use CSS instead.Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame> Not supported in HTML5.Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header> Defines a header for a document or section
<hgroup> Defines a group of headings
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<main> Specifies the main content of a document
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noframes> Not supported in HTML5.Defines an alternate content for users that do not support frames
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strike> Not supported in HTML5. Use <del> instead.Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5. Use CSS instead.Defines teletype text
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie
<wbr> Defines a possible line-break

No comments:

Post a Comment

Tarik Billa