STRATEGY & CREATIVITY

Phasellus iaculis dolor nec urna nullam. Vivamus mattis blandit porttitor nullam.

PORTFOLIO

We pride ourselves on bringing a fresh perspective and effective marketing to each project.

Showing posts with label Web Developing HTML. Show all posts

HTML <pre> Tag

The HTML <pre> tag is used for indicating preformatted text.

The code tag surrounds the code being marked up.

Browsers normally render pre text in a fixed-pitched font, with whitespace in tact, and without word wrap.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Pre Element</title>
</head>

<body>

<pre>

This text is
in a fixed-pitch
font, and it preserves
both white spaces and line breaks.

</pre>

</body>

</html>

Output

This text is
in a fixed-pitch
font, and it preserves
both white spaces and line breaks.

Global Attribute

The tag support all the global attributes described in HTML Attribute Reference.

Specific Attribute

The HTML <pre> tag also supports the following additional attributes −

Attribute ----- Value ---- Description

width ----- number ---- Deprecated − It specifies the desired width of the pre-formatted text.

Event Attrubutes

The Tag Support all the event Attributes described in -- HTML Events Reference ( Soon.. )

Browser Support

Chrome Firefox IE Opera Safari Android

Yes Yes Yes Yes Yes Yes

Watch This Video For More Information

Break Line

The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

The HTML <br> element defines a Line Break.

use <br> if you want a Line Break (a new line ) without starting a new paragraph.

Break line <br> element is a Inline level element.

The <br> tag is an empty tag, which means that it has no end tag.

Example

<!DOCTYPE html>
<html>
<head>
<title>Jingle bell Poem</title>
</head>

<body>

<p>
Jingle bells<br>
Jingle bells<br>
Jingle all the way<br>
Oh, what fun<br>
It is to ride<br>
In a one-horse open sleigh<br>
<br>
Dashing through the snow<br>
In a one-horse open sleigh<br>
O’er the fields we go<br>
Laughing all the way<br>
Ha ha ha<br>
Bells on bobtail ring<br>
Making spirits bright<br>
What fun it is to ride and sing<br>
A sleighing song tonight<br>
Repeat Chorus Two Times<br>
<br>
Now the ground is white<br>
And the night is young<br>
Take the sleigh tonight<br>
And join us in this song<br>
Just get a bobtailed bay<br>
Get ready for a run<br>
Then hitch him to a sleigh<br>
And now we’ll have some fun!
</p>

</body>

</html>

Output

Jingle bells
Jingle bells
Jingle all the way
Oh, what fun
It is to ride
In a one-horse open sleigh

Dashing through the snow
In a one-horse open sleigh
O’er the fields we go
Laughing all the way
Ha ha ha
Bells on bobtail ring
Making spirits bright
What fun it is to ride and sing
A sleighing song tonight
Repeat Chorus Two Times

Now the ground is white
And the night is young
Take the sleigh tonight
And join us in this song
Just get a bobtailed bay
Get ready for a run
Then hitch him to a sleigh
And now we’ll have some fun!

As you can see from the above example, a <br> element is included at each point where we want the text to break. The text after the <br> begins again at the start of the next line of the text block.

Note: Do not use <br> to create margins between paragraphs; wrap them

in <p> elements and use the CSS margin property to control their size.

Do Not Forget The END TAG

In HTML5 it is not strictly necessary to close certain HTML tags.
The tags that aren’t required to have specific closing tags are called “self closing” tags.
What is a self closing tag? An example of a self closing tag is something like a
line break (<br />) or the meta tag (<meta>). This means that the following are both acceptable:

<meta charset="UTF-8">
and
<meta charset="UTF-8" />

Some closing tags are optional, however. The tags are optional because it’s implied that a
new tag would not be able to be started without closing it. These are the following:
html, head, body, p, dt, dd, li, option, thead, th, tbody, tr, td, tfoot, colgroup.
There are also tags that are forbidden to be closed: img, input, br, hr, meta, etc.

The question is: should tags that are optional be closed? Code with closing tags is
much more readable and easy to follow. It is much easier to visually inspect a page
with well laid out markup. Working with this markup is easier for developers.

Some HTML elements will display correctly, even if you the forget the end tag :

Example

<!DOCTYPE html>
<html>
<head>
<title>Do Not Forgot The End Tag</title>
</head>

<body>

<h1>This is my heading.
<p>This is my first paragraph.

</body>
</html>

The example works in all browser, because the closing tag is considered optional.

NOTE: Never rely on this. it might produces unexpected results and/ or errors if you forget the End Tag.

Use Lowercase Tags

HTML Tags are not case sensitive:
Like <p> means the same as <P>

Like <h1> means the same as <H1>

The HTML5 standard does not require lowercase tags, but we recommends

lowercase in HTML, and demands lowercase for stricter document types like XHTML.

Upper case A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Lower case a b c d e f g h i j k l m n o p q r s t u v w x y z

<hr> HTML

What does <hr> HTML tag do ?

In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the <hr> tag represents a horizontal rule. However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms. All the layout attributes are removed in HTML5.

The <hr> tag defines a thematic break in all HTML pages, and is most often displayed as a horizontal rule.

The <hr> element is used to seperate content ( for define a change ) in all HTML page.

Display
Block

Example

<!DOCTYPE html>
<html>
<body>

<h1>This is above the line.</h1>
<p>This is my first paragraph</p>
<hr>

<h2>This is below the line.</h2>
<p>This is my another paragraph.</p>

</body>
</html>

This is above the line.

This is my first paragraph

------------------------------------------------------------------------------------------------------------------------

This is below the line.

This is my another paragraph.

Chapter Summary

<hr> Defines a thematic change in content.

HTML Links

Safar :- life ka aisa safar, jo paucha de aapko aapke destination tak, bs shuruaat to karo :- LINKS

HTML Links - Hyperlinks

HTML LInks are Hyper Links.

You Can Click on a Link and Jump to another Document.

When you move the mouse over a Link, the mouse arrow will turn into a Little Hand.

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of thelink and a user can click that part to reach to the linked document.

HTML Link Syntax

HTML Links are Defined with the <a> Tag.

Example

<!DOCTYPE html>
<html>
<body>

<h2>HyperLinks</h2>

<p><a href="https://www.kumaratuljaiswal.in/2018/11/html-images-with-width-and-height.html">HackingTruth</a></p>

</body>
</html>

The href attribute specifies the destination address.

Clicking on the link text will send you to the specified address.

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

Local Links

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without https://www............).

Example

<!DOCTYPE html>

<html>

<body>

<h2>Local Links</h2>

<p><a href="www.kumaratuljaiswal.in">HTML Images</a> is a link to a page on this website.</p>

</body>

</html>

Chapter Summary

Use the <a> element to define a link
Use the href attribute to define the link address

HTMl Images

HTML Images

Pictures that say thousands of words that describe your website :- Kumar Atul Jaiswal

Kumar Atul Jaiswal

HTML Images Syntax

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:

<img src="url">

The Alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

<!DOCTYPE html>
<html>
<body>

<h2>The alternative Text.</h2>

<p>The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image.</p>

<img src="atul.png" alt="MyImage">

</body>
</html>

result:

MyImage

If a browser cannot find an image, it will display the value of the alt attribute.

Note: The alt attribute is required. A web page will not validate correctly without it.

Image Size : Width and Height

You can use the style Attribute to specify the width and height of an Page.

-------------------------------------------------------------------------------------------------------------------

Example :

<!DOCTYPE html>
<html>
<body>

<h2>The alternative Text.</h2>

<p>The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image.</p>

<img src="atul.png" alt="MyImage" style="width:500px;height:600px;">

</body>
</html>

-------------------------------------------------------------------------------------------------------------------

Alternatively, you can use the width and height attributes:

------------------------------------------------------------------------------------

Example :

<!DOCTYPE html>
<html>
<body>

<h2>The alternative Text.</h2>

<p>The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image.</p>

<img src="atul.png" alt="MyImage" width="500" height="600">

</body>
</html>

-------------------------------------------------------------------------------------------------------------------

The width and height attributes always defines the width and height of the image in pixels.

NOTE : Always specify the width and height of an Image.If width and Height are not specrified, the page might flicker while the image loads.

For More Information To watch This Video

HTML Headings

HTML Heading are Defined With The <h1> to <h6> Tags.

<h1> Defines With the Most Important Heading and <h6> Defines With The Least Heading.

Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Result

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

HTML Paragraphs are Defined With the <p> Tag.

Example

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.<p>

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

</body>
</html>

Result

This is a paragraph.

This is another paragraph.

For More Information To Watch This Video

WHAT WE DO

We've been developing corporate tailored services for clients for 30 years.

ABOUT US

OUR TEAM

Kumar Atul Jaiswal

Kumar Atul Jaiswal

Kumar Atul Jaiswal

OUR SKILLS

Marketing

Websites

PR

ACHIEVEMENTS

STRATEGY & CREATIVITY

PORTFOLIO

This is above the line.

This is below the line.

Safar :- life ka aisa safar, jo paucha de aapko aapke destination tak, bs shuruaat to karo :- LINKS

HTML Links - Hyperlinks

Chapter Summary

HTML Images

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

HTML Paragraphs are Defined With the <p> Tag.

Example

<!DOCTYPE html> <html> <body> <p>This is a paragraph.<p> <p>This is a another paragraph.<p> </body> </html>

Result

Ads

Youtube

Linkedln

Popular Posts

Like Us

Labels

Let's Talk About

Tweet

Connection

WHAT WE DO

ANALYTICS

CONSULTING

DESIGN

DEVELOPMENT

MARKETING

SEO

CONTACT US

Hacking Truth.in

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.<p>

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

</body>
</html>