Monday, 30 January 2017




                                                             HTML 5 AND CSS

HTML stands for Hyper Text Markup Language.
CSS stands for  Cascading Style Sheets.
Style- How to display HTML elements.
A Website is 1)Presentation tool 2)Learning tool 3)Teaching tool 4)Marketing tool.
Some more tags on HTML5 :section,article,aside,header,footer,nav,dialog,figure.
CSS  uses three references:
1)INLINE
2)INTERNAL
3)EXTERNAL
Program by using the above references
<link href=”style.css” rel=”stylesheet”>  /* this is EXTERENAL*/
<html>
<head><style type=”text/css”>p{margin:20px;}</style>  /* this is INTERNAL*/
</head>
<body>
<p style=”margin:10px;”>sometext</p>  /* this is INLINE*/
</body>
</html>






BOX Model
DIV-division –It is nothing but a container
Some text





A PROGRAM USING CSS
H1{coloer:green;font-weight:bold;}
Body(background-color:yellow;}
P{color:blue;)
A program by using link to the above CSS program.
<!DOCTYPE HTML>
<LINK  HREF=”C:\USERS\LIB\DESKTOP\WEBDESIGN\CAS1.CSS” REL =”STYLESHEET”>
<HTML>
<HEAD>
<TITLE>COMPUTER</TITLE>
</HEAD>
<BODY>
<H1>INTRODUCTION TO COMPUTERS</H1>
<P>COMPUTER</P>
</BODY>
</HTML>


A program using DIV
H1{COLOR:GREEN;}
DIV{BACKGROUND-COLOR:RED;HEIGHT:200PX;WIDTH:200PX;BORDER:2PX;}

 A  program using above DIV program.
<!DOCTYPE HTML>
<LINK HREF=”C:\DESKTOP\WEBDESIGN\CAS1.CSS” REL=”STYLESHEET”>
<HTML>
<HEAD>
<TITLE>COMPUTER</TITLE>
</HEAD>
<BODY>
<H1>INTRODUCTION</H1>
<DIV>HAI</DIV>
<BODY>
<HTML>
BOOTSTRAP is a framework to readily produce webpages. A tool for creating responsive web pages.
For COLOR  combinations KULER ADOBE.
VIDEO FORMATS:MPEG-4,WMV,QUICKTIME,REAL VIDEO.
Program for video
<!DOCTYPE HTML>
<HTML>
<BODY>
<VIDEO WIDTH=”400” CONTROLS>
<SOURCE SRC=”MOV_BBB.MP4” TYPE=”VIDEO/MP4”>
<SOURCE SRC=”MOV_ BBB.OGG” TYPE=”VIDEO/OGG”>
YOUR BROWSER  DOESNOT SUPPORT  HTML5 VIDEO
</VIDEO>
<P>
VIDEO COURTESY OF
<A HREF=HTTP://WWW.BIGBUCKBUNNY.ORG/TARGET=”_BLANK”>
BIGBUCKBUNNY</A>
</P>
</BODY>
</HTML>

CANSVAS:A medium for drawing ,painting,graphics via javascript.
A program using CANVAS
<!DOCTYPE HTML>
<HTML>
<BODY>
<CANVAS  ID=”MYCANVAS” WIDTH=”200” HEIGHT=”100” ></CANVAS>
<SCRIPT>
Var c=document.getElementById(“mycanvas”);
Var ctx=c.getcontext(“2d”);
Ctx.moveTo(0,0);
Ctx.lineTo(200,100);
Ctx.stroke();
</script>
</body>
</html>
Site reference:www.w3schools.com

Compiled by Y.Kiriti babu L/CME after attending the course at NITTTR Chennai from 23 Jan to 17 Jan 2017.

20 comments:

  1. Great.. Tutorial is just awesome..It is really helpful for a newbie like me...

    JavaScript Online Training JavaScript Online Training JQuery Online Training JQuery Online Training
    JavaScript Course | HTML5 Online Training

    ReplyDelete
  2. simple explantion about html5 and css
    dental website
    webdesigning in chennai

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. It’s very easy to find out any matter on web as compared to textbooks, as I found this piece of writing on this site.

    singapore web design
    web design singapore
    ecommerce web design singapore
    magento web design company

    ReplyDelete