E-Nash UI : Help

This page allows you the user to get answers to questions that you may have , ask questions which other users and myself can give you an answer to, giving you options that you can try in your code so you can pick the best option to complete the piece of code you are working on. There is also a questions and answers page, where commonally asked questions are answered in detail.

Rules of the E-Nash help page

» There is no need to sign up as all mail is properly vetted.
» Treat all other users with respect.
» No foul and abusive langauge.
» Keep all correspondance relevant.
» Failure to follow these simple rules will mean your post will not get printed.

For Questions And Answers

HTML is the standard markup language used for producing Web pages, and HTML is an acronym that stands for Hyper Text Markup Language. HTML describes how the Web page is structured, and each of your HTML web pages consists of a series of elements, elements tell the browser how the content should be displayed. HTML elements label pieces of content such as headings, paragraphs and links etc...

What is an HTML Element?

An HTML element is defined by a start tag, with some added content, and closed with an end tag:

<TagName>Your element content placed here...</TagName>

HTML elements are everything from the start tag to the end tag, and Html elements can be nested, ie one or more elements nested inside an outer element, as shown below:

<div class="mydiv">
  <h1>This is a Heading</h1>
  <p>This is a paragraph</p>
<div>

Notice how the <h1></h1> tags and the <p></p> tags are nested between the mydiv class element start tag and the mydiv class element end tag. This is known as a block level element.

Please Note: Some HTML elements have no content, eg: the <hr> element. These elements are Known as empty elements. There is no end tag with empty elements!

The code below shows the anatomy of an HTML document.

<!doctype html>
 <html lang="en/us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
    <!-- Load external CSS styles -->
    <link rel="stylesheet" href="styles.css">
    
  </head>
  <body>
    <!-- HTML content is placed Here...-->
    
    <!-- Load external JavaScript -->
    <script src="scripts.js"></script>
    
  </body>
</html>

The above example explained in the list below:

<!DOCTYPE html> is the declaration that defines that this document is an HTML5 document.
<html> This element is the root element of an HTML page.
<lang This attribute defines the language the HTML document is written in.
<head> This element contains meta information about the HTML page.
<title> This element specifies a title for the HTML page, which is shown in the browser's title bar or in the page's tab.
The comment tag allows you to make notes about your code, comments are not displayed in the browser.
<body> This element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1> This element defines a large heading
<p> element defines a paragraph

Anchor tags are links that allow users to click their way between two sections or from page to page, or website templates, and are found in most web pages.

HTML Links - Syntax

HTML links are hyperlinks, The <a> tag defines a hyperlink. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

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

The link text is the part that the visitor will see, clicking on the link text, will send the visitor to the specified URL address. Links will appear in all browsers by default as follows:

An unvisited link is displayed as underlined and blue
A visited link is displayed as underlined and purple
An active link is displayed as underlined and red

You can change the style of your links, using CSS to change their look!

Target Attribute

The linked page will be displayed in the current browser window, by default. If you wish to change the destination, you must specify the destination with another target for the link. The target attribute can have one of the values shown in the list below:

_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

To open the linked document in a new browser window or tab, use target="_blank", as shown below:

<a href="https://www.e-nash.net/" target="_blank">Visit E-Nash!</a>

Elements that describe its meaning to both the developer and the browser are known as semantic elements. Non-semantic elements tells nothing about its content. Examples of this are elements such as <div> and <span>.

Semantic elements explanation. For extra information about each semantic element, click on the red links in the table below:

Defines independent, self-contained content

The Article Tag

The <article> element identifies a self-contained piece of content which could theoretically be distributed to other websites and platforms as a stand-alone unit. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Probable sources for the <article> element, are listed below:

Blog post
News story
Forum post

The <article> tag is one of the new semantic elements introduced with HTML5. There are two main ways that the <article> tag is used:

A single <article> element on a page with a single piece of content, can contain the main content and it can offset from the rest of the page.
On pages with a blog index page, or a search results page, or a news feed, or a category page. These pages with multiple pieces of content, the <article> elements can be used to contain each individual piece of content.

Please Note: Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element.

HTML <article> tag example is shown below:

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
	 
  </head>
  <body>
    <article>
      <h1>Article title</h1>
      <p>Article text content. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua.
      </p>
    </article>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Article title

Article text content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Defines content aside from the page content

The Aside Tag

The <aside> element identifies content that is related to the primary content of a web page, but does not form the primary content of the web page. Exampes of content that may be found in an <aside> element are listed below:

Author information
Related links
Related content
Advertisements

The <aside> content should be indirectly related to the surrounding content.The <aside> content is often placed as a sidebar in a document. The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element.

The code witten below shows how to use the <aside> element.

<!DOCTYPE html>
<html>
  <head>
    <style>
      aside {
        width: 30%;
        padding-left: 15px;
        margin-left: 15px;
        float: right;
        font-style: italic;
        background-color: #ffd;
      }
    </style>
  </head>
  <body>
    <h1>The aside element - With CSS Styling.</h1>
    <aside>
      <h3>Coffee Menu</h3>
      <ol>
        <li>Coffee Black</li>
        <li>Coffee Milk</li>
        <li>Americano</li>
        <li>Cappuccino</li>
        <li>Latte</li>
        <li>Espresso</li>
      </ol>
    </aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, excepteur sint occaecat cupidatat non
    proident,sunt in culpa qui officia deserunt mollit anim id est laborum
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua.</p>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

The aside element - With CSS Styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Defines additional details that the user can view or hide

The Distails Tag

Additional details that the user can open and close on demand, can be specified by the <details> tag. The <details> tag is often used to create an interactive user widget that can open and close. The widget is closed, by default. When open, it displays the content placed within. Any content you want to display inside the widget can be placed inside the <details> tag. The <details> tag is used in conjunction with the <summary> tag.

The <details> tag creates a control, disclosure widget.
This control can be toggled either opened and closed to show its details.
It is displayed with a triangular button that shows the widget's state.
The caption for this element is defined with the <summary> tag.

The code witten below shows how to use the <details> element in conjunction with the <summary> element.

<details>
  <summary>Coffee Menu</summary>
  <ol>  
    <li>Coffee Black</li>
    <li>Coffee Milk</li>
    <li>Americano</li>
    <li>Cappuccino</li>
    <li>Latte</li>
    <li>Espresso</li>
  </ol>
</details>

The code above is displayed in your browser as shown in the example below:

Coffee Menu

Coffee Black
Coffee Milk
Americano
Cappuccino
Latte
Espresso

You can use CSS to style the HTML <details> tag element

Defines a caption for a <figure> element

The Figurecaption Tag

The <figcaption> tag defines a caption for a <figure> element, and can be placed as the first or last child of the <figure> element.

The <figcaption> tag adds a caption to a <figure> element.
Figure captions summarize or describe the figure or image.
This element can be placed as the first or last element in the <figure> container.
A <figcaption> displays at the bottom of a <figure> element, by default
The position and orientation of the caption can be changed with CSS.

The code witten below shows how to use the <figure> element in conjunction with the <figcaption> element.

<figure>
  <img src="https://e-nash.net/e-nash-images/logo_image.png" width="200">
  <figcaption>Fig.1 - E-Nash Logo</figcaption>
</figure>

The code above is displayed in your browser as shown in the example below:

Specifies self-contained content, eg: illustrations, diagrams, photos, code listings, etc.

The Figure Tag

The <figure> tag specifies self-contained content.While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if the <figure> element is removed it should not affect the flow of the document. The <figure> element is used for the following:

Illustrations
Diagrams
Images
Code listings

The code witten below shows how to use the <figure> element in conjunction with the <figcaption> element.

<figure>
  <img src="https://e-nash.net/e-nash-images/logo_image.png" width="200">
  <figcaption>Fig.1 - E-Nash Logo</figcaption>
</figure>

The code above is displayed in your browser as shown in the example below:

Defines a footer for a document or section

The Footer Tag

The <footer> tag defines a footer section for a page or another element, while presenting6 summary information or concluding content, and the <footer> tag specifies the footer is placed to its nearest content or the entire page.

In the list below a <footer> element may contain any of the following:

Author information.
Copyright information
Contact information
Sitemap
Related documents
Navigation links
Back to the top links

The code witten below shows how to use the <footer> element in conjunction with the <header>, <aside> and <article> elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
      header {
        display: block;
        width: 100%;
        padding: 20px;
        background-color: #6ca;
        color: #ffd;
      }
      .row {
        position: relative;
        display: table;
        width: 100%
      }
      aside {
        display: table-cell;
        width: 30%;
        padding: 15px;
        background-color: #ffc;
        color: #6ca;
      }
      article {
        display: table-cell;
        width: 70%;
        padding: 15px;
        background-color: #ffd;
        border-left: 10px solid #6ca;
        color: #888;
      }
      a.link {
        display: block;
        color: #6ca;
      }
      footer {
        width: 100%;
        padding: 10px;
        background-color: #6ca;
        color: #ffd;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Coding Languages</h1>
    </header>
    <div class="row">
      <aside>
        <a href="#" class="link">HTML</a>
        <a href="#" class="link">CSS</a>
        <a href="#" class="link">JAVASCRIPT</a>
      </aside>
      <article>
        <h2>HTML</h2>
        <p>HTML is the standard markup language used for producing Web pages, and
HTML is an acronym that stands for Hyper Text Markup Language. HTML describes
how the Web page is structured, and each of your HTML web pages consists of a
series of elements, elements tell the browser how the content should be displayed.
HTML elements label pieces of content such as headings, paragraphs and links
etc...</p>
        <p>HTML was first created by Tim Berners-Lee, Robert Cailliau, and others
starting in 1989. It stands for Hyper Text Markup Language. Hypertext means that
the document contains links that allow the reader to jump to other places in the
document or to another document altogether. The latest version is known as 
HTML5.</p>
      </article>
    </div>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Coding Languages

HTML CSS JAVASCRIPT

HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

Defines a header for a document or section

The Header Tag

The <header> element is one of the semantic document tags newly introduced with HTML5. It is used to specify a header section for the element that it is nested within. It can be used as a header for a whole page, this is the most common use, but can also be used as the header on any other piece of on-page content, such as an article, etc...

The common use for the <header> element is as a page header, and it usually consists of the site’s title and logo as well as the main site navigation. The name given this is quite often known as the “masthead”.

The code witten below shows how to use the <header> element in conjunction with the < <aside> and <article>, <footer> elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
      header {
		  position: relative;
        display: block;
        width: 100%;
        padding: 20px;
        background-color: #6ca;
        color: #ffd;
      }
      .fake_logo {
        position: relative;
        top: 10px;
        left: 10px;
        display: inline-block;
        width: 80px;
      }
      .heading {
        position: relative;
        left: 50%;
        transform: translatex(-75%);
        display: inline-block;
        color: #ffffdd;
        text-shadow: 0 0 1px #555555, 2px 2px #555555;
        text-align: center;
      }
      nav {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 100px;
		  border: 2px solid #ffd;
      }
      .navigate {
        display: block;
        color: #ffd;
        font-weight: 700;
        line-height: 2;
      }		
      .row {
        position: relative;
        display: table;
        width: 100%
		  font-size: 12px;
      }
      aside {
        display: table-cell;
        width: 30%;
        padding: 15px;
        background-color: #ffc;
        color: #6ca;
      }
      article {
        display: table-cell;
        width: 70%;
        padding: 15px;
        background-color: #ffd;
        border-left: 10px solid #6ca;
        color: #888;
		  font-size: 12px;
      }
      a.link {
        display: block;
        color: #6ca;
      }
      footer {
        width: 100%;
        padding: 10px;
        background-color: #6ca;
        color: #ffd;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="https://e-nash.net/e-nash-images/fake_logo.png" class="fake_logo"
		width="40" alt="fake logo">
      <h1 class="heading">Coding Languages</h1>
      <nav>
        <a href="#" class="navigate">HTML</a>
        <a href="#" class="navigate">CSS</a>
        <a href="#" class="navigate">JAVASCRIPT</a>
      </nav>
    </header>
    <div class="row">
      <aside>
        <h4>HTML</h4>
        <p>lorem ipsum dolor sit amet. </p>
        <h4>CSS</h4>
        <p>lorem ipsum dolor sit amet. </p>
        <h4>JAVASCRIPT</h4>
        <p>lorem ipsum dolor sit amet. </p>
      </aside>
      <article>
        <h2>HTML</h2>
        <p>HTML is the standard markup language used for producing Web pages, and
HTML is an acronym that stands for Hyper Text Markup Language. HTML describes
how the Web page is structured, and each of your HTML web pages consists of a
series of elements, elements tell the browser how the content should be displayed.
HTML elements label pieces of content such as headings, paragraphs and links
etc...</p>
        <p>HTML was first created by Tim Berners-Lee, Robert Cailliau, and others
starting in 1989. It stands for Hyper Text Markup Language. Hypertext means that
the document contains links that allow the reader to jump to other places in the
document or to another document altogether. The latest version is known as 
HTML5.</p>
      </article>
    </div>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Coding Languages

🌟 🌟 🌟

Become A Frontend Master

HTML

lorem ipsum dolor sit amet.

CSS

lorem ipsum dolor sit amet.

JAVASCRIPT

lorem ipsum dolor sit amet.

HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language. Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

Specifies the main content of a document

The Main Tag

The <main> tag is a new block-level element in the HTML5 specification. The tag specifies the dominant content of the document's <body>. The content inside the <main> element should be unique to the document, there must not be more than one <main element in a document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

The code witten below shows how to use the <Main> element in conjunction with the <article> elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
	   main {
        margin: 0;
        padding: 5px;
        background-color: #afd;
        border: 3px solid #0c0;
      }

      main > h1, p, .flowers {
        margin: 10px;
        padding: 5px;
        color: #0c0;
        text-shadow: 0 0 1px #555, 1px 1px #555, 2px 2px #555;
        text-align: center;
      }

      .flowers {
        background-color: #fff;
        border: 2px solid #0c0;
      }

      .flowers < h2, p, span {
        margin: 4px;
        font-size: 90%;
        color: #666;
        text-shadow: none;
      }
	 </style>
  </head>
  <body>
    <main>
		<h1>Most Popular Cut Flowers</h1>
      <p>Peruvian lily, Carnation, Roses are three of the most popular cut flower
		  varieties.
		</p>
      <article class="flowers">
        <h2>Peruvian Lily</h2>
        <span>(Alstroemeria aurea)</span>
        <p>Alstroemeria, Peruvian lily is a very popular choice of cut flower, even
          though most people don't know it by its botanical name. Peruvian lily
          flowers in late spring or early summer. The flowers are sensitive to
          fluoride, so let tap water sit for a few hours before using. Alstroemeria
          will keep in a vase for 6 to 14 days.
        </p>
      </article>
      <article class="flowers">
        <h2>Carnation</h2>
        <span>(Dianthus caryophyllus)</span>
        <p>Dianthus caryophyllus are one of the longest-lasting cut flowers. They
          are also easy to grow from seed and have a wonderful clove-like fragrance.
          Although they are most commonly thought of as flowering in white, pink,
          and red, horticulturalists continue to develop new varieties in different
          hues. If you grow your own, you can have cut flowers well into fall.
          Dianthus caryophyllus will last in a vase for 7 to 21 days.
        </p>
      </article>
      <article class="flowers">
        <h2>Roses</h2>
        <span>(Rosa Spp. and Hybrids)</span>
        <p>Rosa Spp are the classic cut flower, with more than 100 million sold each year.
          20,000 varieties of roses are available to gardeners, so they never get
          boring. Long-stemmed roses are favored by the florist industry, but you
          can grow and cut any type of rose for floral arrangements. Spray roses,
          with multiple blooms on each stem, make quick, charming bouquets. Crushing
          the end of the stem before you put it in the vase will help it take up more
          water. Roses keep their appearance for 6 to 12 days in a vase.
        </p>
      </article>
    </main>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Most Popular Cut Flowers

Peruvian lily, Carnation, Roses are three of the most popular cut flower varieties.

Peruvian Lily

(Alstroemeria aurea)

Alstroemeria, Peruvian lily is a very popular choice of cut flower, even though most people don't know it by its botanical name. Peruvian lily flowers in late spring or early summer. The flowers are sensitive to fluoride, so let tap water sit for a few hours before using. Alstroemeria will keep in a vase for 6 to 14 days.

Carnation

(Dianthus caryophyllus)

Dianthus caryophyllus are one of the longest-lasting cut flowers. They are also easy to grow from seed and have a wonderful clove-like fragrance. Although they are most commonly thought of as flowering in white, pink, and red, horticulturalists continue to develop new varieties in different hues. If you grow your own, you can have cut flowers well into fall. Dianthus caryophyllus will last in a vase for 7 to 21 days.

Roses

(Rosa Spp. and Hybrids)

Rosa Spp are the classic cut flower, with more than 100 million sold each year. 20,000 varieties of roses are available to gardeners, so they never get boring. Long-stemmed roses are favored by the florist industry, but you can grow and cut any type of rose for floral arrangements. Spray roses, with multiple blooms on each stem, make quick, charming bouquets. Crushing the end of the stem before you put it in the vase will help it take up more water. Roses keep their appearance for 6 to 12 days in a vase.

Defines marked/highlighted text

The Mark Tag

The <mark> element is used to highlight text inside of another element such as a paragraph, list, or table. Text to which the <mark> element has been added is considered to be particularly impotant and relevant in a specific context. Most browsers will display the <mark> element with the following default values:

Background color: yellow
Text color: black

These color values can be manipulated by adding new color values using Css.

The code witten below shows how to use the <Mark> element.

<h4>Using The mark tag<h4>
<p>The mark tag highlights markimportant and relevant</mark> text in a specific context.</p>

The code above is displayed in your browser as shown in the example below:

Using The mark tag

The mark tag highlights important and relevant text in a specific context.

Defines navigation links

The Nav Tag

The <nav> element in HTML provides a set of navigation links, either within the current document or to other documents. Not all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Common navigation sections that use the <nav> element include indexes, table of contents, menus, etc. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

The code witten below shows how to use the <Nav> element in conjunction with the <li> and a>elements.

  <nav>
    <li><a href="/home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#prices">Prices</a></li>
    <li><a href="#contact">Contact</a></li>
  </nav>

The code above is displayed in your browser as shown in the example below:

•

Home

•

About

•

Prices

•

Contact

If you would prefer an inline navigation bar, then all that is needed is to remove the <li></li> as shown below:

  <nav>
    <a href="/home">Home</a>
    <a href="#about">About</a>
    <a href="#prices">Prices</a>
    <a href="#contact">Contact</a>
  </nav>

The code above is displayed in your browser as shown in the example below:

Home About Prices Contact

The <Nav> element style can be changed using CSS.

Defines a section in a document

The Section Tag

The <section> element is a structural HTML element used to group together related elements. Each <section> typically includes one or more heading elements and additional elements presenting related content. <section> is a new HTML 5 element that defines an important section of a document. It can be used within articles, in the header or footer, or to define navigation. If a part of the content deserves its own heading, and that heading would be listed in a theoretical or actual table of contents, it should be placed in a <section>. The key exception is where the content may be syndicated; in this case, use <article> element instead.

The code witten below shows how to use the <section> element in conjunction with the <article> element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
      article {
        margin: 0;
        padding: 5px;
        background-color: #afd;
        border: 3px solid #0c0;
      }

      article > h1, p, .flowers {
        margin: 10px;
        padding: 5px;
        color: #0c0;
        text-shadow: 0 0 1px #555, 1px 1px #555, 2px 2px #555;
        text-align: center;
      }

      .flowers {
		  display: block;
		  width: calc(100% - 33px);
        background-color: #fff;
        border: 2px solid #0c0;
      }

      .flowers > h2, p, span {
        margin: 4px;
        font-size: 90%;
        color: #666;
        text-shadow: none;
      }
    </style>
  </head>
  <body>
    <article>
	  <h1>Most Popular Cut Flowers</h1>
      <p>Peruvian lily, Carnation, Roses are three of the most popular cut flower
      varieties.</p>
      <section class="flowers">
        <h2>Peruvian Lily</h2>
        <span>(Alstroemeria aurea)</span>
        <p>Alstroemeria, Peruvian lily is a very popular choice of cut flower, even
          though most people don't know it by its botanical name. Peruvian lily
          flowers in late spring or early summer. The flowers are sensitive to
          fluoride, so let tap water sit for a few hours before using. Alstroemeria
          will keep in a vase for 6 to 14 days.
        </p>
      </section>
      <section class="flowers">
        <h2>Carnation</h2>
        <span>(Dianthus caryophyllus)</span>
        <p>Dianthus caryophyllus are one of the longest-lasting cut flowers. They
          are also easy to grow from seed and have a wonderful clove-like fragrance.
          Although they are most commonly thought of as flowering in white, pink,
          and red, horticulturalists continue to develop new varieties in different
          hues. If you grow your own, you can have cut flowers well into fall.
          Dianthus caryophyllus will last in a vase for 7 to 21 days.
        </p>
      </section>
      <section class="flowers">
        <h2>Roses</h2>
        <span>(Rosa Spp. and Hybrids)</span>
        <p>Rosa Spp are the classic cut flower, with more than 100 million sold each year.
          20,000 varieties of roses are available to gardeners, so they never get
          boring. Long-stemmed roses are favored by the florist industry, but you
          can grow and cut any type of rose for floral arrangements. Spray roses,
          with multiple blooms on each stem, make quick, charming bouquets. Crushing
          the end of the stem before you put it in the vase will help it take up more
          water. Roses keep their appearance for 6 to 12 days in a vase.
        </p>
      </section>
    </article>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Most Popular Cut Flowers

Peruvian lily, Carnation, Roses are three of the most popular cut flower varieties.

Peruvian Lily

(Alstroemeria aurea)

Carnation

(Dianthus caryophyllus)

Roses

(Rosa Spp. and Hybrids)

Defines a visible heading for a <details> element

The Summary Tag

The <summary> element is used to specify a visible heading, summary, caption, or legend for the <details> element’s interactive box. The <summary> element should be the first child element of the <details> element, the <summary> element and details> element are used in conjunction. click on the visible text wrapped by the <summary> element, which can open or close the box that contains the markup of the children elements of the <details> element. The <summary> element can contain plain text, heading elements, or any HTML element that can be specified inside the <p> "paragraph" element.

<details>
  <summary>Coffee Menu</summary>
  <ol>  
    <li>Coffee Black</li>
    <li>Coffee Milk</li>
    <li>Americano</li>
    <li>Cappuccino</li>
    <li>Latte</li>
    <li>Espresso</li>
  </ol>
</details>

The code above is displayed in your browser as shown in the example below:

Coffee Menu

Coffee Black
Coffee Milk
Americano
Cappuccino
Latte
Espresso

Defines a date/time

The Time Tag

The <time> tag defines a specific time, or datetime. The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results, in other words, the <time> element defines a datetime. The content of a time element is typically a human-readable date and time, and a machine-readable version of the same time is placed in the datetime attribute. The time element is used to tell a browser that the associated text is time-related. In-and-of itself, that doesn’t do a lot for users or browsers, although it may be a help to users of some assistive technologies. The time element isn’t particularly useful until paired with a datetime attribute. One a datetime attribute has been associated with the time element, the browser knows a lot more about the time described in the time element and can use that information when interacting with other applications — such as when importing information from an HTML email or webpage into a calendar application. The datetime attribute can be used to identify a year, a month and year, a specific date, a date and time, a time without a date, and durations of time.

The code witten below shows how to use the <time> element in conjunction with the <datetime> element.

<p>Dentist appolntment, check up <time datetime="2022-11-11 10:00">
Friday at 10:00 AM</time> with John Doe.</p>

The code above is displayed in your browser as shown in the example below:

Dentist appolntment, check up Friday at 10:00 AM with John Doe.

This section shows how you can dynamically change attributes for an element of the web page. The Document Object Model (DOM) provides a feature to control the styles dynamically in web development. Determine which attributes you want to modify and how to store them. Create a function for each one, which you will add to the dynamic.attributes.js file. Below is the input element whose type attribute will be changed from text to password, JS code is used to modify the attribute value:

<!doctype html>
<html lang="en">
  <head>
  
  </head>
  <body>
    <input type="text" id="number">
    <script>
      const number = document.getElementById("number");
      number.setAttribute("type", "password");
      number.setAttribute("value", "50");
    </script>
  </body>
</html>

The code above is displayed in your browser as shown in the example below:

Note: I have added a value of 5012 to this input field to prove that it works, you can add more digits, or delete the existing ones if you wish to see how it works.

You can change inline elements into block-level elements by using the display: block; in its CSS tag. Adding it to your CSS will change the inline elements into block elements and the inline elements will also take the full width of the container, unless you also add a width value, as shown by the examples below:

<html>
  <head>
    <style>
      button[type="button"] {
        padding: 5px 10px;
      }
      button[type="button"]:hover {
        background-color: #efefef;
      }
      button[type="button"]:active {
        background-color: #dedede;
      }
	 </style>
  </head>
  <body>
	 <button type="button" class="button">Click me</button>
	 <button type="button" class="button">Click me</button>
	 <button type="button" class="button">Click me</button>
  </body>
</html>

The code above shows an example of an unchanged button group, and the result is shown below:

The code below shows an example of a button group that has been changed from a inline element to a block-level element

<html>
  <head>
    <style>
      button[type="button"] {
        display: block;
        padding: 5px 10px;
        margin-bottom: 10px;
      }
      button[type="button"]:hover {
        background-color: #efefef;
      }
      button[type="button"]:active {
        background-color: #dedede;
      }
	 </style>
  </head>
  <body>
	 <button type="button" class="button">Click me</button>
	 <button type="button" class="button">Click me</button>
	 <button type="button" class="button">Click me</button>
  </body>
</html>

Note: In the CSS I have added a margin at the bottom of each button, else they will be displayed touching each other.

To ask a question or provide an answer to given questions just fill in the form on this page. Make sure that if you wish to help every user of this site, that you allow us to print the answer that you have provided by clicking the yes radio button. We will not provide other users with your email address.

Need Some Help?

Rules of the E-Nash help page

For Questions And Answers

What is an HTML Element?

HTML Links - Syntax

Target Attribute

The Article Tag

Article title

The Aside Tag

The aside element - With CSS Styling.

The Distails Tag

The Figurecaption Tag

The Figure Tag

The Footer Tag

HTML

The Header Tag

HTML

CSS

JAVASCRIPT

HTML

The Main Tag

Most Popular Cut Flowers

Peruvian Lily

Carnation

Roses

The Mark Tag

Using The mark tag

The Nav Tag

The Section Tag

Most Popular Cut Flowers

Peruvian Lily

Carnation

Roses

The Summary Tag

The Time Tag