The details tag <details>

Slides:

Advertisements

Similar presentations

Introduction to HTML & CSS

Advertisements

WeB application development

XHTML Basics. What is XHTML? XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit.

Ch3: Introduction to HTML5 part 2 Dr. Abdullah Almutairi ISC 340 Fall 2014.

Chapter 14 Introduction to HTML

Meta Tags What are Meta Tags And How Are They Best Used?

  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements.

Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.

HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:

HTML Structure & syntax

SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.

Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),

All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.

Patroklos Patroklou George Antoniou Constantinos Kyprianou.

The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.

MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Basic HTML PowerPoint How Hyper Text Markup Language Works

HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.

  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements  Always name.

Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.

UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.

HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.

HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.

Browser Wars (Click on the logo to see the performance)

User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

ASP.NET – Active Server Pages ASP.NET is a server-side technology for developing web applications based on the.NET Framework.

Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.

HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.

U NIT 9 Level 2 Web Design. What does HTML stand for? HTML stands for Hypertext Markup Language and it is the language used by all web pages. It consists.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.

HTML Structure & syntax

HTML Structure & syntax

Basic HTML Introduction to HTML.

Pertemuan 1 Desain web Pertemuan 1

HTML Extra Markup CS 1150 Spring 2017.

Cascading Style Sheets

Using JavaScript to Show an Alert

Essential Tags Web Design – Sec 3-3

Intro to JavaScript CS 1150 Spring 2017.

Chapter 4: HTML5 Media - <video> & <audio>

Basic HTML PowerPoint How Hyper Text Markup Language Works

HTML 5 Tag By: Raul, Cordero.

Tutorial 5 Working with Tables and Columns

Essential Tags Web Design – Sec 3-3

Chapter 3 Introduction to HTML5: Part 2

IS333: MULTI-TIER APPLICATION DEVELOPMENT

Basic HTML PowerPoint How Hyper Text Markup Language Works

Essentials of Web Pages

Cascading Style Sheets

Introduction to Web Page Design

WEB PROGRAMMING JavaScript.

Lesson 1 The Web.

Secure Web Programming

Web Page Design CIS 300.

Introduction to HTML5.

Web Design and Development

Web Application Development

Events: Changed and Input

Pertemuan 1 Desain web Pertemuan 1

Creating a Basic Web Page using HTML

HTML Structure & syntax

WJEC GCSE Computer Science

Introduction to Web programming

Presentation transcript:

The details tag <details> Name: Fatima , Shabia Professor: Porps, Freddy Date:04/10/2018 Course: CS 300- Client Side

What is the <details> tag in HTML5 This tag is utilized to create details within a summary heading. The <details> tag specifies additional details that the user can view or hide on demand. This tag is also one of the sectioning root tags, which means that the sections and headings inside the element are not included in the outline of any higher level sections. The default format of this information is viewed similar to a dropdown list The default format of this tag is details { display: block; }

What is the purpose of this tag The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. This tag helps to keep your web page organized and keeps excessive information hidden until the viewer wants to view it. The content of a <details> element should not be visible unless the open attribute is set. Open attribute <details open> …(code)… </details>

What browsers support this tag’s usage Supported Firefox 49.0 Chrome 12.0 Safari 6.0 Opera 15.0 Not Supported Internet Explorer

How was this function done previously? The <details> tag is new in HTML5. Previously, something similar to it could have been long coded by utilizing a drop down list Additionally: The <details> tag supports the Global Attributes in HTML. The <details> tag supports the Event Attributes in HTML.

How to use this tag in code The <summary></summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details. <details> <summary>Places I Have Traveled Outside The United States</summary> <ul> <li>Pakistan</li> <li>Saudia Arabia</li> <li>Turkey</li> <li>Dubai</li> <li>Canada</li> <li>Jamaica</li> <li>London</li> </ul> </details> <details> <summary>Places I Have Traveled Within The United States</summary> <p>Florida</p> <p>New York</p> <p>Atlanta</p> <p>Michigan</p> <p>Kansas</p> <p>Missouri</p> <p>Kentucky</p> <p>Tennessee</p> <p>Texas</p> </details> http://homepages.neiu.edu/~ssfati11/detailstag.html

Works Cited “HTML <details> Tag.” HTML Details Tag, W3.CSS, www.w3schools.com/TAGS/tag_details.asp. “HTML Attribute Reference.” HTML 5 Reference for Web Designers, Accilent® Corp., 2014, www.html-5.com/attributes/index.html#global.