Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ HTML Training

Copyright © Osmosys Introduction - Role of HTML, CSS, JavaScript. - A brief intro to the HTTP's Request - Response cycle - Browsers do not understand PHP or ASP.NET. They only understand HTML, CSS and JavaScript.

Copyright © Osmosys What is HTML? - HTML is a markup language. Tells the browser what content to display. - HTML does not not tell the browser how to display things. That role belongs to CSS - HTML uses a predefined set of tags to identify content types. - How is XML different from HTML Important Note - Refer to MDN for reference and doubts clearing - Read documentation properly and completely.

Copyright © Osmosys What are tags? - HTML attaches special meaning to anything that starts with the less- than sign (" "). - HTML tags are predefined. - Should be written in lower case. - Some tags have opening(starting tags) and closing tags(ending tags) - Some tags have only opening tag. Eg :

Copyright © Osmosys What are elements? - An HTML Page consists of a set of elements. - Elements include everything between two matching element tags. Hello World - Some elements have very precise meaning, as in "this is an image", "this is a heading", or "this is an ordered list." - Others are less specific, such as "this is a section on the page" or "this is part of the text." - Yet others are used for technical reasons, such as "this is identifying information for the page that should not be displayed." - All HTML elements have a semantic value. That means they mean something to a browser. - Most elements may contain other elements, forming a hierarchical structure.

Copyright © Osmosys What are attributes? - Attributes are placed inside the starting tag. - Attributes contain additional information about the tag. For example the href attribute for the anchor tag. - Consist of key value pairs. Example : name = "", id = "", class="" - Values should be put inside quotes. Character Entities - HTML interprets the less-than and greater-than symbols as tag delimiters. So how would you show these ? " " - We use something called HTML entities - > and < There are also other entities. Such as &

Copyright © Osmosys Summary A summary of tags, attributes and their value.

Copyright © Osmosys Heirarchicy of an HTML Document

Copyright © Osmosys Proper nesting of tags - Tags must be properly nested. Otherwise they maybe incorrectly rendered by the browser. Valid I really mean that Invalid I really mean that

Copyright © Osmosys What is a DOCTYPE - What are W3 standards? - Why are they needed? - Browsers implement standards. - There are different versions of HTML - Tells the browser to interpret the HTML and CSS code according to W3C standards. Writing comments in HTML - Comments explain a piece of code. - To describe sections of the document.

Copyright © Osmosys A complete HTML document - Web page is basically a document tree. Important Note - An HTML document does not honour a newline. If you put a newline in your.html file, it won't appear in the browser.

Copyright © Osmosys Chrome Developer tools

Copyright © Osmosys Tags Section Div Paragraphs HeadingsImageLink Span Inline vs Block

Copyright © Osmosys Tags continued Lists – Ordered Unordered HeaderFooter Other tags - Break Line - Horizontal Rule - Emphasize - Strong - Superscript - Subscript

Copyright © Osmosys Important Attributes Disabled Readonly Name ID Input controls Other HTML elements

Copyright © Osmosys Forms Fieldset -> Legend Labels and Input controls Submit button

Copyright © Osmosys Input controls Select TextboxRadio buttons PasswordFileSubmit Checkboxes Textarea

Copyright © Osmosys Tables Table Rows CaptionFooterHeader Columns Heading Important Note - Do not use FRAMESETS or TABLES for layout. Frames are bad. Tables are meant for tabular data.

Copyright © Osmosys Some HTML 5 elements and attributes - s [input] - audio tag - video tag - color [input] - placeholder attribute - number [input]

Copyright © Osmosys - Do not use the tag. - While writing HTML ensure that you are writing semantically correct HTML. HTML is used to mark contents, while writing HTML do not worry about how your page looks. - Do not use tags to space out your content. This will be later taken care by the CSS. - While designing forms, use labels and the for attribute to group labels to their corresponding inputs. Conclusion