Home » Posts filed under Basic HTML/Javascript Course
HTML 5 Media Tags For Embedding Videos and Audio: Basic HTML
June 04, 2014 Ariyal
Some browser that support the video element of html5. They are IE(internet explorer) 9+, Chrome, Firefox, Safari and Opera but internet explore 8 and its earlier version do not support it.
Here is a syntax or example of HTML 5 Video Embedding tag:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Video implementation in web document</title>
</head>
<body>
<h1>This is an example of HTML 5 Video Embedding Tag</h1>
<video height="410" width="530">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
This is not supported.
</video>
</body>
</HTML>
In above example, there you can see the two type of video format: one is .mp4 and another is .ogg. The both shouldnot be written when you want to show your video but one among these two is compulsory. The HTML 5 video embedding tag <video> only support either .mp4 format video or .ogg format video.
But it is very important to include height and width of the video. The included width and height will occur the area when the page is opened. After including video you should also include some text between <video> and </video> tag that will appear if your video does not appear on the webpage.
- The .mp4 video format is supported by internet explorer but IE does not support ogg file.
- Chrome supports both video types .mp4 and .ogg.
- Safari only supports .mp4 file.
- And Opera suports only .ogg file.
Except the .mp4 and .ogg video file, the html 5 video embedding tag also supports WebM file but it is less used in the web page.
You can use DOM (Document Object Model) to make your video more user effective and friendly.
Here is an example of Audio Embedding
<!DOCTYPE HTML>
<HTML>
<head>
<title>Video implementation in web document</title>
</head>
<h1>This is an example of HTML 5 Audio Embedding Tag</h1>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audeo/ogg">
This is not supported.
</audio>
</body>
</HTML>
Unlike the video tag, in audio you should not put the attribute height and width of audio tag. You just should apply the <audio></audio> and between them just place the source tag and the type of audio either ogg or mpeg or mp3 file.
- Internet explorer only supports the mp3 file
- Chrome support all of the file .mp3, .ogg and also the wav which is less used.
- Safari support the two .mp3 and wav file.
- And opera supports .wav and .ogg only.
For better style of your audio looks, you can use the document object model.
Thank you very much for supporting us. I hope this tutorial help you to put video or audio file into your web page directly without any obstacles and hardness. For more information, comment us.
Canvas and SVG graphic Elements Of HTML 5: Basic HTML
May 31, 2014 Ariyal
<canvas> Tag:
<canvas> tag is often used to draw graphics on any web page. Canvas is a new html 5 elements. You can make color gradient, rectangle, triangle, circle and many vector drawings from the HTML 5. These elements are only supported by the new web browser like IE 9+, opera, Chrome etc. Indeed, canvas defines rectangular area on a web document. Lets see the syntax of use of <canvas>.<canvas class="canvasimage" width="250" height="250"></canvas>
You should always define width and height attributes of canvas element. If you don't use these two attributes, there can not draw any images. Multiple canvas tags can be used in a single web document. Most of the attributes which can apply in a text that all can apply in the canvas element.
Example of Canvas element.
<!DOCTYPE html>
<html>
<body>
<canvas style="border:3px dots #ffffff;" class="canvasid" width="310" height="310">
This text is shown because your browser doesnot support.
</canvas>
</body>
</html>
You also can use the javascript on canvas element. Using javascript, you can give many effects to canvas in web document.
<!DOCTYPE html>
<html>
<body>
<canvas class="canvaselement" width="350" height="155">
I think your browser doesnot support this html 5 tag.
</canvas>
<script type="text/javascript">
var can =document.getElementById("canvaselement");
var ctx=can.getContext("2d");
ctx.fillRect(2,3,125,60);
ctx.fillStyle="#00feef";
</script>
</body>
</html>
Canvas has two coordinates because it is two dimensional grid. We can use these methods to draw straight lines on canvas moveTo(a,b) which defines beginning point of the line and lineTo(a,b) which creates last or end point of the line.
We also write text in the canvas and give the gradients on canvas. Image can be also drawn by using canvas.
I have not written here more examples of canvas elements because you can see any examples from http://www.w3schools.com/html/html5_canvas.asp
<SVG> Tag
Now lets talke about SVG briefly. It stands for scalable vector graphics. Scalable Vector Graphics creates vector shapes for the web document. The main advantage of SVG is that it creates vectors shapes.By the way there cannot see major differences between SVG and Canvas but there is some difference. Canvas is used to draw 2D graphics and in SVG, the drawn vector shapes are defined as objects.
Form Attributes of HTML 5
May 29, 2014 Ariyal
- autocomplete
- novalidate
And input attributes are:
autocomplete, autofocus, formaction, form, formmethod, formenctype, formnovalidate, formtarget, height, width, list, min, max, multiple, pattern, required, placeholder step etc.]
<form autocomplete="on" action="radhika.html" name="form">
Name:<input type="text" name="firstname"><br>
Surname: <input type="text" name="lastname"><br>
E-mail Address: <input type="email" autocomplete="off" name="email_address"><br>
<input type="submit" name="submit">
</form>
novalid attribute:- It is used not to valid the input data. The syntax of novalidate attribute is given below:
<form name="form" action="rakesh.html" novalidate>
Username: <input type="text" name="name"/>
</form>
- autofocus attribute:- It is also a boolean attribute. It is used to focus automatically when the page is loaded. The given syntax shows you how you can use this attribute.
Better Name: <input type="text" name="better" autofocus>
- Form attrbute:- form attribute is used ot define one or more than one forms in the form tag.
Email: <input type="email" name="email" form="second_form">
- formaction:- formaction attribute overrides the action attribute of form when the form is submitted.
- formmethod attribute:- Like the formaction, it does same but it overrides the method of form. Its syntax is same like the formaction and it is used also same place.
- formtarget:- Likewise the formmethod and formaction, it overrisdes the target of form.
- height an width:- This attribute is used to define the height and width of the type input.
- list:- List attrbute is used to list out the elements of type input.
- min and max:- min attribute is used to define minimum value of type input and max is used to define max value.
- multiple:- This is used to define those input who has multiple value like email , image.
- pattern:- pattern is used for validation of type of input.
- placeholder:- placeholder is used for hint.
- required:- It is used to make the field necessary to fill out.
How to Stop the Visitor's Flow in Another Sites
May 28, 2014 Ariyal
You can see in the given quick and valuable points for the better of the flow of visitors on your sites and blogs. This points is only for getting more visitors on your sites and blogs.
- First of all you should avoid all the distracting features like complex and more animated sliders and scrolling side bars and sliders. All this can irritate yor viewers.
- Use short and sweet content and make all the content in paragraphwise. Just use bullets and numbers for the better understanding of your visitors.
- Make anchor text to the valuable sites which can give more information.
- You should get to the point quickly and manage your content.
- Video embedding can be better because video reveals everything in a few times. It can shorten your complex information of the text information.
HTML 5 Semantic Elements Meaning
May 28, 2014 Ariyal
So <table>, <form> and <img> can be taken as semantic because which clearly define its meaning why they are using and where they should be use. HTML 5 semantics are only supported by the new version of browsers like explorer 9+, safari, chrome etc. Actually html5 is induced to reduce the javascript from the document but it also reduces the unnecessary div.
Most of the existing sites still use <div> tag to create menu, footer, header but html 5 classes them as different tags. Here is the offers of html 5 new semantic elements that define a new different part of web document.
<header>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<summary>,<details>,<time>,<mark> etc.
The given semantic elements clearly define its own meanings. header is for head section, nav is for navbar or menu, section is for particular section of document and then article is for the article of the page. Likewise all other elements have their different meaning.
In the above figure, you can see how we arrange html 5 semantic elements in designing. If it is not arrange in its real order, it can not function its real works. So think how it should be used and then apply it to your html document code.
JavaScript Language In HTML: Basic HTML
May 27, 2014 Ariyal
Javascript is client side scripting language which is one of the most important web designing langauge among the html, css and javascript. <script> tag is used to create a script in the html document. Basically javascript is used to manipulate the images, to validate the form and to change the content dynamically. JavaScript only work with HTML and CSS. The given below example can be the best for the basic of javascript.
Actually javascript is very easy language to learn. Nowadays, most of the designers use this language to develop webpages.
Javascript is very powerful language which can change HTML elements and it also can change the attributes of html and css elements. We will give all the examples that are needed for learning all the the html elements change, attributes change, css elements change.
<html>
<body>
<script>
var a="Excuse me";
document.write("Hello Dude!")
alert("Hi buddy");
document.write(a);
</script>
</body>
</html>
If we use the <noscript> tag, When there is javascript disabled by the browser, the message written in the <noscript> tag will be shown by the browser. Lets see the given example how nosript tag is used and it works.
<html>
<body>
<script>
document.write("Excuse Me Buddy")
</script>
<noscript>Sorry, some problems occurred here.</noscript>
<p>Javascript doesnot work if the script is disabled in the browser.</p>
</body>
</html>
Indeed you should know that <script> and <noscript> both are reverse of each other. But <script> is mostly used by developer rather than <noscript>.
If you have any questions, please comment us.
Thank you.
What is HTML 5: Basic HTML
May 25, 2014 Ariyal
w3c and WHATWG both decided to create a new version of HTML, then they create HTML 5. In previous stage there were the version HTML, HTML 4, XHTML. After that HTML 5 was induced to replace the all of them oldies. Indeed. HTML 5 is very useful to the tablet, pc, smartphone etc. There are various advantages of HTML 5. Specially, it reduces the external plugins. It is also used for error handling. HTML 5 developement process is visible for public. New special features or characteristics of HTML 5 are:
- <canvas> tag which is used for 2d drawing.
- It is also supportable in local storage device.
- There are various specific tags or elements. Such as <article>, <footer>, <header> etc which are completely new in HTML.
- Media elements are also very significant features of HTML 5
- HTML 5 is started with the writing <!DOCTYPE html>.
Yeh it is obvious that when a thing has advantages, it also has its various disadvantages. Thus there are also some disadvantages of HTML 5 ie it doesnot support in old browser. In short, HTML 5 is nothing, its same as the previous version of HTML but it has included and excluded some functions and features on it. So it is very powerfull language in web world.
Colors, Colorname and Color values In HTML: Basic HTML
May 25, 2014 Ariyal
Some color examples:
#000000 -> Black
#FF0000 -> Red
#0000FF -> Blue
#FFFF00 -> Yellow
#FF00FF -> Pink
#C0C0C0 -> Gray
#FFFFFF -> White
You can see some examples of color code in the above but you should also know that we can make 16 million differet colors using red, blue and green combination from the values 0 to 255. To say that most computers are only capable of displaying almost sixteen thousand three hundred and 4 colors.
You can also give the color by using different names of different colors. Some examples of color names are given below:-
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Beige #F5F5DC
Black #000000
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
Chocolate #D2691E
Coral #FF7F50
Cyan #00FFFF
Green #008000
Gray #808080
Indigo #4B0082
div and span HTML Group Elements: Basic HTML
May 24, 2014 Ariyal
HTML Block Tags/ Elements:- Block Elements are those that occupied all the line that it is staying now. It means it normally starts or ends with new line when it is being displayed in any browser. Some examples are: <p>, <h1>, <table> <div> etc.
HTML Inline Tags/ Elements:- Inline tags displayed in the same line even starting a new tag. <img>, <a>, <span> etc tags are inline tags which don't break the line.
<div> Tag
So as HTML block element or tag, <div> is the block tag that is used to define section in html documents which groups all the elements of HTML. Simply it has no meaning but being a block tag it breaks a line before and after it. When it is being used with css, it has lots of attributes. Actually div tag replaces the old table tag for defining a document. Indeed table is used to show the data in tabular format.<span> Tag
Span tag is same as the div tag which is used to create a section in html page but unlike the div tag, it is inline tag. <span> tag is mostly used for making text section.Basic Singular Tags: Basic HTML
May 17, 2014 Ariyal
- Line Break Tag (<br/>): This tag is only used for breaking the line. It breaks the line, then the cursor goes to next line.
- Horizontal Line Tag (<hr/>): Horizontal Line Tag draws line in the page horizontally. This is also very important tag. Using this tag, you can make your site look beautiful. Some of the attributes of it are width, size, color etc.
- Image Tag (<img/>): img tag is one of the most important tag. It is used to put the image in the web page. Almost in all of the web page, you can see this tag because without image your site does not look friendly, so most of the designers use this tag. There are some attributes of img tag, they are: src, width, height, border, alt, title, align, etc.
Text Formatting Tags: Basic HTML
May 10, 2014 Ariyal
Text formatting tags:-
Text formatting tags are those tags which are used to format the text content of webpages. It means text formatting tags are for formatting the text content of the web page. There are various text formatting tags. Some of the tags are we will discuss bellow:-Preformatted tags:-
Preformatted tag is that tag which preformats the content written between the tag. When we write the content in between the tag, we can see the content as exactly what have written.
Syntax:
<pre> ........ </pre>
Bold tags:-
Bold tag is used to make specific text bold. When we want to highlight some text, we write bold tag.
There is two type of bold.
Syntax:
<b>......</b> or <strong>.......</strong>
Example:- <b> This is a example of bold tag. </b>
Basically there is no difference between <b> tag and <strong> but in the view of SEO <strong> tag is more preferrable than <b>.
Italic tag:-
This tag is actually used to italic the text or content. There is two italic tags.
Syntax:
<i>...............</i> and <em>.............</em>. Indeed there is no difference between these two tags but <em> (emphasize tag is more preferable for search engine optimization).
Example:- <i> This is a example of italic tag. </i>
Underline tag:-
For underlining the content or text, we use the underline tag. The syntax of underline tag is given below:
<u>........</u>
Example:- <u> This is a example of underline. </u>
Superscript and Subscript tags:-
Superscript tag is a kind of tag that is used to write some letter and number as superscript of a letter or text and subscript tag is used to write some letter or number as subscript of text or letter.
syntax:
<sup>...........</sup> and <sub>....................</sub>
Example:- <sup> This is a example of superscript tag. x2 </sup>
Paragraph tag:-
Paragraph tag is mostly usable tag for web page designing. It is used to make paragraph in the webpage. The syntax of paragraph tag is given below:
<p>.......</p>
Example:- <sub> This is a example of subscript tag log10 X.</sub>
Strike tag:-
strike tag is used to draw the line just middle of the text.
syntax:
<strike>.......</strike>
Example:- <strike> This is a example of strike tag </strike>
Heading tag:-
There is different 6 types of heading tags. They are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Often <h1> tag is used for the title of the web page. It makes the text larger than other 5 heading tags.
syntax:
<h1>.............</h1>
<h2>.............</h2>
<h3>.............</h3>
<h4>.............</h4>
<h5>.............</h5>
<h6>.............</h6>
Example:- <h1> This is a example of heading tag.</h1>