This post is for those who want to learn HTML in 2 days must read this post.After reading this post you are yourself able to make your own blog....
HTML:-
What is HTML?
HTML is a language for Elaborating web pages.
Now the question is html stands for:-
HTML stands for Hyper Text Markup Language in which hyper text is a structure and all browsers can easily read HTML.
HTML is a markup language.
A markup language is a set different tags in used to built a web page.
HTML documents are also called web pages.
versions of HTML:-
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013.
HTML Tags:-
HTML (markup language) tags are usually called HTML tags.
HTML tags are tag names (keywords) surrounded by angle brackets like <html>
HTML tags normally inserted in pairs like <b> and </b>.
The first tag in a pair is the start tag that is <b>, the second tag is the end that is tag</b>
The end tag is just similar like the start tag only the small difference is the slash in the starting.
Start and end tag is also called the opening and closing tag.
The DOCTYPE declaration defines the document type.
The text between <html> and </html> defines the web page.
The text between <body> and </body> is the visible web page content.
The text between <h1> and </h1> is displays the heading.
The text between <p> and </p> is displays paragraph.
Lets explain this with an example:-
<!DOCTYPE html>
<html>
<body>
<h1>We are entwicklers</h1>
<p>This is our first web page.</p>
</body>
</html>
After the whole code is written just save this having extension that is .html and execute after saving that file.
using notepad writting html:-
Step 1:-
notepad.
for starting notepad go to:-
.Start
.All programs
.Accessories
.Notepad
Step 2:-
Type your html code into the notepad
Step 3:-
save your html with .html extension.
Step 4:-
Run the html in your browser.
HTML headings:-
HTML headings are define with <h1> to <h6> tags i.e <h1></h1> or <h6></h6>
Example:-
<h1>We are entwicklers</h1>
<h2>We are entwicklers</h2>
<h3>We are entwicklers</h3>
HTML paragrahps:-
The paragraphs are define with the tag <p> i.e <p></p>
example:-
<p>We are the entwicklers</p>
<p>We are the developers </p>
HTML Links:-
The HTML link tag is define with <a> i.e <a></a>
Example:-
<a href ="http://www.entwicklers.com">this is a link</a>
HTML images:-
The image tag is generally used to insert the image in your web page and it is define with <img> tag.
Example:-
<img src="entwicklers.jpg" width="100" height="200">
HTML Elements:-
The html elements is everying thing from opening tag to closing tag.
Example:-
<html>
<body>
<p>This is the entwicklers.</p>
</body>
</html>
HTML Attributes:-
Attributes can provide additional information about an element.
Attributes are always specified in the opening tag.
Attributes come in value/name pairs like: name="value" .
EXample:- Link tags are defined with the <a> tag. The link address is specified in the href attribute:
<a href ="http://www.entwicklers.com">this is a link</a>
HTML Headings:-
Headings are defined just only to make your web page attractive
Headings are defined with the <h1> to <h6> tags.
<h1>It defines the most important heading.
<h6> defines the least important heading.
Example:-
<h1>We the entwicklers</h1>
<h2>Designers next door</h2>
<h3>Can make web pages attractive</h3>
HTML Lines:-
The HTML <hr> tag creates a horizontal line in an HTML WEB PAGE.
The hr tag can be used to separate content:
Example:-
<p>This is entwicklers.</p>
<hr>
<p>Designers next door.</p>
<hr>
<p>Can make web pages attractive.</p>
HTML Comments:-
If you dn't want to use your text for sometime then you have to just do is comment that text..
Example:-
<!-- This is a comment -->
HTML Paragraphs:-
Paragraphs are generally defined as the content written betwwen the tag that is<p> tag.<p></p>
Example:-
<p>This is entwicklers</p>
<p>Designers next door.</p>
Never forget to close the tag:-
Example:-
<p>This is entwicklers
<p>Designers next door
HTML Line Breaks:-
the <br> tag is generally used to break the line that is a new line without starting a new paragraph:
Example:-
<p>This is<br>entwicklers<br>Designers next door</p>
The HTML Element <head>:-
The element <head> is a container for all the head elements in html. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information in brife, and so on...
These tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element
The tag <title> defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>entwicklers</title>
</head>
<body>
perfect designers......
</body>
</html>
The HTML <base> element:-
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.entwicklers.com/images/" target="_green">
</head>
The HTML <link> element:-
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="entwicklers.css">
</head>
The HTML <style> element:-
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you can specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:blue;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element
Metadata is data (information) about data that is the whole information in brife.
The <meta> tag gives metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable that is we cn't see this manually but it is running and can be read only by machine.
Meta elements are typically used to specify page description that is what page is all about, keywords, author of the document, last modified, and other metadata.
The metadata can be used by all browsers that is how to display content or reload page, search engines (keywords), or other web services.
<meta> tags always written inside the <head> element.
<meta> Tags - Examples of Use
Define keywords for search engines:-
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The HTML <script> element:-
The <script> tag is generally used to describe a client-side script, such as a JavaScript.
The <script> element will be explained in a later chapter.
CSS:- cascading style sheet:-
css is backbone of html just beacuse of the attractive properties of the css. all the website developers used css to make the wesite attractive.only a website developer knows the power of css.
It is of three types.
1.Inline.
<p style="color:blue;margin-left:50px;">This is a paragraph.</p>
2.inside head
<head>
<style>
h2
{
align:center;
}
</style>
</head>
3.by calling css.
<head>
<link type "text/css"rel="stylesheet"href="mystyle.css"/>
</head>
</head>
HTML images:-
<img src="14.jpg" alt="DUKE ADI" height="100" width="100"/>
This tag is always used to insert image in your web page and this tag is very easy to implement.
HTML Tables:-
HTML Tables are defined with the <table> tag.
A HTML table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<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>
The Border Attribute and HTML Tables:-
If you have not specify a border attribute, the table will be displayed without borders. Sometimes it is very useful, but most of the time, we want the borders to show on table.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers:-
Header information in a table are defined with the <th> tag.
All the major and known browsers display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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>
HTML Lists:-
HTMML lists are divided into two categories that is:-
1.ordered
2.unordered
An ordered list is consists of the first list item,second list item and third list item for the whole HTML web pages process.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numerics.
Example:-
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the above code looks on browser after it runs:-
1.Coffee
2.Milk
An unordered list consists of list item only.
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the above code looks in a browser:
.Coffee
.Milk
HTML Description Lists:-
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the above code looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
HTML BLOCKS:-
HTML Block Elements
Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a web browsers.
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements:-
Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element
The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.
The HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
HTML Layouts:-
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
HTML FORMS:-
HTML Forms
HTML forms are used to pass data to a server.
An HTML form can contain input element like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
Example:-
<form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the above code looks on browser after it runs:-
First name:
Last name:
Password Field:-
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
How the above code looks on browser after it runs:-
Password:
Radio Buttons:-
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the above code looks on browser after it runs:-
Male
Female
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
How the above code looks on browser after it runs:-
I have a bike
I have a car
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the above code looks on browser after it runs:-
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML IFRAMES:-
The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example:-
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
HTML color coding format(codes):-
HTML javascript:-
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements or it points to an external script file through the src attribute.
Common uses for JavaScript are:-
1.image manipulation.
2.form validation.
3.dynamic changes of content.
4.Can make your web page attractive.
Example of javascript:-we are going to print Hello entwicklers with the help of javascript.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello entwicklers!")
</script>
</body>
</html>
HTML Entities:-
HTML Quick list:-
HTML Basic Document
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
Basic Tags
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
Formatting
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Images
<img src="URL" alt="Alternate Text" height="42" width="42">
Styles/Sections
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
Iframe
<iframe src="demo_iframe.htm"></iframe>
Forms
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
HTML:-
What is HTML?
HTML is a language for Elaborating web pages.
Now the question is html stands for:-
HTML stands for Hyper Text Markup Language in which hyper text is a structure and all browsers can easily read HTML.
HTML is a markup language.
A markup language is a set different tags in used to built a web page.
HTML documents are also called web pages.
versions of HTML:-
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013.
HTML Tags:-
HTML (markup language) tags are usually called HTML tags.
HTML tags are tag names (keywords) surrounded by angle brackets like <html>
HTML tags normally inserted in pairs like <b> and </b>.
The first tag in a pair is the start tag that is <b>, the second tag is the end that is tag</b>
The end tag is just similar like the start tag only the small difference is the slash in the starting.
Start and end tag is also called the opening and closing tag.
The DOCTYPE declaration defines the document type.
The text between <html> and </html> defines the web page.
The text between <body> and </body> is the visible web page content.
The text between <h1> and </h1> is displays the heading.
The text between <p> and </p> is displays paragraph.
Lets explain this with an example:-
<!DOCTYPE html>
<html>
<body>
<h1>We are entwicklers</h1>
<p>This is our first web page.</p>
</body>
</html>
After the whole code is written just save this having extension that is .html and execute after saving that file.
using notepad writting html:-
Step 1:-
notepad.
for starting notepad go to:-
.Start
.All programs
.Accessories
.Notepad
Step 2:-
Type your html code into the notepad
Step 3:-
save your html with .html extension.
Step 4:-
Run the html in your browser.
HTML headings:-
HTML headings are define with <h1> to <h6> tags i.e <h1></h1> or <h6></h6>
Example:-
<h1>We are entwicklers</h1>
<h2>We are entwicklers</h2>
<h3>We are entwicklers</h3>
HTML paragrahps:-
The paragraphs are define with the tag <p> i.e <p></p>
example:-
<p>We are the entwicklers</p>
<p>We are the developers </p>
HTML Links:-
The HTML link tag is define with <a> i.e <a></a>
Example:-
<a href ="http://www.entwicklers.com">this is a link</a>
HTML images:-
The image tag is generally used to insert the image in your web page and it is define with <img> tag.
Example:-
<img src="entwicklers.jpg" width="100" height="200">
HTML Elements:-
The html elements is everying thing from opening tag to closing tag.
Example:-
<html>
<body>
<p>This is the entwicklers.</p>
</body>
</html>
HTML Attributes:-
Attributes can provide additional information about an element.
Attributes are always specified in the opening tag.
Attributes come in value/name pairs like: name="value" .
EXample:- Link tags are defined with the <a> tag. The link address is specified in the href attribute:
<a href ="http://www.entwicklers.com">this is a link</a>
HTML Headings:-
Headings are defined just only to make your web page attractive
Headings are defined with the <h1> to <h6> tags.
<h1>It defines the most important heading.
<h6> defines the least important heading.
Example:-
<h1>We the entwicklers</h1>
<h2>Designers next door</h2>
<h3>Can make web pages attractive</h3>
HTML Lines:-
The HTML <hr> tag creates a horizontal line in an HTML WEB PAGE.
The hr tag can be used to separate content:
Example:-
<p>This is entwicklers.</p>
<hr>
<p>Designers next door.</p>
<hr>
<p>Can make web pages attractive.</p>
HTML Comments:-
If you dn't want to use your text for sometime then you have to just do is comment that text..
Example:-
<!-- This is a comment -->
HTML Paragraphs:-
Paragraphs are generally defined as the content written betwwen the tag that is<p> tag.<p></p>
Example:-
<p>This is entwicklers</p>
<p>Designers next door.</p>
Never forget to close the tag:-
Example:-
<p>This is entwicklers
<p>Designers next door
HTML Line Breaks:-
the <br> tag is generally used to break the line that is a new line without starting a new paragraph:
Example:-
<p>This is<br>entwicklers<br>Designers next door</p>
The HTML Element <head>:-
The element <head> is a container for all the head elements in html. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information in brife, and so on...
These tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element
The tag <title> defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>entwicklers</title>
</head>
<body>
perfect designers......
</body>
</html>
The HTML <base> element:-
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.entwicklers.com/images/" target="_green">
</head>
The HTML <link> element:-
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="entwicklers.css">
</head>
The HTML <style> element:-
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you can specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:blue;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element
Metadata is data (information) about data that is the whole information in brife.
The <meta> tag gives metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable that is we cn't see this manually but it is running and can be read only by machine.
Meta elements are typically used to specify page description that is what page is all about, keywords, author of the document, last modified, and other metadata.
The metadata can be used by all browsers that is how to display content or reload page, search engines (keywords), or other web services.
<meta> tags always written inside the <head> element.
<meta> Tags - Examples of Use
Define keywords for search engines:-
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The HTML <script> element:-
The <script> tag is generally used to describe a client-side script, such as a JavaScript.
The <script> element will be explained in a later chapter.
CSS:- cascading style sheet:-
css is backbone of html just beacuse of the attractive properties of the css. all the website developers used css to make the wesite attractive.only a website developer knows the power of css.
It is of three types.
1.Inline.
<p style="color:blue;margin-left:50px;">This is a paragraph.</p>
2.inside head
<head>
<style>
h2
{
align:center;
}
</style>
</head>
3.by calling css.
<head>
<link type "text/css"rel="stylesheet"href="mystyle.css"/>
</head>
</head>
HTML images:-
<img src="14.jpg" alt="DUKE ADI" height="100" width="100"/>
This tag is always used to insert image in your web page and this tag is very easy to implement.
HTML Tables:-
HTML Tables are defined with the <table> tag.
A HTML table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<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>
The Border Attribute and HTML Tables:-
If you have not specify a border attribute, the table will be displayed without borders. Sometimes it is very useful, but most of the time, we want the borders to show on table.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers:-
Header information in a table are defined with the <th> tag.
All the major and known browsers display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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>
HTML Lists:-
HTMML lists are divided into two categories that is:-
1.ordered
2.unordered
An ordered list is consists of the first list item,second list item and third list item for the whole HTML web pages process.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numerics.
Example:-
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the above code looks on browser after it runs:-
1.Coffee
2.Milk
An unordered list consists of list item only.
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the above code looks in a browser:
.Coffee
.Milk
HTML Description Lists:-
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the above code looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
HTML BLOCKS:-
HTML Block Elements
Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a web browsers.
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements:-
Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element
The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.
The HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
HTML Layouts:-
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
HTML FORMS:-
HTML Forms
HTML forms are used to pass data to a server.
An HTML form can contain input element like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
Example:-
<form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the above code looks on browser after it runs:-
First name:
Last name:
Password Field:-
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
How the above code looks on browser after it runs:-
Password:
Radio Buttons:-
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the above code looks on browser after it runs:-
Male
Female
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
How the above code looks on browser after it runs:-
I have a bike
I have a car
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the above code looks on browser after it runs:-
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML IFRAMES:-
The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example:-
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
HTML color coding format(codes):-
HTML javascript:-
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements or it points to an external script file through the src attribute.
Common uses for JavaScript are:-
1.image manipulation.
2.form validation.
3.dynamic changes of content.
4.Can make your web page attractive.
Example of javascript:-we are going to print Hello entwicklers with the help of javascript.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello entwicklers!")
</script>
</body>
</html>
HTML Entities:-
HTML Quick list:-
HTML Basic Document
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
Basic Tags
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
Formatting
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Images
<img src="URL" alt="Alternate Text" height="42" width="42">
Styles/Sections
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
Iframe
<iframe src="demo_iframe.htm"></iframe>
Forms
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
No comments:
Post a Comment