1. Softsmith Infotech HTML

2. Softsmith Infotech HTML Introduction Creation Tags Text List Image Background Link Table Frames Forms

3. 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

4. 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.

5. 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

6. 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.

7. 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.

8. Softsmith Infotech First Web Page

9. Softsmith Infotech TAGS Instructs the browser to do some operation. Pillar of HTML Start Tag and End Tag – Few examples: –, etc Every tag may or may not have Attributes. –

10. Softsmith Infotech Adding Text Anything that we type between the tags and will appear on the browser. Many formatting tags are available.

11. Softsmith Infotech Text Formatting,,,,,,,,,,,, –x = 1 to 6 (1 being the largest and 6 being the smallest) – works only in netscape.,

12. Softsmith Infotech Text Layout (same as ) – Right Left Center Justify

13. Softsmith Infotech HTML Lists Ordered List – –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 – –TYPE can be circle or square or disc

14. Softsmith Infotech Images JPEG or GIF images are recognized by browsers 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.

15. 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

16. Softsmith Infotech Hyperlink - Anchor tag Its attribute – HREF will be the page to which we will be redirected. Click Here Click Here will appear in the browser like this Click Here

17. Softsmith Infotech Specifying Colors for Links Define colors for all links on the page. – Link – Unvisited link Vlink – Visited link Alink – Active link (Color of the link when mouse is on it)

18. Softsmith Infotech Specifying Colors for Links Define colors for individual links on the page. –Placing font tags between the and the tag. Click here to go to Softsmith. –Using a style setting in the tag. Click here to go to Softsmith.

19. 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.

20. 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 Some contents Click here to read chapter 1.

21. Softsmith Infotech Link to Email Email Me 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.

22. Softsmith Infotech Image Map Helps us to use one image to navigate to multiple pages. – –Shape can be Circle or polygon also.

23. Softsmith Infotech Backgrounds For setting background of our page, we need to specify some properties in tag. BACKGROUND BGCOLOR BGSOUND BGPROPERTIES

24. 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

25. Softsmith Infotech Table Creation Table - Row - Column - 1 2 12

26. 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

27. Softsmith Infotech Row / Column attributes All property of table. Height Only for TD –Rowspan – Merging rows –Colspan – Merging columns –nowrap

28. Softsmith Infotech Frames Divides screen into separate areas Each frame can contain a HTML document tag is used to create a frame. Ended with tag Attributes –Cols –Rows

29. 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. If we give scrolling=auto, scroll bar will appear if needed. Otherwise it wont.

30. Softsmith Infotech HTML Forms Most widely used in web applications Has several elements Created with in Use tags to define elements of form Attributes –Action – URL to be navigated on submit –Method – GET or POST

31. Softsmith Infotech Form Fields Text Password Hidden Text area Submit button Cancel button Image button Check box Radio button Drop down menu

32. Softsmith Infotech Text / Password / Hidden

33. Softsmith Infotech Text Area Text area 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

34. Softsmith Infotech Check box Java Oracle.Net For Radio button, the type need to be given as “radio”

35. 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 1 2

36. Softsmith Infotech Submit / Reset / Image Button

37. Softsmith Infotech Special Characters &nbsp &copy &gt &lt

38. Softsmith Infotech HTML Comments Starts with –<!- - Ends with –- ->

39. Softsmith Infotech META Tag 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

40. 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