HTML5 Presentation PDF

What is HTML5 01 Difference of HTML5 and 02 other versions 03 Semantic Tags 04 Block and Inline elements 05 Multimedia Tags 06 HTML Forms 07 HTML Responsive HTML5 is the latest version of the HyperText Markup...

What is HTML5 01 Difference of HTML5 and 02 other versions 03 Semantic Tags 04 Block and Inline elements 05 Multimedia Tags 06 HTML Forms 07 HTML Responsive HTML5 is the latest version of the HyperText Markup Videos and music directly without extra plugins. Language, used to structure and present content on the web. It introduces new semantic elements, Graphics and animations with tools like canvas and WebGL. multimedia support, graphics capabilities , improved forms, offline features, and better cross-platform Better forms for input like dates and email. compatibility for modern web applications. Offline features so apps work without the internet. The other versions of HTML includes: Real-time communication for chats and video calls. 1. HTML 1.0 (1991) 2. HTML 2.0 (1995) 3. HTML 3.2 (1997) HTML5 is also designed to work well on all devices, 4. HTML 4.01 (1999) 5. XHTML (2000s) like phones, tablets, and computers. It’s simple and powerful for creating modern websites. Easy Multimedia: You can add videos and music to websites with simple tags like and. No extra software is needed. Interactive Graphics: Use to draw shapes, make animations, or create games directly on the webpage. Smarter Forms: HTML5 forms can validate emails, numbers, or dates automatically, making data entry faster and easier. Offline Access: Websites can store data on your device so you can use them even without an internet connection. Real-Time Features: HTML5 supports live chat, video calls, and multiplayer games with WebSockets and WebRTC. Mobile Friendly: It’s designed to work well on phones, tablets, and desktops without special changes. Improved Structure: New tags like , , and make websites more organized and accessible. DIFFERENCE OF HTML 5 AND OTHER VERSIONS  HTML1.0 (1991) MAIN FEATURES:BASIC DOCUMENT STRUCTURE (, , ). TEXT FORMATTING (, , , ETC.).HYPERLINKS (). LIMITATIONS:NO SUPPORT FOR MULTIMEDIA (AUDIO, VIDEO). NO FORM ELEMENTS LIKE BUTTONS OR INPUT TYPES.  HTML2.0 (1995) Main Features: Formalized structure for creating websites. Added support for forms, tables, and basic document attributes (like and ). Limitations: Lacked multimedia support (still no , ). Basic styling options.  HTML3.2 (1997) Main Features: CSS support: Style pages inline with CSS. JavaScript: Added support for interactive scripting. Tables for layout: Used extensively for designing page layouts. Limitations: Tables were misused for layout design, leading to cluttered code. Limited styling options compared to modern CSS.  HTML4.01 (1999) Main Features: Emphasized separating content (HTML) from design (CSS). Introduced concepts of accessibility and improved standards. Deprecated non-semantic tags (like ). Limitations: Still limited support for multimedia (video, audio). No native support for offline capabilities.  XHTML (2000s) Main Features: XML-based: Stricter syntax (e.g., tags must be lowercase and closed properly).Greater focus on structure and content accuracy. Limitations: Very strict syntax can be frustrating for developers. No support for newer multimedia features.  HTML5 Is the fifth and the modern version of Hypertext Markup Language (HTML). HTML5 Standardized best practices encourages a single set of best practices for web development.  Main Features of HTML5 Semantic Elements: New tags like , , , , and give structure to a webpage, making it more accessible. Multimedia Support: Built-in support for audio () and video (), no need for third-party plugins (like Flash). New Form Controls: New input types like date, email, and number help create better forms. HTML5 introduced many new APIs (local storage, geolocation, offline storage, etc.) to enhance functionality. - allows drawing and rendering graphics directly on the webpage. - HTML5 is optimized for mobile web development and responsive design.  HTML5 Differences Compared to Older Versions Structure: HTML5 introduced semantic elements to improve readability and SEO (e.g., , , ). Older versions lacked this structure. Multimedia: Older versions required plugins (like Flash) to show videos or play audio, while HTML5 has native support for and elements. Forms: HTML5 introduced new form types (like date, email, url) that older versions didn’t have. Mobile: HTML5 is designed to be mobile-friendly, while older versions didn’t have tools to handle responsive design. Semantic Tags KEY SEMANTIC TAGS 1. 6. 2. 7. 3. 8. 4. 9. 5. 10.  Website Title Home About  © 2024 My Company Main Article This is the core content of the webpage.  Breaking News Details about the news... Our Services Description of services...  Home Contact Related Articles Link 1  Description of the image Click for more info Additional hidden content.  Contact: [email protected] Block and Inline Elements in HTML Block Elements Block elements start on a new line and take up the full width available. Common examples include : , , and to. Code Example: Inline Elements Inline elements do not start on a new line and only take up as much width as necessary. Examples include , , and. Code Example: Differences Between Block and Inline Elements Block elements start on a new line and take up full width, while inline elements do not start on a new line and only take up as much width as needed. Block elements can contain other block and inline elements, but inline elements cannot contain block elements. Here's a practical example combining block and inline elements. Notice how the block element contains a paragraph, and the inline element is used within the paragraph. Code Example: Key differences and examples of block and inline elements in HTML: Block Elements Inline Elements Occupies full width: Takes up the Only occupies content width: Takes full width available, starting on a up only the space needed for new line. content. Can contain other block elements: Cannot contain block elements: Can nest other block elements. Cannot nest block elements. Typically used for structure: Define Typically used for text markup: Add the overall structure of a web page. styling or meaning to text.  Block Elements Inline Elements Examples: Examples: 1. div: Generic container 1. span: Generic inline container 2. p: Paragraph 2. a: Anchor (link) 3. h1-h6: Headings 3. img: Image 4. ul: Unordered list 4. input: Input field 5. ol: Ordered list 5. label: Label 6. table: Table 6. textarea: Text area 7. section: Section 7. select: Dropdown menu 8. article: Article 8. button: Button 9. header: Header 9. strong: Bold text 10. footer: Footer 10. em: Italic text Key Differences: Display property: Block elements have display: block:, while inline elements have display: inline;. Width and height: Block elements can have explicit width and height, while inline elements cannot. MULTIMEDIA TAGS  Multimedia comes in many different formats. It can be almost anything we can see, hear, or see, sunch as images, musics, sound, videos, records, films, animations, and more. Webpages often contain multimedia elements of different types and formats. Multimedia elements like videos and audio are stored in media files. The most common way to discover the type of files, is to look qt the file extension. Multimedia files have formats and different extensions like:.wav,.mp3,.mp4,.mpg,.wmv, and.avi. has many formats out there, In Audio the best format to use MP4, WebM, and Ogg formats is MP3 for compressed are supported by html. recorded music and it is the Additionally MP4 format is commonly used as a file recommended by YouTube extension. Moreover only MP3, and is commonly used as file WAV, and Ogg audio are extension. supported by the HTML standard. HTML5 introduced 5 most popular media element tags i.e. , , , ,. These media element tags changed the entire development using HTML The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The element allows you to specify alternative audio and video files which the browser may choose from. The browser will use the first recognized format.  An inline element is used to embed sound files into a web Used to embed video files into page. a web page.  An inline element is used to embed sound files into a web Used to embed video files into page. a web page. Used to attach multimedia files like audio, video, and pictures. Tag defines a container for an Example: external resource, such as a web page, a picture, a media player, or a plug-in application.  tag specifies text tracks for or elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing. Kind=" ": Specifies the kind of text track. srclang=" ": Specifies the language of the track (required if kind="subtitles") > Plugins are no longer required > Speed – anything naturally integrated into a browser will be rendered and executed in a faster fashion than imported third-party > Native (built-in) controls are provided by the browser.  DEFINITION: HTML forms use the ‘’ tag to collect user input, enabling interaction on web pages. INTERACTIVE CONTROLS: Supports various controls like text fields, checkboxes, radio buttons, etc. STRUCTURE: The element acts as a container for input elements. SYNTAX: : Defines labels for form elements. SYNTAX: : Captures various types of input (text, password, email, etc.). SYNTAX: : Defines a clickable button. SYNTAX: : Creates a drop-down list. SYNTAX: : For multi-line text input. SYNTAX: : Groups related elements. SYNTAX: : Caption for fieldset elements. SYNTAX: CODE: OUTPUT: text: Single-line text input SYNTAX: password: Input that hides the text entered. SYNTAX: email: Input for email addresses. SYNTAX: checkbox: Allows multiple selections. SYNTAX: radio: Allows a single selection from a group. SYNTAX: number: Numeric input with min/max values. SYNTAX: date: Date picker. SYNTAX: file: File upload. SYNTAX: CODE: OUTPUT: action: URL to send form data. SYNTAX: method: HTTP method (GET or POST). SYNTAX: target: Where to display the response (e.g., _blank, _self, _parent, _top). SYNTAX: CODE: OUTPUT: required: Input must be filled. SYNTAX: readonly: Input cannot be modified. SYNTAX: disabled: Input is unusable. SYNTAX: maxlength: Maximum number of characters allowed. SYNTAX: pattern: Regular expression for validation. SYNTAX: CODE: OUTPUT: HTML RESPONSIVE  HTML RESPONSIVE WEB DESIGN INTRODUCTION Html Responsive Web Design is a modern approach to web development that ensures web pages look great on any devices, from phones and tablets to desktop computers. This approach guarantees a seamless and visually appealing users experience accross various devices. A reaponsive web design will automatically adjust for different screen sizes and viewports. WHAT IS RESPONSIVE WEB DESIGN Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarger a website to make it look good on all devices ( desktop, tablets, and phones.)  SETTING THE VIEWPORT To create a responsive website, add the following tag to all your web pages EXAMPLE: Without the viewport With the viewport meta tag: meta tag:  RESPONSIVE IMAGES Responsive are images that scale nicely to fit any browser size. Images can be responsive using the width or max width CSS properties USING THE WIDTH PROPERTY AND MAX-WIDTH PROPERTY width property: If the CSS width property is set to 100% the image will be responsive and scale up and down. max-width property: If the max-width property is set to 100% the image will scale down if it has to, but never scale up to be larger than its original size. Example of using the width and max-width property WIDTH PROPERTY difference between width and max width property  max-width sets a maximum width. MAX-WIDTH PROPERTY   RESPONSIVE TEXT SIZE Using the the "vw" unit font size which means " viewport", allows text to scale propotionally with the browser window size. for example: Hello World this means the text will take up 10% of the browser window's width Resize the browser window to see how the text size scales