Learn
HTML5 Semantics in An Hour.
Now
what is semantics?
Html5
Comes in new data element which describe what type of content,section
is for that element.like Header <header> Footer
<footer>,sidebar <aside> etc.
A
basic HTML5 Page Example.
===================================================
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
This is the Header of our Site like for
Site Title Menu
</header>
<nav>This is nav bar of our
site</nav>
<aside>
This is sidebar of our site
</aside>
<section>
This is content of our site
</section>
<footer>
This is footer of our site
</footer>
</body>
</html>
This Simple page give output like this.
Since
We look there is only plain text written on browser so as we all know
tha html is only structure of page alignment designs and behaviour of
our page control by javascript and css we will cover javascript and
css in next post.
Now
lets start Study more html general elements which we used and their
property and default css value of their elements.
Before
starting lets discuss about attribute what is attribute since every
elements as has default attribute or we use custom attribute for js.
Anchor
Tag (<a></a>)
<a>
this is anchor tag which we used for linking our html page from one
page to other
Attributes:
href
: Url (e.g
href=”http://google.com “
,href=”page2.html”).
Rel
: (nofollow,next,search,prev,tag,help,author) e.g rel=”nofollow”
This used for nofollow the url generally used for search engines To
Not follow this link.
Target
: _blank - Open Link in New
Tab.
_parent - Open Link in Same Window.
E.g
<a href="hello.html">Link</a>
where
hello.html is our next page and link is test which works as masking
of link and href is a default attribute of anchor tag<a> .
Address
Tag (<address></address>)
Address Tag Defines TheContact
Information of an Article.The Text Inside Address Tag is Render in
Italic Font.
E.g
<address>Abc,New Delhi,India</address>
Area
Tag (<area>)
Area tag Defines an Area in
image mapping where we Create A image map i.e Clickable link in image
by image area and coordinates .if you want More about image mapping
and how to create it i already posted a article on this please read
it.
E.g
<img src=”hello.png” alt=”hello” usemap=”#hello”>
<map
name=”hello”>
<area
shape=”rect” coords=”0,0,82,120” href=”next.html”>
<area
shape=”circle” coords=”120,58,8”’ href=”next2.html”>
</map>
Attributes
:
Coords
– This is coordinates of area of circle,rectangle of image.
Href-
This is Link of url on click on image area.
Target-
_blank,_parent.
Article
Tag (<article></article>)
Article Tag defines the
article in webpage such as post,comments.
E.g-
<article>Again new post is Ready</article>
Audio
Tag (<audio></audio>)
Audio tag Play the sound in
webpage,such as music.
E.g
- <audio
controls=”controls”>
<source
src=”hello.mp3” type=”audio/mp3”>
Your
browser not supported
</audio>
if
Your Browser not Support Audio tag it print the text “your browser
not supported”.
Bold
Text (<b></b>)
<b>
this is for bold the text in our site.
E.g-
<b>hello</b>
Body
Tag (<body></body>)
<body> this is used for our body of site every contents of our site go inside body tag
E.g- <body>covers all</body>
Break Tag(</br>)
<br>
used for breaking the lines
Button Tag (<button></button>)
<button>
create a button in our site
E.g
<button>click</button>
Form
Elements like (form,input,select,checkbox,radio,textarea)
lets read about input element select and textarea which used in submitting form.
we
can create a form by using element <form>
e.g- <form action="hello.php" method="post">
</form>
here action is a attribute for where we send the values of input fields and method is the method of sending data like get or post
if we use get the then the value will show in our Url if we use post then value will be send hidden who carry value from one page to another all input field inside form will send the value by carrying value in its name attribute.
Note:
-
if we upload file using form then we must add extra attribute
(enctype=”multipart/form-data”).
Input tag (<input>)
creates
a input like radio,text,checkbox,file
<input
type="text" name="hello"> (textbox)
<input
type="radio" name="hello2"> (radio)
<input
type="checkbox" name="hello3"> (checkbox)
<input
type="submit" value="submit">(submit button)
<input
type="reset" value="reset"> (reset input
button>
<input
type="file" name="file">(for file uploading)
Note :- using file uploading we must used enctype="multipart/form-data" attribute in our html form for sending the file data to server.
Select
and option tag (<select></select>)
Select
tag get value from its child tag option
which we selected.
<select
name="hello4">
<option>1</option>
<option>2</option>
</select>
div tag (<div></div>)
Div
is a element for creating a small section in our site
Table,table row,table column(<table><table>,<tr><td>)
<table>
create
a row column data in a table
<tr>
this is table row
<td>
this is table column
<th>this
is table heading
<table>
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
</table>
if we want two merge two column the simply use attribute in td colspan=2
if
we want to merge two row of a cell the simple use attribute in td
rowspan=2
unordered list (ul),ordered list (ol),defination list(dl)
Unordered list
<ul>
<li>item1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
</ul>
Ordered List
<ol>
<li>item1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
</ol>
Defination
list
<dl>
<li>item1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
</dl>
image tag (<image>)
<img
src="hello.jpg">
for
displaying image in our site
where src is the attribute for image path.
where src is the attribute for image path.
Alt
attribute is used in image tag to display text if image will not
loading .
Style
Tag <style>
<style></style>
for
css style of our page
Script
Tag <script>
<script></script>
for
script of our page like js.
<link>
for
calling of external stylesheet in our page
<link
rel="stylesheet" href="stylesheet.css">
for calling of external js
<script
src="heelo.js"></script>
Paragraph
tag <p></p>
<p>
paragraph tag for certain paragraph in our site.
Title
Tag <title>
<title>title
tag of our site
Heading
tag <hn- n=1,2,3,4,5,6>)
h1-h6 heading tag in our site.
<h1>.................</h1>
<h2>.................</h2>
<h3>.................</h3>
<h4>.................</h4>
<h5>.................</h5>
<h6>.................</h6>
Strong,Emphazise,Italic
tag (<strong>,<em>,<i>)
Strong
text - <strong>this is strong wriiten text</strong>
Emphazise
- <em> this is em text</em>
Italic
- <i>this is italic text</i>
Video
tag <video>
<video
controls=”controls” height=”100”
width=”100”>
<source
src=”hello.mp4” type=”video/mp4”>
Your
Browser not Supported.
</video>
Video
tag is used For adding video is our websites. If video tag not
support your browser then it prints te text “your browser not
support”.
Iframe
<iframe>
iframe
tag is used to load external webpage in our site.
Attribute
src=”hello.html”
E.g
<iframe
src=”hello.html” height=”100” width=”100”>
Thanks all This post Will be Update More Soon..
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment