HTML (Hyper Tax Markup Language AND CSS (Cascading Style Sheet)
HTML (Hyper Tax Markup Language AND CSS (Cascading Style Sheet)
Introduction of HTML
Short for Hyper Text Markup Language, the authoring language used to create documents on the World Wide Web. Hyper Text is the method by which you move around on the web by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear i.e. you can go to any place on the Internet whenever you want by clicking on links there is no set order to do things in. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, bold text for example).
Command Innovative Technologies
2
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="http://www.google.com">This is a link</a>
Explanation
<html>Tag : The root element that specifies that the content of the document is HTML. The html element must contain the head and the body elements. <head> Tag : The header of an HTML document where information about the document is placed. You must use the title element within the head element and meta, style, script, link can also be used.
Command Innovative Technologies
6
Continue
<body> Tag : The main body of an HTML document where all of the content is placed. You must use this element and it should be used just once. It must start immediately after the closing head tag and end directly before the closing html tag. <title> Tag : Defines the title of a page. You must have a title element to produce a valid document and it must be placed within the head element.
Command Innovative Technologies
7
Example
<html> <head> <title>H1 To H6 Example</title> <body bgcolor="pink"> <font color="green"><h1>VaaYaaEdutech.com</font></h1> <font color="white"><h2> VaaYaaEdutech.com </font></h2> <font color="orange"><h3> VaaYaaEdutech.com </font></h3> <font color="purple"><h4> VaaYaaEdutech.com </font></h4> <font color="red"><h5> VaaYaaEdutech.com </font></h5> <font color="black"><h6> VaaYaaEdutech.com </font></h6> </body> </html>
Command Innovative Technologies
9
<sub> Tag
Use for to subscript the value. Example <html> <head> <title>Subscript example</title> <body bgcolor="pink"> <p>VaaYaa <sub>Edu.com</sub></p> </body></html>
Command Innovative Technologies
10
Out put
11
<sup> Tag
Use for to supperscript the value. Example <html> <head> <title>Supperscript example</title> <body bgcolor="pink"> <h1><p>H<sup>2</h1></sup></p> </body> </html>
Command Innovative Technologies
12
<br> Tag
A line break. The <br> tag is an empty tag which means that it has no end tag. Example <html> <head> <title>pre tag</title> </head> <body bgcolor=pink> <p><h1>My name is xyz<br /> and I am Indian</h1></p> </body></html> Command Innovative Technologies
13
<br> Tag
A line break. <html> <head> <title>pre tag</title> </head> <body bgcolor=pink> <p><h1>My name is xyz<br /> and I am Indian</h1></p> </body></html> Command Innovative Technologies
14
Introduction of CSS
Why we use CSS? We use CSS to control the style and layout of multiple Web pages all at once. HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p>
Command Innovative Technologies
15
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets are stored in CSS files How to write comment ? A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; 16 font-family:arial; Command Innovative Technologies
Continue
CSS Styling
Background-color : transparent(default),inherit Background-position : left top,left center,left bottom,right top ,right center, right bottom,center top ,center ,center bottom Background-size : Specifies the size of the background images % Command Innovative Technologies
17
<html> <head> <style type="text/css"> body { background-image:url("Blue hills.jpg"); background-color:pink; background-repeat:no-repeat; background-attachment:fixed; background-position:center;
Margin
margin:25px 50px;
top and bottom margins are 25px right and left margins are 50px
margin:25px;
all four margins are 25px
Command Innovative Technologies
19
VaaYaa Edu
VaaYaa Education Training And Placement, A/1/A, 3rd Floor, VaaYaa Lobby, Chinubhai Tower, Next to H K College, Ashram Road, Income Tax, Gujarat, Ahmedabad- 380009 Call Us Now: +919586979730 [email protected]
20
VaaYaa Edutech Training And Placement, A/1/A, 3rd Floor, VaaYaa Lobby, Chinubhai Tower, Next to H K College, Ashram Road, Income Tax, Gujarat, Ahmedabad- 380009 Call Us Now: +919586979730 [email protected]
21
VaaYaa Edutech Training And Placement, A/1/A, 3rd Floor, VaaYaa Lobby, Chinubhai Tower, Next to H K College, Ashram Road, Income Tax, Gujarat, Ahmedabad- 380009 Call Us Now: +919586979730 [email protected]
22
VaaYaa Edutech Training And Placement, A/1/A, 3rd Floor, VaaYaa Lobby, Chinubhai Tower, Next to H K College, Ashram Road, Income Tax, Gujarat, Ahmedabad- 380009 Call Us Now: +919586979730 [email protected]
23