400 likes | 411 Views
HTML. HTML. Introduction Creation Tags Text List Image Background Link Table Frames Forms. 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)
E N D
HTML Softsmith Infotech
HTML • Introduction • Creation • Tags • Text • List • Image • Background • Link • Table • Frames • Forms 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 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. 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 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. 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. Softsmith Infotech
First Web Page <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> 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”> Softsmith Infotech
Adding Text • Anything that we type between the tags <BODY> and </BODY> will appear on the browser. • Many formatting tags are available. 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> Softsmith Infotech
Text Layout • <CENTER> • <DIV> (same as <P>) • <P> • <P ALIGN = “”> </P> • Right • Left • Center • Justify 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 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. 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 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 this Click Here 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) 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. 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. 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. Softsmith Infotech
Link to Email • <a href="mailto:xyz@abc.com">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. 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. Softsmith Infotech
Backgrounds • For setting background of our page, we need to specify some properties in <BODY> tag. • BACKGROUND • BGCOLOR • BGSOUND • BGPROPERTIES 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 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> 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 Softsmith Infotech
Row / Column attributes • All property of table. • Height • Only for TD • Rowspan – Merging rows • Colspan – Merging columns • nowrap 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 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. 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 Softsmith Infotech
Form Fields • Text • Password • Hidden • Text area • Submit button • Cancel button • Image button • Check box • Radio button • Drop down menu 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”> 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 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” 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> 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”> Softsmith Infotech
Special Characters •   • © • > • < Softsmith Infotech
HTML Comments • Starts with • <!- - • Ends with • - -> 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 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 Softsmith Infotech