As we know HTML ,used for displaying structure and content over web pages is easy and comprehensive , yet there is lot discuss. So here we will continue the second
section of our HTML introduction post here- which is HTML 5 the latest and improved version of HTML.Apart from the doctype declaration and meta tags usage that we discussed in the Part 1 of the HTML article, there are some more special elements and tags that you will get familiarized here. The default encoding for the HTML 5 is UTF-8. HTML 5 comes with more multimedia features.It was able to introduce the markup and also APIs(application programming interfaces) for building complex web applications. It could support SVG( Scalable Vector Graphics ) , virtual graphics and canvas.Many new tags like <video> , <audio> ,<section> , <header> ,<footer> , <nav> etc were introduced.
While former HTML model contained only block level and inline contents , HTML 5 comes with embedded, interactive, metadata, flow ,phrasing,heading and sectional content model.Embedded model is kind of things like audio , video, image, maths ,object etc.falls inside the body. Interactive model contain buttons, audio, video, image, input, object, select, textarea etc.Metadata contains link,meta,script,style,title tags and falls in the head section.Phrasing contain span, strong, label, line break,small etc. sectional contains section , article, navigation tags etc. You may learn about these in detail later .Here we will cover only some basic elements and tags.
The more modifications and features that came along was that now the input filed includes search,URL and also mail. Also date , color and number selectors are made available.Considering the case of APIs ,audios , videos ,drag and drop menus ,location,messaging web applications were also integrated.
One thing you must know about elements is that they are of two kinds semantic(add meaning to the content- table, article etc) and non semantic(doesn't add specific meaning - like div and span).Semantic elements have lot to say.Header, footer, section, article,aside, navigation are considered different parts of the web page.Tags used are <header> ,<footer> ,<section> ,<article> ,<aside> and <nav> .
Sections
There can be multiple sections in a web page.<section > element is used to create a section ,divide up contents in a web page(or article).<header> part contains information like the navigation links, introduction , main page headings, and even icon or logo and is usually at the top of the document inside body tag..<article> element separates itself from rest of the page(an alternative for <div>) and might be used to display post ,blog entries,comment or articles.While the <footer> element may contain the copyright information,sitemaps, contact info, terms of service,social media icons,or any related items generally placed at the bottom of the HTML document..<aside> element can be simply used to create sidebars to may be display notifications or to contact info or so.They are used inside or outside the article element but related.The <nav> element represent sections linking other web pages or to sections in the same page.
You get to see the proper arrangement of a HTML document from the above picture.
Media elements
Let's now dive into the media tags . The <audio> tag helps us to insert audio files into our web page . src attribute is to mention the audio file, controls is used to display the play and pause options,autoplay attribute ,is used to start audio playing without any permission.The loop attribute replays every time when finished.Syntax is as given below.
<audio controls>
<source src="filename.mp3" type="audio/mpeg" > text for not supported files </audio>
Or
<audio src="filename.mp3" controls </audio>
Video contents can be added using the <video> element . Not all browsers may support all types of video(or audio) ,hence we specify more than one types to try the other one in case first not supported.The autoplay ,and loop attributes are same as that of audio element.
<video controls>
<source src="video.mp4" type="video/mp4" > text for not supported files </video> or
<video controls autoplay loop>
<source src="video.mp4" type="video/mp4" > text for not supported files </video>
Forms and Input
The modifications in forms that came with HTML 5 forms were attributes like placeholder(provide hint of info to be entered) , required(making the field to be compulsorily entered) , autofocus(to allows user to focus on the textarea to enter by changing its border colors).The value attribute of the input element indicates the initial value for an input.
Now text area is a space where you can enter input as paragraphs(multiline).<textarea> element is used to create them. you can set its size using rows and columns attribute.Other attributes for styling ,placeholders etc are also used.
<textarea rows=5 columns=9 ></textarea>
Input type color allows user to pick color as an input. And date type allows to select a particular date. Using type="file" you can choose files from your device to input to website.readonly attribute allows a user only to read the content in an input field.The disable attribute makes the field non-clickable or non-usable.Using size attribute we can specify the number of visible input types.The autocomplete attribute is to fill automatically the input fields that can be either on or off as specified.The multiple attribute of input. allows user to enter more than one input like files.
<input type="date" name="anniversary">
<input type="color" name="favorite color">
<input type="text" name="Name" readonly >
Take a look at the example form form given below
<form> <label for="Name"> Enter your full name: </label> <input name="Name" type="text" id="Name" required placeholder="Eg.Ramesh G"> </form>
Canvas element
The <canvas> element in HTML helps us to embed graphical features .With it you can creates shapes, boxes, insert text, images etc.Attributes like height and width are also present here for adjustments.We actually need JavaScript for this purpose.So we wont be discussing much about this here.
Iframes
Iframes in HTML are used to display a web page in another web page.There are src and title attributes.You can also add styles here.You can give your title to this frame using title attribute.
<iframe src="URL for the web page" title="to know content of webpage " ></iframe>
Within the iframe element if you provide URL for you tube that can allow you to play youtube videos.The object element allows to add embed plugins(pdf readers,flash player etc.)This is possible using <object> and <embed> elements.
SVG(Scalable vector Graphics)
On the other hand SVG is used to draw shapes with HTML.You can use it also to creates texts, boxes and images.Look at how we draw circle(or ellipse),rectangle(polygon), and line using SVG.You can even apply styles to the shapes like color for line ,its thickness etc.
<svg height="500" width="500"><circle cx="10" cy="10" r="20" fill="red" /></svg>
<svg height="500" width="500"><line x1="10" y1="10" x2="10" y2="10"
style="stroke: #000000 ; stroke-width:10" /></svg>
<svg height="500" width="500"><rect width="30" height="10" x="10" y="10" fill="black" />
</svg>
<svg height="" width=""><polygon points="20 20 ,30 30 , 50 50,100 100" style="fill: red;
stroke:blue;" /></svg>
<svg height="500" width="500"><ellipse cx="100" cy="50" rx="50" ry="20"style="fill:red"/></svg>
SVG also allows animations in shape .This is possible using the <animate> element put inside <svg> tags. The attributeName(attribute to animate) , from(starting value of attribute) , to(stopping value) , dur(duration of animation) , fill(to mention if animation should to its initial value after animation values= reset or freeze) , repeatCount(to specify the number of times to repeat the animation, can be set to indefinite also) are some attribute used in this element.
You can also define path obtain shapes or path of our choice.(M-moveto , L-lineto, T-smooth quadratic curve ,H-horizontal lineto, V-vertical lineto , A -elliptical arc ,C -curveto ,S -smooth curve ,Z-closepath ).d attribute is used to define the path .We mention it as coordinates.
<svg width="500" height="500"> <rect width-"30" height="10" x="10" y="10"> <animate attributeName="y" from="0" to="100" dur="2s" fill="reset" repeatCount="5" /></rect></svg>
<svg width="500" height="500"><path d="M 00 L300 300 L300 0 Z" /> </svg>
So using path initially it will begin from (0,0) and then move 300px down to right ,then up to(300,0) and finally Z closes the path.The figure is given below.
APIs
Let us now know more about different APIs.APIs(Application Programming Interface ) allows you to carry out some special functions. There are part of interactive pages. Hence may also contain complex script codes.
Web storage API allows the website to store data in users computer.They are more secure,can store large data and are fast.The two ind of web storage are local and session storage.Local storage has no expiry for storing data ,while session storage is destroyed just after the user closes the browser.The data in these storage areas are stored as key value pairs.
Storing localStorage.setItem("key" ,"value");
Getting localStorage.getItem("key");
Removing localStorage.removeItem("key"); , localStorage.clear();
For session storage there will be same syntax.
Geolocation APIs allows to access the current location , commonly used in GPS in mobiles. getcurrentposition() method is used for this.Other commonly used APIs is the drag and drop.There are used along with JavaScript codes.
In case when you want to use " , / , < or > ,& , ' etc ...you use HTML entities.Some are & for & ," for " , &apos for ' , < for < , > for > , © for copyright , &nspb for non-breaking space. and there are even more.
To make the page interactive we further use JavaScript elements,which we will learn later.This article just covered basics of HTML 5.In the coming articles we will also discuss in detail about CSS.Try out these methods in your text editor and try creating your web pages.
Happy Reading!!
0 Comments