Showing posts with label html link tag. Show all posts
Showing posts with label html link tag. Show all posts

Monday, September 26, 2022

html image tag and html paragraph tag


           HTML Tag


Html tag


1) Teletype Element


The HTML Teletype Text Element (<tt>) produces an inline element displayed in the browser's default monotype font. This element was intended to style text as it would display on a fixed width display, such as a teletype. It probably is more common to display fixed width type using the <code> element. This element is obsolete.  Use a more appropriate element, such as<code> or <span> with CSS, instead.


Example


<!DOCTYPE html>

<html>

<body>

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

<p><tt>This text is teletype text. </tt></p>

<P><strong>Note : </strong>The tt element is not supported in HTML5.</p>

</Body>

</html>


Teletype Element output


This text is normal.

This text is teletype text.

Note: The tt element is not supported in HTML5.


2) Anchor links and Named Anchors 


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 the link and a user can click that part to reach to the linked document. 

Example

<!document html>

<html>

<head>

<title>Google</title>

</head>

<body>

<h1>Anchor Tags </h1>

<a href="http://google.com>Google Website</a>

</Body>

</html>


Anchor links and Named Anchors output


Anchors Tags

Google Website


2)  Example 


<!DOCTYPE html>

<html>

<body>

<H1>Hyperlink</h1>

<a href="www.faceboo.com" target="_blank">Visit Facebook</a> | <a href="www.twitter.com" target="_blank">Visit Twitter</a> | <a href="www.yahoo.com" target="_blank">Visit Yahoo</a>

</body>

</html>

Anchor links and Named Anchors output

Hyperlink

Visit Facebook |visit Twitter |visit Yahoo


3) Links - Color 

 You can set colors of your links, active links and visited links using link, alink and Vlink attributes of <body> tag. 

When you move the mouse over a link, two things

1)  The mouse arrow will turn into a little hand .

2)  The color of the link element will change.

By default, a link will appear link

1)  An unvisited link is underlined and blue.

2)  An visited is underlined and. Purple.   

3)  An active link is underlined and red.


Example

<! Doctype html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body alink ="blue" link ="red" Vlink= "pink">
<P>click following link </p>
<a href = "www.google.com" target ="_blank">HTML tutorial</a>

</body>

</html>

Links - Color output


click following link

HTML tutorial




4) Image Tag 

An image can be inserted into a web page using the tag <img>. The <img> tag is empty tag. This  tag takes the name of the image file as an attribute.

The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag has two required attributes: src - Specifies the path to the image. 

Syntax

<Img src = "Url">

Attribute


1) Align   :-.   Top bottom middle left right

Not supported in HTML5  Specifies the alignment of an image according to surrounding element.


2) Alt    :-  Text 

Specifies an alternate text for an image.


3) border    :-  Pixels

Specifies the width of the border around an image.


4) height   :-  Pixels

Specifies the height of an image.


5) width  :-  Pixels 

Specifies the width of an Image.


6) Src  :-   pixels

specifies the URL of an image.


Example

<! Doctype html>

<html>

<Body bgcolor="blue"  text=yellow" link="red" >

<center><h1>photo Art Gallery </h1></center>

<img src="1.jpg" height="100" width="100" align ="left">

<img src="2.jpg" height="100" width="100"align="centre" alt ="middle image">

</body>

</html>


Image Tag output


Image 1(left)



Image 2(middle)





5) paragraph Tag

The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified  with css 

The Paragraph element. The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Attribute

1) Align    :-  Left, right, centre, justify

Specifies the alignment of the text with in paragraph

paragraph Tag

    Example :-

<! Doctype html>

<html>

<body>

<P align =left> is a first paragraph.this is a first paragraph Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On web browsers, paragraphs display as blocks of text separated from adjacent blocks by blank lines, white spaces, or first-line indentation</p>

<p  align=right>Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On web browsers, paragraphs display as blocks of text separated from adjacent blocks by blank lines, white spaces, or first-line indentation </p>

</body>

</html>


paragraph Tag

  Output :-

HTML paragraph Tag



Related Post 


css border bottom property

html list attributes tag

html login form

html bdo tag

html bold tag

html audio tag

html file-upload tag

Sunday, July 17, 2022

html link tag

 Attribute of the LINK Element 


LINK HTML img




The link element allows authors to link their document to other resources. The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. A link element must have rel attribute

1] Href


Value :-   URL

Syntax :-

<a href="url">link text</a>

Description :-
   

Specified the target URL you navigate to  after clicking a link.

The href attribute link  short for “Hypertext REFerence” indicates the relationship between pages to search engines. href is an attribute of the anchor tag and contains two components: The URL (the actual link) and. The clickable text or object that users will see on the page known as the “anchor text”


2] Hreflang


Value:-   Language_code

Description :-

Defines the base language of the target URL

Hreflang is an HTML attribute used to specify the language and geographical targeting of a webpage. If you have multiple versions of the same page in different languages, you can use the hreflang tag to tell search engines like Google about these variations. Introduced by Google in December 2011, the hreflang attribute allows you to show search engines what the relationship is between web pages in alternate languages. It's useful when you've created content that's specific to a local audience.

 hreflang tags are important to: Reach potential customers in different countries. Serve the correct content to visitors based on their region and preferred language. Build a strong international search engine optimization (SEO) strategy for your website.


3] Media


Value :- Screen, try, projection, handheld, print 


Syntax:-

<tagname media="expression" />

Description :- 

  
Specified the device on which the HTML document is displayed

The media attribute specifies what media or device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media.


Elements         Attribute
<a>                      media
<area>                media
<link>                 media
<source>            media


The media attribute specifies the media or device type the linked page or resource is optimized for.

This attribute can specify pages or resources that are designed for mobile devices, print media, and others.

media accepts multiple media or device type values combined with logical conditions (and, or, not).



4] Rel


Value  :-   Alternate, archives, author, first help, icon, index, last, license, next, pingback, prefetch, search, stylesheet, sidebar, tag,up


Syntax :-      <link rel="value">

Description :-


 Specifies the relationship between the html document and target URL or another HTML document. A rel was a Dalek unit of measurement, principally of time.

rel is short for relation. It specifies the relation between the tag and href . href stands for hypertext reference. It's the source of the file used by the tag. You can use both not only when connecting an external css file, also for using <a> tags,for a regular hyperlink. The rel attribute defines the relationship between a linked resource and the current document. Valid on <link> , <a> , <area> , and <form> , the supported values depend on the element on which the attribute is found.

Rel attributes are little bits of html text that detail the relationship between the page a link is on and the page or document it is pointing to. Rel attributes can be used for links and also other elements of html like site navigation or forms.


5] Sizes


Value :-  Any number

  

Syntax :-  <input size = "value">

Description :-


Description the size of the linked html document.
The size attribute defines the width of the <input> and the height of the <select> element. For the input , if the type attribute is text or password then it's the number of characters. This must be an integer value 0 or higher.HeightxWidth It is used to specify the one or more sizes of a linked icon. The value of the height and the width are separated by an “Y” or “Y”.

The HTML link sizes Attribute is used to specify the sizes of the icon for visual media and it only works when rel=”icon”. It is a read-only Property.




7] Type


Value:-   The mime_type : text/JavaScript,text/css

Syntax:-    <link Type="value">


Description:-


Specifies the multipurpose Internet Mail Extension (MIME) type of the target URL the MIME type decide which type of language rules are to followed HTML, page , such as JavaScript or css use. 

The HTML type Attribute is used to specify the type of button for <button> elements. It is also used in the <input> element to specify the type of input to display. For embed elements like link, object, script, source, and style used to specify the Internet Media 
The HTML type Attribute is used to specify the type of button for <button> element.

visit link
👇👇👇👍👌


css column gap property

horizontal navigation bar

advantage-and-disadvantage-internet

how to create table tag in html

HTML Ordered List

html/css customer login form