Category Archives: HTML

HTML5 article Element

article

The name itself is quite self explanatory, but let’s see how the official documentation describe it:

“A self-contained composition in a document, page, application, or site and that is, in principle, independently distributive or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

The following example shows how we structure a blog post content with <article>.

<article>
    <header>
        <h3>
          <a href="#">Lorem ipsum dolor</a>
        </h3>
     </header>
     <section>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Non, dolor! Quibusdam accusamus tenetur, adipisci odio dignissimos 
laborum aperiam, commodi necessitatibus consequuntur nemo veritatis!
 Quibusdam, alias. Odio voluptas minima praesentium adipisci!</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Eveniet aut ducimus magnam eos modi sed culpa quam, architecto hic,
 officia nobis, obcaecati assumenda sint consectetur suscipit dolore
 perspiciatis fugit? Ea!</p>
     </section>
     <footer>
       <small>
     Posted on <time datetime="2017-011-17">November 17</time> 
      in <a href="#">Code</a>
       </small>
     </footer>
</article>

 

 ooo.PNG
Advertisements

The html img tag

The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag.

The image’s URL (address) can be defined using the src attribute.

The HTML image syntax looks like this: <img src=”picture.png” alt=”logo”/>

<!DOCTYPE html>

<html lang="en">

<head>

<title> My html page</title>

<metacharset="UTF-8">

</head>

<body>

<p align="right">This text is alinged to right</p>

<img src="book.gif" alt="This is a book image" />

</body>

</html>

In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.

 

 

HTML Attributes

Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.

<!DOCTYPE html>

<html lang="en">

<head>

<title> My html page</title>

<meta charset="UTF-8">

</head>

<body>

<palign="right">This text is alinged to right</p>

</body>

</html>

In this example, the value of “right” indicates that the content within the p element should be aligned to the right:
Attributes are always specified in the start tag, and they appear in name=”value” pairs.

 

HTML Elements

HTML documents are made up of HTML elements.
An HTML element is written using a start tag (e.g <h1>) and an end tag (e.g </h1>), and with the content in between.

e.g: <em>This is emphesized text </em>

HTML documents consist of nested HTML elements. In the example below, the body element includes the <p> tags,the <h1> tag, the <br /> tag and the content, “This is a paragraph” ,”This is a heading” and “This is also a paragraph”.

 

<html>
 <head>
 <title>My first page</title>
 </head>
 <body> 

<h1>This is a heading</h1>
 <p>This is a paragraph <br /></p>

<p>This is also a paragraph </p>
 </body>
</html>

Some HTML elements (like the <br />,<hr /> tag) do not have end tags.