Categories
HTML Web development

HTML pre tag

HTML pre tag

The HTML <pre> element specifies pre-formatted text.

Text in a <pre> tag is displayed in a fixed-width font, and the text preserves both spaces and line breaks (the text will be displayed exactly as written in the HTML source code).

Example:

<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

</body>
</html>

Output:

Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

To create a pre-formatted text with a fixed width (with CSS):

<!DOCTYPE html>
<html>
<body>

<div style="width:250px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as defined.</pre>
</div>

</body>
</html>

Output:

This is a pre with a fixed width. It will use as much space as defined.

Enjoy coding!

Categories
HTML Web development

HTML audio tag

HTML audio tag

The HTML <audio> element is used to embed sound content in a document (such as music or other audio streams).

The HTML <source> element allows you to specify alternative audio files which the browser may choose from.

Example:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:


Attributes:

autoplay (value- autoplay) – defines that the audio will start playing as soon as it is ready.

Syntax:

<audio autoplay> 

controls (value- controls) – defines that audio controls should be displayed (play/pause button).

Syntax:

<audio controls> 

loop (value- loop) – defines that the audio will start over again (every time it is finished).

Syntax:

<audio loop> 

muted (value- muted) – defines that the audio output should be muted.

Syntax:

<audio muted> 

preload (value- auto/ metadata/ none) – defines if and how the author thinks the audio should be loaded when the page loads.

<audio preload="auto|metadata|none"> 

src (value- URL) – defines the URL of the audio file.

<audio src="URL"> 

Example:

<!DOCTYPE html>
<html>
<body>

<audio src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" controls>
</audio>

</body>
</html>

Output:


Enjoy coding!

Categories
HTML Web development

HTML del tag & ins tag

HTML del tag & ins tag

The HTML <del> element specifies the text that has been deleted from a document (browsers usually strike a line through the deleted text).

The HTML <ins> element specifies a text that has been inserted into a document (browsers usually underline inserted text).

Example:

<!DOCTYPE html>
<html>
<body>

<p>My favourite ice cream flavour is <del>strawberry</del> <ins>chocolate</ins>!</p>

</body>
</html>

Output:

My favourite ice cream flavour is strawberry chocolate!


Attributes:

cite (value- URL) – defines a URL to a document that explains the reason why the text was inserted/changed.

datetime (value- YYYY-MM-DDThh:mm:ss) – defines the date and time when the text was inserted/changed.

Enjoy coding!

Categories
HTML Web development

HTML time tag

HTML time tag

The HTML <time> element specifies a specific time (or datetime).

The HTML datetime attribute of this tag is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user’s calendar.

Example:

<!DOCTYPE html>
<html>
<body>

<p>We have a job meeting from <time>11:00</time> to <time>12:00</time> every Friday.</p>

<p>I have a meeting on <time datetime="2021-12-03 18:00">Friday</time>.</p>

</body>
</html>

Output:

We have a job meeting from to every Friday.

I have a meeting on .


Enjoy coding!

Categories
HTML Web development

HTML bdo tag

HTML bdo tag

The HTML <bdo> element specifies the text direction (<bdo> element override the current text direction.)

Example:

<!DOCTYPE html>
<html>
<body>

<p>How are you? <bdo dir="rtl">How are you?</bdo></p>

</body>
</html>

Output:

How are you? How are you?


Attributes:

dir (value- ltr/ rtl) – defines the text direction of the text inside <bdo> the tag.

ltr – left-to-right text direction.

rtl – right-to-left text direction.

Enjoy coding!

Categories
HTML Web development

HTML tbody tag, thead tag & tfoot tag

HTML tbody tag, thead tag & tfoot tag

The HTML <tbody> element is used to group the body content in an HTML table.

The <tbody> tag is used in conjunction with the <thead> and <tfoot> tags to define each part of a table (body, header, footer).

The <tbody>, <thead> or <tfoot> element must have one or more <tr> elemnents inside.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 3px solid #333;
    border-collapse: collapse;}
    
thead {
  color: #e76f51;      
    }
tbody {
  color: #2a9d8f;      
    }
tfoot {
  color: #264653;
  text-align: center;
    }
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Item:</th>
      <th>Stock:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sugar</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Coffee</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

Output:

Item: Stock:
Sugar 3
Coffee 2
Sum 5

Enjoy coding!

Categories
HTML Web development

HTML col tag & colgroup tag

HTML col tag & colgroup tag

The HTML <col> element defines column properties for each column within a <colgroup> tag.

The HTML <colgroup> element defines a group of one or more columns in a table for formatting.

The HTML <col> element like the <colgroup> element can be used to apply styles to entire columns (instead of repeating the styles for each cell, or a row).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 3px solid #333;
}
table {
  border-collapse: collapse;
}
</style>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color:#e9c46a">
    <col style="background-color:#2a9d8f">
  </colgroup>
  <tr>
    <th>Number</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>25</td>
    <td>HTML course</td>
    <td>£45</td>
  </tr>
  <tr>
    <td>27</td>
    <td>CSS course</td>
    <td>£69</td>
  </tr>
</table>

</body>
</html>

Output:

Number Title Price
25 HTML course £45
27 CSS course £69

Enjoy coding!

Categories
HTML Web development

HTML address tag

The HTML <address> element specifies the contact information for the author of a document /an article.

The contact information can be an email, URL, physical address, phone number, or social media, etc.

Note: The text in the <address> tag usually renders in italic.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
address { 
  display: block;
  font-style: italic;
} 
</style>
</head>
<body>


<address>
Written by <a href="mailto:example@gmail.com">John Smith</a>.<br> 
Visit us at:<br>
example.co.uk<br>
Oxfort Street 123, London<br>
United Kingdom
</address>

</body>
</html>

Output:

Written by John Smith.
Visit us at:
example.co.uk
Oxfort Street 123, London
United Kingdom

Enjoy coding!

Categories
HTML Web development

HTML map and area tags

HTML map and area tags

The HTML <map> element is used to specify an image map. An image map is an image with clickable areas.

The HTML <map> tag contains a number of HTML <area> tags, that specify the clickable areas in the image map.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Note: The usemap attribute in <img> is linked with the <map> element’s name attribute, and creates a connection between the image and the map.

The HTML <area> element specifies an area inside an image map.

Attributes:

alt (value- text) -defines an alternate text for the area.

Syntax:

<area alt="text"> 

coords (value- coordinates) – defines the coordinates of the area.

Syntax:

<area coords="value"> 

x1,y1,x2,y2 – defines the coordinates of the top-left and bottom-right corner (shape=”rect”).

x,y,radius – defines the coordinates of the circle center and the radius (shape=”circle”).

x1,y1,x2,y2,..,xn,yn – defines the coordinates of the edges of the polygon.

download (value- filename) – defines that the target will be downloaded when a user clicks on the hyperlink.

Syntax:

<area download="filename"> 

href (value- URL) – defines the hyperlink target for the area.

Syntax:

<area href="URL"> 

media (value- media query) – defines what device the target URL is optimized for.

Syntax:

<area media="value"> 

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send with the link.

Syntax:

<area referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">

rel (value- alternate/ author/ bookmark/ help/ license/ next/ nofollow/ noreferrer/ prefetch/ prev/ search/ tag) – defines the relationship between the current document and the target URL.

Syntax:

<area rel="value"> 

shape (value- default/ rect/ circle/ poly) – defines the shape of the area.

Syntax:

<area shape="default|rect|circle|poly"> 

default – defines the entire region.

rect – specifies a rectangular region.

circle – specifies a circular region.

poly – specifies a polygonal region.

target (value- _blank/ _parent/ _self/ _top/ framename) – defines where to open the target URL.

Syntax:

<area target="_blank|_self|_parent|_top|framename"> 

type (value- media_type) – defines the media type of the target URL.

Syntax:

<area type="media_type"> 

Enjoy coding!

Categories
HTML Web development

The basic structure of an HTML document: doctype declaration, html tag, head tag, and body tag

The basic structure of an HTML document

The basic structure of an HTML document contains 5 elements:

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title>
  5. <body>

HTML <!DOCTYPE>

Every HTML document must start with a <!DOCTYPE> declaration. The <!DOCTYPE> declaration is not an HTML tag. It is “information” to the browser about what document type to expect.

In HTML5, use the declaration:

 <!DOCTYPE html>

Example:

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>

<body>
This is the content of the document.
</body>

</html>

Output:

This is a title
This is the content of the document.

HTML <html> tag

The HTML <html> element expresses the root of an HTML document.

The HTML <html> element is the container for all other HTML elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>This is a title</title>
</head>
<body>

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

</body>
</html>

Output:

Tip: Include the lang attribute inside the element, to declare the language of the website (this is meant to assist search engines and browsers.):

This is a title

This is a heading.

This is a paragraph.


HTML <head> tag

The HTML <head> tag is a container for metadata (information about data) and is placed between the <html> tag and the <body> tag.

The metadata typically specifies the document title, character set, styles, scripts, and other meta information.

Inside the HTML <head> tag can be the following tags:

<base>

<!DOCTYPE html>
<html>
<head>
  <base href="https://lenadesign.org/" target="_blank">
</head>
<body>

<h4>The HTML base element.</h4>

<p><a href="https://lenadesign.org/">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>
</html>

Output:

The HTML base element.

HTML base tag – Notice that the link opens in a new window, even if it has no target=”_blank” attribute. This is because the target attribute of the base element is set to “_blank”.


<link>

<meta>

<noscript>

<title> (required!)

<script>

<style>

HTML <body> tag

The HTML <body> element specifies the document’s body.

The HTML <body> tag may contain all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, etc.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>This is a title</title>
</head>

<body>
  <h4>This is a heading.</h4>
  <p>This is a paragraph.</p>
</body>

</html>

Output:

This is a title

This is a heading.

This is a paragraph.


Enjoy coding!