Friday, September 15, 2023

HTML Paragraphs

                             HTML Paragraphs

A paragraph always starts in a new line.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

<!doctype html>
<html>
<head>
<title>paragraphs</title>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At consectetur ea assumenda doloribus, harum, quasi ab cum, eaque ullam illo provident repellat excepturi a alias commodi vitae quas dolorem dolore!</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non harum quasi voluptatem id optio eaque, magni nostrum inventore, sapiente, fugit natus atque consectetur repellat. Voluptas vero earum autem saepe a.</p>
</body>
</html>

There are two paragraphs and each paragraph is started in a new line as shown below:

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example

<!doctype html>
<html>
<head>
<title>paragraphs</title>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
</body>
</html>

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:

Example

<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis expedita commodi fugit explicabo est culpa consequatur eaque minima velit delectus, maiores soluta exercitationem corrupti reiciendis ipsam ex accusantium, odit deserunt!</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 3</h2>
<p>This is some other text.</p>

</body>
</html>

Thursday, September 14, 2023

HTML Headings

                                    HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<!DOCTYPE html>
<html>
<head>
<title>
Headings
</title>
</head>
<body>
<h1>Hii</h1>
<h2>Hii</h2>
<h3>Hii</h3>
<h4>Hii</h4>
<h5>Hii</h5>
<h6>Hii</h6>
</body>
</html

A new webpage opens with different headings as shown below:

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page 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.

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:

Example

Wednesday, September 13, 2023

HTML Attributes(3)

                           HTML Attributes(3)

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

You can see all the language HTML ISO languge Code reference here:

The following example specifies English as the language and India as the country:

<!DOCTYPE html>
<html lang="en-IN">
<body>
...
</body>
</html>

You can see all the language HTML ISO Country Code referencehere:

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="This is my website">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut voluptas voluptatum ea tempora nisi iusto, facilis laudantium odit aspernatur sunt doloribus delectus aliquid dolorum sequi vel assumenda neque officiis explicabo.</p>

</body>
</html>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>

Tuesday, September 12, 2023

HTML Attributes(2)

                             HTML Attributes(2)

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

Example

<!DOCTYPE html>
<html>
<head>
<title>
Dog
</title>
</head>

<body>
<img src="images/dog.jfif"
height ="200" width="200">

<h3>woof woof!</h3>

</body>
</html>

This is how a new webpage opens and images are displayed.

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

<!DOCTYPE html>
<html>
<head>
<title>
Dog
</title>
</head>

<body>
<p>The alt attribute should reflect the image content,
so users who cannot see the image get an
understanding of what the image contains:</p>
<img src="images/cutedog.gif"
alt="cute dog" width="200">


</body>
</html>

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>

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

</body>
</html>

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...