place your ad here

HTML Basic Tag || Bcis Notes

HTML Basic Tag

HTML Basic Tag

HEADING TAGS:-
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, the browser adds one line before and one line after that heading.

CODE:-

HEADING TAGS

 

Result:-

 

ResultPARAGRAPH TAG:–

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag.

Code:-

PARAGRAPH TAG

 

Result:-

 

ResultHtml comments:-
Comment tags are used to insert comments in the HTML source code.
You can add comments to your HTML source by using the following syntax:
<!– Write your comments here –>
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.

CODE:-

 

Html comments

Note:-
Comments are not displayed by the browser, but they can help document your HTML source code. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

 

Table Tags:-
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

 

CODE:-

Table Tags

 

Result:-

Result

What does <table> HTML Tag do?
The <table> element is used in conjunction with child elements such as <tr>, <td>, <th>, and others to add tabular data to an HTML document.

Adding borders on table
If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property:

Border collapse
collapse − Borders are collapsed to make a single border. Two adjacent cells will share a border.

 

CODE:

Border collapse

 

Result:-

Result

Cellpadding and Cellspacing Attributes:-

There are two attributes called cell padding and cell spacing which you will use to adjust the white space in your table cells. The cell spacing attribute defines space between table cells, while cell padding represents the distance between cell borders and the content within a cell.
Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property.
Table Heading:
Table heading can be defined using the <th> tag. This tag will be put to replace the <td> tag, which is used to represent the actual data cell. Normally you will put your top row as table heading as shown below, otherwise, you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.
Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border-spacing for a table, use the CSS border-spacing property:

 

HTML CLASS:
The class is an attribute that specifies one or more class names for an HTML element. So, all HTML elements with the same class attribute will get the same style. Using multiple classes: HTML elements can have more than one class name, where each class name must be separated by a space.

Code:

HTML CLASS

 

Result:-

 

Result

 

HTML Id:-
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
In CSS, the id attribute is used using the # symbol followed by id.
Note: In HTML5, id attributes can be used by any HTML tag but in HTML 4.01 there are some restriction to use id attributes. It can not be used by <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> tag. In HTML4.01 id can not start with number.

Difference between id and class:
The HTML page contains multiple-element with the same class but id is unique, only a single id exists in a single page. HTML class use ‘.’ character before the name of the class while id use ‘#’ character before the name of the in CSS.
Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
HTML | Iframes
Significance of Iframe in HTML :
Iframe stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. An iframe is used to display a web page within a web page.

HTML Colors:-
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
RGB(red, green, blue)
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Code:-

HTML Colors

 

Result:-

Result

HEX Value:-
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where RR (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

Code:-

HEX Value

Result:-

Result

HSL Value:-
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
HSL(hue, saturation, lightness)

Code:-

HSL Value

Result:-

Result
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
An RGBA color value is specified with:
RGBA(red, green, blue, alpha)
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

 

CODE:-

RGBA Value

Result:-Result

 

HSLA Value:-
HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.
An HSLA color value is specified with:
HSLA(hue, saturation, lightness, alpha)
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

LA Value

Result:-

Result

Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

CODE:

Saturation

Result:-

Result

If you liked our content HTML Basic Tag, then please don’t forget to check our other content HTML Elements.

advertise here
webtrickshome