Html Tutor
-
Upload
shantanu-oak -
Category
Technology
-
view
3.657 -
download
0
description
Transcript of Html Tutor
![Page 1: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/1.jpg)
1
HTML Introduction
By Shantanu Oak
![Page 2: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/2.jpg)
2
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>
![Page 3: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/3.jpg)
3
Text display to the end user
• Whatever text is nested within the <BODY> and </BODY> will be displayed to the end user.
• <BODY TEXT="green"> 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="green" BGCOLOR="purple"> </BODY>
![Page 4: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/4.jpg)
4
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 textThis is H4 textThis is H6 text
![Page 5: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/5.jpg)
5
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.
![Page 6: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/6.jpg)
6
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%" SIZE="4" ALIGN="RIGHT">
• 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.
![Page 7: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/7.jpg)
7
<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.
![Page 8: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/8.jpg)
8
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="RIGHT">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.
![Page 9: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/9.jpg)
9
Eye Liners
Liptsticks
Powder
Object Attribute Value
Lips Lipstick Red
Font Color Red
Font Size 4
Object Attribute Value
Chicks Lipstick Red
Font Align Right
Font Rowspan 4
Mismatch
![Page 10: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/10.jpg)
10
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
![Page 11: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/11.jpg)
11
<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>
![Page 12: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/12.jpg)
12
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>
Cell1 Cell2
Cell3 Cell4
![Page 13: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/13.jpg)
13
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>
Cell1
Cell3 Cell4
Cell1
Cell2
Cell4
![Page 14: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/14.jpg)
14
Tables Part III – Non Breaking space
• <TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0> <TR>
<TD WIDTH=25% BGCOLOR=yellow> </TD><TD WIDTH=50% BGCOLOR=lightgrey> power of
cheese.</TD><TD WIDTH=25% BGCOLOR=orange> </TD>
</TR></TABLE>
power of cheese
![Page 15: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/15.jpg)
15
Clickable Links and images<A HREF="demo.html">Click me</A>
<A HREF=“test/demo.html">Click me</A>
<A HREF=“http://quickbase.com">Visit Quickbase </A>
• Click me
• Click me
• Visit Quickbase
<IMG SRC="welcome.gif">
<IMG SRC=“img/welcome.gif">
<IMG SRC=“http://www.quickbase.com/i/threeArrowsRed.gif” align=“right”>
<A HREF=“http://quickbase.com"> <IMG SRC=“http://www.quickbase.com/i/threeArrowsRed.gif”> </A>
![Page 16: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/16.jpg)
16
Idhar bhi Form Bharna Padega?• <form action="nextpage.html" method="get" name=“college"> • <input type="text" value=“Type your name" name=“studentName">• <textarea cols=25 rows=6 name=“address”>Type your address here…
</textarea>
• <input type="radio" name=“side" value="radio1" checked>Commerce<input type="radio" name=“side" value="radio2">arts<input type="radio" name=“side" value="radio3">Science
• <select name=“donation"> <option value="1">Free Seat</option> <option value="2">Paid Seat</option> </select>
• <input type="hidden" name=“Web_entry" value=“yes">• <input type="submit" value=“Admission Request" align="middle">• </form>
![Page 17: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/17.jpg)
17
Frames
• <html>• <frameset cols=“34%,66%">
– <frame src="idli.html" name="idli">• <frameset rows="100,*">• <frame src="chatni.html" name="chatni">• <frame src="sambar.html" name="sambar">• </frameset>
• </frameset>• </html>
![Page 18: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/18.jpg)
18
Style me rahane ka!
• <img src="guru.gif" style="float:left;"> • <span style="float: right;"> this is rigth
</span> • <p style="text-indent:100 px;">Test</p> • <a href="http://www.yahoo.com"
style="text-decoration: none;"> click here /a>
• <span style="background-color: yellow;"> A yellow background </span>
![Page 19: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/19.jpg)
19
Style sub jagah hai yaar!
• <span style="line-height: 30px;">
• <img src="guru.gif" style="display: none;">
• <span style="letter-spacing: 30px;">
• <span style="font-variant: small-caps;">
• <span style="text-transform: uppercase;">
![Page 20: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/20.jpg)
20
Table bhee Style maarta hai?
• <td style="padding: 22px 22px 22px 22px;">
![Page 21: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/21.jpg)
21
All the lines except the first one are using styles
• <html>• <head>• <STYLE type="text/css">• h2,h1.myrule { • text-transform: uppercase• }• </STYLE>• </head>• <body>• <h1> This is normal Heading 1</h1>• <h1 class="myrule">I am using class in the h1</h1>• <h2> This is important </h2>• <h3 style="text-transform: uppercase;"> This is important </h3>• </body>• </html>
![Page 22: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/22.jpg)
22
CSS Cascading Style Sheets
Separating style from content
in your HTML documents
![Page 23: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/23.jpg)
23
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.
![Page 24: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/24.jpg)
24
The need of Styles
• <h1> <font color="red">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; }
![Page 25: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/25.jpg)
25
The syntax of <style> tag• <head>• <STYLE type="text/css">• 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="text/css">• h1 { color: red; font-family:arial; font-size:10pt;}• </STYLE>
![Page 26: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/26.jpg)
26
External style sheets
• <LINK rel="stylesheet" type="text/css" href="styles/mystyle.css">
![Page 27: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/27.jpg)
27
ID's and Classes• In the above example all the "h1" tags will be red.• If you want to apply this red color selectively...• <STYLE type="text/css">• h1.myred { • color: red; • }• </STYLE>• and to apply • <h1 class="myred">This is red heading one.</h1>• The part after the "." 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="myred">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 "AND" id's• <P CLASS="myred" ID="mybig">This text is also bright red, but the extra ID attribute makes it 20
point instead</P>
![Page 28: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/28.jpg)
28
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="myred">This text is also bright red, but the extra ID attribute <span ID = "mybig">makes it 20 point </span> instead</P>
![Page 29: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/29.jpg)
29
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>
![Page 30: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/30.jpg)
30
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>
![Page 31: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/31.jpg)
31
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>
![Page 32: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/32.jpg)
32
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.
![Page 33: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/33.jpg)
33
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="font-size: +50"> This is following
<SPAN STYLE="font-family: cursive"> inline style</span> rules.</h1>or
• <P STYLE="color:red; font-family:'New Century Schoolbook', serif">This paragraph is styled in red with the New Century Schoolbook font, if available. </P>
![Page 34: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/34.jpg)
34
Fonts and CSS examples
• HTML Code:• <font size="'+2"> This is bigger </font>• CSS Code:• <span style="font-size=24pt"> This is bigger
</span>• or <H1 STYLE="color: orange; font-family:
impact">Styles are great. </H1>• or even <P STYLE="background: yellow; font-
family: courier">Amaze your friends! </P>
![Page 35: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/35.jpg)
35
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.
![Page 36: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/36.jpg)
36
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="background-color:yellow">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>
![Page 37: Html Tutor](https://reader035.fdocuments.us/reader035/viewer/2022081400/55584318d8b42ac6078b50f6/html5/thumbnails/37.jpg)
37
Changing cursor using style• cursor:help • <a href="http://www.help.com"><span style="cursor:help">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)