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)