Html Tutor
Upcoming SlideShare
Loading in...5

Html Tutor



presentation delivered to magnet staff

presentation delivered to magnet staff



Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Html Tutor Html Tutor Presentation Transcript

    • HTML Introduction By Shantanu Oak
    • HTML Structure
      • <html>
      • <head>
      • <title> Welcome to the world of Internet </title>
      • </head>
      • <body>
      • <h1> This is my first page </h1>
      • I hope I will learn HTML and CSS, PHP, SQL <br>
      • It won’t take much time for that <p>
      • <font face=“arial” color=“green” size=4> Just remember all the important tags! </font>
      • </body>
      • </html>
    • Text display to the end user
      • Whatever text is nested within the <BODY> and </BODY> will be displayed to the end user.
      • <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>
    • Headings H1 to H6
      • <H1>This is H1 text</H1>
      • <H4>This is H4 text</H4>
      • <H6>This is H6 text</H6> would be displayed as:
      • This is H1 text
      • This is H4 text
      • This is H6 text
    • B I and U
      • Trespassers will be <B>prosecuted</B>
      • Trespassers will be prosecuted
      • Read more about this in <I>Top Of The News</I>
      • Read more about this in Top Of The News
      • Only in a <U>quiet</U> mind is adequate perception of the world.
      • Only in a quiet mind is adequate perception of the world.
    • Horizontal Ruler
      • You can separate page content with horizontal lines (<HR>).
      • The <HR> tag need not be terminated by a closing </HR> tag.
      • The <HR> tag inserts a horizontal line of user-defined width, height and alignment across the page.
      • <HR WIDTH=“50%&quot; SIZE=&quot;4&quot; ALIGN=&quot;RIGHT&quot;>
      • will insert a horizontal line of width 100 pixels and height 4 pixels, aligned towards the right side of the page.
      • 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.
    • <p> and <br>
      • 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.
      • <br> Breaks the text and begins a new line, but does not add extra space as the <P> tag does.
      • <P> takes attributes like align whereas <br> does not.
    • Align - Center, Right and Left
      • 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.
      • For example: <P ALIGN=&quot;RIGHT&quot;> This text is aligned to the right </P>
      • <CENTER>...</CENTER>
      • aligns all elements between the opening and closing tags in the centre of the page.
    • 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
    • Ordered and Unordered List
      • <OL> <LI> Start Word <LI> Type Letter </OL> which would look something like this: 1. Start Word 2. Type Letter
      • <UL> <LI>Computer <LI>Printer </UL> creates an unordered list with 2 items:
      • Computer
      • Printer
    • <pre>… </pre>
      • 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.
      • <pre> I am so happy that I have learned HTML. Now I want to learn PHP as well! Ha! Ha! Ha!
      • </pre>
    • Tables!
      • <table border=1>
      • <tr>
      • <td>Cell 1</td>
      • <td>Cell 2</td>
      • </tr>
      • <tr>
      • <td>Cell 3</td>
      • <td>Cell 4</td>
      • </tr>
      • </table>
      Cell4 Cell3 Cell2 Cell1
    • Tables part II
      • <table border> <tr> <td colspan=“2” align=“center”>Cell 1</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
      • <table border> <tr> <td rowspan=“2” valign=“bottom” >Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 4</td> </tr> </table>
      Cell4 Cell3 Cell1 Cell4 Cell2 Cell1
    • Tables Part III – Non Breaking space
      • <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>
      power of cheese
    • Clickable Links and images
      • <A HREF=&quot;demo.html&quot;>Click me</A>
      • <A HREF=“test/demo.html&quot;>Click me</A>
      • <A HREF=“;>Visit Quickbase </A>
      • Click me
      • Click me
      • Visit Quickbase
      • <IMG SRC=&quot;welcome.gif&quot;>
      • <IMG SRC=“img/welcome.gif&quot;>
      • <IMG SRC=“” align=“right”>
      <A HREF=“;> <IMG SRC=“”> </A>
    • Idhar bhi Form Bharna Padega?
      • <form action=&quot;nextpage.html&quot; method=&quot;get&quot; name=“college&quot;>
      • <input type=&quot;text&quot; value=“Type your name&quot; name=“studentName&quot;>
      • <textarea cols=25 rows=6 name=“address”>Type your address here… </textarea>
      • <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
      • <select name=“donation&quot;> <option value=&quot;1&quot;>Free Seat</option> <option value=&quot;2&quot;>Paid Seat</option> </select>
      • <input type=&quot;hidden&quot; name=“Web_entry&quot; value=“yes&quot;>
      • <input type=&quot;submit&quot; value=“Admission Request&quot; align=&quot;middle&quot;>
      • </form>
    • Frames
      • <html>
      • <frameset cols=“34%,66%&quot;>
        • <frame src=&quot;idli.html&quot; name=&quot;idli&quot;>
          • <frameset rows=&quot;100,*&quot;>
          • <frame src=&quot;chatni.html&quot; name=&quot;chatni&quot;>
          • <frame src=&quot;sambar.html&quot; name=&quot;sambar&quot;>
          • </frameset>
      • </frameset>
      • </html>
    • Style me rahane ka!
      • <img src=&quot;guru.gif&quot; style=&quot;float:left;&quot;>
      • <span style=&quot;float: right;&quot;> this is rigth </span>
      • <p style=&quot;text-indent:100 px;&quot;>Test</p>
      • <a href=&quot;; style=&quot;text-decoration: none;&quot;> click here /a>
      • <span style=&quot;background-color: yellow;&quot;> A yellow background </span>
    • Style sub jagah hai yaar!
      • <span style=&quot;line-height: 30px;&quot;>
      • <img src=&quot;guru.gif&quot; style=&quot;display: none;&quot;>
      • <span style=&quot;letter-spacing: 30px;&quot; >
      • <span style=&quot;font-variant: small-caps;&quot;>
      • <span style=&quot;text-transform: uppercase;&quot; >
    • Table bhee Style maarta hai?
      • <td style=&quot;padding: 22px 22px 22px 22px;&quot;>
    • All the lines except the first one are using styles
      • <html>
      • <head>
      • <STYLE type=&quot;text/css&quot;>
      • h2,h1.myrule {
      • text-transform: uppercase
      • }
      • </STYLE>
      • </head>
      • <body>
      • <h1> This is normal Heading 1</h1>
      • <h1 class=&quot;myrule&quot;>I am using class in the h1</h1>
      • <h2> This is important </h2>
      • <h3 style=&quot;text-transform: uppercase;&quot;> This is important </h3>
      • </body>
      • </html>
    • CSS Cascading Style Sheets Separating style from content in your HTML documents
    • CSS History?
      • All browsers supports CSS
      • When Microsoft released Internet Explorer 3.0 on August 14th 1996, it was the first browser that supported CSS.
    • The need of Styles
      • <h1> <font color=&quot;red&quot;>This is red</font> </h1>
      • If you want all the h1 tags in Red color you will have to repeat these tags.
      • Instead declare it in the HEAD Section.
      • h1 { color: red; }
    • The syntax of <style> tag
      • <head>
      • <STYLE type=&quot;text/css&quot;>
      • h1 {
      • color: red;
      • }
      • </STYLE>
      • </head>
      • A style is contained in curly brackets { } with each defined name/value pair separated by a semi-colon.
      • You can type each argument on separate line or in the same line.
      • So the syntax:
      • selector {property: value; property:value}
      • <STYLE type=&quot;text/css&quot;>
      • h1 { color: red; font-family:arial; font-size:10pt;}
      • </STYLE>
    • External style sheets
      • <LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/mystyle.css&quot;>
    • ID's and Classes
      • In the above example all the &quot;h1&quot; tags will be red.
      • If you want to apply this red color selectively...
      • <STYLE type=&quot;text/css&quot;>
      • h1.myred {
      • color: red;
      • }
      • </STYLE>
      • and to apply
      • <h1 class=&quot;myred&quot;>This is red heading one.</h1>
      • 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
      • .myred { color:red; }
      • it will be available to all. For eg.
      • <p class=&quot;myred&quot;>This is red paragraph.</p>
      • You can also use ID's like
      • #mybig { font-size:20pt; }
      • It does the same thing that classes do. The advantage is that you can use classes &quot;AND&quot; id's
      • <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>
    • The SPAN Element
      • SPAN is an inline element, so it can be used just as elements such as <b> or <em>, <strong>.
      • The important distinction is that while b, em carry structural meaning, SPAN has no such meaning.
      • <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>
    • Font
      • Property Values
      • font [<font-style> || <font-variant> || <font-weight>]? <font-size> [/<line-height>]? <font-family>
      • font-family [[<family-name> | [<family-name>
      • font-style normal | italic | oblique
      • font-variant normal | small-caps
      • font-weight normal | bold | bolder | lighter | 100 | 800 | 900
      • font-size <absolute-size> | <relative-size> | <length> | <percentage>
    • TEXT
      • Property Values
      • word-spacing normal | <length>
      • letter-spacing normal | <length>
      • text-decoration none | [underline || overline || line-through || blink] default: none
      • vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
      • text-transform none | capitalize | uppercase | lowercase
      • text-align left | right | center | justify default: UA-specific
      • text-indent <length> | <percentage>default: 0
      • line-height normal | <number> | <length> | <percentage>
    • Background
      • Property Values
      • color <color> default: UA-specific
      • background-color transparent | <color>
      • background-image none | <url>
      • background-repeat repeat | repeat-x | repeat-y | no-repeat
      • background-attachment scroll | fixed
      • background-position [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]default: 0% 0%
      • Background <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
    • contextual styles
      • With CSS, it is possible to define how a tag should be rendered if it appears INSIDE another tag.
      • Lets say you want all the bulleted text in a list to be italics. You could do something like this:
      • 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.
    • Inline Styles
      • Style may be inline using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself).
      • Here is how...
      • <h1 STYLE=&quot;font-size: +50&quot;> This is following <SPAN STYLE=&quot;font-family: cursive&quot;> inline style</span> rules.</h1>
        • or
      • <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>
    • Fonts and CSS examples
      • HTML Code:
      • <font size=&quot;'+2&quot;> This is bigger </font>
      • CSS Code:
      • <span style=&quot;font-size=24pt&quot;> This is bigger </span>
      • or <H1 STYLE=&quot;color: orange; font-family: impact&quot;>Styles are great. </H1>
      • or even <P STYLE=&quot;background: yellow; font-family: courier&quot;>Amaze your friends! </P>
    • The right way
      • If you are using external stylesheets you can define styles for all heading 1 tags as follows....
      • ** H1 {font-size: 14px}
      • * H1 {font-size: x-large}
      • * H1 {font-size: larger}
      • * H1 {font-size: 1.5 em}
      • * H1 {font-size: 125%}
      • Which one of the above is the best?
      • Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes.
      • 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.
      • 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.
    • More Styles
      • Background-color
      • 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?
      • This is how... <span style=&quot;background-color:yellow&quot;>Hello World</span>
      • Anchor
      • 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.
      • <style>A:hover{color:red}</style>
    • Changing cursor using style
      • cursor:help
      • <a href=&quot;;><span style=&quot;cursor:help&quot;>Want some
      • help about how to change the cursor? </span></a>
      • 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.
      • There are many other cursor styles as shown below...
      • cursor:default (cursor stays as is)
      • cursor:crosshair (a cross)
      • cursor:pointer (hand)
      • cursor:text (I-Beam text cursor)
      • cursor:wait (hourglass)
      • cursor:hand (pointing hand)
      • cursor:help (question mark)
      • cursor:move (cross with arrows)
      • cursor:e-resize (right arrow)
      • cursor:w-resize (Left Arrow)
      • cursor:n-resize (up arrow)
      • cursor:ne-resize (up and right arrow)
      • cursor:nw-resize (up and left arrow)
      • cursor:s-resize (down arrow)
      • cursor:se-resize (down and right arrow)
      • cursor:sw-resize (down and left arrow)