Download as PDF, PPTX
More Related Content
![JAVASCRIPT PPT [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptpptautosaved-230113112353-deb6ced8-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Kamal Acharya
Html
- 1.
- 2. Introduction • Stands forHypertext Markup Language • Most widely used language to write Web Pages • Hypertext refers to the way in which Web pages (HTML documents) are linked together • Is a Markup Language which means you use HTML to simply "mark- up" a text document with tags that tell a Web browser how to structure it to display • Is being widely used to format web pages with the help of different tags available in HTML language
- 3.
- 5. Basic Tags • HeadingTags • Paragraph Tags • Line Break Tag • Centering Tag • Horizontal Lines • Preserving Format • Non breaking space
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. HTML Tags VsElements • <p> is starting tag • </p> is closing tag • <p>This is paragraph</p> is paragraph element • There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements • These are known as void elements
- 15.
- 16. HTML Attributes • Usedto define the characteristics of an HTML element • Is placed inside the element's opening tag • All attributes are made up of two parts: a name and a value: • The name is the property you want to set • The value is what you want the value of the property to be set and always put within quotations • Example: Three possible values of align attribute: left, center and right. • Attribute names and attribute values are case-insensitive • However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values
- 18. Core Attributes • Thefour core attributes that can be used on the majority of HTML elements are: • Id • Title • Class • Style
- 19. The id Attribute •Used to uniquely identify any element within an HTML page • Two primary reasons to use an id attribute on an element: • If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content • If we have two elements of the same name within a Web page, we can use the id attribute to distinguish between elements that have the same name
- 20. The title Attribute •Gives a suggested title for the element • Syntax for the title attribute is similar as id attribute
- 21. The class attribute •Used to associate an element with a style sheet • Specifies the class of element • Will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS)
- 22. The style attribute •Allows us to specify Cascading Style Sheet (CSS) rules within the element
- 23. Internationalization Attributes • Thereare three internationalization attributes, which are available for most all XHTML elements • dir • lang • xml:lang
- 24. The dir Attribute •Allows you to indicate to the browser about the direction in which the text should flow • Can take one of two values, as we can see in the table that follows:
- 26. The lang Attribute •Allows us to indicate the main language used in a document • Was kept in HTML only for backwards compatibility with earlier versions of HTML • Has been replaced by the xml:lang attribute in new XHTML documents • Values of the lang attribute are ISO-639 standard two-character language codes
- 28. The xml:lang • Isthe XHTML replacement for the lang attribute • The value of the xml:lang attribute should be an ISO-639 country code
- 29.
- 31. HTML Formatting • BoldText • Italic Text • Underlined Text • Strike Text • Monospaced Font • Superscript Text • Subscript Text • Inserted Text • Deleted Text • Larger Text • Smaller Text
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Grouping Content • The<div> and <span> elements allow us to group together several elements to create sections or subsections of a page • For example, we might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes • We might then attach a style to this <div> element so that they appear using a special set of style rules
- 45. Phrase Tags • EmphasizedText • Marked Text • Strong Text • Text Abbreviation • Acronym Element • Text Direction • Special Terms • Quoting Text • Short Quotations • Text Citations • Computer Code • Address Text
- 46.
- 47.
- 48.
- 49.
- 50. Acronym Element Title ismissing from acronym
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. Meta Tags • Specifyadditional important information about a document • Can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc. • <meta> tag is used to provide such additional information • Is an empty element and so does not have a closing tag • Carries information within its attributes
- 59. • Can includeone or more meta tags in your document based on what information we want to keep in your document • Do not impact physical appearance of the document
- 61. Comments • Are placedin between <!-- ... --> tags • Any content placed with-in <!-- ... --> tags will be treated as comment and will be completely ignored by the browser
- 63.
- 64. Images • Insert Image •Set Image Location • Set Image Width/Height • Set Image Border • Set Image Alignment
- 65. Insert Image • Caninsert any image in web page by using <img> tag • Syntax:
- 67.
- 68.
- 69.
- 70.
- 71. Tables • Allow webauthors to arrange data like text, images, links, other tables, etc. into rows and columns • Are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells
- 73.
- 74. Cell Padding andCell Spacing
- 76. Colspan and RowspanAttributes
- 78. Tables Backgrounds • Canset table background using one of the following two ways: • bgcolor attribute - Can set background color for whole table or just for one cell • background attribute - Can set background image for whole table or just for one cell. • Can also set border color also using bordercolor attribute
- 81. Table Height andWidth
- 82.
- 83. Table Header, Body,and Footer • The three elements for separating the head, body, and foot of a table are: • <thead> - to create a separate table header. • <tbody> - to indicate the main body of the table. • <tfoot> - to create a separate table footer.
- 86. Nested Tables • Canuse one table inside another table. • Not only tables can use almost all the tags inside table data tag <td>
- 89. HTML LIST • Threeways for specifying lists of information • All lists must contain one or more list elements • Lists may contain: • <ul> • Unordered list • List items using plain bullets • <ol> • Ordered list • Use different schemes of numbers to list items • <dl> • Definition list • Arranges items in the same way as they are arranged in a dictionary
- 90.
- 91.
- 93.
- 94.
- 96.
- 98. Definition Lists • Supportedby both HTML and XHTML • Entries are listed like in a dictionary or encyclopedia • Ideal way to present a glossary, list of terms, or other name/value list • Definition List makes use of following three tags • <dl> - Defines the start of the list • <dt> - A term • <dd> - Term definition • </dl> - Defines the end of the list
- 100.
- 101.
- 103. Use of BasePath
- 104. Linking to aPage Section
- 105.
- 106.
- 107.
- 108. FRAMES • Are usedto divide browser window into multiple sections where each section can load a separate HTML document • A collection of frames in the browser window is known as a frameset • The window is divided into frames in a similar way the tables are organized: into rows and columns
- 109. Disadvantages of Frames •There are few drawbacks with using frames, so it's never recommended to use frames in your webpages: • Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up • Sometimes your page will be displayed differently on different computers due to different screen resolution • The browser's back button might not work as the user hopes • There are still few browsers that do not support frame technology
- 110. Creating Frames • Touse frames on a page we use <frameset> tag instead of <body> tag • The <frameset> tag defines, how to divide the window into frames • The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames • Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame
- 112.
- 114.
- 115. IFRAMES • Can definean inline frame with HTML tag <iframe> • The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document • The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. • The src attribute is used to specify the URL of the document that occupies the inline frame
- 117. FORMS • Are required,when we want to collect some data from the visitor • For example, during user registration we would like to collect information such as name, email address, credit card, etc. • Will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc • There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc
- 118.
- 119. Form Controls • Thereare different types of form controls that you can use to collect data using HTML form: • Text Input Controls • Checkboxes Controls • Radio Box Controls • Select Box Controls • File Select boxes • Hidden Controls • Submit and Reset Button
- 120. Text Input Controls •There are three types of text input used on forms: • Single-line text input controls • Used for items that require only one line of user input, such as search boxes or names • Created using HTML <input> tag • Password input controls • Also a single-line text input but it masks the character as soon as a user enters it • Are also created using HTML <input> tag • Multi-line text input controls • Used when the user is required to give details that may be longer than a single sentence • Are created using HTML <textarea> tag
- 121. Single-line text inputcontrols
- 123.
- 125. Multiple-Line Text InputControls
- 127. Checkbox Control • Areused when more than one option is required to be selected • Are also created using HTML <input> tag but type attribute is set to checkbox
- 130. Radio Button Control •Are used when out of many options, just one option is required to be selected • Are also created using HTML <input> tag but type attribute is set to radio
- 133. Select Box Control •A select box, also called drop down box which provides option to list down various options in the form of drop down list • User can select one or more options
- 134. • Following isthe list of important attributes of <select> tag:
- 135. • Following isthe list of important attributes of <option> tag:
- 137. File Upload Box •If we want to allow a user to upload a file to our web site, we will need to use a file upload box, also known as a file select box • Also created using the <input> element but type attribute is set to file
- 139. Button Controls • Variousways in HTML to create clickable buttons • Create a clickable button using <input> tag by setting its type attribute to button • The type attribute can take the following values:
- 140. Hidden Form Controls •Are used to hide data inside the page which later on can be pushed to the server • Hides inside the code and does not appear on the actual page