HTML Color

Colors can be applied to a Webpage using style attribute with color name as hexadecimal value of the color.

Foreground
In this we can apply color to the text.
This can be done using style=”color:{color}”, where {color} is the color name.

Example:

<html>
<head>
<title> webpage using color </title></head>
<body>
<h1 style="color:red">This is an example of colored text</h1>
</body>
</html>

Background
In this we can apply Background color to the text.
This can be done using style=”background-color:{color}”, where {color} is the color name.

Example:

<html>
<head>
<title> webpage using color </title></head>
<body>
<h1 style="background-color:red">This is an example of Background text</h1>
</body>
</html>

Border Color
To add a color border surrounding text.
This can be done using style=”border:{width} {color} {style}”, where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border.

Example:

<html>
<head>
<title> webpage using color </title></head>
<body>
<h1 style="border:1px red solid;">This is an example of Border color text</h1>
</body>
</html>

Common example:

<html>
<head>
<title> webpage using color </title></head>
<body>
<h1 style="color:red">This is an example of colored text</h1>
<hr/>
<h1 style="background-color:red">This is an example of Background text</h1>
<hr/>
<h1 style="border:1px red solid;">This is an example of Border color text</h1>
</body>
</html>

Output:
webpage using color

Filed under HTML Tutorials | Comments Off

What are List Tags?

Ordered list tag
List items are displayed using bullets.

Unordered list tag
List items are displayed using numbers.

Example:

<html>
<head>
<title>	my first web page </title></head>
<body>
<ol>
<h1>list of HTML tags</h1>
<li> Header tag</li>
<li>bold tag</li>
<li> Italics tag</li>
<li>underline tag</li>
<!-- this is an example of ordered list tag--></ol>
<hr />
<ul>
<h1>list of HTML tags</h1>
<li>Header tag</li>
<li>bold tag</li>
<li>Italic tag</li>
<li>underline tag</li>
<!-- this is an example of unordered list tag --></ul>
</body>
</html>

Output:
HTML code using ordered and unordered tags

Definition List
Definition list is a series of term and definition pair.

Example:

<html>
<head>
<title>html code using list tag</title>
</head>
<body>
<dl>
<dt><strong> EMPTY HTML ELEMENTS</strong>
<dd>HTML elements with no content are called as empty elements.<br>
Empty elements doesnot have a closing tag.<br>
Example
Break line tag doesnot have a closing tag.
</dl>
</body>
</html>

Using image as bullets:
Example:

<html>
<head>
<title> my HTML webpage</title></head>
<body>
<ul style="list-style-image:url(https://codingmanuals.com/wp-content/uploads/2010/08/pi.gif);">
<li>Image code</li>
<li>Frame code</li>
<li>Form code</li>
</ul>
</body>
</html>

Output:
image used as bullets

Example showing different types of bullets:

disc bullet:

Example:

<html>
<head>
<title> my HTML webpage</title></head>
<body>
<ul style="list-style-type:circle;">
<li>Image code</li>
<li>Frame code</li>
<li>Form code</li>
</ul>
</body>
</html>

Output:
o Image code
o Frame code
o Form code

lower roman bullet:

Example:

<html>
<head>
<title> my HTML webpage</title></head>
<body>
<ul style="list-style-type:lower-roman;">
<li>Image code</li>
<li>Frame code</li>
<li>Form code</li>
</ul>
</body>
</html>

Output:
i Image code
ii Frame code
iii Form code

Using the above code we can use different types of bullets. we just need to replace wanted bullet style as follows:
<ul style=”list-style-type:required bullet style”>
Few of the bullet styles are disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,
lower-greek,lower-alpha,lower-latin,upper-aplha,upper-latin,hebrew,armenian,
cjk-ideographic,hiragana-iroha which are supported by google chrome.
decimal-leading-zero,lower-greek,lower-latin,hebrew,armenian,
cjk-ideographic are not supported by internet explorer.

Filed under HTML Tutorials | Comments Off

Formatting Tags

Formatting Text:
Text can be formatted using different styles, size, and color etc.

Text style:

Bold tag : it is used to display the text in bold letters.

Example:

<html>
<head>
<title>	my first web page </title></head>
<body>
<b>html is hyper text markup language</b>
</body>
</html>

Output: hyper text markup language

Italic tag : it is used to display the text in italic letters.

Example:

<html>
<head>
<title>	my first web page </title></head>
<body>
<b><i>html is hyper text markup language</i></b>
</body>
</html>

Output: hyper text markup language

Underline tag : it is used to underline the text.

Example:

<html>
<head>
<title>	my first web page </title></head>
<body>
<u>html is hyper text markup language</u>
</body>
</html>

Output: hyper text markup language

Nested tags:

Example:

<html>
<head>
<title>	my first web page </title></head>
<body>
<b><i>html is hyper text markup language</i></b>
</body>
</html>

in the above example we have a line of code

html is hyper text markup languagein this we have nested italic tag with bold tag, such type of grouping is known as nested tags.care should be taken that tags should not overlap each other i.e. the inner tag should be closed before outer tag is closed.

<tt></tt>

Sometimes we need a font with the same width for all the alphabet, to instruct the browser to use a fixed width font with a text we use <tt></tt>.e.g.:width of alphabet w is more than alphabet i using <tt></tt> we can have the same width of i as equal to that of w.

<s>

This tag is used to strike a given line through the text.

output:this tag is used to strike a given line through the text.

<big>

This tag is used to display the text in large font.

output: hyper text markup language.

This tag is used to display the text in small font.

output: hyper text markup language.

This tag is used to subscript the text

Example:

<html>
<head>
<title>chemical lab </title></head>
<body>
chemical formula for water is<br> H<sub>2</sub>O
</p>
</body>
</html>

Output: chemical formula for water
H₂O.

This tag is used to superscript the text.

Example:

<html>
<head>
<title>birthday reminder </title></head>
<body>
today is 30<sup>th</sup> of april , its neha’s birthday.
</body>
</html>

Output:

today is 30^thapril , its neha’s birthday.

a sample code using all formatting tags.


<html>
<head>
<title>sample</title></head>
<body>
<b>HTML is Hyper Text Markup Language</b><br><
!-- this is an example of bold tag-->
<hr/>
<b><i>HTML is Hyper Text Markup Language</i></b><br><
!-- this is an example of italic tag-->
<hr/>
<u>HTML is Hyper Text Markup Language</u><br><
!-- this is an example of underline tag-->
<hr/>
<p>Chemical Formula for Water is H<sub>2</sub>O<br><
!-- this is an example of subscript tag -->
<hr/>
Today is 30<sup>th</sup> of April , its Neha’s Birthday.<br>
<hr/>
This is an example of <s> Strike tag </s><br><!-- this is an example of strike tag-->
<hr/>
this is an example of <small><b>small tag</b></small><br><
!-- this is an example of small tag-->
<hr/>
this is an example of <big><b> big tag</b> </big><br><
!-- this is an example of big tag-->
<hr/>
</body>
</html>

Output

sample code using formatting tags

Filed under HTML Tutorials | 1 Comment

Marquee Tag

Marquee <MARQUEE>:This tag is used to display text in a scrolling way on Webpage. You must have seen many sites using this moving text, it does grab some attention of the user.
The attributes of this tag are Direction, Behavior and Loop.
1) Direction: It Specifies whether the Text scrolls from right to left or left to right.
2) Behavior: Behavior has 3 values scroll, alternate and slide. Scroll causes moving of text from left to right or vice versa. Alternate causes text to bounce back and forth between the margins
Marquee slides through the webpage because of slide value. The default value is scroll.
3) Loop: it Tells the number of times marquee should scroll.

Example:
Below are few examples of marquee tag just copy in editor and save as .html to view the effects

Example : Example using Behavior : Alternate

<html>
<head>
<title>	My web page using marquee </title></head>
<body>
<font size="6"
face="Times New Roman"
color=blue>
<marquee width=100%
behavior=alternate
bgcolor=pink >
This is an example of a marquee using alternate as behavior...
</marquee></font>
</body>
</html>

Example using Behavior :Slide

<html>
<head>
<title>	My web page using marquee </title></head>
<body>
<font size="5"
face="courier"
color=pink>
<marquee width=100%
behavior=slide
bgcolor=blue >
This is an example of a marquee using slide as behavior...
</marquee></font>
</body>
</html>

Example using Behavior :scroll

<html>
<head>
<title>	My web page using marquee </title></head>
<body>
<font size="5"
face="courier"
color=pink>
<marquee width=100%
behavior=scroll
bgcolor=blue
loop=3>
This is an example of a marquee using scroll as behavior...
</marquee></font>
</body>
</html>

The difference between slide, scroll and alternate is , in scroll the text continuously scrolls from one end to another in the same direction but in slide text starts scrolling from one end and stops at other end and in alternate scrolls back and forth.

Example using Direction:

<html>
<head>
<title>	My web page using marquee </title></head>
<body>
<font size="5"
face="courier"
color=white>
<marquee width=100%
behavior=scroll
direction=right
bgcolor=red >
This is an example of a marquee using direction from left to right...
</marquee></font>
</body>
</html>

Example:To scroll the text in upwards direction

<html>
<head>
<title> marquee</title></head>
<body>
<marquee  behavior="scroll" direction="up">
This is an example of marquee scrolling upwards</marquee>
</body>
</html>

Example:To scroll the text in downwards direction

<html>
<head>
<title> marquee</title></head>
<body>
<marquee  behavior="scroll" direction="down">
This is an example of marquee scrolling downwards</marquee>
</body>
</html>

Example: To scroll text in different speeds.

<html>
<head>
<title> marquee</title></head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="1">scroll text in slow speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="8">scroll text in medium speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="18">scroll text in fast  speed</marquee>
</body>
</html>

Example:To Scroll images

<html>
<head>
<title> marquee</title></head>
<body>
<marquee behavior="scroll" direction="left" scrollamount = "3" >
<img src="D:\My Documents\learn3.gif" alt="smile" /></marquee>
</body>
</html>

in the above code write the location of the image
i.e <img src=”loaction of your image”>

Example:To scroll image and text together.

<html>
<head>
<title> marquee</title></head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="3">
<img src="D:\My Documents\learn3.gif" alt="smile" />
<p>This is marquee using scrolling text and image </p>
</marquee>
</body>
</html>

in the above code write the location of the image
i.e <img src=”loaction of your image”>

Using scroll delay
Here scroll delay is the time that a marquee should wait before the next jump.

Example:

<html>
<head>
<title> my HTML webpage</title></head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">
Your text goes here </marquee>
</body>
</html>

Filed under HTML Tutorials | Comments Off

Basic Tags of HTML

Here you can learn about the tags which are commonly used.

Paragraph : Paragraph Tag is used to begin a new paragraph i.e. it tells the browser to insert a empty line and then begin with a new line.A simple example

<html>
<head>
<title>	My first web page </title></head>
<body>
<p>HTML is Hyper Text Markup Language</p>
<p>HTML is Easy</p>
</body>
</html>

Output:

Paragraph tag program

Line Break : Line Break Tag as name indicates it is used to tell the browser that the line has ended. BR is an Example of single tags in HTML (Tags which do not have ending tags)

Horizontal Rule <hr>: Horizontal Rule Tag will give you a thin black line across the page.
It has few basic elements.
1) Size: it sets length of the horizontal rule in pixels or in % of page width.
2) Align : it aligns the horizontal rule to left, right, and center.
3) Width: It specifies the width of the horizontal rule.

Sample Program:

<html>
<head>
<title>Program</title></head>
<body>
<p>Statement<br>can<br>be<br>broken <br>using line break tag
<hr align =left  size="2" width="50%" >
<p> Web Page can be divided using horizontal rule tag
</body>
</html>

output:

Example of Horizontal rule and Line Break Tag

Heading :
There is tag for various headings in HTML known as Heading tag ranging from h1 to h6 where h1 is for most important and h6 is for least important.

Example:

<html>
<head>
<title>	Heading Example </title></head>
<body>
<h1>Heading tag </h1>
<h2>Heading tag </h2>
<h3>Heading tag </h3>
<h4>Heading tag </h4>
<h5>Heading tag </h5>
<h6>Heading tag </h6>
</body>
</html>

Output:
Heading Tag

Hyperlinks
Hyperlinks commonly used as links are used to toggle between the Web Pages.
To create a hyperlink, href attribute is used and the url is given as input to the attribute.

Example:

<html>
<head>
<title>	My web page using hyperlink </title></head>
<body>
<a href="https://codingmanuals.com/html-tutorials/formatting-tags/">
 Learn Formatting </a>
</body>
</html>

HTML Images
To embed or add an image to the webpage we use tag
Example:

<html>
<head>
<title>	My web page using image</title></head>
<body>
<img scr="https://codingmanuals.com/wp-content/uploads/2010/08/wp.jpg" 
alt="inspiring quote"/>
</body>
</html>

HTML Comments
Comments gives a brief description of code which makes it easier to understand.Comments are never displayed on browser, those are only for user’s understanding.Comments are written as:
Example:

<html>
<head>
<title>	comment example</title></head>
<body>
<p>This is how a comment can be written
<!--this is an example of comment -->
</body>
</html>

Filed under HTML Tutorials | Comments Off

Creating a Webpage

For creating a webpage all you need is a Editor and Browser

Steps for creating a Webpage

1. Open a text editor E.g. Notepad.

2. Write the proper HTML code.(See basics here). For more tags click here

A simple HTML code

3. Save the HTML code in a file having extension .html
Notepad by default will add a “.txt” extension to every file it saves. To make sure it will save your file with an “.html” extension you need to change “Save as type” setting in “Save file” window to “All files” and type name.html when you put name to your file.

To save a HTML file

4. Double click on the file and it will open in the browser( Internet explorer, Firefox, Opera, Chrome or any other you have in your computer or laptop.

Filed under HTML Tutorials | Comments Off

Basic Structure of HTML

Document Type <HTML> </HTML>
Title <TITLE> </TITLE>
Header <HEAD> </HEAD>
Body <BODY> </BODY>

• HTML document begins and ends with HTML tag i.e. <HTML> </HTML>
Here <HTML> indicates the browser that it is a HTML document and </HTML> tells the browser that HTML document is completed.

• Header Tag i.e. <HEAD></HEAD>
Header Tag does not contain any text, it only contains the Title Tag in it.

• Title tag i.e. <TITLE></TITLE>
Anything written between this tag is not displayed on the screen but it is used to identify the Webpage.

• Body tag i.e.<BODY></BODY>
This is the main part of HTML document. The content which is to be displayed on screen as webpage should be written here. Body Tag contains the text as well as various tags but only the text will be displayed on Webpage.

A simple example

<html>
<head>
<title>	My First WEB PAGE </title>
<body>
HTML is Hyper Text Markup Language
</body>
</html>

Simple HTML program

Filed under HTML Tutorials | 3 Comments

What is HTML?

• HTML stands for Hyper Text Markup Language.

• HTML is used to create World Wide Web documents which are popularly known as WebPages.

• HTML is basically the code that instructs the browser how a webpage should look like.

• The World Wide Web Consortium (W3C) is the standard community which develop protocols to ensure long term growth of web. Various version of HTML is developed by World Wide Web Consortium (W3C).

• HTML document is a plain text which does not contain any image, sounds or graphics rather it contains links to those files.

• HTML uses various tags to create WebPages.

Filed under HTML Tutorials | Comments Off

HTML Color

What are List Tags?

Formatting Tags

Text style:

Marquee Tag

Basic Tags of HTML

Creating a Webpage

Basic Structure of HTML

What is HTML?

Languages Tutor

Best Hosting

Softwares For Coders

Best Hosting

Recently Added