Web Development: December 2016

Friday, December 30, 2016

Multimedia - youtube video embed in HTML- Web Development

Multimedia using in HTML

Videos, audios, animations, images are called multimedia. We will see how to use multimedia in HTML web page. Sometime you will need to use in your web page to put multimedia files.

The above video is embed from youtube. Here I put for example. If you open this html file the above video will be animated.

Embed Youtube video file to your HTML Page:

<!DOCTYPE html>
<HEAD>
<TITLE>Embed Video in HTML</TITLE>
<meta charset="UTF-8">
</HEAD>
<BODY>

 <iframe src="https://www.youtube.com/v/x6cJ-GqQXSg&t=164s"
   width="560" height="315" frameborder="0" allowfullscreen></iframe>

</BODY>
</HTML>

The red color text is the code to embed video on your web page from your youtube video. In the above example I put my video link to make new operating system 16 bit video.

How to take the embed video link:

1) Open a youtube video which you want.
2) Copy the link address from browser address bar. (It will be like this : https://www.youtube.com/watch?v=x6cJ-GqQXSg&t=164s

3) Remove the word "watch?" and "=" in the link.
4) put a "/" after v. Now the link address will be like this "https://www.youtube.com/v/x6cJ-GqQXSg&t=164s"
5) Apply the link like above HTML code.

Now you can watch video like above.

Great! I believe it will be very useful to you.

Try it in your web page. Will meet again in next page. Thank you for reading!

Our some other useful websites :

To learn php - our php tutorial - http://learnandsharephp.blogspot.com/

To Post free ads - Our Free ads website - http://www.mapofmine.com and http://www.freeadsimple.com

Thursday, December 29, 2016

Class Attribute and CSS Intro - HTML - Web development

Class Attribute in HTML

Class attribute is used to define style of an element. CSS(styles) is used to declaring styles of an element.

We are using styles in 3 ways. Inline CSS, internal CSS, External CSS.

<div style="background-color:green;color:white>

in the above example i mentioned that div element's background color as green and text color as white.

Inline CSS:

Define style in a line where we put an element. In inline CSS we are not going to use Class attribute.

Example for inline CSS

<!DOCTYPE html>
<html>
<body>

<div style="background-color:green;color:white;">

<h1>Example for Inline CSS</h1>
<p>This is the example for Inline CSS. You can define styles in same

line which you put your element.</p>

</div>

</body>
</html>

Output of above inline CSS:

Internal CSS:
Internal CSS will use class attribute to define style.

Here is the example for Internal CSS

<!DOCTYPE html>
<head>
<title>Example of Internal CSS</title>
<style>
.banner{
background-color:blue;
color:white;
}
</style>
</head>
<body>

<div class="banner">

<h1>Example for Internal CSS</h1>
<p>This is the example for Internal CSS. You can define styles in style area which is in head tags.</p>

</div>

</body>
</html>

I have defined a div class as banner and in style part we initialized the styles of that banner class.

Output of Internal CSS example like:

External CSS:

Here we declared a class for element and styles in different file. We will then include that CSS file inside main HTML file.

example for external CSS

main HTML (I have given a name first.html)

<!DOCTYPE html>
<head>
<title>Example of External CSS</title>

<link rel="stylesheet" type="text/css" href="stylexample.css">

</head>
<body>

<div class="banner">

<h1>Example for External CSS</h1>
<p>This is the example for External CSS. You can define styles in another file and include in main HTML file.</p>

</div>

</body>
</html>

external CSS file (stylexample.css) Look like below:

It will include only styles of classes

.banner{
background-color:orange;
color:white;
}

(Note: Save this file in same location because in <link rel="stylesheet" type="text/css" href="stylexample.css"> this command I will not use path of the file name.)

If you run the main HTML (first.html) file the output will look like below:

Please practice the above codes in your computer to learn CSS and Class attribute.

Thank you! for Reading. Will continue HTML in next pages.

Wednesday, December 28, 2016

Block Level & Inline Elements in HTML - Web development

Block Level Elements

Block Level elements start from new line and will take full width how much available. Div, P, h1 to h6 headings, form, pre, blockquote are example of block level elements.

Here we will see in example block level elements div, pre, blockquote elements. Other elements we had seen in before pages.

Pre element is used to display in pre formatted text. There

pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;

}

this is will be pre defined property of pre elements.

Browser display the Blockquote as intended text.

Example :

<div>
<pre>
This is Preformated text

</pre>

<blockquote style="background-color:lightblue;">Pre elements are used

to display in pre formated text and blockquote used to display as

intended text. you can see here the example of both pre and blockquote

elements clearly. Intended text are like bulleted text. We are using

blockquotes for text in intended block.</blockquote>
</pre>
</div>

Output of the above code in HTML will be like below:

Inline elements

<span>, <a>, <img> elements are inline elements. These are not started with new line. It will start where we will put the code.

example:
Hi
<span style="color:blue">Span elements example here</span></pre>
Please check this

In the above example "Hi span elements example here please check this" will come in one line without new line. Please see the below output.

Thank you for reading our blog! Have a nice day friends. Will meet in next page to learn HTML more.

Monday, December 26, 2016

HTML Lists - Numbered Lists & Lists with Letters - Web Development

HTML Lists - Numbered Lists & Lists with Letters

How to make HTML numbered list in HTML webpage?

Sometime we need to list the items in webpage. So before I have explained in previous page about lists. That was unordered list. Now I am going to explain how to use the numbers instead of discs and circles. See below example for that

<ol type="1">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

If you use above code, the output will be
1)United States
2)United Kingdom
3)India

Lists with Letters example:

<ol type="A">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

If you use above code, the output will be

A)United States
B)United Kingdom
C)India

<ol type="a">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

If you use above code, the output will be

a)United States
b)United Kingdom
c)India

For roman numbers - lower case:

<ol type="i">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

i)United States
ii)United Kingdom
iii)India

For roman numbers - Upper case:

<ol type="I">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

I)United States
II)United Kingdom
III)India

Put together in one page code :

<!DOCTYPE html>

<html>

<body>

<h2>Numbered List</h2>

<ol type="1">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

<h2>List with Letters</h2>

<ol type="A">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

<h2>List with small Letters</h2>

<ol type="a">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

<h2>List with Roman Uppercase</h2>

<ol type="I">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

<h2>List with Roman Lowercase</h2>

<ol type="i">
  <li>United States</li>
  <li>United Kingdom</li>
  <li>India</li>
</ol>

</body>

</html>

Output of the above code:

Please practice in your computer for above examples. Will see in next page. Thank you have a nice day!

HTML Lists - Unordered Lists - Web Development

How to make list in HTML?

Make unordered list in HTML

Example Code:

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

</ul>

Unordered list Item Maker

You can put the value below for List items for unordered list

Values – Disc, Circle, Square, none

Example of full code:

<!DOCTYPE html>

<html>

<body>

<h2>List with type of Bullets</h2>

<li>United States</li>

<li>Canada</li>

<li>Columbia</li>

</ul>

<li>India</li>

<li>China</li>

<li>Singapore</li>

</ul>

<li>South Africa</li>

<li>Kenya</li>

<li>Zimbabwe</li>

</ul>

<li>Austrlia</li>

<li>New Zeland</li>

</ul>

</body>

</html>

Output of the above Code will be :

List will continue... Thanks for Reading

Sunday, December 25, 2016

Table in HTML - Web Development

Table in HTML

A html table defined with <table> tag.

Every rows started with <tr> End with </tr>

Header is mentioned by <th> and data cell of table defines with <td>

Example :

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
  <td>Manikandan</td>
    <td>Thiyagarajan</td>
    <td>39</td>
  </tr>
  <tr>
    <td>Ambrose</td>
    <td>Jackson</td>
    <td>60</td>
  </tr>
</table>

CSS for border of table :

table, th, td {
border: 1px solid black;}

Full HTML Example for Table:

<!DOCTYPE html>
<HEAD>
<TITLE>Web Development Example</TITLE>
<meta charset="UTF-8">
</HEAD>

<style>

table, th, td {
border: 1px solid black;}

</style>

<BODY>

<table width="100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Manikandan</td>
    <td>Thiyagarajan</td>
    <td>39</td>
  </tr>
  <tr>
    <td>Ambrose</td>
    <td>Jackson</td>
    <td>60</td>
  </tr>
</table>

</BODY>
</html>

Result of the above example: