Shine skill Technologies

Size: px

Start display at page:

Download "Shine skill Technologies"

Katrina Howard
5 years ago
Views:

1 Shine skill Technologies Deputy Para Kutchery chowk ranchi By:- Shankar Singh H.O.D,Computer Science and Engineering Center for Bio Informaics,Ranchi Call: / Like us Ph:

2 Web Technologies Index HTML 27 CSS JAVA SCRIPT JQUER Ph:

3 HTML? HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today. HTML stands for Hyper Text Markup Language and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language. HTML is a markup language. Describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display. A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags <body> - The main body of the page The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content. A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag. <name of tag>content </name of tag> HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing. 3 Ph:

4 But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: HTML Element HTML Versions Version Year HTML 1990 HTML HTML HTML HTML HTML HTML XHTML The <!DOCTYPE> Declaration The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> <h4>this is a heading</h4> <h5>this is a heading</h5> <h6>this is a heading</h6> 4 Ph:

5 HTML Lines The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content: <p>this is a paragraph.</p> <hr> <p>this is a paragraph.</p> <hr> <p>this is a paragraph.</p> HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph: HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference). Font Size: You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. <font size="1">font size="1"</font> <font size="2">font size="2"</font> <font size="3">font size="3"</font> <font size="4">font size="4"</font> <font size="5">font size="5"</font> <font size="6">font size="6"</font> <font size="7">font size="7"</font> Font Face: 5 Ph:

6 You can set any font you like using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman of your font with size attribute. See below few examples on using different font face <font face="times New Roman" size="5">times New Roman</font> <font face="verdana" size="5">verdana</font> <font face="comic sans MS" size="5">comic Sans MS</font> <font face="wildwest" size="5">wildwest</font> <font face="bedrock" size="5">bedrock</font> Font Color: You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Check a complete list of HTML Color Name with Codes. <font color="#ff00ff">this text is hexcolor #FF00FF</font> <font color="red">this text is red</font> Marquee <marquee>attribute_name="attribute_value"...more attributes> One or more lines or text message or image </marquee> Attrubutes: A HTML marquee can have following attributes: width: how wide the marquee is. This will have a value like 10 or 20%etc. height: how tall the marquee is. This will have a value like 10 or 20% etc. direction: which direction the marquee should scroll. This will have value either up,down, left or right. 6 Ph:

7 behavior: what type of scrolling. This will have value scroll, slid and alternate. scrolldelay: how long to delay between each jump. This will have a value like 10 etc. scrollamount: how far to jump. This will have a value like 10 etc. loop: how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. bgcolor: background color. This will have any color name or color hex value. hspace: horizontal space around the marquee. This will have a value like 10 or 20%etc. vspace: vertical space around the marquee. This will have a value like 10 or 20%etc. onmouseover="this.stop();":-marquee will be stop onmouseout="this.start(); :- marquee will be start HTML Hyperlinks (Links) The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link s destination. <a href="url">link text</a> Anchor Attributes: Following are most frequently used attributes for <a> tag. href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment. target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_top" or "_parent" then same 7 Ph:

8 window will be used to display the loaded document, if set to "_self" then loads the new page in current window. By default its "_self". name & id: attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label. event: attributes like onclick, onmouseover etc. are used to trigger any Javascript ot VBscript code. title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link. accesskey: attribute attribute provides a keyboard shortcut that can be used to activate a link. For example, you could make the T key an access key so that when the user presses either the Alt or Ctrl key on his keyboard (depending on his operating system) along with the T key, the link gets activated. HTML Images - The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. <img src="url" alt="some_text"> <img src="smiley.gif" alt="smiley face" width="32" height="32"> HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. 8 Ph:

9 The value of the alt attribute is an author-defined text: Image Attributes: Following are most frequently used attributes for <img> tag. Width: sets width of the image. This will have a value like 10 or 20%etc. height: sets height of the image. This will have a value like 10 or 20% etc. border: sets a border around the image. This will have a value like 1 or 2 etc. src: specifies URL of the image file. alt: this is an alternate text which will be displayed if image is missing. align: this sets horizontal alignment of the image and takes value either left, right orcenter. valign: this sets vertical alignment of the image and takes value either top, bottom orcenter. hspace: horizontal space around the image. This will have a value like 10 or 20%etc. vspace: vertical space around the image. This will have a value like 10 or 20%etc. name: name of the image with in the document. id: id of the image with in the document. style: this will be used if you are using CSS. title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link. ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map. We will see how to use these attributes in Image Links chapter. Setting Link Colors: You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag. But it is recommended to use CSS to set colors of links, visited links and active links. 9 Ph:

10 Following is the example we have used for our web side tutorialspoint.com a:link {color:#900b09; background-color:transparent a:visited {color:#900b09; background-color:transparent a:active {color:#ff0000; background-color:transparent a:hover {color:#ff0000; background-color:transparent You can refer to Style Sheet Tutorial for a complete understanding on CSS. Otherwise you can use <body> tag to set link colors. Here is the syntax. HTML Tag: HTML <a> tag provides you facility to specifiy an address to send an . While using <a> tag as an tag then you will use mailto: address along with href attribute. Following is the syntax of using mailto instead of using http. <a href= "mailto:abc@example.com">send </a> Table Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Table Heading - The <th> Element: able heading can be defined using <th> element. This tag will be put to replace <td> tag which is used to represent actual data. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element at any place: Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. Table Cellpadding and Cellspacing: 10 Ph:

11 There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding represents the distance between cell borders and the content within. Following is the example: <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>ramesh Raman</td> <td>5000</td> </tr> <tr> <td>shabbir Hussein</td> <td>7000</td> </tr> </table> Colspan and Rowspan Attributes: You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Following is the example: <table border="1"> <tr> 11 Ph:

12 <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr><td rowspan="2">row 1 Cell 1</td> <td>row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">row 3 Cell 1</td></tr> </table> Tables Backgrounds You can set table background using of the following two ways: Using bgcolor attribute - You can set background color for whole table or just for one cell. Using background attribute - You can set background image for whole table or just for one cell. <table border="5" bordercolor="green" bgcolor="gray"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr><td rowspan="2">row 1 Cell 1</td> <td bgcolor="red">row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">row 3 Cell 1</td></tr> 12 Ph:

13 </table> <table border="1" background="/images/home.gif"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr><td rowspan="2">row 1 Cell 1</td> <td bgcolor="red">row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3" background="/images/pattern1.gif"> Row 3 Cell 1 </td></tr> </table> Using a Header, Body, and Footer: Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content of the table. The three elements for separating the head, body, and foot of a table are: <thead> - to create a separate table header. <tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer Ph:

14 A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody> <table border="1" width="100%"> <thead> <tr> <td colspan="4">this is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">this is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr>...more rows here containing four cells... </tr> </tbody> 14 Ph:

15 <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr>...more rows here containing four cells... </tr> </tbody> </table> Nested Tables: You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>. Following is the example of using another table and other tags inside a table cell. <table border="1"> <tr> <td> <table border="1"> <tr> <th>name</th> 15 Ph:

16 <th>salary</th> </tr> <tr> <td>ramesh Raman</td> <td>5000</td> </tr> <tr> <td>shabbir Hussein</td> <td>7000</td> </tr> </table> </td> <td> <ul> <li>this is another cell</li> <li>using list inside this cell</li> </ul> </td> </tr> <tr> <td>row 2, Column 1</td> <td>row 2, Column 2</td> </tr> </table> 16 Ph:

17 Frame set Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset. Creating Frames - The <frameset> Element: The <frameset> tag replaces the <body> element in frameset documents. The <frameset> tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical farmes are created. The values of the rows/columns indicate the amount of screen area each row/column will occupy. Each farme is indicated by <frame> tag and it defines what HTML document to put into the frame. <html> <head> <title>frames example</title> </head> <frameset rows="10%,80%,10%"> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> 17 Ph:

18 Your browser does not support frames. </body> </noframes> </frameset> </html> The <frameset> Element Attributes: Following are important attributes of <frameset> and should be known to you to use frameset. cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: Absolute values in pixels. For example to create three vertical frames, usecols="100, 500,100". A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". Using a wildcard symbol. For example to create three vertical frames, usecols="10%, *,10%". In this case wildcard takes remainder of the window. As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there. frameborder: specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border Ph:

19 framespacing: specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. Loading Content - The <frame> Element: The <frame> element indicates what goes in each frame of the frameset. The <frame> element is always an empty element, and therefore should not have any content, although each <frame> element should always carry one attribute, src, to indicate the page that should represent that frame. The <frame> Element Attributes: Following are important attributes of and should be known to you to use frames. src: indicates the file that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in html directory. name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link. frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> element if one is given, and the possible values are the same. This can take values either 1 (yes) or 0 (no). marginwidth: allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10". marginheight: allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight="10". noresize: By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize="noresize". scrolling: controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars Ph:

20 longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm" Inline Frames - The <iframe> El ement: You can define an inline frame with the <iframe> tag. The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders. Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame. All of the other, optional attributes for the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag. <body>...other document content... <iframe src="/html/menu.htm" width="75" height="200" align="right"> Your browser does not support inline frames. To view this <a href="/html/menu.htm">document</a> correctly, you'll need a copy of Internet Explorer or the latest Netscape Navigator. </iframe>...subsequent document content... </body> 20 Ph:

21 LIst You can list out your items, subjects or menu in the form of a list. HTML gives you three different types of lists. <ul> - An unordered list. This will list items using bullets <ol> - A ordered list. This will use different schemes of numbers to list your items <dl> - A definition list. This is arrange your items in the same way as they are arranged in a dictionary. <ul> <li>coffee</li> <li>milk</li> </ul> HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>coffee</li> <li>milk</li> </ol> HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list Ph:

22 The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl> Quotation marks <q> quotation marks around the <q> element. Address <address> Address element defines contact information of a document or an article. The HTML <kbd> element defines keyboard input <code> element defines a piece of programming code: The HTML <var> element defines a variable. Exam:- raj kumar: <var>p</var> = <var>j</var><var>k</var><sup>4</sup> HTML Comment Tags You can add comments to your HTML source by using the following syntax:   Ph:

23 HTML Layout - Using Tables: <table width="100%" border="0"> <tr> <td colspan="2" style="background-color:#cc99ff;"> <h1>this is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffccff; width:100px;text-align:top;"> <b>main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:300px;text-align:top;"> Technical and Managerial </td> </tr> <tr> <td colspan="2" style="background-color:#cc99ff;"> <center> 23 Ph:

24 Copyright 2013 shineskill.com </center> </td> </tr> </table> Multiuple Columns Layouts - Using Tables <table width="100%" border="0"> <tr valign="top"> <td style="background-color:#ffccff;width:20%; text-align:top;"> <b>main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:60%;text-align:top;"> Technical and Managerial Tutorials </td> <td style="background-color:#ffccff; width:20%;text-align:top;"> <b>right Menu</b><br /> 24 Ph:

25 HTML<br /> PHP<br /> PERL... </td> </tr> <table> Form designing <Input type= text name = variable id= variable > Same as all element like Password,combo box, <select> <option>bca</option> </select> Radio,etc HTML5 Some new input command color date datetime datetime-local month number Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> range 25 Ph:

26 <input type="range" name="points" min="1" max="10"> In range value will be increment by one by default If you want to increment 10 just step =10 Example:- <input type= range min= 10 max= 100 step= 10 > search tel time url week Video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Audio <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> HTML5 <section> Element This defines a section in a document. <section> <h1>first section </h1> <p> SST is a...</p> </section> HTML5 <article> Element The <article> element specifies independent, self-contained content Ph:

27 <article> <h1>finst heading </h1> <p>windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT...</p> </article> <nav> The <nav> element defines a set of navigation links. The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element! <nav> <a href="/html/">html</a> <a href="/css/">css</a> <a href="/js/">javascript</a> <a href="/jquery/">jquery</a> </nav> <progress>and <meter> <progress> and <meter> are similar. You use <progress> for a task or a "measure how complete something is" scenario. It also has an indeterminate mode for something that has an unknown duration (like searching a database). The <meter> tag is for gauges and measurements of value (thermometers, quantity used, etc.). While they may look alike on the screen in many cases, they do have different semantic meanings Ph:

28 CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one It is a concept first created by Håkon Wium Lie in In December 1996, CSS was made a specification by the W3C and today allows web developers to create and easily change how their web pages look and feel. Advantage of CSS Global web standards :- Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers CSS saves time:- The file size of the CSS is very small hence your website takes minimal loading time. The external CSS has made easy for the visitors who want to see only the content from the website. By creating the CSS, you can make the web design flexible. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. Disadvantages of CSS CSS works differently on different browsers. IE and Opera supports CSS as different logic Ph:

29 Styles Solve a Common Problem HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. All major browsers support Cascading Style Sheets. Style Sheets Can Save a Lot of Work Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external.css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document! CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically. Multiple Styles Will Cascade Into One Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document Ph:

30 Cascading Order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Internal style sheet (inside the <head> tag) 4. Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value) Writing Style of CSS CSS can be write in three way either internally, externally or inline. Internal CSS In internal CSS we place CSS code in <head> tages of each HTML FILE. The format for this is shown in the example below. <html> <title></title> <head> <style type= text/css > CSS coding </style> </head> <body> 30 Ph:

31 Use code of heading section or inherit heart </body> </html> With this method each HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles. With this method each HTML file contains the CSS Code needed to style the page External Style sheet Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as Notepad or Dreamweaver. A CSS file contains no (X)HTML, only CSS. You simply save it with the.css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file. <link rel= stylesheet type= text/css href= path to stylesheet.css /> Or you can also use method as shown below <style type = text/css >@import url(path to stylesheet css)</style> Either of these methods are achieved by placing one or the other in the head section as shown in exameple below. <head> <link rel= stylesheet type= text/css href= style.css /> </head> or <head> <title><title> <style type= text/css url(path To stylesheet.css)</style> </head> 31 Ph:

32 By using an external style sheet, all of your (X)HTML files link to one CSS file in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one.css file to make global changes to your entire website. Here are a few reasons this is better. Easier Maintenance Reduced File Size Reduced Bandwidth Improved Flexibility Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style= color:red margin-left:20px; > this is a paragraph</p>. Types of CSS There are three types of CSS Id selector Css class Set property in HTML Tages The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces: body {color: black 32 Ph:

33 Note: If the value is multiple words, put quotes around the value: p {font-family: "sans serif" Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color: p {text-align:center;color:red To make the style definitions more readable, you can describe one property on each line, like this: p { text-align: center; color: black; font-family: arial Grouping You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color: green The class Selector With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: p.right {text-align: right p.center {text-align: center 33 Ph:

34 You have to use the class attribute in your HTML document: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Note: Only one class attribute can be specified per HTML element! The example below is wrong: <p class="right" class="center"> This is a paragraph. </p> You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:.center {text-align: center In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector: <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> Do NOT start a class name with a number! It will not work in Mozilla/Firefox. The id Selector You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of "green": #green {color: green 34 Ph:

35 The style rule below will match the p element that has an id with a value of "para1": p#para1 { text-align: center; color: red Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. We generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times. Example: Ph:

36 Hear we divided page into four different part top,left,right or mid with the help of id selector Total size of page is:- height 100% or width 100% We can provide layer in to page with the help of id selector Property of div_top Top:0%,height:20%,width:100%,left:0%, Property of div_left Top:20%,height:80%,width:20%,left:0%,right:80% Property of div_right Top:20%,height:80%,width:20%,left:80%, Property of div_mid Top:20%,height:80%,width:60%,left:20%,right:20%; With position:absulut in all id selector CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: 36 Ph:

37 External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> The browser will read the style definitions from the file mystyle.css, and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a.css extension. An example of a style sheet file is shown below: hr {color: sienna p {margin-left: 20px body {background-image: url("images/back40.gif") Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape. Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this: <head> <style type="text/css"> hr {color: sienna p {margin-left: 20px body {background-image: url("images/back40.gif") </style> </head> The browser will now read the style definitions, and format the document according to it Ph:

38 Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element: <head> <style type="text/css">  </style> </head> Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color: red; text-align: left; font-size: 8pt 38 Ph:

39 And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet. The CSS background properties define the background effects of an element. CSS Background Properties The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page. Browser support: Internet Explorer, Firefox, Netscape. Property Description Values Background backgroundattachment A shorthand property for setting all background properties in one declaration Sets whether a background image is fixed or scrolls with the rest of the page background-color background-image background-repeat backgroundattachment background-position scroll fixed background-color Sets the background color color-rgb 39 Ph:

40 background-image background-position background-repeat of an element Sets an image as the background Sets the starting position of a background image Sets if/how a background image will be repeated color-hex color-name transparent url none top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos repeat repeat-x repeat-y no-repeat CSS Text Properties The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more. Browser support: Internet Explorer, Firefox, Netscape. Property Description Values Color Sets the color of a text color Direction Sets the text direction ltr rtl 40 Ph:

41 letter-spacing text-align Increase or decrease the space between characters Aligns the text in an element normal length left right center justify text-decoration Adds decoration to text none underline overline line-through blink text-indent text-transform white-space word-spacing Indents the first line of text in an element Controls the letters in an element Sets how white space inside an element is handled Increase or decrease the space between words length % none capitalize uppercase lowercase normal pre nowrap normal length CSS Font Properties The CSS font properties allow you to change the font family, boldness, size, and the style of a text. Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font. Browser support: Internet Explorer, Firefox, Netscape Ph:

42 Property Description Values Font font-family A shorthand property for setting all of the properties for a font in one declaration A prioritized list of font family names and/or generic family names for an element font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar family-name generic-family font-size Sets the size of a font xx-small x-small small medium large x-large xx-large smaller larger length % font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none number font-stretch Condenses or expands the current font-family normal wider narrower 42 Ph:

43 font-style Sets the style of the font normal italic oblique ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-variant Displays text in a smallcaps font or a normal font normal small-caps font-weight Sets the weight of a font normal bold bolder lighter Text Formatting and adding style to text is a key issue for any web designer. You can set following text properties of an element: The color property is used to set the color of a text. The direction property is used to set the text direction Ph:

44 The letter-spacing property is used to add or subtract space between the letters that make up a word. The word-spacing property is used to add or subtract space between the words of a sentence. The text-indent property is used to indent the text of a paragraph. The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and strikethrough text. The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters. The white-space property is used to control the flow and formatting of text. The text-shadow property is used to set the text shadow around a text. Text Indentation The text-indent property is used to specify the indentation of the first line of a text. p { text-indent: 30px; Text Alignment The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to theright or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines. In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified: th { td { text-align: right; text-align: center; p { text-align: justify; 44 Ph:

45 Text Decoration The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: a {text-decoration:none; h1 { text-decoration: underline; h2 { h3 { text-decoration: overline; text-decoration: line-through; Text transformation [text-transform] The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform: capitalize uppercase Capitalizes the first letter of each word. For example: "john doe" will be "John Doe" Ph:

46 lowercase none Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". No transformations - the text is presented as it appears in the HTML code. As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters. Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase. h1 { text-transform: uppercase; Li { text-transform: capitalize; Letter space [letter-spacing] The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used. h1 { p { letter-spacing: 6px; letter-spacing: 3px; 46 Ph:

47 Text direction set the text direction to "right-to-left": div { direction:rtl; CSS3 text-shadow Property h1 { text-shadow: 2px 2px #ff0000; CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: Internet Explorer, Firefox, Netscape. Property Description Values Border A shorthand property for setting all of the properties for the four borders in one border-width border-style border-color 47 Ph:

48 border-bottom border-bottom-color border-color border-left border-left-color border-right border-right-color border-style declaration A shorthand property for setting all of the properties for the bottom border in one declaration Sets the color of the bottom border Sets the color of the four borders, can have from one to four colors A shorthand property for setting all of the properties for the left border in one declaration Sets the color of the left border A shorthand property for setting all of the properties for the right border in one declaration Sets the color of the right border Sets the style of the four borders, can have from one to four styles border-bottom-width border-style border-color border-color Color border-left-width border-style border-color border-color border-right-width border-style border-color border-color none hidden dotted dashed solid double groove ridge inset 48 Ph:

49 border-top border-top-color border-width A shorthand property for setting all of the properties for the top border in one declaration Sets the color of the top border A shorthand property for setting the width of the four borders in one declaration, can have from one to four values outset border-top-width border-style border-color border-color thin medium thick length border-radius:20px; border-bottom-right-radius: we can round a div The border-style Property: The border-style property allows you to select one of the following styles of border: none: No border. (Equivalent of border-width:0;) solid: Border is a single solid line. dotted: Border is a series of dots. dashed: Border is a series of short lines. double: Border is two solid lines. groove: Border looks as though it is carved into the page. ridge: Border looks the opposite of groove. inset: Border makes the box look like it is embedded in the page. outset: Border makes the box look like it is coming out of the canvas. hidden: Same as none, except in terms of border-conflict resolution for table elements Ph:

50 You can individually change the style of the bottom, left, top, and right borders of an element using following properties: border-bottom-style changes the style of bottom border. border-top-style changes the style of top border. border-left-style changes the style of left border. border-right-style changes the style of right border. The border-width Property: The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick. You can individually change the width of the bottom, top, left, and right borders of an element using the following properties: border-bottom-width changes the width of bottom border. border-top-width changes the width of top border. border-left-width changes the width of left border. border-right-width changes the width of right border. CSS Margin Properties The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once. Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well! 50 Ph:

51 Browser support: Internet Explorer, Firefox, Netscape. Property Description Values margin margin-bottom margin-left margin-right margin-top A shorthand property for setting the margin properties in one declaration Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element margin-top margin-right margin-bottom margin-left auto length % auto length % auto length % auto length % 51 Ph:

CSS Padding Properties The CSS padding properties define the space between the element border and the element content. Negative values are not allowed.

52 CSS Padding Properties The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once. Browser support: Internet Explorer, Firefox, Netscape. Property Description Values Padding padding-bottom padding-left A shorthand property for setting all of the padding properties in one declaration Sets the bottom padding of an element Sets the left padding of an element padding-top padding-right padding-bottom padding-left length % length % padding-right Sets the right padding of length 52 Ph:

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version