Tag: html viewer

HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name “myHeader”. This <h1> element will be styled according to the #myHeader style definition in the head section: Continue reading HTML id Attribute

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of “city”. All of the three <div> elements will be styled equally according to the .city style definition in the head section: Continue reading HTML class Attribute

HTML Div Element

The <div> element is used as a container for other HTML elements.

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.

A <div> element takes up all available width:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

Continue reading HTML Div Element

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Continue reading HTML Block and Inline Elements

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

 

See the Pen
HTML Lists by Iampsp.com (@iampsp)
on CodePen.


Continue reading HTML Lists

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

 

See the Pen
HTML Tables by Iampsp.com (@iampsp)
on CodePen.


Continue reading HTML Tables

HTML Page Title

Every web page should have a page title to describe the meaning of the page.

The Title Element

The <title> element adds a title to your page:

 <!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>

The content of the document......

</body>
</html>

Continue reading HTML Page Title

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”. Continue reading HTML Favicon

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks

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.

Continue reading HTML Links