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 Quotations

HTML Quotations
  1. <blockquote> tag
  2. <q> tag
  3. <abbr> tag
  4. <address> tag
  5. <cite> tag
  6. <bdo> tag

<blockquote> tag

The HTML <blockquote> tag specifies a section that is quoted from another source:

<!DOCTYPE html>
<html>
<body>

<blockquote cite="https://www.lenastanley.com/2019/08/what-is-web-developer.html">
A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications. Web developers do this by writing lines of code, using programming languages. The languages typically use HTML, CSS, and JavaScript in the client, PHP or Java in the server, and Http for communications between the client browser and a Web server.
</blockquote>

</body>
</html>

Output:

A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications. Web developers do this by writing lines of code, using programming languages. The languages typically use HTML, CSS, and JavaScript in the client, PHP or Java in the server, and Http for communications between the client browser and a Web server.

<q> tag

The HTML <q> element specifies a short quotation:

<!DOCTYPE html>
<html>
<body>

<p>Short Quotation: <q>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications.</q></p>

</body>
</html>

Output:

Short Quotation: A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications.


<abbr> tag

The HTML <abbr> element specifies an abbreviation or an acronym, like “”Dr.”, “ASAP”, “ATM”, “HTML”:

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>

</body>
</html>

Output:

The HTML is the standard markup language for documents designed to be displayed in a web browser.


<address> tag

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

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

<cite> tag

The HTML <cite> element specifies the title of creative work (e.g. a book, a song, a movie, a painting, etc.):

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" width="340" height="240" alt="halloween ghost">
<p><cite>Halloween Ghost</cite> by Lena Stanley, 2020.</p>

</body>
</html>

Output:

halloween ghost

Halloween Ghost by Lena Stanley, 2020.


<bdo> tag

The HTML <bdo> element specifies the text direction:

<!DOCTYPE html>
<html>
<body>

<bdo dir="rtl">This line will be written from right to left.</bdo>

</body>
</html>

Output:

This line will be written from right to left.

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