Embed Size (px)
DESCRIPTION
presentation delivered to magnet staff
Citation preview
1
HTML Introduction
By Shantanu Oak
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>
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>
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
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.
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.
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.
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.
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
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
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>
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
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
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
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>
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>
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>
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>
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;">
20
Table bhee Style maarta hai?
• <td style="padding: 22px 22px 22px 22px;">
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>
22
CSS Cascading Style Sheets
Separating style from content
in your HTML documents
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.
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; }
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>
26
External style sheets
• <LINK rel="stylesheet" type="text/css" href="styles/mystyle.css">
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>
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>
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>
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>
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>
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.
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>
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>
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.
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>
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)
![Η γλʚσσα HTML - sch.gr1epal-trikal.tri.sch.gr/static/html/HTML.pdfημειώσεις HTML / JavaScript Μαρολαʗάκης Μάριος [1] Η γλʚσσα HTML HTML είναι](https://img.pdfslide.net/doc/110x75/5f0298e87e708231d4050e7a/-ff-html-schgr1epal-f-html-javascript-oe.jpg)
