Friday, July 16, 2021

HTML Links - Hyperlinks Tags


HTML Links - Hyperlinks

   <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>

</html>

==================================================================================

HTML Links - Hyperlinks Details

HTML links are hyperlinks.

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.

The HTML <a> tag defines a hyperlink. It has the following syntax:

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

HTML Links - The target Attribute Details

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
  • _parent - Opens the document in the parent frame
  • _top - Opens the document in the full body of the window

    HTML Links - Use an Image as a Link Details

    To use an image as a link, just put the <img> tag inside the <a> tag:Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

at No comments:
Location: Lahore, Punjab, Pakistan

HTML Horizontal Rules/Line Breaks Tags

 HTML Horizontal Rules/Line Breaks 

  <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

<h1>This is heading 1</h1>

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

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

</body>

</html>

================================================================

HTML Horizontal Rules Details

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:

HTML Line Breaks Detials

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.

===========================================

at No comments:
Location: Lahore, Punjab, Pakistan

HTML Text Formatting Tags

 HTML Text Formatting 

   <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

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

<p><i>This text is italic.</i></p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
<p><em>This text is emphasized.</em></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

</body>

</html>

======================================================================

HTML Formatting Elements Details

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
at No comments:
Location: Lahore, Punjab, Pakistan

HTML Paragraphs Tags

  Html Page Sketch

        <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

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

</body>

</html>

=====================================================================

HTML Paragraphs Details

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.

at No comments:

HTML Headings Tags

HTML Headings Tags

  <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

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

=============================================================================

Headings Are Important Detials

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.

at No comments:
Location: Lahore, Punjab, Pakistan

Html Page Sketch

 Html Page Sketch

        <code>

            <!Doctype html>

<html>

<head><title>Html Page Sketch</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

</body>

</html>

at No comments:
Location: Lahore, Punjab, Pakistan
Subscribe to: Posts (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...