HTML Tutorial

Wednesday, July 3, 2019

How to Create Check and Uncheck - Radio Button ?

Saturday, February 23, 2019

Html Structure

<!DOCTYPE html>
<html>
<head>
   <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="description" content="" />
    <meta name="keywords" content=" ">
    <meta name="author" content="">
    
    <link rel="shortcut icon" href="/content/img/favicon.ico" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="css/responsive.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="content/css/animate.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Faster+One|Lateef|Niconne|Montserrat|Parisienne|Sarina|Vast+Shadow" rel="stylesheet">
    
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div class="row">

</div>
</header>
<p>All meta information goes in the head section...</p>
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>

Font:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=3.2.1');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}

Wednesday, January 16, 2019

Wordpress PHP Code

<?php get_header(); ?>

<?php echo get_bloginfo('template_url'); ?>/images/flexslider/3.jpg

<?php bloginfo('stylesheet_url') ?>

<?php wp_head(); ?>

<?php
/*Template Name:blog*/
?>

<?php wp_footer(); ?>

<?php the_title(); ?>

<?php the_content(); ?>

Friday, September 21, 2018

HTML Style

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an HTML element.
This example sets the background color for a page to blue:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="background-color:blue;">

<h1>This is First Heading</h1>
<p>This is paragraph.</p>

</body>
</html>

HTML Text Color

The color property defines the text color for an HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

HTML Text Size

The font-size property defines the text size for an HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1 style="font-size:90px;">This is a heading</h1>
<p style="font-size:90px;">This is a paragraph.</p>

</body>
</html>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Summary

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment

HTML Heading

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Heading Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

When this html code run on Browser:

Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note:Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:

`<hr>` Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is Paul Tutorial heading 1</h1>
<p>This is Paul Tutorial some text.</p>
<hr>
<h2>This is Paul Tutorial heading 2</h2>
<p>This is Paul Tutorial some other text.</p>
<hr>

</body>
</html>

Output:

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:

<head>
<title>Thgis is Paul tutorial </title>
<meta charset="UTF-8">
</head>

Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

Thursday, September 20, 2018

HTML Attributes

HTML Attributes provide additional information about HTML elements.

HTML Attributes

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

The href Attribute

The href Attribute HTML links are defined with the tag. The link address is specified in the href attribute:

The src Attribute

HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:

Example:

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the image:

Example:

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

Example:

Note:The alt attribute is also useful if the image does not exist:

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

Example:

<p style="color:red">I am a paragraph</p>

The lang Attribute

The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:

Example:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

Note:The first two letters specify the language (en). If there is a dialect, use two more letters (US).

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

Example:

<!DOCTYPE html>
<html lang="en-US">
<body>

<p title="I'm a tooltip">
This is a paragraph.
</p>

</body>
</html>

Suggest: Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.

Summary

All HTML elements can have attributes
The title attribute provides additional "tool-tip" information
The href attribute provides address information for links
The width and height attributes provide size information for images
The alt attribute provides text for screen readers
we always use lowercase attribute names
we always quote attribute values with double quotes

HTML Elements

The HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content information goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p> This is first paragraph</p>

Start tag	Element content	End tag
<h1>	This is First Heading	</h1>
<p>	This is first paragraph.	</p>
<br>

Note: HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Nested HTML Elements

Example:

HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is First Heading</h1>
<p>This is First paragraph.</p>

</body>
</html>

Example Explained

Element 1: The `<html>` element defines the whole document.

It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).

Element 2: The `<body>` element defines the document body.

It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and

<p>

Element 3: The `<h1>` element defines a heading.

It has a start tag <h1> and an end tag </h1>.
The element content is: This is First Heading

Element 4: The `<p>` element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: This is first paragraph.

HTML Basic

HTML Documents

All HTML document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

A Simple HTML Document Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is First Heading</h1>
<p>This is paragraph.</p>

</body>
</html>

Output

HTML Headings Example:

HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:

A Simple HTML Heading Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is First Heading</h1>
<h2>This is paragraph.</h2>
<h3>This is paragraph.</h3>

</body>
</html>

Output

HTML Paragraphs Example:

HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>This is paragraph.1</p>
<p>This is paragraph.2</p>

</body>
</html>

HTML Links

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

HTML Buttons

HTML buttons are defined with the <button> tag:

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<button>Click me</button>

</body>
</html>

HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

HTML Editor

Write HTML Using Notepad++

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML code I recommend a simple text editor like Notepad++ (PC)

I believe using a simple text editor is a good way to learn HTML.

01. Open Notepad++ from Your Computer Program file.

02. You can see Notepad++Editor

04. Then Copy HTML Code from This black box.

05. Then Paste HTML Code on Notepad++ and select html extension.

06. Save this file.

07. Go to Run on any Browser Chrome and Mozilla Firfox.

08. Out put.

Wednesday, September 19, 2018

What do you mean by HTML?

HTML is the standard markup language for creating Web pages.

HTML means Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

A Simple HTML Document Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Thuis is First Heading</h1>
<p>This is paragraph.</p>

</body>
</html>

Browser Output Result:

Show Example Describe:

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Tags describe:

HTML tags are element names surrounded by angle brackets:

<tagname>content information here...</tagname>

HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name

Note:The start tag is also called the opening tag, and the end tag the closing tag.

Now Lets go to show The Declaration:

1. The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
2. It must only appear once, at the top of the page (before any HTML tags).
3. The <!DOCTYPE> declaration is not case sensitive.
4.The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

Pages

Wednesday, July 3, 2019

Saturday, February 23, 2019

Wednesday, January 16, 2019

Friday, September 21, 2018

The HTML Style Attribute

HTML Background Color

HTML Text Color

HTML Fonts

HTML Text Size

HTML Text Alignment

Summary

Heading Example:

Headings Are Important

Bigger Headings

HTML Horizontal Rules

<hr> Example:

The HTML <head> Element

Thursday, September 20, 2018

HTML Attributes

The href Attribute

The src Attribute

The width and height Attributes

The alt Attribute

The style Attribute

The lang Attribute

The title Attribute

Suggest: Use Lowercase Attributes

Summary

Nested HTML Elements

Example:

Example Explained

Element 1: The <html> element defines the whole document.

Element 2: The <body> element defines the document body.

Element 3: The <h1> element defines a heading.

Element 4: The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

HTML Documents

A Simple HTML Document Example:

Output

HTML Headings Example:

A Simple HTML Heading Example:

Output

HTML Paragraphs Example:

HTML Links

HTML Images

Example:

HTML Buttons

Example:

HTML Lists

Example:

01. Open Notepad++ from Your Computer Program file.

02. You can see Notepad++Editor

04. Then Copy HTML Code from This black box.

05. Then Paste HTML Code on Notepad++ and select html extension.

06. Save this file.

07. Go to Run on any Browser Chrome and Mozilla Firfox.

08. Out put.

Wednesday, September 19, 2018

HTML is the standard markup language for creating Web pages.

A Simple HTML Document Example:

Browser Output Result:

Show Example Describe:

HTML Tags describe:

Now Lets go to show The Declaration:

Popular Posts

Popular Posts

My Blog List

`<hr>` Example:

Element 1: The `<html>` element defines the whole document.

Element 2: The `<body>` element defines the document body.

Element 3: The `<h1>` element defines a heading.

Element 4: The `<p>` element defines a paragraph.