CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

25 October, 2021

What is the difference when we add marquee tag to the webpage?

 Programing Coderfunda     October 25, 2021     HTML-Tag, HTML5     No comments   


What is the difference when we add marquee tag to the webpage?

Marquee tag is using in html5

When you want to moving on webpage right to left or left to right & top to bottom and bottom to top 

Example : 


<marquee> Hello </marquee>


An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.

Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use JavaScript and CSS to create such effects.

Syntax

A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.

Sr.NoAttribute & Description
1

width

This specifies the width of the marquee. This can be a value like 10 or 20% etc.

2

height

This specifies the height of the marquee. This can be a value like 10 or 20% etc.

3

direction

This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.

4

behavior

This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.

5

scrolldelay

This specifies how long to delay between each jump. This will have a value like 10 etc.

6

scrollamount

This specifies the speed of marquee text. This can have a value like 10 etc.

7

loop

This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.

8

bgcolor

This specifies background color in terms of color name or color hex value.

9

hspace

This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.

10

vspace

This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

Below are few examples to demonstrate the usage of marquee tag.


<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>

</html>

 right

<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
 
</html>

Up

<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>

</html>



Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

17 October, 2020

HTML Elements

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.


Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements.

Such as:


<p> Hello world!!! </p>   

Example

<!DOCTYPE html>  

<html>  

<head>  

    <title>WebPage</title>  

</head>  

<body>  

   <h1>This is my first web page</h1>  

    <h2> How it looks?</h2>  

     <p>It looks Nice!!!!!</p>  

</body>  

</html>  



Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag.



Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.


Nested HTML Elements: HTML can be nested, which means an element can contain another element.


Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two categories:


Block-level element

Inline element

Block-level element:

These are the elements, which structure main part of web page, by dividing a page into coherent blocks.

A block-level element always start with new line and takes the full width of web page, from left to right.

These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.


<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.


Note: All these elements are described in later chapters.

Example:

<!DOCTYPE html>  

<html>  

             <head>  

    </head>  

<body>  

    <div style="background-color: lightblue">This is first div</div>  

    <div style="background-color: lightgreen">This is second div</div>  

    <p style="background-color: pink">This is a block level element</p>  

</body>  

</html>  

Test it Now

Output:


Block-level and Inline HTML elements

In the above example we have used


tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element.


Inline elements:

Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.

These elements does not start with new line and take width as per requirement.

The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.


Example:

<!DOCTYPE html>  

<html>  

    <head>  

    </head>  

<body>  

    <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>  

    <span style="background-color: lightblue">this is inline element</span>  

    <p>This will take width of text only</p>  

 </body>  

</html>   

Test it Now

Output:


Block-level and Inline HTML elements

Following is the list of the some main elements used in HTML:


Start tag Content End tag Description

<h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page.

<p> This is the paragraph </p> This element is used to display a content in form of paragraph.

<div> This is div section </div> This element is used to provide a section in web page.

<br> This element is used to provide a line break. ( void element)

<hr> This element is used to provide a horizontal line. (void element)

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML Elements

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.


Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements.

Such as:


<p> Hello world!!! </p>   

Example

<!DOCTYPE html>  

<html>  

<head>  

    <title>WebPage</title>  

</head>  

<body>  

   <h1>This is my first web page</h1>  

    <h2> How it looks?</h2>  

     <p>It looks Nice!!!!!</p>  

</body>  

</html>  



Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag.



Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.


Nested HTML Elements: HTML can be nested, which means an element can contain another element.


Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two categories:


Block-level element

Inline element

Block-level element:

These are the elements, which structure main part of web page, by dividing a page into coherent blocks.

A block-level element always start with new line and takes the full width of web page, from left to right.

These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.


<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.


Note: All these elements are described in later chapters.

Example:

<!DOCTYPE html>  

<html>  

             <head>  

    </head>  

<body>  

    <div style="background-color: lightblue">This is first div</div>  

    <div style="background-color: lightgreen">This is second div</div>  

    <p style="background-color: pink">This is a block level element</p>  

</body>  

</html>  

Test it Now

Output:


Block-level and Inline HTML elements

In the above example we have used


tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element.


Inline elements:

Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.

These elements does not start with new line and take width as per requirement.

The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.


Example:

<!DOCTYPE html>  

<html>  

    <head>  

    </head>  

<body>  

    <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>  

    <span style="background-color: lightblue">this is inline element</span>  

    <p>This will take width of text only</p>  

 </body>  

</html>   

Test it Now

Output:


Block-level and Inline HTML elements

Following is the list of the some main elements used in HTML:


Start tag Content End tag Description

<h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page.

<p> This is the paragraph </p> This element is used to display a content in form of paragraph.

<div> This is div section </div> This element is used to provide a section in web page.

<br> This element is used to provide a line break. ( void element)

<hr> This element is used to provide a horizontal line. (void element)

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML Attribute

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Attribute


HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.

Each element or tag can have attributes, which defines the behaviour of that element.

Attributes should always be applied with start tag.

The Attribute should always be applied with its name and value pair.

The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.

You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

<element attribute_name="value">content</element> 


Example


 <!DOCTYPE html>  

<html>  

<head>  

</head>  

<body>  

    <h1> This is Style attribute</h1>  

   <p style="height: 50px; color: blue">It will add style property in element</p>  

    <p style="color: red">It will change the color of content</p>  

</body>  

</html>  



<p style="height: 50px; color: blue">It will add style property in element</p>  


In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue.


The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.


Example

With <h1> tag:


<h1 title="This is heading tag">Example of title attribute</h1>  

Test it Now

With <p> tag:


<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  

Test it Now

Code:


<!DOCTYPE html>  

<html>  

  <head>  

 </head>  

<body>  

      

  <h1 title="This is heading tag">Example of title attribute</h1>  

  <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  

  

</body>  

</html>  


The src Attribute

The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.


Example

<img src="whitepeacock.jpg" height="400" width="600">  


Quotes: single quotes or double quotes?

In this chapter you have seen that, we have used attribute with double quotes, but some people might use single quotes in HTML. So use of single quotes with HTML attribute, is also allowed. The following both statements are absolutely fine.


<a href="www.coderfunda.tk">A link to HTML.</a>  

<a href='www.coderfunda.tk'>A link to HTML.</a>  

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML Attribute

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Attribute


HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.

Each element or tag can have attributes, which defines the behaviour of that element.

Attributes should always be applied with start tag.

The Attribute should always be applied with its name and value pair.

The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.

You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

<element attribute_name="value">content</element> 


Example


 <!DOCTYPE html>  

<html>  

<head>  

</head>  

<body>  

    <h1> This is Style attribute</h1>  

   <p style="height: 50px; color: blue">It will add style property in element</p>  

    <p style="color: red">It will change the color of content</p>  

</body>  

</html>  



<p style="height: 50px; color: blue">It will add style property in element</p>  


In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue.


The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.


Example

With <h1> tag:


<h1 title="This is heading tag">Example of title attribute</h1>  

Test it Now

With <p> tag:


<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  

Test it Now

Code:


<!DOCTYPE html>  

<html>  

  <head>  

 </head>  

<body>  

      

  <h1 title="This is heading tag">Example of title attribute</h1>  

  <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  

  

</body>  

</html>  


The src Attribute

The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.


Example

<img src="whitepeacock.jpg" height="400" width="600">  


Quotes: single quotes or double quotes?

In this chapter you have seen that, we have used attribute with double quotes, but some people might use single quotes in HTML. So use of single quotes with HTML attribute, is also allowed. The following both statements are absolutely fine.


<a href="www.coderfunda.tk">A link to HTML.</a>  

<a href='www.coderfunda.tk'>A link to HTML.</a>  

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML Tags

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.


When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.


An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.



All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>


HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>


<h2> Heading Tag </h2>

<b> Bold Tag </b>


<i> Italic Tag </i>


<u> Underline Tag</u>



Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.


<br> Tag: br stands for break line, it breaks the line of the code.


<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.


HTML Meta Tags

DOCTYPE, title, link, meta and style


HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>


HTML Link Tags

<a> and <base>


HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>


HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>


HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption


HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend


HTML Scripting Tags

script and noscript


Note: We will see examples using these tags in later charters.

HTML Tags List

Following is the complete list of HTML tags with the description which are arranged alphabetically.


Note: Here HTML Tags Listrepresents newly added Elements in HTML5.

HTML Tags by Alphabets

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Tag name Description

<!-- --> This tag is used to apply comment in an HTML document.

<!DOCTYPE> This tag is used to specify the version of HTML

A

<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article>HTML Tags List It defines the self-contained content.

<aside>HTML Tags List It defines content aside from main content. Mainly represented as sidebar.

<audio>HTML Tags List It is used to embed sound content in HTML document.

B

<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the document.

<basefont> This tag is used to set default font, size and color for all elements of document. (Not supported in HTML5)

<bdi>HTML Tags List This tag is used to provide isolation for that part of text which may be formatted in different directions from its surrounding text.

<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its surrounding content. (Not supported in HTML5)

<blockquote> It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

C

<canvas>HTML Tags List It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML document.

<col> It defines a column within a table which represent common properties of columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

D

<data>HTML Tags List It is used to link the content with the machine-readable translation.

<datalist>HTML Tags List It is used to provide a predefined list for input option.

<dd> It is used to provide definition/description of a term in description list.

<del> It defines a text which has been deleted from the document.

<details>HTML Tags List It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a sentence/phrase.

<dialog>HTML Tags List It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

E

<em> It is used to emphasis the content applied within this element.

<embed>HTML Tags List It is used as embedded container for external file/application/media, etc.

F

<fieldset> It is used to group related elements/labels within a web form.

<figcaption>HTML Tags List It is used to add a caption or explanation for the <figure> element.

<figure>HTML Tags List It is used to define the self-contained content, and s mostly refer as single unit.

<font> It defines the font, size, color, and face for the content. (Not supported in HTML5)

<footer>HTML Tags List It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another HTML file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

H

<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.

<head> It defines the head section of an HTML document.

<header>HTML Tags List It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

I

<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.

<isindex> It is used to display search string for current document. (Not supported in HTML5)

K

<kbd> It is used to define keyboard input.

L

<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external resource.

M

<main>HTML Tags List It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark>HTML Tags List It represents a highlighted text.

<marquee> It is used to insert the scrolling text or an image either horizontally or vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter>HTML Tags List It defines scalar measurement with known range or fractional value.

N

<nav>HTML Tags List It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not support the <frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in browser.

O

<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output>HTML Tags List It is used as container element which can show result of a calculation.

P

<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture>HTML Tags List It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress>HTML Tags List It defines the progress of a task within HTML document.

Q

<q> It defines short inline quotation.

R

<rp>HTML Tags List It defines an alternative content if browser does not supports ruby annotations.

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S

<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section>HTML Tags List It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base font size.

<source>>HTML Tags List It defines multiple media recourses for different media element such as <picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.

<summary>HTML Tags List It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T

<table> It is used to present data in tabular form or to create a table within HTML document.

<tbody> It represents the body content of an HTML table and used along with <thead> and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at time of page load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback, and review, etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot> tags.

<time>HTML Tags List It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U

<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

V

<var> It defines variable name used in mathematical or programming context.

<video>HTML Tags List It is used to embed a video content with an HTML document

W

<wbr>HTML Tags List It defines a position within text where break line is possible.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML Tags

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.


When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.


An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.



All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>


HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>


<h2> Heading Tag </h2>

<b> Bold Tag </b>


<i> Italic Tag </i>


<u> Underline Tag</u>



Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.


<br> Tag: br stands for break line, it breaks the line of the code.


<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.


HTML Meta Tags

DOCTYPE, title, link, meta and style


HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>


HTML Link Tags

<a> and <base>


HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>


HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>


HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption


HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend


HTML Scripting Tags

script and noscript


Note: We will see examples using these tags in later charters.

HTML Tags List

Following is the complete list of HTML tags with the description which are arranged alphabetically.


Note: Here HTML Tags Listrepresents newly added Elements in HTML5.

HTML Tags by Alphabets

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Tag name Description

<!-- --> This tag is used to apply comment in an HTML document.

<!DOCTYPE> This tag is used to specify the version of HTML

A

<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article>HTML Tags List It defines the self-contained content.

<aside>HTML Tags List It defines content aside from main content. Mainly represented as sidebar.

<audio>HTML Tags List It is used to embed sound content in HTML document.

B

<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the document.

<basefont> This tag is used to set default font, size and color for all elements of document. (Not supported in HTML5)

<bdi>HTML Tags List This tag is used to provide isolation for that part of text which may be formatted in different directions from its surrounding text.

<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its surrounding content. (Not supported in HTML5)

<blockquote> It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

C

<canvas>HTML Tags List It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML document.

<col> It defines a column within a table which represent common properties of columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

D

<data>HTML Tags List It is used to link the content with the machine-readable translation.

<datalist>HTML Tags List It is used to provide a predefined list for input option.

<dd> It is used to provide definition/description of a term in description list.

<del> It defines a text which has been deleted from the document.

<details>HTML Tags List It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a sentence/phrase.

<dialog>HTML Tags List It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

E

<em> It is used to emphasis the content applied within this element.

<embed>HTML Tags List It is used as embedded container for external file/application/media, etc.

F

<fieldset> It is used to group related elements/labels within a web form.

<figcaption>HTML Tags List It is used to add a caption or explanation for the <figure> element.

<figure>HTML Tags List It is used to define the self-contained content, and s mostly refer as single unit.

<font> It defines the font, size, color, and face for the content. (Not supported in HTML5)

<footer>HTML Tags List It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another HTML file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

H

<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.

<head> It defines the head section of an HTML document.

<header>HTML Tags List It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

I

<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.

<isindex> It is used to display search string for current document. (Not supported in HTML5)

K

<kbd> It is used to define keyboard input.

L

<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external resource.

M

<main>HTML Tags List It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark>HTML Tags List It represents a highlighted text.

<marquee> It is used to insert the scrolling text or an image either horizontally or vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter>HTML Tags List It defines scalar measurement with known range or fractional value.

N

<nav>HTML Tags List It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not support the <frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in browser.

O

<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output>HTML Tags List It is used as container element which can show result of a calculation.

P

<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture>HTML Tags List It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress>HTML Tags List It defines the progress of a task within HTML document.

Q

<q> It defines short inline quotation.

R

<rp>HTML Tags List It defines an alternative content if browser does not supports ruby annotations.

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S

<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section>HTML Tags List It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base font size.

<source>>HTML Tags List It defines multiple media recourses for different media element such as <picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.

<summary>HTML Tags List It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T

<table> It is used to present data in tabular form or to create a table within HTML document.

<tbody> It represents the body content of an HTML table and used along with <thead> and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at time of page load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback, and review, etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot> tags.

<time>HTML Tags List It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U

<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

V

<var> It defines variable name used in mathematical or programming context.

<video>HTML Tags List It is used to embed a video content with an HTML document

W

<wbr>HTML Tags List It defines a position within text where break line is possible.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Building blocks of HTML

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

 Building blocks of HTML


An HTML document consist of its basic building blocks which are:


Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.

Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax

<tag name  attribute_name= " attr_value"> content </ tag name>   

Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.


Example:

<!DOCTYPE html>  

<html>  

  <head>  

    <title>The basic building blocks of HTML</title>  

 </head>  

  <body>  

       <h2>The building blocks</h2>  

       <p>This is a paragraph tag</p>  

       <p style="color: red">The style is attribute of paragraph tag</p>  

       <span>The element contains tag, attribute and content</span>  

  </body>  

</html>     

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Building blocks of HTML

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

 Building blocks of HTML


An HTML document consist of its basic building blocks which are:


Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.

Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax

<tag name  attribute_name= " attr_value"> content </ tag name>   

Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.


Example:

<!DOCTYPE html>  

<html>  

  <head>  

    <title>The basic building blocks of HTML</title>  

 </head>  

  <body>  

       <h2>The building blocks</h2>  

       <p>This is a paragraph tag</p>  

       <p style="color: red">The style is attribute of paragraph tag</p>  

       <span>The element contains tag, attribute and content</span>  

  </body>  

</html>     

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML text Editors

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

 HTML text Editors


An HTML file is a text file, so to create an HTML file we can use any text editors.

Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.

There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).

After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc.

In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.



B. HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write an efficient and fast code. So to use Sublime Text editors, first it needs to download and install from internet. You can easily download it from this https://www.sublimetext.com/download link and can install in your PC. When installation of Sublime text editor done then you can follow the simple steps to use it:


Step 1: Open Sublime Text editor(Windows 10):


To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a new page press CTRL+N.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

HTML text Editors

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

 HTML text Editors


An HTML file is a text file, so to create an HTML file we can use any text editors.

Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.

There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).

After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc.

In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.



B. HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write an efficient and fast code. So to use Sublime Text editors, first it needs to download and install from internet. You can easily download it from this https://www.sublimetext.com/download link and can install in your PC. When installation of Sublime text editor done then you can follow the simple steps to use it:


Step 1: Open Sublime Text editor(Windows 10):


To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a new page press CTRL+N.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

What is HTML

 Programing Coderfunda     October 17, 2020     HTML5     No comments   

 What is HTML


HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.


Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.


Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

What is HTML

 Programing Coderfunda     October 17, 2020     HTML5     No comments   

 What is HTML


HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.


Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.


Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Index of HTML

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

What is HTML

HTML Text Editors

HTML Building Blocks

HTML tags

HTML Attributes

HTML Elements

HTML Formatting

HTML Heading

HTML Paragraph

HTML Phrase Tags

HTML Anchor

HTML Image

HTML Table

HTML Lists

HTML Ordered List

HTML Unordered List

HTML Description List

HTML Form

HTML Form Input

HTML Form Attribute

HTML with CSS

HTML Classes

HTML Id

HTML Iframes

HTML JavaScript

HTML Comments

HTML File Path

HTML Head

HTML Layout

HTML Layout Techniques

HTML Responsive

HTML Computercode

HTML Entities

HTML Symbols

HTML Charset

HTML URL Encode

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Index of HTML

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

What is HTML

HTML Text Editors

HTML Building Blocks

HTML tags

HTML Attributes

HTML Elements

HTML Formatting

HTML Heading

HTML Paragraph

HTML Phrase Tags

HTML Anchor

HTML Image

HTML Table

HTML Lists

HTML Ordered List

HTML Unordered List

HTML Description List

HTML Form

HTML Form Input

HTML Form Attribute

HTML with CSS

HTML Classes

HTML Id

HTML Iframes

HTML JavaScript

HTML Comments

HTML File Path

HTML Head

HTML Layout

HTML Layout Techniques

HTML Responsive

HTML Computercode

HTML Entities

HTML Symbols

HTML Charset

HTML URL Encode

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Older Posts Home

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda