Monday, December 31, 2018

An image height and width using both

An image height and width using both:- 


<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>Styling Images</h2>
<p>The image below has the width attribute set to 150 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>
<img src="GUN.gif" alt="GUN AK47" width="150" height="150">

<p>The image below uses the style attribute, where the width is set to 150 pixels which overrides the stylesheet:</p>
<img src="GUN.gif" alt="GUN AK47" style="width:150px;height:150px;">

</body>
</html>

OUTPUT:-


By at No comments:
Labels:

An image height and width using CSS

An image height and width using CSS:-     


<html>
<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_Car.jpg" alt="Car on road" style="width:350px;height:450px;">

</body>
</html>

OUTPUT:-   



By at No comments:
Labels:

An image height and width.

An image height and width using attributes:-   


<html>
<body>

<h2>Image Size</h2>

<p>we specify the width and height of an image with the width and height attributes:</p>

<img src="img_car.jpg" alt="Car on road" width="350" height="450">

</body>
</html>

OUTPUT:-  


  • You can use the STYLE attribute to specify the width and height of an image.
  • Alternatively, you can use the width and height attributes.
  • The width and height attributes always defines the width and height of the image in pixels.
  • The width, height, and STYLE attributes are valid in HTML5.
  • we suggest using the STYLE attribute. It prevents styles sheets from changing the size of images.

By at No comments:
Labels:

An image

An image:- 


<html>
<body>

<h2>MANALI</h2>
<img src="pic_mul.jpg" alt="Manali Trip" style="width:100%">

</body>
</html>

OUTPUT:-   


  • Images can improve the design and the appearance of a web page.
  • In HTML, images are defined with the <img> tag.
  • The <img> tag is empty, it contains attributes only, and does not have a closing tag.
  • The src attribute specifies the URL (web address) of the image.
By at No comments:
Labels:

A mailto link with subject

A mailto link with subject:-   

<!DOCTYPE html>
<html>
<body>

<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>

<p>The link will only work if you have email installed.</p>

<p>(Spaces between words should be replaced by %20 to ensure that the browser will display the text properly)</p>

</body>
</html>

OUTPUT:-    

  • The link will only work if you have email installed.
By at No comments:
Labels:

A mailto link

A mailto link:- 
<html>
<body>

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>

<p>The link will only work if you have email installed.</p>

<p>(Spaces between words should be replaced by %20 to ensure that the browser will display the text properly)</p>

</body>
</html>

OUTPUT:-
By at No comments:
Labels:

Breaks out of a frame

A link that breaks out of a frame:-   

<html>
<body>

<p>Locked in a frame? <a href="https://www.google.com/html/" target="_top">Click here!</a></p>

</body>
</html>

OUTPUT:-



   
By at No comments:
Labels:

Sunday, December 30, 2018

An image as a link

An image as a link:- 


<html>
<body>

<h1>Image Links</h1>

<p>The image is a link. Click on it.</p>

<a href="part.asp">
  <img src="bad.gif" alt="HTML studio" style="width:32px;height:32px;border:0">
</a>

<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>
</html>

OUTPUT:- 
  • We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.
  • It is common to use images as links.

By at No comments:
Labels:

Changing the target.

Changing the target of a link:-


<html>
<body>

<h1>The target Attribute</h1>

<a href="https://www.google.com/html/" target="_blank">Visit all things!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

OUTPUT:-   
  • If you set the target attribute to "_blank", the link will open in a new browser window or tab.
  • The target attribute specifies where to open the linked document.
  • _blank - Opens the linked document in a new window or tab.
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default).
  • _parent - Opens the linked document in the parent frame.
  • _top - Opens the linked document in the full body of the window.
  • framename - Opens the linked document in a named frame.
  • If your webpage is locked in a frame, you can use target="_top" to break out of the frame.
By at No comments:
Labels:

Removing the underline.

Removing the underline from links:- 


<html>
<body>

<a href="imag.asp" style="text-decoration:none">Imag</a>

</body>
</html>

OUTPUT:-  


By at No comments:
Labels:

Thursday, December 27, 2018

Changing the color of links.

Changing the color of links:-


<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

OUTPUT:-  


  • By default, a link will appear like this (in all browsers).
  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.
By at No comments:
Labels:

Linking, using a relative URL

Linking, using a relative URL:-


<html>
<body>

<h2>Local Links</h2>

<p><a href="imag.asp">Imag</a> is a link to a page on ORDER website.</p>

<p><a href="https://www.COOL.org/">COOL</a> is a link to a website on the World Wide Web.</p>

</body>
</html>

OUTPUT:- 


  • A local link (link to the same web site) is specified with a relative URL (without https://www....).
By at No comments:
Labels:

Linking, using an absolute URL

Linking, using an absolute URL:-


<html>
<body>

<h2>HTML Links</h2>
<p><a href="https://www.Google.com/html/">Visit all things. </a></p>

</body>
</html>

OUTPUT:-
By at No comments:
Labels:

CSS demo

HTML and CSS full demo:- 


<html>
<body>

<div style="position:relative;">
  <div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>
  <div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21"></div>
  <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;">
    <h1>CSS = Styles and Colors</h1>
    <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
    <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
    <span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div>
  </div>
</div>

</body>
</html>

OUTPUT:-  


By at No comments:
Labels:

CSS margin

HTML and CSS margin:- 


<html>
<head>
<style>
p {
  border: 2px solid blue;
  margin: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:-
  • The CSS margin property defines a margin (space) outside the border.
By at No comments:
Labels:

CSS padding

HTML and CSS padding:-


<html>
<head>
<style>
p {
  border: 2px solid blue;
  padding: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:- 


  • The CSS padding property defines a padding (space) between the text and the border.

By at No comments:
Labels:

HTML and CSS borders

HTML and CSS borders:- 


<html>
<head>
<style>
p {
  border: 1px solid red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:- 


  • The CSS border property defines a border around an HTML element
By at No comments:
Labels:

CSS using the class attribute

HTML with CSS using the class attribute:- 


<html>
<head>
<style>
p.cad {
  color: brown;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="cad">I am changer.</p>
<p>This is a paragraph.</p>
<p class="cad">I am changer 2nd.</p>

</body>
</html>

OUTPUT:-




By at No comments:
Labels:

CSS using the id attribute

HTML with CSS using the id attribute:- 


<html>
<head>
<style>
#p1 {
  color: green;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p1">I am green.</p>

</body>
</html>

OUTPUT:- 


  • To define a specific style for one special element, add an id attribute to the element
By at No comments:
Labels:

CSS fonts

HTML with CSS fonts:- 


<html>
<head>
<style>
h1 {
  color: green;
  font-family: verdana;
  font-size: 150%;

}
p  {
  color: pink;
  font-family: courier;
  font-size: 200%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:- 


  • The CSS color property defines the text color to be used.
  • The CSS font-family property defines the font to be used.
  • The CSS font-size property defines the text size to be used.
By at No comments:
Labels:

External CSS

HTML with external CSS:- 


<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a red heading</h1>
<p>This is a brown paragraph.</p>

</body>
</html>

OUTPUT:- 


  • An external style sheet is used to define the style for many HTML pages.
  • With an external style sheet, you can change the look of an entire web site, by changing one file!
  • To use an external style sheet, add a link to it in the <head> section of the HTML page.
By at No comments:
Labels:

Internal CSS

HTML with internal CSS:- 


<html>
<head>
<style>
body {background-color: blue;}
h1   {color: green;}
p    {color: brown;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:-


  • An internal CSS is used to define a style for a single HTML page.
  • An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
By at No comments:
Labels:

Inline CSS

HTML with inline CSS:-


<html>
<body>

<h1 style="color:Red;">This is a Red Heading</h1>

</body>
</html>

OUTPUT:-  


  • An inline CSS is used to apply a unique style to a single HTML element.
  • An inline CSS uses the style attribute of an HTML element.
By at No comments:
Labels:

Comments for debugging

Comments for debugging:-

<!DOCTYPE html>
<html>
<body>

<!-- Do not display this at the moment
<img border="0" src="picka.jpg" alt="Pikachu">
-->

</body>
</html>

OUTPUT:-


  • Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
By at No comments:
Labels:

Conditional comments

Conditional comments:-   


<html>
<body>

<!--[if IE 5]>This is IE 5<br><![endif]-->
<!--[if IE 6]>This is IE 6<br><![endif]-->
<!--[if IE 7]>This is IE 7<br><![endif]-->
<!--[if IE 8]>This is IE 8<br><![endif]-->
<!--[if IE 9]>This is IE 9<br><![endif]-->

</body>
</html>

OUTPUT:-


By at No comments:
Labels:

Hidden comment

Hidden comments:-   


<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comment is not display in the browser -->

</body>
</html>

OUTPUT:-

  • <!-- --> This is a comment Tag.
  • Comment is not display in the browser.
By at No comments:
Labels:

Quotation and Citation Tag Description.

Tag Description:- 

sk.












  • <q> :- Defines a short inline quotation.
  • <cite> :- Defines the title of a work.
  • <address> :- Defines contact information for the author/owner of a document.
  • <blockquote> :- Defines a section that is quoted from another source.
  • <bdo> :- Defines the text direction.
  • <abbr> :- Defines an abbreviation or acronym.
By at No comments:
Labels:

Formatting text direction.

Text direction with the <bdo> element:-


<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>

OUTPUT:-  

  • If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl).
  • The HTML <bdo> element defines bi-directional override.
  • The <bdo> element is used to override the current text direction.
By at No comments:
Labels:

Formatting work title.

Work title with the <cite> element:- 

<html>
<body>

<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>

<img src="screan.jpg" width="300" height="300" alt="The Screan">
<p><cite>The Screan</cite> by Adict richer. Painted in 1617.</p>

</body>
</html>

OUTPUT:-  

  • The HTML cite element defines the title of a work.
  • Browsers usually display cite elements in italic.
By at No comments:
Labels:

Formatting abbreviations and acronyms.

The <abbr> element:-   

<html>
<body>

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by Ansh.<br>
Visit us at:<br>
Example.com<br>
Box 786, Gangland<br>
PUNJAB
</address>

</body>
</html>

OUTPUT:-    

  • The HTML address element defines contact information (author/owner) of a document or article.
  • The HTML <abbr> element defines an abbreviation or an acronym.
  • Marking abbreviations can give useful information to browsers, translation systems and search-engines.
By at No comments:
Labels:

Formatting document owner information.

Information with the <address> element:- 

<html>
<body>

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by Ansh.<br>
Visit us at:<br>
Example.com<br>
Box 786, Gangland.<br>
Punjab.
</address>

</body>
</html>

OUTPUT:-

  • The HTML address element defines contact information (author/owner) of a document or article.
  • The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.
By at No comments:
Labels:

Formatting quoted sections.

Quoted sections with the <blockquote> element:-

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

</body>
</html>

OUTPUT:-
  • The HTML <blockquote> element defines a section that is quoted from another source.
  • Browsers usually indent <blockquote> elements.
By at No comments:
Labels:

Formatting short quotations.

Quotations with the <q> element:- 

<html>
<body>

<p>Browsers usually insert quotation marks around the q element.</p>

<p>Akash is: <q>the biggest programer.</q></p>

</body>
</html>

OUTPUT:-  

  • The HTML <q> element defines a short quotation.
  • Browsers usually insert quotation marks around the <q> element.
By at No comments:
Labels:

Text Formatting Elements Tags.

Text Formatting Elements Tag Description:-    


sk.
  • <b> :- Defines bold text.
  • <em> :- Defines emphasized text.
  • <i> :- Defines italic text.
  • <small> :- Defines smaller text.
  • <strong> :- Defines important text.
  • <sub> :- Defines subscripted text.
  • <sup> :- Defines superscripted text.
  • <ins> :- Defines inserted text.
  • <del> :- Defines deleted text.
  • <mark> :- Defines marked/highlighted text.
By at No comments:
Labels:

Superscript formatting.

USING Superscript formatting:-   


<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

OUTPUT:-  

  • This is <sup>superscripted</sup> text.
By at No comments:
Labels:

Wednesday, December 26, 2018

Subscript formatting.

USING Subscript formatting:-


<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

OUTPUT:-

  • This is <sub>subscripted</sub> text.

By at No comments:
Labels:

Marked inserted.

USING Marked inserted:- 


<html>
<body>

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>pet</ins> is dog.</p>

</body>
</html>

OUTPUT:-

  • The ins element represent inserted (added) text.
By at No comments:
Labels:

Marked deleted.

USING Marked deleted:-   


<html>
<body>

<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

OUTPUT:-       
  • <del> tag is use for correction.
By at No comments:
Labels:

Marked formatting.

USING Marked formatting:-

 <!DOCTYPE html>
<html>
<body>

<h2>MY <mark>SELF</mark> ANSH</h2>

</body>

</html>

OUTPUT:-

  • <mark> tag is use for marking text.

By at No comments:
Labels:

Small formatting.

USING Small formatting:-
<html>
<body>

<h2> MY <small>SELF</small> ANSH</h2>

</body>

</html>

OUTPUT:-

  • <small> tag is use for text in small format.

By at No comments:
Labels:

Emphasized formatting.

USING Emphasized formatting:-

<html>
<body>

<p>This paragraph text is normal.</p>

<p><em>This paragraph text is emphasized.</em></p>

</body>
</html>

OUTPUT:-

  • <em> tag is use for Emphasized format.

By at No comments:
Labels:

Italic format.

USING ITALIC TAG:-

<html>
<body>

<p>This Paragraph text is normal.</p>

<p><i>This paragraph text is italic.</i></p>

</body>
</html>

OUTPUT:-

  • <i> tag is use for italic format.

By at No comments:
Labels:

Strong element.

USING STRONG ELEMENT:-

<html>
<body>

<p>This paragraph text is normal.</p>

<p><strong>This paragraph text is strong.</strong></p>

</body>
</html>

OUTPUT:-

  • <strong> tag is use for text in bold format.


By at No comments:
Labels:

Bold format

BOLD ELEMENT:-

<html>
<body>

<p>This is normal.</p>

<p><b>This is bold.</b></p>

</body>
</html>

OUTPUT:-

  • <b> tag is use for change text format in bold.

By at No comments:
Labels:

Text Alignment.

HTML TEXT ALIGNMENT:-

<html>
<body>

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

</body>
</html>

OUTPUT:-

  • The text-align property defines the horizontal text alignment for an HTML element
By at No comments:
Labels:

Text Size.

HTML TEXT SIZE:-

<html>
<body>

<h1 style="font-size:150%;">This is a heading</h1>
<p style="font-size:300%;">This is a paragraph.</p>

</body>
</html>

OUTPUT:-

  • The font-size property defines the text size for an HTML element.
  • EXAMPLE:- <h1 style="font-size:150%;">This is a heading</h1>
By at No comments:
Labels:

Text Style.

HTML TEXT TYPE:-

<html>
<body>

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

</body>
</html>

OUTPUT:-

  • The font-family property defines the font to be used for an HTML element.
  • EXAMPLE:- <h1 style="font-family:verdana;">This is a heading</h1>.
By at No comments:
Labels:

Text colour.

HTML TEXT COLOUR:-

<html>
<body>

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

</body>
</html>

OUTPUT:-

  • The color property defines the text color for an HTML element.
  • EXAMPLE:- <h1style="color:brown;">This is a heading</h1>
By at No comments:
Labels:

Background colour.

HTML Background colour:-

<html>
<body style="background-color:blue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:-

  • The background-color property defines the background color .
EXAMPLE:- <body style="background-color:blue;">
By at No comments:
Labels:

Style.

HTML STYLE:-

<html>
<body>

<p>I am normal</p>
<p style="color:yellow;">I am Akash.</p>
<p style="color:green;">I am Ansh.</p>
<p style="font-size:150px;">I am Operator.</p>

</body>
</html>

OUTPUT:- 

  • Setting the style of an HTML element, can be done with the <style> attribute.
  • SYNTAX:- <tagnamestyle="property:value;">.
By at No comments:
Labels:

Paragraph Tag Description.

Paragraph Tag Description :-
sk.

  • <P> :- Defines a paragraph.
  • <Br> :- Inserts a single line break.
  • <Pre> :- Defines pre-formatted text.
By at No comments:
Labels:

Pre tag use.

PARAGRAPH TAG:-

<html>
<body>

<h1>The pre tag preserves both spaces and line breaks:</h1>

<pre>
   My Name is Akash.

   My lovely Dog is ashu.

   My hobby is playing game.
 
   I like to tag other.
</pre>

</body>
</html>

OUTPUT:-


  • The HTML <pre> element defines preformatted text.
  • The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
By at No comments:
Labels:

Tuesday, December 25, 2018

Line break tag use.

BREAK LINE TAG USE :-

<html>
<body>

<p>This is<br>a paragraph<br>with breaks.</p>

</body>

</html>


OUTPUT:-
  • The HTML <br> element defines a line break.
  • Use <br> if you want a line break (a new line) without starting a new paragraph.
  • The <br> tag is an empty tag, which means that it has no end tag.
By at No comments:
Labels:

Paragraph tag.

HTML PARAGRAPH TAG:-

<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:-
  • This is a paragraph Tag.
  • Large or small screens, and resized windows will create different results.
  • With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
  • The browser will remove any extra spaces and extra lines when the page is displayed.


By at No comments:
Labels:

Heading tag Description.

TAG DESCRIPTION:-
  • <HTML> :- Defines the root of an HTML document.
  • <BODY> :- Defines the document's body.
  • <HEAD> :- A container for all the head elements (title, scripts, styles, meta information, and more).
  • <H1> TO <H6> :- Defines HTML headings.
  • <HR> :- Defines a thematic change in the content.
By at No comments:
Labels:

Head html.

HTML  HEAD:-

<html>
<head>
  <title>My First HTML</title>
  <meta charset="UTF-7">
</head>
<body>

<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>

</body>
</html>

OUTPUT:-

  • The HTML head element contains meta data.
  • The HTML head element contains meta data.
  • The HTML <head> element has nothing to do with HTML headings.
  • The <head> element is placed between the <html> tag and the <body> tag.
By at No comments:
Labels:

Horizontal tag.

HORIZONTAL RULE:-

<html>
<body>

<h1>This is heading 1</h1>
<hr>

<h2>This is heading 2</h2>
<hr>

<h3>This is heading 2</h3>

</body>
</html>

OUTPUT:-
  • The <hr> tag defines a thematic break in an HTML page.
  • Displayed as a horizontal rule.
  • The <hr> element is used to separate content in an HTML page.
By at No comments:
Labels:

Html headings.

HTML HEADING:-

<html>
<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>

OUTPUT:-


  • Headings are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading. <h6> defines the least important heading.
  • 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.
By at No comments:
Labels:

Attributes Description.

Attributes Description:-
  • ALT :- Specifies an alternative text for an image, when the image cannot be displayed.
  • DISABLED :- Specifies that an input element should be disabled.
  • HREF :- Specifies the URL (web address) for a link.
  • ID :- Specifies a unique id for an element.
  • SRC :- Specifies the URL (web address) for an image.
  • STYLE :- Specifies an inline CSS style for an element.
  • TITLE :- Specifies extra information about an element (displayed as a tool tip).
By at No comments:
Labels:

Non quotes

ATTRIBUTE WITHOUT QUOTES:-

<html>
<body>

<a href=https://www.google.com>This is a link</a>

</body>
</html>

OUTPUT:-

By at No comments:
Labels:

Alt attribute

The alt Attribute:-

<html>
<body>

<h2>Alt Attribute</h2>
<p>Alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="imgtag.jpg" alt="Tag with image" width="200" height="300">

</body>
</html>

OUTPUT:-

  • Alt attribute should reflect the image content
  • users who cannot see the image gets an understanding of what the image contains
By at No comments:
Labels:

Size attributes

THE WIDTH AND HEIGHT ATTRIBUTE:-

<html>
<body>

<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

<img src="imgtab.jpg" width="200" height="300">

</body>
</html>

OUTPUT:-


  • The image size is specified in pixels: width="200" means 200 pixels wide.
By at No comments:
Labels:

Href attribute

HTML HREF ATTRIBUTE:-

<html>
<body>

<h2>Href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.google.com">This is a link</a>

</body>
</html>

OUTPUT:-
  • HTML links are defined with the a tag.
  • The link address is specified in the href attribute.

By at No comments:
Labels:

Title attribute

HTML TITLE ATTRIBUTE:-

<html>
<body>

<h2 title="Is a header">The title Attribute</h2>

<p title="Is a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>

</body>
</html>

OUTPUT:-



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


    • By at No comments:
    Labels:

    List.

    LIST:-

    <html>
    <body>

    <h2>An Unordered List</h2>

    <ul>
      <li>Akash</li>
      <li>Soni</li>
      <li>Venu</li>
    </ul>

    <h2>An Ordered List</h2>

    <ol>
      <li>Akash</li>
      <li>Soni</li>
      <li>Venu</li>
    </ol>

    </body>

    OUTPUT:-
    • Lists are defined with the <ul>(unordered list) or the <ol> (ordered list) tag, followed by <li> tags (list items).
    By at No comments:
    Labels:

    Buttons.

    BUTTONS:-

    <html>
    <body>

    <h2> Buttons Tag.</h2>
    <p>HTML buttons are defined with the button tag:</p>

    <button>TAB me</button>

    </body>
    </html>

    OUTPUT:-
    • Buttons are defined with the <button> tag:


    By at No comments:
    Labels:

    Image

    IMAGE TAG:-

    <html>
    <body>

    <h2>HTML Images</h2>
    <p>HTML images are defined with the img tag:</p>

    <img src="google.jpg" alt="google.com" width="200" height="200">

    </body>
    </html>

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

    By at No comments:
    Labels:

    Links.

    LINKS:-

    <html>
    <body>

    <h2> Links </h2>
    <p>HTML links are defined with the a(anchor ) tag:</p>

    <a href="https://www.google.com">This is a link</a>

    </body>
    </html>

    OUTPUT:-
    • Links are defined with the <a> anchor tag:
    • It works link with another part.
    • link's destination is specified in the href attribute. 

    By at No comments:
    Labels:

    Paragraph.

    PARAGRAPH:-

    <html>
    <body>

    <p>This is a dynamic paragraph.</p>
    <pre>This is static paragraph.</pre>

    </body>
    </html>

    OUTPUT:-
    • Paragraphs are defined with the <p> tag:
    • Paragraphs are defined with the <pre> tag:

    By at No comments:
    Labels:

    HEADING.

      HEADING.

    <html>
    <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>

    OUTPUT:-
    • Headings are defined with the <h1> to <h6> tags.
    • <h1> defines the max. bold heading. <h6> defines the min. bold heading: 


    By at No comments:
    Labels:

    Document

    BASIC:-

    <html>
    <body>

    <h1>Heading.</h1>

    <p>Paragraph.</p>

    </body>
    </html>

    output:-



    • The HTML document itself begins with <html> and ends with </html>.
    • The visible part of the HTML document is between <body> and </body>.
    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    By at No comments:
    Labels:

    Tuesday, December 18, 2018

    TABLES ATTRIBUTES IN HTML.

    <TABLE ATTRIBUTES>
    • ALIGN:-Horizontal alignment is controlled by the align attribute. It can be set to left, center or right.
    • VALIGN:-Controls the vertical alignment of cell contents. It accepts the values Top, Middle or Bottom.
    • WIDTH:-Sets the width to a specific number of pixels or to percentage. If width is not set specified the data cell is adjusted based on cell data.
    • CELLPADDING:-This attribute controls the distance between data in a cell and boundaries of cell.
    • CELLSPACING:-Controls the spacing between adjacent cells.
    • COLSPAN:-This attribute is useful when one row of the table needs to be a certain number of columns wide.
    • ROWSPAN:-The attribute works in same way as COLSPAN except that it allows a cell to take more than one row.
    By at No comments:

    CREATE A TABLE WITH HTML.

    TAGS WHICH WE USE IN TABLE:-


    • <TABLE>CREATE A TABLE TAG</TABLE>
    • <THEAD>TABLE HEAD</THEAD>
    • <TR>TABLE ROW</TR>
    • <TD>TABLE DATA OR COLUMN</TD>

    EXAMPLE:-

     <html>
    <head>
    <title> TABLE FOR GAME.</table>
    </head>
    <body bgcolor="blue" text="black">
    <p>PLAY THE GAMES<br>BY PLAYER</P>
    <hr width="50%" align="left" color="red" size="10px">
    <h1>THE GAME IS LIFE...</h1><br>
    <p><b>WELCOME</b>TO<i>INDIA</i></p>
    <u> HELLO!! PLAYERS</u><br>
    <p><b>INDIA<sub>PLAYERS</sub>BEST<sup>PLAYERS</sup></b></p>

    <table border="2">
    <thead>
    <tr>
    <td>NAME</td>
    <td>SEX</td>
    <td>AGE</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><i>Ram</i></td>
    <td><i>Male</i></td>
    <td><i>18</i></td>
    </tr>
    </tbody>
    </table>
    <hr width="100%" align="left" color="red" size="5px">
    </body>
    </html>

    ................................................................................................................................................
    OUTPUT:-

    By at No comments:

    TYPES OF TAGS.

    *TWO TYPES OF TAGS:-
       -PHYSICAL TAGS
       -LOGICAL TAGS

     PHYSICAL TAG:-Control how character are formating
     these tags text the browser but you want the text enclosed to look like.
    EXAMPLE:-

    • <b> Define bold text.
    • <big> Define big text.
    • <i> Define italic text.
    • <small> Define small text.
    • <sub> Define subscript text.
    • <sup> Define superscript text.
    • <ins> Define inserted text.
    • <del> Define deleted text.
    • <tt> Define teletype text.
    • <u> Define underline text.
    • <strike> Defines strike text.
    LOGICAL TAG:-A logical character tag is derived how to text is being used but necessary how it is formated.
    EXAMPLE:-

    • <cite> Citation.
    • <dfl> Defining new term.
    • <em> Emphasized.
    • <ins> Inserted.
    • <kbd> Bold + monscape
    • <samp> Sample program output.
    • <strong> Strong text.
    • <vr> Program variable & argument.


    ** FONT TAG:-
           <font color="red">
    ** BODY TEXT TAG:-
            <body bg color="green">
            (for background colour)
           <body text="white">
      (change the colour of enclosed text)
    By at No comments:

    WORKING WITH TEXT FORMATING TAGS.


    • Heading elements:-<h1> to <h6>
    • Horizontal tag:-<hr>
    • Break line tag:-<br>
    .............................................................
    EXAMPLE:-

     <html>
    <head>
    <title> WORKING OF TAG</title>
    </head>
    <body>
    <p> HELLO, HOW ARE YOU?<br>I AM GOING TO SCHOOL</p>
    <hr width="50%" align="left" color="red" size="10px">
    </body>
    </html>
    ................................................................................................................................................
    OUTPUT:-
    sk.
    ........................................................................
    By at No comments:

    Starting of web program.

    <STARTING A PROGRAM>

     <HTML>
    <HEAD>
    <TITLE>
           DEMO PROJECT FIRST.
    </TITLE>
    </HEAD>
    <BODY>
     <!--HEADLINE TAG-->
    <h1>MY FIRST WEB</h1>
    <h2>MY FIRST WEB</h2>
    <h3>MY FIRST WEB</h3>
    <h4>MY FIRST WEB</h4>
    <h5>MY FIRST WEB</h5>
    <h6>MY FIRST WEB</h6>
    <!--PARAGRAPH TAG-->
    <p>I love INDIA. I AM PROUD.</p>
    <pre>
            I
        LOVE
          MY
       INDIA.
    I AM PROUD.
    </pre>
    </BODY>
    </HTML>
    .........................................................................
    .........................................................................
    OUTPUT:-

    sk.
    .........................................................................
    WORK OF TAGS:-
    • <p>=Paragraph tag. Automatic line break when end of line.
    • <pre>=Paragraph tag. static tag as it is print which we written in this paragraph tag.
    • <h1>=It is big heading tag.
    • <h2>=It is smaller then h1.
    • <h3>=It is smaller then h2.
    • <h4>=It is smaller then h3.
    • <h5>=It is smaller then h4.
    • <h6>=It is smaller then h5.

    By at No comments:

    Structure of HTML.

    <STRUCTURE OF HTML>

      **HTML WRITTEN IN NOTEPAD.
     **SAVE HTML FILE= FILENAME.HTML

      **WE HAVE TWO TYPES OF TAGS IN HTML:-
    :-OPENING TAG= <>
    :-CLOSING TAG= </>
    ..............................................................
    STRUCTURE:-

     <HTML>
    <HEAD>
    <TITLE>
          Title of web page.
    </TITLE>
    </HEAD>
    <BODY>
           Content of page.
    </BODY>
    </HTML>
    .........................................................................
    WORK OF HTML:-

    • <HTML>:-This tag indicate starting of program.
    • <HEAD>:-This selection often containing tag which are used to display the title of page.
    • <TITLE>:-This tag is used to display title at the top of the window.
    • </TITLE>:-It shows closing of title tag.
    • </HEAD>:-This show closing of head tag. if title tag is not close then program output will not accurate.
    • <BODY>:-The body section contains all the instruction which are used for actual page display.
    • </BODY>:-It indicate close of body tag.
    • </HTML>:-This shows closing of html tag which indicate ends of HTML program.


    By at No comments:

    HTML.

    <HTML>

    HTML:- Stands for "HYPER TEXT MARKUP LANGUAGE".

    *ADVANTAGES OF HTML:
    • User friendly
    • It is flexible to use 
    • Easy to use and understand
    • All browser support HTML
    • HTML is free
    • Easy Maintain and updation
    *DIS-ADVANTAGES OF HTML:
    • Some browser are not support
    • Security Feature UN SAFE.
    • INSUFFICIENT for dynamic pages.
    By at No comments:

    Sunday, December 16, 2018

    URL

    <h1>WHAT IS URL?</h1>
    sk.

    • URL stands for uniform resource locator.
    • It is formatted text string.
    • It is used in web browser, email clients or any software.
    • It is used for find network resource.
    • Network resource is any file.
    • Any url in 3 parts protocol designation, host name or address, and file or resource location.
    • They are two types:-absolute and relative url.

    By at No comments:

    WWW.

    <h1>WHAT IS WWW?</h1>
    sk.

    • WWW:- Stands for world wide web.
    • It is also known as W3 or web.
    • website, web server, webpage, hyperlink is attach with www.
    • It is information space.
    • Through hyperlink html document are connected.
    • Through internet we can access web document.
    • It is a center hub to store information.
    • www is a primary tool.
    • Through www we can access or communicate with internet.

    By at No comments:

    Internet, Intranet and Extranet.

    <h1>INTERNET, INTRANET, EXTRANET</h1>
    sk.
    * INTERNET:-

    • Internet is the group of some computer.
    • Through router or server, any computer in the world could add up.
    • Internet is the biggest network of the world.


    *INTRANET:-

    • It is a private network which they works only an organization or a company.
    • May be some interlinked LAN are connected.
    • It access only members, employse, of organization or a company.
    • It is secure and private network.
    • Data and application resource is share from internet protocol.


    *EXTRANET:-

    • It is a part of an organization intranet.
    • It is digital network.
    • It is based upon internet protocol.
    • It is also private network.
    • It is like a center of company and business share holder.



    By at No comments:

    Web site and Web page

    <h1>WHAT IS WEB SITE AND WEB PAGE?</h1>
    sk.

    • Website means to say that location where maximum information are stored in webpage.
    • Example:-If there is a hotel website then all information related to that hotel is put on website by store in web page.
    • Website is a central location where we can store maximum information in webpage.
    • Through internet anyone can see webpage of website.
    • website is collection of webpage.
    • How many pages on website is depend upon purpose of website.

    By at No comments:

    Web Browser.

    <h1>WHAT IS WEB BROWSER?</h1>
    sk.

    • The common web browser is world wide web browser.
    • Web browser is a software.
    • We can access internet information through web browser.
    • Web browser is a client program.
    • Through web browser we can use different services which available on internet.
       <h1>THEY ARE TWO TYPES</h1>
    TEXT BASE BROWSER:- Only support text.
    GRAPHICAL BROWSER:-Its support multimedia. like:-Text, video, animation, audio etc.
    By at No comments:

    WEB SERVER.

    <h1> WHAT IS WEB SERVER? </h1>
    sk.

    • It is technique which we connected from web.
    • Some big company has own web server.
    • without server no web.
    • On internet lakhs of server and in everyone thousand home pages.
    • Web server software is available on every operating software.
    • web server is based upon software, hardware and operating system.
    • One who puts run easily in the election for his own platform.
    • More small and private companies rent web server.
    • Web server plays an important role in providing web pages and website.
        <WEB SERVER DEPEND UPON WINDOW>
    Microsoft internet information server
    Netscape fast track server 
    Netscape enter prise server 
    Open market secure web server
    Purveyar intra server.

    By at No comments:
    Subscribe to: Posts (Atom)

    Internal Javascripts

    Internal Javascripts :    The script code can be written directly into the HTML document. script code is placed in header of the docume...

    • Formatting document owner information.
      Information with the <address> element:-   <html> <body> <p>The HTML address element defines contact informati...
    • IFRAME EDITING THE BORDER
      IFRAME EDITING THE BORDER : The border of the Iframe can be edited and changed according to the needs , By default, an iframe has a blac...
    • Href attribute
      HTML HREF ATTRIBUTE:- <html> <body> <h2>Href Attribute</h2> <p>HTML links are defined with the a tag. T...