Html Tutor


Published on

presentation delivered to magnet staff

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html Tutor

  1. 1. HTML Introduction By Shantanu Oak
  2. 2. HTML Structure <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Welcome to the world of Internet </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> This is my first page </h1> </li></ul><ul><li>I hope I will learn HTML and CSS, PHP, SQL <br> </li></ul><ul><li>It won’t take much time for that <p> </li></ul><ul><li><font face=“arial” color=“green” size=4> Just remember all the important tags! </font> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  3. 3. Text display to the end user <ul><li>Whatever text is nested within the <BODY> and </BODY> will be displayed to the end user. </li></ul><ul><li><BODY TEXT=&quot;green&quot;> Hello World! </BODY> This displays the entire page contents in green. We can then add the BGCOLOR attribute, which sets the default background colour of the page. <BODY TEXT=&quot;green&quot; BGCOLOR=&quot;purple&quot;> </BODY> </li></ul>
  4. 4. Headings H1 to H6 <ul><li><H1>This is H1 text</H1> </li></ul><ul><li><H4>This is H4 text</H4> </li></ul><ul><li><H6>This is H6 text</H6> would be displayed as: </li></ul><ul><li>This is H1 text </li></ul><ul><li>This is H4 text </li></ul><ul><li>This is H6 text </li></ul>
  5. 5. B I and U <ul><li>Trespassers will be <B>prosecuted</B> </li></ul><ul><li>Trespassers will be prosecuted </li></ul><ul><li>Read more about this in <I>Top Of The News</I> </li></ul><ul><li>Read more about this in Top Of The News </li></ul><ul><li>Only in a <U>quiet</U> mind is adequate perception of the world. </li></ul><ul><li>Only in a quiet mind is adequate perception of the world. </li></ul>
  6. 6. Horizontal Ruler <ul><li>You can separate page content with horizontal lines (<HR>). </li></ul><ul><li>The <HR> tag need not be terminated by a closing </HR> tag. </li></ul><ul><li>The <HR> tag inserts a horizontal line of user-defined width, height and alignment across the page. </li></ul><ul><li><HR WIDTH=“50%&quot; SIZE=&quot;4&quot; ALIGN=&quot;RIGHT&quot;> </li></ul><ul><li>will insert a horizontal line of width 100 pixels and height 4 pixels, aligned towards the right side of the page. </li></ul><ul><li>If the <HR> tag is used by itself, without any attributes, it will simply insert a line of default height and width across the page. </li></ul>
  7. 7. <p> and <br> <ul><li>An absence of explicit <P> or <BR> tags in the HTML document will typically cause the page to be rendered as a single block of text, regardless of the number of carriage returns or line breaks used when writing the code. The only exception to this is text contained within the <PRE> tag. </li></ul><ul><li><br> Breaks the text and begins a new line, but does not add extra space as the <P> tag does. </li></ul><ul><li><P> takes attributes like align whereas <br> does not. </li></ul>
  8. 8. Align - Center, Right and Left <ul><li>The <P> tag may also be used to align blocks of text with the ALIGN attribute, which takes the values LEFT, CENTER, RIGHT and JUSTIFY. </li></ul><ul><li>For example: <P ALIGN=&quot;RIGHT&quot;> This text is aligned to the right </P> </li></ul><ul><li><CENTER>...</CENTER> </li></ul><ul><li>aligns all elements between the opening and closing tags in the centre of the page. </li></ul>
  9. 9. Eye Liners Liptsticks Powder Mismatch 4 Size Font Red Color Font Red Lipstick Lips Value Attribute Object 4 Rowspan Font Right Align Font Red Lipstick Chicks Value Attribute Object
  10. 10. Ordered and Unordered List <ul><li><OL> <LI> Start Word <LI> Type Letter </OL> which would look something like this: 1. Start Word 2. Type Letter </li></ul><ul><li><UL> <LI>Computer <LI>Printer </UL> creates an unordered list with 2 items: </li></ul><ul><li>Computer </li></ul><ul><li>Printer </li></ul>
  11. 11. <pre>… </pre> <ul><li>Preformatted text, meaning that lines are displayed exactly as they are typed in, honoring multiple spaces and line breaks. Text within <pre> tags will be displayed in a monospace font such as Courier. </li></ul><ul><li><pre> I am so happy that I have learned HTML. Now I want to learn PHP as well! Ha! Ha! Ha! </li></ul><ul><li></pre> </li></ul>
  12. 12. Tables! <ul><li><table border=1> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 1</td> </li></ul><ul><li><td>Cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 3</td> </li></ul><ul><li><td>Cell 4</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Cell4 Cell3 Cell2 Cell1
  13. 13. Tables part II <ul><li><table border> <tr> <td colspan=“2” align=“center”>Cell 1</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </li></ul><ul><li><table border> <tr> <td rowspan=“2” valign=“bottom” >Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 4</td> </tr> </table> </li></ul>Cell4 Cell3 Cell1 Cell4 Cell2 Cell1
  14. 14. Tables Part III – Non Breaking space <ul><li><TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0> <TR> <TD WIDTH=25% BGCOLOR=yellow> &nbsp; </TD> <TD WIDTH=50% BGCOLOR=lightgrey> power of cheese .</TD> <TD WIDTH=25% BGCOLOR=orange> &nbsp; </TD> </TR> </TABLE> </li></ul>power of cheese
  15. 15. Clickable Links and images <ul><li><A HREF=&quot;demo.html&quot;>Click me</A> </li></ul><ul><li><A HREF=“test/demo.html&quot;>Click me</A> </li></ul><ul><li><A HREF=“;>Visit Quickbase </A> </li></ul><ul><li>Click me </li></ul><ul><li>Click me </li></ul><ul><li>Visit Quickbase </li></ul><ul><li><IMG SRC=&quot;welcome.gif&quot;> </li></ul><ul><li><IMG SRC=“img/welcome.gif&quot;> </li></ul><ul><li><IMG SRC=“” align=“right”> </li></ul><A HREF=“;> <IMG SRC=“”> </A>
  16. 16. Idhar bhi Form Bharna Padega? <ul><li><form action=&quot;nextpage.html&quot; method=&quot;get&quot; name=“college&quot;> </li></ul><ul><li><input type=&quot;text&quot; value=“Type your name&quot; name=“studentName&quot;> </li></ul><ul><li><textarea cols=25 rows=6 name=“address”>Type your address here… </textarea> </li></ul><ul><li><input type=&quot;radio&quot; name=“side&quot; value=&quot;radio1&quot; checked>Commerce <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio2&quot;>arts <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio3&quot;>Science </li></ul><ul><li><select name=“donation&quot;> <option value=&quot;1&quot;>Free Seat</option> <option value=&quot;2&quot;>Paid Seat</option> </select> </li></ul><ul><li><input type=&quot;hidden&quot; name=“Web_entry&quot; value=“yes&quot;> </li></ul><ul><li><input type=&quot;submit&quot; value=“Admission Request&quot; align=&quot;middle&quot;> </li></ul><ul><li></form> </li></ul>
  17. 17. Frames <ul><li><html> </li></ul><ul><li><frameset cols=“34%,66%&quot;> </li></ul><ul><ul><li><frame src=&quot;idli.html&quot; name=&quot;idli&quot;> </li></ul></ul><ul><ul><ul><li><frameset rows=&quot;100,*&quot;> </li></ul></ul></ul><ul><ul><ul><li><frame src=&quot;chatni.html&quot; name=&quot;chatni&quot;> </li></ul></ul></ul><ul><ul><ul><li><frame src=&quot;sambar.html&quot; name=&quot;sambar&quot;> </li></ul></ul></ul><ul><ul><ul><li></frameset> </li></ul></ul></ul><ul><li></frameset> </li></ul><ul><li></html> </li></ul>
  18. 18. Style me rahane ka! <ul><li><img src=&quot;guru.gif&quot; style=&quot;float:left;&quot;> </li></ul><ul><li><span style=&quot;float: right;&quot;> this is rigth </span> </li></ul><ul><li><p style=&quot;text-indent:100 px;&quot;>Test</p> </li></ul><ul><li><a href=&quot;; style=&quot;text-decoration: none;&quot;> click here /a> </li></ul><ul><li><span style=&quot;background-color: yellow;&quot;> A yellow background </span> </li></ul>
  19. 19. Style sub jagah hai yaar! <ul><li><span style=&quot;line-height: 30px;&quot;> </li></ul><ul><li><img src=&quot;guru.gif&quot; style=&quot;display: none;&quot;> </li></ul><ul><li><span style=&quot;letter-spacing: 30px;&quot; > </li></ul><ul><li><span style=&quot;font-variant: small-caps;&quot;> </li></ul><ul><li><span style=&quot;text-transform: uppercase;&quot; > </li></ul>
  20. 20. Table bhee Style maarta hai? <ul><li><td style=&quot;padding: 22px 22px 22px 22px;&quot;> </li></ul>
  21. 21. All the lines except the first one are using styles <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul><ul><li>h2,h1.myrule { </li></ul><ul><li>text-transform: uppercase </li></ul><ul><li>} </li></ul><ul><li></STYLE> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> This is normal Heading 1</h1> </li></ul><ul><li><h1 class=&quot;myrule&quot;>I am using class in the h1</h1> </li></ul><ul><li><h2> This is important </h2> </li></ul><ul><li><h3 style=&quot;text-transform: uppercase;&quot;> This is important </h3> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  22. 22. CSS Cascading Style Sheets Separating style from content in your HTML documents
  23. 23. CSS History? <ul><li>All browsers supports CSS </li></ul><ul><li>When Microsoft released Internet Explorer 3.0 on August 14th 1996, it was the first browser that supported CSS. </li></ul>
  24. 24. The need of Styles <ul><li><h1> <font color=&quot;red&quot;>This is red</font> </h1> </li></ul><ul><li>If you want all the h1 tags in Red color you will have to repeat these tags. </li></ul><ul><li>Instead declare it in the HEAD Section. </li></ul><ul><li>h1 { color: red; } </li></ul>
  25. 25. The syntax of <style> tag <ul><li><head> </li></ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul><ul><li>h1 { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul><ul><li></STYLE> </li></ul><ul><li></head> </li></ul><ul><li>A style is contained in curly brackets { } with each defined name/value pair separated by a semi-colon. </li></ul><ul><li>You can type each argument on separate line or in the same line. </li></ul><ul><li>So the syntax: </li></ul><ul><li>selector {property: value; property:value} </li></ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul><ul><li>h1 { color: red; font-family:arial; font-size:10pt;} </li></ul><ul><li></STYLE> </li></ul>
  26. 26. External style sheets <ul><li><LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/mystyle.css&quot;> </li></ul>
  27. 27. ID's and Classes <ul><li>In the above example all the &quot;h1&quot; tags will be red. </li></ul><ul><li>If you want to apply this red color selectively... </li></ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul><ul><li>h1.myred { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul><ul><li></STYLE> </li></ul><ul><li>and to apply </li></ul><ul><li><h1 class=&quot;myred&quot;>This is red heading one.</h1> </li></ul><ul><li>The part after the &quot;.&quot; is called class. In this case the class myred can be applied only to the H1 tag. But if you type </li></ul><ul><li>.myred { color:red; } </li></ul><ul><li>it will be available to all. For eg. </li></ul><ul><li><p class=&quot;myred&quot;>This is red paragraph.</p> </li></ul><ul><li>You can also use ID's like </li></ul><ul><li>#mybig { font-size:20pt; } </li></ul><ul><li>It does the same thing that classes do. The advantage is that you can use classes &quot;AND&quot; id's </li></ul><ul><li><P CLASS=&quot;myred&quot; ID=&quot;mybig&quot;>This text is also bright red, but the extra ID attribute makes it 20 point instead</P> </li></ul>
  28. 28. The SPAN Element <ul><li>SPAN is an inline element, so it can be used just as elements such as <b> or <em>, <strong>. </li></ul><ul><li>The important distinction is that while b, em carry structural meaning, SPAN has no such meaning. </li></ul><ul><li><P CLASS=&quot;myred&quot;>This text is also bright red, but the extra ID attribute <span ID = &quot;mybig&quot;>makes it 20 point </span> instead</P> </li></ul>
  29. 29. Font <ul><li>Property Values </li></ul><ul><li>font [<font-style> || <font-variant> || <font-weight>]? <font-size> [/<line-height>]? <font-family> </li></ul><ul><li>font-family [[<family-name> | [<family-name> </li></ul><ul><li>font-style normal | italic | oblique </li></ul><ul><li>font-variant normal | small-caps </li></ul><ul><li>font-weight normal | bold | bolder | lighter | 100 | 800 | 900 </li></ul><ul><li>font-size <absolute-size> | <relative-size> | <length> | <percentage> </li></ul>
  30. 30. TEXT <ul><li>Property Values </li></ul><ul><li>word-spacing normal | <length> </li></ul><ul><li>letter-spacing normal | <length> </li></ul><ul><li>text-decoration none | [underline || overline || line-through || blink] default: none </li></ul><ul><li>vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> </li></ul><ul><li>text-transform none | capitalize | uppercase | lowercase </li></ul><ul><li>text-align left | right | center | justify default: UA-specific </li></ul><ul><li>text-indent <length> | <percentage>default: 0 </li></ul><ul><li>line-height normal | <number> | <length> | <percentage> </li></ul>
  31. 31. Background <ul><li>Property Values </li></ul><ul><li>color <color> default: UA-specific </li></ul><ul><li>background-color transparent | <color> </li></ul><ul><li>background-image none | <url> </li></ul><ul><li>background-repeat repeat | repeat-x | repeat-y | no-repeat </li></ul><ul><li>background-attachment scroll | fixed </li></ul><ul><li>background-position [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]default: 0% 0% </li></ul><ul><li>Background <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> </li></ul>
  32. 32. contextual styles <ul><li>With CSS, it is possible to define how a tag should be rendered if it appears INSIDE another tag. </li></ul><ul><li>Lets say you want all the bulleted text in a list to be italics. You could do something like this: </li></ul><ul><li>UL LI { text-decoration:italic; } which will render all <LI> tags inside <UL> tags in italics. If you used an ordered list ( <OL> ), its bullets would not be affected by this style definition. </li></ul>
  33. 33. Inline Styles <ul><li>Style may be inline using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself). </li></ul><ul><li>Here is how... </li></ul><ul><li><h1 STYLE=&quot;font-size: +50&quot;> This is following <SPAN STYLE=&quot;font-family: cursive&quot;> inline style</span> rules.</h1> </li></ul><ul><ul><li>or </li></ul></ul><ul><li><P STYLE=&quot;color:red; font-family:'New Century Schoolbook', serif&quot;>This paragraph is styled in red with the New Century Schoolbook font, if available. </P> </li></ul>
  34. 34. Fonts and CSS examples <ul><li>HTML Code: </li></ul><ul><li><font size=&quot;'+2&quot;> This is bigger </font> </li></ul><ul><li>CSS Code: </li></ul><ul><li><span style=&quot;font-size=24pt&quot;> This is bigger </span> </li></ul><ul><li>or <H1 STYLE=&quot;color: orange; font-family: impact&quot;>Styles are great. </H1> </li></ul><ul><li>or even <P STYLE=&quot;background: yellow; font-family: courier&quot;>Amaze your friends! </P> </li></ul>
  35. 35. The right way <ul><li>If you are using external stylesheets you can define styles for all heading 1 tags as follows.... </li></ul><ul><li>** H1 {font-size: 14px} </li></ul><ul><li>* H1 {font-size: x-large} </li></ul><ul><li>* H1 {font-size: larger} </li></ul><ul><li>* H1 {font-size: 1.5 em} </li></ul><ul><li>* H1 {font-size: 125%} </li></ul><ul><li>Which one of the above is the best? </li></ul><ul><li>Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes. </li></ul><ul><li>Points are a unit of print, not a unit of screen space. Pixels are the only meaningful unit of screen space. Due to platform and resolution differences, 14pt can mean many things. What it does not mean is a specific unit of screen size. </li></ul><ul><li>So, use points only when you are sure that the users will print the information from your site. (Which is quite unlikely) And remember to use pixels for better results. </li></ul>
  36. 36. More Styles <ul><li>Background-color </li></ul><ul><li>You know how to change the font color, <font color=red>this is red</font> But do you know how to change the background color? </li></ul><ul><li>This is how... <span style=&quot;background-color:yellow&quot;>Hello World</span> </li></ul><ul><li>Anchor </li></ul><ul><li>When the user passes his mouse on a link, the color should change to red. Very difficult? Not at all Just add these three lines in the <head> and </head> section. </li></ul><ul><li><style>A:hover{color:red}</style> </li></ul>
  37. 37. Changing cursor using style <ul><li>cursor:help </li></ul><ul><li><a href=&quot;;><span style=&quot;cursor:help&quot;>Want some </li></ul><ul><li>help about how to change the cursor? </span></a> </li></ul><ul><li>When the visitor will pass his mouse on this link, he will see the question mark along with his cursor. The cursor:auto line will keep the cursor at whatever the user has chosen as a default. </li></ul><ul><li>There are many other cursor styles as shown below... </li></ul><ul><li>cursor:default (cursor stays as is) </li></ul><ul><li>cursor:crosshair (a cross) </li></ul><ul><li>cursor:pointer (hand) </li></ul><ul><li>cursor:text (I-Beam text cursor) </li></ul><ul><li>cursor:wait (hourglass) </li></ul><ul><li>cursor:hand (pointing hand) </li></ul><ul><li>cursor:help (question mark) </li></ul><ul><li>cursor:move (cross with arrows) </li></ul><ul><li>cursor:e-resize (right arrow) </li></ul><ul><li>cursor:w-resize (Left Arrow) </li></ul><ul><li>cursor:n-resize (up arrow) </li></ul><ul><li>cursor:ne-resize (up and right arrow) </li></ul><ul><li>cursor:nw-resize (up and left arrow) </li></ul><ul><li>cursor:s-resize (down arrow) </li></ul><ul><li>cursor:se-resize (down and right arrow) </li></ul><ul><li>cursor:sw-resize (down and left arrow) </li></ul>