Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image...
-
Upload
eugene-bradley -
Category
Documents
-
view
217 -
download
0
Transcript of Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image...
![Page 1: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/1.jpg)
Softsmith Infotech
HTML
![Page 2: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/2.jpg)
Softsmith Infotech
HTML
• Introduction• Creation• Tags• Text• List• Image• Background• Link• Table• Frames• Forms
![Page 3: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/3.jpg)
Softsmith Infotech
Introduction
• SGML – Standard Generalized Markup Language (1986)
• Mother of HTML and XML
• Describing document types in many field of human activity (clinical records to musical notations)
• Used in Aerospace, Defense, Semiconductor and Publishing industries
![Page 4: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/4.jpg)
Softsmith Infotech
SGML - Barriers
• Lack of widely supported style sheets
• Complex and unstable software
• Obstacles to interchange SGML data
• SGML renamed as Sounds Good, May be Later.
![Page 5: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/5.jpg)
Softsmith Infotech
HTML
• Hyper Text Markup Language– Hypertext – Dealing with links– Markup – Designing documents with some
styles or lay outs
• HTML document is a plain text file
• HTML recognized by Web Browser
![Page 6: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/6.jpg)
Softsmith Infotech
HTML Creation
• Use Notepad or any text editor
• Type contents and save with a .htm or .html extension
• Eg. MyPage.html
• FrontPage, MS Word allows us to create web pages without any prior knowledge in HTML. Just save as web page and you will get the effect.
![Page 7: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/7.jpg)
Softsmith Infotech
Why to learn HTML?
• HTML is the glue that holds all web pages together.
• You can use tags that the editor does not support.
• You can read the code of other people's pages, and "borrow" the effects.
• You can do the work yourself, when the editor simply refuses to create the effects you want.
![Page 8: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/8.jpg)
Softsmith Infotech
First Web Page
<HTML><HEAD>
<TITLE></TITLE>
</HEAD><BODY></BODY>
</HTML>
![Page 9: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/9.jpg)
Softsmith Infotech
TAGS
• Instructs the browser to do some operation.• Pillar of HTML• Start Tag and End Tag
– <Start TAG>– </End TAG>
• Few examples:– <BODY>, <HTML> etc
• Every tag may or may not have Attributes.– <BODY BGCOLOR=“tan”>
![Page 10: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/10.jpg)
Softsmith Infotech
Adding Text
• Anything that we type between the tags <BODY> and </BODY> will appear on the browser.
• Many formatting tags are available.
![Page 11: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/11.jpg)
Softsmith Infotech
Text Formatting
• <BASEFONT>, <FONT>, <B>, <I>, <U>, <BR>, <STRONG>, <EM>, <SUB>, <SUPER>, <BLINK>, <STRIKE>, <Hx>– x = 1 to 6 (1 being the largest and 6 being the
smallest)– <BLINK> works only in netscape.
• <BIG>, <SMALL>
![Page 12: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/12.jpg)
Softsmith Infotech
Text Layout
• <CENTER>
• <DIV> (same as <P>)
• <P>– <P ALIGN = “”> </P>
• Right• Left• Center• Justify
![Page 13: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/13.jpg)
Softsmith Infotech
HTML Lists
• Ordered List– <OL TYPE = “circle”><OL>– TYPE can be circle or square or disc– If TYPE is left, by default we have Numbers.– TYPE can also take values like A, a, i, I– We can configure the numbering to start from a
particular value with the help of “start” attribute.
• Unordered list– <UL TYPE=“circle”></UL>– TYPE can be circle or square or disc
![Page 14: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/14.jpg)
Softsmith Infotech
Images
• JPEG or GIF images are recognized by browsers
• <IMG> tag will place image on your page• The attribute SRC, tells the location from which
the image is to be taken• We can control size of the image (width and
height attributes)• The attribute ALT will say the text to be
displayed in the place of image, if image not found.
![Page 15: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/15.jpg)
Softsmith Infotech
Images
• The attribute BORDER specifies the thickness of border around the image.
• Hspace and Vspace attributes allows us to add space to the left-right sides and top-bottom sides
• Aligning images is also possible with the align property
![Page 16: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/16.jpg)
Softsmith Infotech
Hyperlink
• <A> - Anchor tag
• Its attribute – HREF will be the page to which we will be redirected.
• <A HREF=“Second.html”>Click Here</A>
• Click Here will appear in the browser like thisClick Here
![Page 17: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/17.jpg)
Softsmith Infotech
Specifying Colors for Links
• Define colors for all links on the page.– <body link="#C0C0C0" vlink="#808080"
alink="#FF0000">• Link – Unvisited link• Vlink – Visited link• Alink – Active link (Color of the link when
mouse is on it)
![Page 18: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/18.jpg)
Softsmith Infotech
Specifying Colors for Links
• Define colors for individual links on the page.– Placing font tags between the <a href> and the
</a> tag.Click <a href="http://www.softsmith.com"><font color=“Blue">here</font></a> to go to Softsmith.
– Using a style setting in the <a> tag. Click <a href="http://www. softsmith.com" style="color: red">here</a> to go to Softsmith.
![Page 19: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/19.jpg)
Softsmith Infotech
Link Target
• By default, links will open in the current window• We can specify values for the Target attribute to
change this behaviour.– _blank – new window– _self – same window– _parent – frame superior to the frame where the
hyperlink is in– _top – Cancels all frame and loads in new window.
• We can specify the name of the frame where the link need to be opened.
![Page 20: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/20.jpg)
Softsmith Infotech
Internal Link
• To create a link with in that page, add a name attribute to the anchor tag and specify that name from the place where you want that navigation
<a name="chapter1">Some contents</a>
Click <a href="#chapter1">here</a> to read chapter 1.
![Page 21: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/21.jpg)
Softsmith Infotech
Link to Email
• <a href="mailto:[email protected]">Email Me</a>• This will appear in the page as
Email Me
• When we click that, we can compose mail and send it to that address.
• We can even configure subject and body of the mail using the attributes subject and body.
![Page 22: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/22.jpg)
Softsmith Infotech
Image Map
• Helps us to use one image to navigate to multiple pages.– <img src="rainbow.gif" usemap = #example border=0>
<map name=example><area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> <area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> </map>
– Shape can be Circle or polygon also.
![Page 23: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/23.jpg)
Softsmith Infotech
Backgrounds
• For setting background of our page, we need to specify some properties in <BODY> tag.
• BACKGROUND
• BGCOLOR
• BGSOUND
• BGPROPERTIES
![Page 24: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/24.jpg)
Softsmith Infotech
Tables
• Help in arranging elements in our page in a neat way
• Divide page into separate sections
• Creating Menus
• Adding form fields
• Alignment of images
![Page 25: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/25.jpg)
Softsmith Infotech
Table Creation
• Table - <TABLE> </TABLE>• Row - <TR> </TR>• Column - <TD> </TD>
<TABLE BORDER=0><TR>
<TD> 1 </TD><TD> 2 </TD>
</TR> </TABLE>
1 2
![Page 26: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/26.jpg)
Softsmith Infotech
Table Attributes
• Align – left, right, center• Valign – top or bottom• Background• Bgcolor• Border• Bordercolor • Bordercolordark - shadow• Cellpadding• Cellspacing• Nowrap – protects from line break• Frame – deals with border adjustment – void, above, below, lhs,
rhs, hsides, vsides, box• Width
![Page 27: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/27.jpg)
Softsmith Infotech
Row / Column attributes
• All property of table.
• Height
• Only for TD– Rowspan – Merging rows– Colspan – Merging columns– nowrap
![Page 28: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/28.jpg)
Softsmith Infotech
Frames
• Divides screen into separate areas
• Each frame can contain a HTML document
• <frameset> tag is used to create a frame.
• Ended with </frameset> tag
• Attributes– Cols– Rows
![Page 29: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/29.jpg)
Softsmith Infotech
Resizing and Scrolling
• By default, we can resize frames.• If we don’t want to resize them, we can specify
the same using the attribute “noresize”.• If we don’t need scroll bars, we can specify
scrolling attribute as no.• <frame src="menu.html" name="menu" noresize
scrolling=no>• If we give scrolling=auto, scroll bar will appear if
needed. Otherwise it wont.
![Page 30: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/30.jpg)
Softsmith Infotech
HTML Forms
• Most widely used in web applications
• Has several elements
• Created with in <BODY>
• Use <FORM> </FORM> tags to define elements of form
• Attributes – Action – URL to be navigated on submit– Method – GET or POST
![Page 31: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/31.jpg)
Softsmith Infotech
Form Fields
• Text• Password• Hidden• Text area• Submit button• Cancel button• Image button• Check box• Radio button• Drop down menu
![Page 32: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/32.jpg)
Softsmith Infotech
Text / Password / Hidden
• <Input type = “text” name = “UserId” value=“user”>
• <Input type = “password” name=“pwd” value=“pwd”>
• <Input type = “hidden” name=“hide” value=“hide”>
![Page 33: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/33.jpg)
Softsmith Infotech
Text Area
• <textarea cols=20 rows=20 name=“txtarea”>Text area</textarea>
• Cols and rows specifies how many columns and rows will the text are occupy on our page.
• Name – Program will use this name to refer to the element
• Tabindex and wrap are other properties– Tabindex – order of tab focus– Wrap
• Off – no line breaks• Virtual – for appearance line breaks will be there• Physical – Exact replica of what we type
![Page 34: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/34.jpg)
Softsmith Infotech
Check box
• <input type="checkbox" name="option1" value=" Java "> Java<br><input type="checkbox" name="option2" value=" Oracle " checked> Oracle <br><input type="checkbox" name="option3" value=" Net "> .Net <br>
• For Radio button, the type need to be given as “radio”
![Page 35: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/35.jpg)
Softsmith Infotech
Dropdown List
• Using Select tag we can define dropdown menu• Select tag has attributes like
– Name– Size– Multiple
• Option tag defines values in the list• <select name=“ddl”>
<option Value=“1”>1</option><option Value=“2”>2</option></select>
![Page 36: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/36.jpg)
Softsmith Infotech
Submit / Reset / Image Button
• <input type="submit" value="Send me your name!">
• <input type=“reset" value=“Reset">
• <input type=“image" src=“image.gif“ name=“image”>
![Page 37: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/37.jpg)
Softsmith Infotech
Special Characters
•  
• ©
• >
• <
![Page 38: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/38.jpg)
Softsmith Infotech
HTML Comments
• Starts with – <!- -
• Ends with– - ->
![Page 39: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/39.jpg)
Softsmith Infotech
META Tag
• <META> tag has information related to search engines and browsers
• Later its use was not recommended• If page content and description doesn’t
match, search engines report that page as SPAM
• Based on the keywords, search engines search the keywords present in META tag of the page
![Page 40: Softsmith Infotech HTML. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649da65503460f94a915d6/html5/thumbnails/40.jpg)
Softsmith Infotech
HTML Hex Colors
• RGB Style
• #RGB
• Safe 216 colors– R – 00, 33, 66, 99, CC, FF– G – 00, 33, 66, 99, CC, FF– B – 00, 33, 66, 99, CC, FF