Recommended
More Related Content
Similar to Presentation 1 (1).pptx
Similar to Presentation 1 (1).pptx (20)
Recently uploaded
Recently uploaded (20)
Presentation 1 (1).pptx
- 1. HTML5 & CSS3
- 2. Topics to be covered : Introduction to HTML5 HTML5 Structure HTML5 Structural Elements HTML5 Input Types HTML5 Tags Introduction to CSS3 CSS3 Box-model CSS3 Properties References
- 3. Introduction to HTML5 : • HTML5 is the latest and most enhanced version of HTML. • HTML5 is a standard for structuring and presenting content on the World Wide Web. • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • The new standard features are video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.
- 5. HTML5 Structural Elements : • Header : The <header> tag in HTML is used to define the header for a document or a section. The header tag contains information related to the title and heading of the related content. • Footer : The <footer> element defines a footer for a document or section. • <nav> : The <nav> tag defines a set of navigation links. NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. • Article : The <article> tag is one of the new sectioning element in HTML5. The HTML <article> tag is used to represent an article. • Section : The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading.
- 6. HTML5 Input Types : • Different input types : button,checkbox,color,date,email,file,image,month, number, password, radio, reset, search, submit, te xt, time, url, week. • Audio and Video tags are the two major addition to HTML5. It allows developers to embed a video or audio on their website. • HTML5 allows to use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo. • In the case of HTML, we can use the browser as the temporary storage whereas, in the case of HTML5, application cache, web SQL database, and web storage is used.
- 7. HTML5 Tags : • <!DOCTYPE> : Specifies the document type. • <body> : Specifies the body element. • <frameset> : Specifies a set of frames. • <html> : Specifies an html document. • <plaintext> : Render the ramainder of the document as preformatted plain text. • <ruby> : Together with <rt> and <rp> allow for marking up ruby annotations.
- 8. Introduction to CSS3 : • CSS stands for Cascading Style Sheets. It is presentation language. • It is used for a decorate a webpage. • It is used for describing the presentation of a document. • CSS defines how HTML elements are to be displayed. • Basic syntax and structure:
- 9. Types of CSS : 1) Inline style : In inline style, Add the style attribute to the relevant tag. The style attribute can contain any CSS property. 2) Internal style sheet : It is used when a single document has a unique style. We define internal styles in the head section of an HTML. 3) External style sheet : Using an external style sheet, we can change the look of an entire Website by changing just one file. External style should not contain any html tags. HTML page must include a link to the style sheet with the <link> tag. The <link> tag use inside the head section.
- 10. CSS3 Box-model :
- 11. Box Model:
- 12. CSS3 Properties : • border-radius • box-shadow • text-shadow • text-stroke • background-size • text-overflow • Flexible Box Model • flex font-family Margin Opacity Padding Transform word-spacing z-index
- 14. Thank You