W3C Strategic Highlights September 2019 This report was prepared for the September 2019 W3C Advisory Committee Meeting (W3C Member link). See the accompanying W3C Fact Sheet — September 2019. For the previous edition, see the April 2019 W3C Strategic Highlights. For future editions of this report, please consult the latest version. A Chinese translation is available. ☰ Contents Introduction Future Web Standards Meeting Industry Needs Web Payments Digital Publishing Media and Entertainment Web & Telecommunications Real-Time Communications (WebRTC) Web & Networks Automotive Web of Things Strengthening the Core of the Web HTML CSS Fonts SVG Audio Performance Web Performance WebAssembly Testing Browser Testing and Tools WebPlatform Tests Web of Data Web for All Security, Privacy, Identity Internationalization (i18n) Web Accessibility Outreach to the world W3C Developer Relations W3C Training Translations W3C Liaisons Introduction This report highlights recent work of enhancement of the existing landscape of the Web platform and innovation for the growth and strength of the Web. 33 working groups and a dozen interest groups enable W3C to pursue its mission through the creation of Web standards, guidelines, and supporting materials. We track the tremendous work done across the Consortium through homogeneous work-spaces in Github which enables better monitoring and management. We are in the middle of a period where we are chartering numerous working groups which demonstrate the rapid degree of change for the Web platform: After 4 years, we are nearly ready to publish a Payment Request API Proposed Recommendation and we need to soon charter follow-on work. In the last year we chartered the Web Payment Security Interest Group. In the last year we chartered the Web Media Working Group with 7 specifications for next generation Media support on the Web. We have Accessibility Guidelines under W3C Member review which includes Silver, a new approach. We have just launched the Decentralized Identifier Working Group which has tremendous potential because Decentralized Identifier (DID) is an identifier that is globally unique, resolveable with high availability, and cryptographically verifiable. We have Privacy IG (PING) under W3C Member review which strengthens our focus on the tradeoff between privacy and function. We have a new CSS charter under W3C Member review which maps the group's work for the next three years. In this period, W3C and the WHATWG have succesfully completed the negotiation of a Memorandum of Understanding rooted in the mutual belief that that having two distinct specifications claiming to be normative is generally harmful for the Web community. The MOU, signed last May, describes how the two organizations are to collaborate on the development of a single authoritative version of the HTML and DOM specifications. W3C subsequently rechartered the HTML Working Group to assist the W3C community in raising issues and proposing solutions for the HTML and DOM specifications, and for the production of W3C Recommendations from WHATWG Review Drafts. As the Web evolves continuously, some groups are looking for ways for specifications to do so as well. So-called "evergreen recommendations" or "living standards" aim to track continuous development (and maintenance) of features, on a feature-by-feature basis, while getting review and patent commitments. We see the maturation and further development of an incredible number of new technologies coming to the Web. Continued progress in many areas demonstrates the vitality of the W3C and the Web community, as the rest of the report illustrates. Future Web Standards W3C has a variety of mechanisms for listening to what the community thinks could become good future Web standards. These include discussions with the Membership, discussions with other standards bodies, the activities of thousands of participants in over 300 community groups, and W3C Workshops. There are lots of good ideas. The W3C strategy team has been identifying promising topics and invites public participation. Future, recent and under consideration Workshops include: Inclusive XR (5-6 November 2019, Seattle, WA, USA) to explore existing and future approaches on making Virtual and Augmented Reality experiences more inclusive, including to people with disabilities; W3C Workshop on Data Models for Transportation (12-13 September 2019, Palo Alto, CA, USA) W3C Workshop on Web Games (27-28 June 2019, Redmond, WA, USA), view report Second W3C Workshop on the Web of Things (3-5 June 2019, Munich, Germany) W3C Workshop on Web Standardization for Graph Data; Creating Bridges: RDF, Property Graph and SQL (4-6 March 2019, Berlin, Germany), view report Web & Machine Learning. The Strategy Funnel documents the staff's exploration of potential new work at various phases: Exploration and Investigation, Incubation and Evaluation, and eventually to the chartering of a new standards group. The Funnel view is a GitHub Project where new area are issues represented by “cards” which move through the columns, usually from left to right. Most cards start in Exploration and move towards Chartering, or move out of the funnel. Public input is welcome at any stage but particularly once Incubation has begun. This helps W3C identify work that is sufficiently incubated to warrant standardization, to review the ecosystem around the work and indicate interest in participating in its standardization, and then to draft a charter that reflects an appropriate scope. Ongoing feedback can speed up the overall standardization process. Since the previous highlights document, W3C has chartered a number of groups, and started discussion on many more: Newly Chartered or Rechartered Web Application Security WG (03-Apr) Web Payment Security IG (17-Apr) Patent and Standards IG (24-Apr) Web Applications WG (14-May) Web & Networks IG (16-May) Media WG (23-May) Media and Entertainment IG (06-Jun) HTML WG (06-Jun) Decentralized Identifier WG (05-Sep) Extended Privacy IG (PING) (30-Sep) Verifiable Claims WG (30-Sep) Service Workers WG (31-Dec) Dataset Exchange WG (31-Dec) Web of Things Working Group (31-Dec) Web Audio Working Group (31-Dec) Proposed charters / Advance Notice Accessibility Guidelines WG Privacy IG (PING) RDF Literal Direction WG Timed Text WG CSS WG Web Authentication WG Closed Internationalization Tag Set IG Meeting Industry Needs Web Payments All Web Payments specifications W3C's payments standards enable a streamlined checkout experience, enabling a consistent user experience across the Web with lower front end development costs for merchants. Users can store and reuse information and more quickly and accurately complete online transactions. The Web Payments Working Group has republished Payment Request API as a Candidate Recommendation, aiming to publish a Proposed Recommendation in the Fall 2019, and is discussing use cases and features for Payment Request after publication of the 1.0 Recommendation. Browser vendors have been finalizing implementation of features added in the past year (view the implementation report). As work continues on the Payment Handler API and its implementation (currently in Chrome and Edge Canary), one focus in 2019 is to increase adoption in other browsers. Recently, Mastercard demonstrated the use of Payment Request API to carry out EMVCo's Secure Remote Commerce (SRC) protocol whose payment method definition is being developed with active participation by Visa, Mastercard, American Express, and Discover. Payment method availability is a key factor in merchant considerations about adopting Payment Request API. The ability to get uniform adoption of a new payment method such as Secure Remote Commerce (SRC) also depends on the availability of the Payment Handler API in browsers, or of proprietary alternatives. Web Monetization, which the Web Payments Working Group will discuss again at its face-to-face meeting in September, can be used to enable micropayments as an alternative revenue stream to advertising. Since the beginning of 2019, Amazon, Brave Software, JCB, Certus Cybersecurity Solutions and Netflix have joined the Web Payments Working Group. In April, W3C launched the Web Payment Security Group to enable W3C, EMVCo, and the FIDO Alliance to collaborate on a vision for Web payment security and interoperability. Participants will define areas of collaboration and identify gaps between existing technical specifications in order to increase compatibility among different technologies, such as: How do SRC, FIDO, and Payment Request relate? The Payment Services Directive 2 (PSD2) regulations in Europe are scheduled to take effect in September 2019. What is the role of EMVCo, W3C, and FIDO technologies, and what is the current state of readiness for the deadline? How can we improve privacy on the Web at the same time as we meet industry requirements regarding user identity? Digital Publishing All Digital Publishing specifications, Publication milestones The Web is the universal publishing platform. Publishing is increasingly impacted by the Web, and the Web increasingly impacts Publishing. Topic of particular interest to Publishing@W3C include typography and layout, accessibility, usability, portability, distribution, archiving, offline access, print on demand, and reliable cross referencing. And the diverse publishing community represented in the groups consist of the traditional "trade" publishers, ebook reading system manufacturers, but also publishers of audio book, scholarly journals or educational materials, library scientists or browser developers. The Publishing Working Group currently concentrates on Audiobooks which lack a comprehensive standard, thus incurring extra costs and time to publish in this booming market. Active development is ongoing on the future standard: Publication Manifest Audiobook profile for Web Publications Lightweight Packaging Format The BD Comics Manga Community Group, the Synchronized Multimedia for Publications Community Group, the Publishing Community Group and a future group on archival, are companions to the working group where specific work is developed and incubated. The Publishing Community Group is a recently launched incubation channel for Publishing@W3C. The goal of the group is to propose, document, and prototype features broadly related to: publications on the Web reading modes and systems and the user experience of publications The EPUB 3 Community Group has successfully completed the revision of EPUB 3.2. The Publishing Business Group fosters ongoing participation by members of the publishing industry and the overall ecosystem in the development of Web infrastructure to better support the needs of the industry. The Business Group serves as an additional conduit to the Publishing Working Group and several Community Groups for feedback between the publishing ecosystem and W3C. The Publishing BG has played a vital role in fostering and advancing the adoption and continued development of EPUB 3. In particular the BG provided critical support to the update of EPUBCheck to validate EPUB content to the new EPUB 3.2 specification. This resulted in the development, in conjunction with the EPUB3 Community Group, of a new generation of EPUBCheck, i.e., EPUBCheck 4.2 production-ready release. Media and Entertainment All Media specifications The Media and Entertainment vertical tracks media-related topics and features that create immersive experiences for end users. HTML5 brought standard audio and video elements to the Web. Standardization activities since then have aimed at turning the Web into a professional platform fully suitable for the delivery of media content and associated materials, enabling missing features to stream video content on the Web such as adaptive streaming and content protection. Together with Microsoft, Comcast, Netflix and Google, W3C received an Technology & Engineering Emmy Award in April 2019 for standardization of a full TV experience on the Web. Current goals are to: Reinforce core media technologies: Creation of the Media Working Group, to develop media-related specifications incubated in the WICG (e.g. Media Capabilities, Picture-in-picture, Media Session) and maintain maintain/evolve Media Source Extensions (MSE) and Encrypted Media Extensions (EME). Improve support for Media Timed Events: data cues incubation. Enhance color support (HDR, wide gamut), in scope of the CSS WG and in the Color on the Web CG. Reduce fragmentation: Continue annual releases of a common and testable baseline media devices, in scope of the Web Media APIs CG and in collaboration with the CTA WAVE Project. Maintain the Road-map of Media Technologies for the Web which highlights Web technologies that can be used to build media applications and services, as well as known gaps to enable additional use cases. Create the future: Discuss perspectives for Media and Entertainment for the Web. Bring the power of GPUs to the Web (graphics, machine learning, heavy processing), under incubation in the GPU for the Web CG. Transition to a Working Group is under discussion. Determine next steps after the successful W3C Workshop on Web Games of June 2019. View the report. Timed Text The Timed Text Working Group develops and maintains formats used for the representation of text synchronized with other timed media, like audio and video, and notably works on TTML, profiles of TTML, and WebVTT. Recent progress includes: A robust WebVTT implementation report poises the specification for publication as a proposed recommendation. Discussions around re-chartering, notably to add a TTML Profile for Audio Description deliverable to the scope of the group, and clarify that rendering of captions within XR content is also in scope. Immersive Web Hardware that enables Virtual Reality (VR) and Augmented Reality (AR) applications are now broadly available to consumers, offering an immersive computing platform with both new opportunities and challenges. The ability to interact directly with immersive hardware is critical to ensuring that the web is well equipped to operate as a first-class citizen in this environment. The Immersive Web Working Group has been stabilizing the WebXR Device API while the companion Immersive Web Community Group incubates the next series of features identified as key for the future of the Immersive Web. W3C plans a workshop focused on the needs and benefits at the intersection of VR & Accessibility (Inclusive XR), on 5-6 November 2019 in Seattle, WA, USA, to explore existing and future approaches on making Virtual and Augmented Reality experiences more inclusive. Web & Telecommunications The Web is the Open Platform for Mobile. Telecommunication service providers and network equipment providers have long been critical actors in the deployment of Web technologies. As the Web platform matures, it brings richer and richer capabilities to extend existing services to new users and devices, and propose new and innovative services. Real-Time Communications (WebRTC) All Real-Time Communications specifications WebRTC has reshaped the whole communication landscape by making any connected device a potential communication end-point, bringing audio and video communications anywhere, on any network, vastly expanding the ability of operators to reach their customers. WebRTC serves as the corner-stone of many online communication and collaboration services. The WebRTC Working Group aims to bringing WebRTC 1.0 (and companion specification Media Capture and Streams) to Recommendation by the end of 2019. Intense efforts are focused on testing (supported by a dedicated hackathon at IETF 104) and interoperability. The group is considering pushing features that have not gotten enough traction to separate modules or to a later minor revision of the spec. Beyond WebRTC 1.0, the WebRTC Working Group will focus its efforts on WebRTC NV which the group has started documenting by identifying use cases. Web & Networks Recently launched, in the wake of the May 2018 Web5G workshop, the Web & Networks Interest Group is chaired by representatives from AT&T, China Mobile and Intel, with a goal to explore solutions for web applications to achieve better performance and resource allocation, both on the device and network. The group's first efforts are around use cases, privacy & security requirements and liaisons. Automotive All Automotive specifications To create a rich application ecosystem for vehicles and other devices allowed to connect to the vehicle, the W3C Automotive Working Group is delivering a service specification to expose all common vehicle signals (engine temperature, fuel/charge level, range, tire pressure, speed, etc.) The Vehicle Information Service Specification (VISS), which is a Candidate Recommendation, is seeing more implementations across the industry. It provides the access method to a common data model for all the vehicle signals –presently encapsulating a thousand or so different data elements– and will be growing to accommodate the advances in automotive such as autonomous and driver assist technologies and electrification. The group is already working on a successor to VISS, leveraging the underlying data model and the VIWI submission from Volkswagen, for a more robust means of accessing vehicle signals information and the same paradigm for other automotive needs including location-based services, media, notifications and caching content. The Automotive and Web Platform Business Group acts as an incubator for prospective standards work. One of its task forces is using W3C VISS in performing data sampling and off-boarding the information to the cloud. Access to the wealth of information that W3C's auto signals standard exposes is of interest to regulators, urban planners, insurance companies, auto manufacturers, fleet managers and owners, service providers and others. In addition to components needed for data sampling and edge computing, capturing user and owner consent, information collection methods and handling of data are in scope. The upcoming W3C Workshop on Data Models for Transportation (September 2019) is expected to focus on the need of additional ontologies around transportation space. Web of Things All Web of Things specifications W3C's Web of Things work is designed to bridge disparate technology stacks to allow devices to work together and achieve scale, thus enabling the potential of the Internet of Things by eliminating fragmentation and fostering interoperability. Thing descriptions expressed in JSON-LD cover the behavior, interaction affordances, data schema, security configuration, and protocol bindings. The Web of Things complements existing IoT ecosystems to reduce the cost and risk for suppliers and consumers of applications that create value by combining multiple devices and information services. There are many sectors that will benefit, e.g. smart homes, smart cities, smart industry, smart agriculture, smart healthcare and many more. The Web of Things Working Group is finishing the initial Web of Things standards, with support from the Web of Things Interest Group: Web of Things Architecture Thing Descriptions Strengthening the Core of the Web HTML The HTML Working Group was chartered early June to assist the W3C community in raising issues and proposing solutions for the HTML and DOM specifications, and to produce W3C Recommendations from WHATWG Review Drafts. A few days before, W3C and the WHATWG signed a Memorandum of Understanding outlining the agreement to collaborate on the development of a single version of the HTML and DOM specifications. Issues and proposed solutions for HTML and DOM done via the newly rechartered HTML Working Group in the WHATWG repositories The HTML Working Group is targetting November 2019 to bring HTML and DOM to Candidate Recommendations. CSS All CSS specifications CSS is a critical part of the Open Web Platform. The CSS Working Group gathers requirements from two large groups of CSS users: the publishing industry and application developers. Within W3C, those groups are exemplified by the Publishing groups and the Web Platform Working Group. The former requires things like better pagination support and advanced font handling, the latter needs intelligent (and fast!) scrolling and animations. What we know as CSS is actually a collection of almost a hundred specifications, referred to as ‘modules’. The current state of CSS is defined by a snapshot, updated once a year. The group also publishes an index defining every term defined by CSS specifications. Fonts All Fonts specifications The Web Fonts Working Group develops specifications that allow the interoperable deployment of downloadable fonts on the Web, with a focus on Progressive Font Enrichment as well as maintenance of WOFF Recommendations. Recent and ongoing work includes: Early API experiments by Adobe and Monotype have demonstrated the feasibility of a font enrichment API, where a server delivers a font with minimal glyph repertoire and the client can query the full repertoire and request additional subsets on-the-fly. In other experiments, the Brotli compression used in WOFF 2 was extended to support shared dictionaries and patch update. Metrics to quantify improvement are a current hot discussion topic. The group will meet at ATypi 2019 in Japan, to gather requirements from the international typography community. The group will first produce a report summarizing the strengths and weaknesses of each prototype solution by Q2 2020. SVG All SVG specifications SVG is an important and widely-used part of the Open Web Platform. The SVG Working Group focuses on aligning the SVG 2.0 specification with browser implementations, having split the specification into a currently-implemented 2.0 and a forward-looking 2.1. Current activity is on stabilization, increased integration with the Open Web Platform, and test coverage analysis. The Working Group was rechartered in March 2019. A new work item concerns native (non-Web-browser) uses of SVG as a non-interactive, vector graphics format. Audio The Web Audio Working Group was extended to finish its work on the Web Audio API, expecting to publish it as a Recommendation by year end. The specification enables synthesizing audio in the browser. Audio operations are performed with audio nodes, which are linked together to form a modular audio routing graph. Multiple sources — with different types of channel layout — are supported. This modular design provides the flexibility to create complex audio functions with dynamic effects. The first version of Web Audio API is now feature complete and is implemented in all modern browsers. Work has started on the next version, and new features are being incubated in the Audio Community Group. Performance Web Performance All Web Performance specifications There are currently 18 specifications in development in the Web Performance Working Group aiming to provide methods to observe and improve aspects of application performance of user agent features and APIs. The W3C team is looking at related work incubated in the W3C GPU for the Web (WebGPU) Community Group which is poised to transition to a W3C Working Group. A preliminary draft charter is available. WebAssembly All WebAssembly specifications WebAssembly improves Web performance and power by being a virtual machine and execution environment enabling loaded pages to run native (compiled) code. It is deployed in Firefox, Edge, Safari and Chrome. The specification will soon reach Candidate Recommendation. WebAssembly enables near-native performance, optimized load time, and perhaps most importantly, a compilation target for existing code bases. While it has a small number of native types, much of the performance increase relative to Javascript derives from its use of consistent typing. WebAssembly leverages decades of optimization for compiled languages and the byte code is optimized for compactness and streaming (the web page starts executing while the rest of the code downloads). Network and API access all occurs through accompanying Javascript libraries -- the security model is identical to that of Javascript. Requirements gathering and language development occur in the Community Group while the Working Group manages test development, community review and progression of specifications on the Recommendation Track. Testing Browser testing plays a critical role in the growth of the Web by: Improving the reliability of Web technology definitions; Improving the quality of implementations of these technologies by helping vendors to detect bugs in their products; Improving the data available to Web developers on known bugs and deficiencies of Web technologies by publishing results of these tests. Browser Testing and Tools The Browser Testing and Tools Working Group is developing WebDriver version 2, having published last year the W3C Recommendation of WebDriver. WebDriver acts as a remote control interface that enables introspection and control of user agents, provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behavior of Web, and emulates the actions of a real person using the browser. WebPlatform Tests The WebPlatform Tests project now provides a mechanism which allows to fully automate tests that previously needed to be run manually: TestDriver. TestDriver enables sending trusted key and mouse events, sending complex series of trusted pointer and key interactions for things like in-content drag-and-drop or pinch zoom, and even file upload. Since 2014 W3C began work on this coordinated open-source effort to build a cross-browser test suite for the Web Platform, which WHATWG, and all major browsers adopted. Web of Data All Data specifications There have been several great success stories around the standardization of data on the web over the past year. Verifiable Claims seems to have significant uptake. It is also significant that the Distributed Identifier WG charter has received numerous favorable reviews, and was just recently launched. JSON-LD has been a major success with the large deployment on Web sites via schema.org. JSON-LD 1.1 completed technical work, about to transition to CR More than 25% of websites today include schema.org data in JSON-LD The Web of Things description is in CR since May, making use of JSON-LD Verifiable Credentials data model is in CR since July, also making use of JSON-LD Continued strong interest in decentralized identifiers Engagement from the TAG with reframing core documents, such as Ethical Web Principles, to include data on the web within their scope Data is increasingly important for all organizations, especially with the rise of IoT and Big Data. W3C has a mature and extensive suite of standards relating to data that were developed over two decades of experience, with plans for further work on making it easier for developers to work with graph data and knowledge graphs. Linked Data is about the use of URIs as names for things, the ability to dereference these URIs to get further information and to include links to other data. There are ever-increasing sources of open Linked Data on the Web, as well as data services that are restricted to the suppliers and consumers of those services. The digital transformation of industry is seeking to exploit advanced digital technologies. This will facilitate businesses to integrate horizontally along the supply and value chains, and vertically from the factory floor to the office floor. W3C is seeking to make it easier to support enterprise-wide data management and governance, reflecting the strategic importance of data to modern businesses. Traditional approaches to data have focused on tabular databases (SQL/RDBMS), Comma Separated Value (CSV) files, and data embedded in PDF documents and spreadsheets. We're now in midst of a major shift to graph data with nodes and labeled directed links between them. Graph data is: Faster than using SQL and associated JOIN operations More favorable to integrating data from heterogeneous sources Better suited to situations where the data model is evolving In the wake of the recent W3C Workshop on Graph Data we are in the process of launching a Graph Standardization Business Group to provide a business perspective with use cases and requirements, to coordinate technical standards work and liaisons with external organizations. Web for All Security, Privacy, Identity All Security specifications, all Privacy specifications Authentication on the Web As the WebAuthn Level 1 W3C Recommendation published last March is seeing wide implementation and adoption of strong cryptographic authentication, work is proceeding on Level 2. The open standard Web API gives native authentication technology built into native platforms, browsers, operating systems (including mobile) and hardware, offering protection against hacking, credential theft, phishing attacks, thus aiming to end the era of passwords as a security construct. You may read more in our March press release. Privacy An increasing number of W3C specifications are benefitting from Privacy and Security review; there are security and privacy aspects to every specification. Early review is essential. Working with the TAG, the Privacy Interest Group has updated the Self-Review Questionnaire: Security and Privacy. Other recent work of the group includes public blogging further to the exploration of anti-patterns in standards and permission prompts. Security The Web Application Security Working Group adopted Feature Policy, aiming to allow developers to selectively enable, disable, or modify the behavior of some of these browser features and APIs within their application; and Fetch Metadata, aiming to provide servers with enough information to make a priori decisions about whether or not to service a request based on the way it was made, and the context in which it will be used. The Web Payment Security Interest Group, launched last April, convenes members from W3C, EMVCo, and the FIDO Alliance to discuss cooperative work to enhance the security and interoperability of Web payments (read more about payments). Internationalization (i18n) All Internationalization specifications, educational articles related to Internationalization, spec developers checklist Only a quarter or so current Web users use English online and that proportion will continue to decrease as the Web reaches more and more communities of limited English proficiency. If the Web is to live up to the "World Wide" portion of its name, and for the Web to truly work for stakeholders all around the world engaging with content in various languages, it must support the needs of worldwide users as they engage with content in the various languages. The growth of epublishing also brings requirements for new features and improved typography on the Web. It is important to ensure the needs of local communities are captured. The W3C Internationalization Initiative was set up to increase in-house resources dedicated to accelerating progress in making the World Wide Web "worldwide" by gathering user requirements, supporting developers, and education & outreach. For an overview of current projects see the i18n radar. W3C's Internationalization efforts progressed on a number of fronts recently: Requirements: New African and European language groups will work on the gap analysis, errata and layout requirements. Gap analysis: Japanese, Devanagari, Bengali, Tamil, Lao, Khmer, Javanese, and Ethiopic updated in the gap-analysis documents. Layout requirements document: notable progress tracked in the Southeast Asian Task Force while work continues on Chinese layout requirements. Developer support: Spec reviews: the i18n WG continues active review of specifications of the WHATWG and other W3C Working Groups. Short review checklist: easy way to begin a self-review to help spec developers understand what aspects of their spec are likely to need attention for internationalization, and points them to more detailed checklists for the relevant topics. It also helps those reviewing specs for i18n issues. Strings on the Web: Language and Direction Metadata lays out issues and discusses potential solutions for passing information about language and direction with strings in JSON or other data formats. The document was rewritten for clarity, and expanded. The group is collaborating with the JSON-LD and Web Publishing groups to develop a plan for updating RDF, JSON-LD and related specifications to handle metadata for base direction of text (bidi). User-friendly test format: a new format was developed for Internationalization Test Suite tests, which displays helpful information about how the test works. This particularly useful because those tests are pointed to by educational materials and gap-analysis documents. Web Platform Tests: a large number of tests in the i18n test suite have been ported to the WPT repository, including: css-counter-styles, css-ruby, css-syntax, css-test, css-text-decor, css-writing-modes, and css-pseudo. Education & outreach: (for all educational materials, see the HTML & CSS Authoring Techniques) Web Accessibility All Accessibility specifications, WAI resources The Web Accessibility Initiative supports W3C's Web for All mission. Recent achievements include: Education and training: Inaccessibility of CAPTCHA updated to bring our analysis and recommendations up to date with CAPTCHA practice today, concluding two years of extensive work and invaluable input from the public (read more on the W3C Blog Learn why your web content and applications should be accessible. The Education and Outreach Working Group has completed revision and updating of the Business Case for Digital Accessibility. Accessibility guidelines: The Accessibility Guidelines Working Group has continued to update WCAG Techniques and Understanding WCAG 2.1; and published a Candidate Recommendation of Accessibility Conformance Testing Rules Format 1.0 to improve inter-rater reliability when evaluating conformance of web content to WCAG An updated charter is being developed to host work on "Silver", the next generation accessibility guidelines (WCAG 2.2) There are accessibility aspects to most specifications. Check your work with the FAST checklist. Outreach to the world W3C Developer Relations To foster the excellent feedback loop between Web Standards development and Web developers, and to grow participation from that diverse community, recent W3C Developer Relations activities include: @w3cdevs tracks the enormous amount of work happening across W3C W3C Track during the Web Conference 2019 in San Francisco Tech videos: W3C published the 2019 Web Games Workshop videos The 16 September 2019 Developer Meetup in Fukuoka, Japan, is open to all and will combine a set of technical demos prepared by W3C groups, and a series of talks on a selected set of W3C technologies and projects W3C is involved with Mozilla, Google, Samsung, Microsoft and Bocoup in the organization of ViewSource 2019 in Amsterdam (read more on the W3C Blog) W3C Training In partnership with EdX, W3C's MOOC training program, W3Cx offers a complete "Front-End Web Developer" (FEWD) professional certificate program that consists of a suite of five courses on the foundational languages that power the Web: HTML5, CSS and JavaScript. We count nearly 900K students from all over the world. Translations Many Web users rely on translations of documents developed at W3C whose official language is English. W3C is extremely grateful to the continuous efforts of its community in ensuring our various deliverables in general, and in our specifications in particular, are made available in other languages, for free, ensuring their exposure to a much more diverse set of readers. Last Spring we developed a more robust system, a new listing of translations of W3C specifications and updated the instructions on how to contribute to our translation efforts. W3C Liaisons Liaisons and coordination with numerous organizations and Standards Development Organizations (SDOs) is crucial for W3C to: make sure standards are interoperable coordinate our respective agenda in Internet governance: W3C participates in ICANN, GIPO, IGF, the I* organizations (ICANN, IETF, ISOC, IAB). ensure at the government liaison level that our standards work is officially recognized when important to our membership so that products based on them (often done by our members) are part of procurement orders. W3C has ARO/PAS status with ISO. W3C participates in the EU MSP and Rolling Plan on Standardization ensure the global set of Web and Internet standards form a compatible stack of technologies, at the technical and policy level (patent regime, fragmentation, use in policy making) promote Standards adoption equally by the industry, the public sector, and the public at large Coralie Mercier, Editor, W3C Marketing & Communications $Id: Overview.html,v 1.60 2019/10/15 12:05:52 coralie Exp $ Copyright © 2019 W3C ® (MIT, ERCIM, Keio, Beihang) Usage policies apply.

No description available

Online Examination System Today Online Examination System has become a fast growing examination method because of its speed and accuracy. It is also needed less manpower to execute the examination. Almost all organizations now-a-days, are conducting their objective exams by online examination system, it saves students time in examinations. Organizations can also easily check the performance of the student that they give in an examination. As a result of this, organizations are releasing results in less time. It also helps the environment by saving paper. According to today’s requirement, online examination project in php is very useful to learn it. What is an online examination system? In an online examination system examine get their user id and password with his/her admit card. This id is already saved in the examination server. When examine login to the server he/she get his/her profile already register. On the certain time examine gets the message to start the examination. All answers given by examine are saved into the server with his/her profile information. Online examination system also allows to correct the answer if the examine needed to change any answer in the examination time duration, however, after the time duration any change will not allow. This also makes c checking the answer easy and error proof as computers are more accurate than man and provide fast results too. Php is a web base language so we can create an online examination system in PHP. Administrator of Online Examination has multiple features such as Add, Delete, Update Topics and Question. To Login as Admin put inside your browser "http://www.applicationname/admin" The user will automatically get the updated version by logging using the user ID and Password provided at the time of registration. No need of reprinting,appearance,vigilance and the job is done. Online examination system features Login system must be present and secured by password. Ability to save the answer given by the candidate along with the question. Answer checking system should be available. Could Update Profile Log out after the over. Admin Panel Project objective: Online examination system is a non removable examination pattern of today’s life. We need more time saving and more accurate examination system as the number of applicants is increasing day by day. For all IT students and professionals, it is very important to have some basic understanding about the online examination system. On this site you will get source code with the running project. It will help you to understand the concept of the project. Here you find project in php free download. Brief overview of the technology: Front end: HTML, CSS, JavaScript HTML: HTML is used to create and save web document. E.g. Notepad/Notepad++ CSS : (Cascading Style Sheets) Create attractive Layout JavaScript: it is a programming language, commonly use with web browsers. Back end: PHP, MySQL PHP: Hypertext Preprocessor (PHP) is a technology that allows software developers to create dynamically generated web pages, in HTML, XML, or other document types, as per client request. PHP is open source software. MySQL: MySql is a database, widely used for accessing querying, updating, and managing data in databases. Software Requirement(any one) WAMP Server XAMPP Server MAMP Server LAMP Server Installation Steps 1. Download zip file and Unzip file on your local server. 2. Put this file inside "c:/wamp/www/" . 3. Database Configuration Open phpmyadmin Create Database named quiz_new. Import database quiz_new.sql from downloaded folder(inside database) 4. Open Your browser put inside "http://localhost/Online_exam_New/" 5. To Login as admin put "http://localhost/Online_exam_New/admin" Admin Login Details Login Id: admin@a

What is JavaScript and what does it do? Before you start learning something new, it’s important to understand exactly what it is and what it does. This is especially useful when it comes to mastering a new programming language. In simple terms, JavaScript is a programming language used to make websites interactive. If you think about the basic makeup of a website, you have HTML, which describes and defines the basic content and structure of the website, then you have CSS, which tells the browser how this HTML content should be displayed—determining things like color and font. With just HTML and CSS, you have a website that looks good but doesn’t actually do much. JavaScript brings the website to life by adding functionality. JavaScript is responsible for elements that the user can interact with, such as drop-down menus, modal windows, and contact forms. It is also used to create things like animations, video players, and interactive maps. Nowadays, JavaScript is an all-purpose programming language—meaning it runs across the entire software stack. The most popular application of JavaScript is on the client side (aka frontend), but since Node.js came on the scene, many people run JavaScript on the server side (aka backend) as well. When used on the client side, JavaScript code is read, interpreted, and executed in the user’s web browser. When used on the server side, it is run on a remote computer. You can learn more about the difference between frontend and backend programming here. JavaScript isn’t only used to create websites. It can also be used to build browser-based games and, with the help of certain frameworks, mobile apps for different operating systems. The creation of new libraries and frameworks is also making it possible to build backend programs with JavaScript, such as web apps and server apps. Is it still worth learning JavaScript in 2021? The world of web development is constantly moving. With so many new tools popping up all the time, it can be extremely difficult to know where you should focus your efforts. As an aspiring developer, you’ll want to make sure that what you’re learning is still relevant in today’s industry. If you’re having doubts about JavaScript, it’s important to know that, since its creation in 1995, JavaScript is pretty much everywhere on the web—and that’s not likely to change any time soon. According to the 2020 StackOverflow developer survey, JavaScript is the most commonly used programming language for the eighth year in a row. It is currently used by 94.5% of all websites and, despite originally being designed as a client-side language, JavaScript has now made its way to the server-side of websites (thanks to Node.js), mobile devices (thanks to React Native and Ionic) and desktop (courtesy of Electron). As long as people are interacting with the web, you can assume that JavaScript is highly relevant—there’s no doubt that this is a language worth knowing! With that in mind, let’s look at some of the key benefits of becoming a JavaScript expert. Why learn JavaScript? The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer. Even if you haven’t got your heart set on a tech career, being proficient in JavaScript will enable you to build websites from scratch—a pretty useful skill to have in today’s job market! If you do want to become a web developer, here are some of the main reasons why you should learn JavaScript: JavaScript experts are versatile JavaScript is an extremely versatile language. Once you’ve mastered it, the possibilities are endless: you can code on the client-side (frontend) using Angular and on the server-side (backend) using Node.js. You can also develop web, mobile, and desktop apps using React, React Native, and Electron, and you can even get involved in machine learning. If you want to become a frontend developer, JavaScript is a prerequisite. However, that’s not the only career path open to you as a JavaScript expert. Mastering this key programming language could see you go on to work in full-stack development, games development, information security software engineering, machine learning, and artificial intelligence—to name just a few! Ultimately, if you want any kind of development or engineering career, proficiency in JavaScript is a must. JavaScript experts are in-demand (and well-paid) JavaScript is the most popular programming language in the world, so it’s no wonder that JavaScript is one of the most sought-after skills in the web development industry today. According to the Devskiller IT Skills and Hiring Report 2020, 72% of companies are looking to hire JavaScript experts. Enter the search term “JavaScript” on job site Indeed and you’ll find over 40,000 jobs requiring this skill (in the US). Run the same search on LinkedIn and the results are in excess of 125,000. At the same time, the global demand for JavaScript seems to outweigh the expertise available on the market. According to this 2018 HackerRank report, 48% of employers worldwide need developers with JavaScript skills, while only 42% of student developers claim to be proficient in JavaScript. And, in their most recent report for 2020, HackerRank once again reports that JavaScript is the most popular language that hiring mangers look for in a web developer candidate. Not only are JavaScript experts in demand—they are also well-paid. In the United States, JavaScript developers earn an average yearly salary of $111,953 per year. We’ve covered this topic in more detail in our JavaScript salary guide, but as you can see, learning JavaScript can really boost your earning potential as a developer. JavaScript is beginner-friendly Compared to many other programming languages, JavaScript offers one of the more beginner-friendly entry points into the world of coding. The great thing about JavaScript is that it comes installed on every modern web browser—there’s no need to set up any kind of development environment, which means you can start coding with JavaScript right away! Another advantage of learning JavaScript as your first programming language is that you get instant feedback; with a minimal amount of JavaScript code, you’ll immediately see visible results. There’s also a huge JavaScript community on sites like Stack Overflow, so you’ll find plenty of support as you learn. Not only is JavaScript beginner-friendly; it will also set you up with some extremely valuable transferable skills. JavaScript supports object-oriented, functional, and imperative styles of programming—skills which can be transferred to any new language you might learn later on, such as Python, Java, or C++. JavaScript provides a crucial introduction to key principles and practices that you’ll take with you throughout your career as a developer. Should you learn plain JavaScript first or can you skip to frameworks and libraries? When deciding whether or not to learn JavaScript, what you’re really asking is whether or not you should learn “vanilla” JavaScript. Vanilla JavaScript just means plain JavaScript without any libraries or frameworks. Let’s explore what this means in more detail now. What is meant by vanilla JavaScript, libraries, and frameworks? If you research the term “vanilla JavaScript”, you might run into some confusion; however, all you need to know is that vanilla JavaScript is used to refer to native, standards-based, non-extended JavaScript. There is no difference between vanilla JavaScript and JavaScript—it’s just there to emphasize the usage of plain JavaScript without the use of libraries and frameworks. So what are libraries and frameworks? JavaScript libraries and frameworks both contain sets of prewritten, ready-to-use JavaScript code—but they’re not the same thing. You can think of a framework as your blueprint for building a website: it gives you a structure to work from, and contains ready-made components and tools that help you to build certain elements much quicker than if you were to code them from scratch. Some popular JavaScript frameworks include Angular, React, Vue, and Node.js. Frameworks also contain libraries. Libraries are smaller than frameworks, and tend to be used for more specific cases. A JavaScript library contains sets of JavaScript code which can be called upon to implement certain functions and features. Let’s imagine you want to code a particular element into your website. You could write, say, ten lines of JavaScript from scratch—or you could take the condensed, ready-made version from your chosen JavaScript library. Some examples of JavaScript libraries include jQuery, Lodash, and Underscore. The easiest way to understand how frameworks and libraries work together is to imagine you are building a house. The framework provides the foundation and the structure, while the library enables you to add in ready-made components (like furniture) rather than building your own from scratch. You can learn more about the relationship between languages and libraries in this post explaining the main differences between JavaScript and jQuery. For now, let’s go back to our original question: How important is it to learn vanilla JavaScript? Should you learn vanilla JavaScript first? When it comes to learning JavaScript, it can be tempting to skip ahead to those time-saving frameworks and libraries we just talked about—and many developers do. However, there are many compelling arguments for learning plain JavaScript first. While JavaScript frameworks may help you get the job done quicker, there’s only so far you can go if you don’t understand the core concepts behind these frameworks. Frontend developer Abhishek Nagekar describes how not learning vanilla JavaScript came back to bite him when he started learning the JavaScript frameworks Node and Express: “As I went to write more and more code in Node and Express, I began to get stuck at even the tiniest problems. Suddenly, I was surrounded with words like callbacks, closures, event loop and prototype. It felt like I got a reintroduction to JavaScript, but this time, it was not a toddler playing in its cradle, it was something of a mysterious monster, challenging me on every other step for not having taken it seriously.” The above Tweet references a long-running joke within the developer community, and although it dates way back to 2015, it’s still highly relevant today. If you want to become a developer who can innovate, not just execute, you need to understand the underlying principles of the web—not just the shortcuts. This means learning vanilla JavaScript before you move on to frameworks. In fact, understanding plain JavaScript will help you later on when it comes to deciding whether to use a framework for a certain project, and if so, which framework to use. Why Study JavaScript? JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages Learning Speed In this tutorial, the learning speed is your choice. Everything is up to you. If you are struggling, take a break, or re-read the material. Always make sure you understand all the "Try-it-Yourself" examples. The only way to become a clever programmer is to: Practice. Practice. Practice. Code. Code. Code ! Commonly Asked Questions How do I get JavaScript? Where can I download JavaScript? Is JavaScript Free? You don't have to get or download JavaScript. JavaScript is already running in your browser on your computer, on your tablet, and on your smart-phone. JavaScript is free to use for everyone.

<html lang="en-US"><head><script type="text/javascript" async="" src="https://script.4dex.io/localstore.js"></script> <title>HTML p tag</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="Keywords" content="HTML, Python, CSS, SQL, JavaScript, How to, PHP, Java, C, C++, C#, jQuery, Bootstrap, Colors, W3.CSS, XML, MySQL, Icons, NodeJS, React, Graphics, Angular, R, AI, Git, Data Science, Code Game, Tutorials, Programming, Web Development, Training, Learning, Quiz, Exercises, Courses, Lessons, References, Examples, Learn to code, Source code, Demos, Tips, Website"> <meta name="Description" content="Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more."> <meta property="og:image" content="https://www.w3schools.com/images/w3schools_logo_436_2.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="436"> <meta property="og:image:height" content="228"> <meta property="og:description" content="W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more."> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="preload" href="/lib/fonts/fontawesome.woff2?14663396" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/lib/fonts/source-code-pro-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/lib/fonts/roboto-mono-v13-latin-500.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/lib/fonts/source-sans-pro-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/lib/fonts/source-sans-pro-v14-latin-600.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="preload" href="/lib/fonts/freckle-face-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="stylesheet" href="/lib/w3schools30.css"> <script async="" src="//confiant-integrations.global.ssl.fastly.net/prebid/202204201359/wrap.js"></script><script type="text/javascript" src="https://confiant-integrations.global.ssl.fastly.net/t_Qv_vWzcBDsyn934F1E0MWBb1c/prebid/config.js" async=""></script><script type="text/javascript" async="" src="https://www.google-analytics.com/gtm/js?id=GTM-WJ88MZ5&amp;cid=1308236804.1650718121"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-3855518-1', 'auto'); ga('require', 'displayfeatures'); ga('require', 'GTM-WJ88MZ5'); ga('send', 'pageview'); </script> <script src="/lib/uic.js?v=1.0.3"></script> <script data-cfasync="false" type="text/javascript"> var k42 = false; k42 = true; </script> <script data-cfasync="false" type="text/javascript"> window.snigelPubConf = { "adengine": { "activeAdUnits": ["main_leaderboard", "sidebar_top", "bottom_left", "bottom_right"] } } uic_r_a() </script> <script async="" data-cfasync="false" src="https://cdn.snigelweb.com/adengine/w3schools.com/loader.js" type="text/javascript"></script> <script src="/lib/my-learning.js?v=1.0.9"></script> <script type="text/javascript"> var stickyadstatus = ""; function fix_stickyad() { document.getElementById("stickypos").style.position = "sticky"; var elem = document.getElementById("stickyadcontainer"); if (!elem) {return false;} if (document.getElementById("skyscraper")) { var skyWidth = Number(w3_getStyleValue(document.getElementById("skyscraper"), "width").replace("px", "")); } else { var skyWidth = Number(w3_getStyleValue(document.getElementById("right"), "width").replace("px", "")); } elem.style.width = skyWidth + "px"; if (window.innerWidth <= 992) { elem.style.position = ""; elem.style.top = stickypos + "px"; return false; } var stickypos = document.getElementById("stickypos").offsetTop; var docTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var adHeight = Number(w3_getStyleValue(elem, "height").replace("px", "")); if (stickyadstatus == "") { if ((stickypos - docTop) < 60) { elem.style.position = "fixed"; elem.style.top = "60px"; stickyadstatus = "sticky"; document.getElementById("stickypos").style.position = "sticky"; } } else { if ((docTop + 60) - stickypos < 0) { elem.style.position = ""; elem.style.top = stickypos + "px"; stickyadstatus = ""; document.getElementById("stickypos").style.position = "static"; } } if (stickyadstatus == "sticky") { if ((docTop + adHeight + 60) > document.getElementById("footer").offsetTop) { elem.style.position = "absolute"; elem.style.top = (document.getElementById("footer").offsetTop - adHeight) + "px"; document.getElementById("stickypos").style.position = "static"; } else { elem.style.position = "fixed"; elem.style.top = "60px"; stickyadstatus = "sticky"; document.getElementById("stickypos").style.position = "sticky"; } } } function w3_getStyleValue(elmnt,style) { if (window.getComputedStyle) { return window.getComputedStyle(elmnt,null).getPropertyValue(style); } else { return elmnt.currentStyle[style]; } } </script> <link rel="stylesheet" type="text/css" href="/browserref.css"> <script type="text/javascript" async="" src="//cdn.snigelweb.com/prebid/5.20.2/prebid.js?v=3547-1650632016452"></script><script type="text/javascript" async="" src="//c.amazon-adsystem.com/aax2/apstag.js"></script><script type="text/javascript" async="" src="//securepubads.g.doubleclick.net/tag/js/gpt.js"></script><script type="text/javascript" async="" src="https://adengine.snigelweb.com/w3schools.com/3547-1650632016452/adngin.js"></script><script type="text/javascript" async="" src="//cdn.snigelweb.com/argus/argus.js"></script><meta http-equiv="origin-trial" content="AxujKG9INjsZ8/gUq8+dTruNvk7RjZQ1oFhhgQbcTJKDnZfbzSTE81wvC2Hzaf3TW4avA76LTZEMdiedF1vIbA4AAABueyJvcmlnaW4iOiJodHRwczovL2ltYXNkay5nb29nbGVhcGlzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0="><meta http-equiv="origin-trial" content="Azuce85ORtSnWe1MZDTv68qpaW3iHyfL9YbLRy0cwcCZwVnePnOmkUJlG8HGikmOwhZU22dElCcfrfX2HhrBPAkAAAB7eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial" content="A16nvcdeoOAqrJcmjLRpl1I6f3McDD8EfofAYTt/P/H4/AWwB99nxiPp6kA0fXoiZav908Z8etuL16laFPUdfQsAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial" content="AxBHdr0J44vFBQtZUqX9sjiqf5yWZ/OcHRcRMN3H9TH+t90V/j3ENW6C8+igBZFXMJ7G3Pr8Dd13632aLng42wgAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial" content="A88BWHFjcawUfKU3lIejLoryXoyjooBXLgWmGh+hNcqMK44cugvsI5YZbNarYvi3roc1fYbHA1AVbhAtuHZflgEAAAB2eyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IlRydXN0VG9rZW5zIiwiZXhwaXJ5IjoxNjUyNzc0NDAwLCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ=="><meta http-equiv="origin-trial" content="AzoawhTRDevLR66Y6MROu167EDncFPBvcKOaQispTo9ouEt5LvcBjnRFqiAByRT+2cDHG1Yj4dXwpLeIhc98/gIAAACFeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjYxMjk5MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ=="><meta http-equiv="origin-trial" content="A6+nc62kbJgC46ypOwRsNW6RkDn2x7tgRh0wp7jb3DtFF7oEhu1hhm4rdZHZ6zXvnKZLlYcBlQUImC4d3kKihAcAAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjYxMjk5MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ=="><meta http-equiv="origin-trial" content="A/9La288e7MDEU2ifusFnMg1C2Ij6uoa/Z/ylwJIXSsWfK37oESIPbxbt4IU86OGqDEPnNVruUiMjfKo65H/CQwAAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjYxMjk5MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ=="><script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2022042001.js?cb=31067210" async=""></script><argprec0></argprec0><argprec1></argprec1><style type="text/css">.snigel-cmp-framework .sn-inner {background-color:#fffefe!important;}.snigel-cmp-framework .sn-b-def {border-color:#04aa6d!important;color:#04aa6d!important;}.snigel-cmp-framework .sn-b-def.sn-blue {color:#ffffff!important;background-color:#04aa6d!important;border-color:#04aa6d!important;}.snigel-cmp-framework .sn-selector ul li {color:#04aa6d!important;}.snigel-cmp-framework .sn-selector ul li:after {background-color:#04aa6d!important;}.snigel-cmp-framework .sn-footer-tab .sn-privacy a {color:#04aa6d!important;}.snigel-cmp-framework .sn-arrow:after,.snigel-cmp-framework .sn-arrow:before {background-color:#04aa6d!important;}.snigel-cmp-framework .sn-switch input:checked + span::before {background-color:#04aa6d!important;}#adconsent-usp-link {border: 1px solid #04aa6d!important;color:#04aa6d!important;}#adconsent-usp-banner-optout input:checked + .adconsent-usp-slider {background-color:#04aa6d!important;}#adconsent-usp-banner-btn {color:#ffffff;border: solid 1px #04aa6d!important;background-color:#04aa6d!important; }</style><link rel="preload" href="https://adservice.google.co.in/adsid/integrator.js?domain=www.w3schools.com" as="script"><script type="text/javascript" src="https://adservice.google.co.in/adsid/integrator.js?domain=www.w3schools.com"></script><link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=www.w3schools.com" as="script"><script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=www.w3schools.com"></script><meta http-equiv="origin-trial" content="A4/Htern2udN9w3yJK9QgWQxQFruxOXsXL7cW60DyCl0EZFGCSme/J33Q/WzF7bBkVvhEWDlcBiUyZaim5CpFQwAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9"><meta http-equiv="origin-trial" content="A4/Htern2udN9w3yJK9QgWQxQFruxOXsXL7cW60DyCl0EZFGCSme/J33Q/WzF7bBkVvhEWDlcBiUyZaim5CpFQwAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9"><meta http-equiv="origin-trial" content="A4/Htern2udN9w3yJK9QgWQxQFruxOXsXL7cW60DyCl0EZFGCSme/J33Q/WzF7bBkVvhEWDlcBiUyZaim5CpFQwAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9"><meta http-equiv="origin-trial" content="A4/Htern2udN9w3yJK9QgWQxQFruxOXsXL7cW60DyCl0EZFGCSme/J33Q/WzF7bBkVvhEWDlcBiUyZaim5CpFQwAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9"><link rel="preload" href="https://adservice.google.co.in/adsid/integrator.js?domain=www.w3schools.com" as="script"><script type="text/javascript" src="https://adservice.google.co.in/adsid/integrator.js?domain=www.w3schools.com"></script><link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=www.w3schools.com" as="script"><script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=www.w3schools.com"></script></head> <body> <style> #darkmodemenu { position:absolute; top:-40px; right:16px; padding:5px 20px 10px 18px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; z-index:-1; transition: top 0.2s; user-select: none; } #darkmodemenu input,#darkmodemenu label { cursor:pointer; } </style> <script> ( function setThemeMode() { var x = localStorage.getItem("preferredmode"); var y = localStorage.getItem("preferredpagemode"); if (x == "dark") { document.body.className += " darktheme"; ga('send', 'event', 'theme' , "darkcode"); } if (y == "dark") { document.body.className += " darkpagetheme"; ga('send', 'event', 'theme' , "darkpage"); } })(); </script> <div id="pagetop" class="w3-bar w3-card-2 notranslate"> <a href="https://www.w3schools.com" class="w3-bar-item w3-button w3-hover-none w3-left w3-padding-16" title="Home" style="width:77px"> <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i> </a> <style> @media screen and (max-width: 1080px) { .ws-hide-1080 { ddddisplay: none !important; } } @media screen and (max-width: 1160px) { .topnavmain_video { display: none !important; } } </style> <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open_nav('tutorials')" id="navbtn_tutorials" title="Tutorials" style="width:116px">Tutorials <i class="fa fa-caret-down" style="font-size: 20px; display: inline;"></i><i class="fa fa-caret-up" style="display:none"></i></a> <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open_nav('references')" id="navbtn_references" title="References" style="width:132px">References <i class="fa fa-caret-down" style="font-size: 20px; display: inline;"></i><i class="fa fa-caret-up" style="display:none"></i></a> <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24 ws-hide-800" href="javascript:void(0)" onclick="w3_open_nav('exercises')" id="navbtn_exercises" title="Exercises" style="width:118px">Exercises <i class="fa fa-caret-down" style="font-size: 20px; display: inline;"></i><i class="fa fa-caret-up" style="display:none"></i></a> <a class="w3-bar-item w3-button w3-hide-medium bar-item-hover w3-hide-small w3-padding-24 barex topnavmain_video" href="https://www.w3schools.com/videos/index.php" title="Video Tutorials" onclick="ga('send', 'event', 'Videos' , 'fromTopnavMain')">Videos</a> <a class="w3-bar-item w3-button w3-hide-medium bar-item-hover w3-hide-small w3-padding-24 barex" href="/pro/index.php" title="Go Pro" onclick="ga('send', 'event', 'Pro' , 'fromTopnavMainASP')">Pro <span class="ribbon-topnav ws-hide-1080">NEW</span></a> <a class="w3-bar-item w3-button bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open()" id="navbtn_menu" title="Menu" style="width:93px">Menu <i class="fa fa-caret-down"></i><i class="fa fa-caret-up" style="display:none"></i></a> <div id="loginactioncontainer" class="w3-right w3-padding-16" style="margin-left:50px"> <div id="mypagediv" style="display: none;"></div> <!-- <button id="w3loginbtn" style="border:none;display:none;cursor:pointer" class="login w3-right w3-hover-greener" onclick='w3_open_nav("login")'>LOG IN</button>--> <a id="w3loginbtn" class="w3-bar-item w3-btn bar-item-hover w3-right" style="display: inline; width: 130px; background-color: rgb(4, 170, 109); color: white; border-radius: 25px;" href="https://profile.w3schools.com/log-in?redirect_url=https%3A%2F%2Fmy-learning.w3schools.com" target="_self">Log in</a> </div> <div class="w3-right w3-padding-16"> <!--<a class="w3-bar-item w3-button bar-icon-hover w3-right w3-hover-white w3-hide-large w3-hide-medium" href="javascript:void(0)" onclick="w3_open()" title="Menu"><i class='fa'>&#xf0c9;</i></a> --> <a class="w3-bar-item w3-button bar-item-hover w3-right w3-hide-small barex" style="width: 140px; border-radius: 25px; margin-right: 15px;" href="https://courses.w3schools.com/" target="_blank" id="cert_navbtn" onclick="ga('send', 'event', 'Courses' , 'Clicked on courses in Main top navigation');" title="Courses">Paid Courses</a> <a class="w3-bar-item w3-button bar-item-hover w3-right ws-hide-900 w3-hide-small barex ws-pink" style="border-radius: 25px; margin-right: 15px;" href="https://www.w3schools.com/spaces" target="_blank" onclick="ga('send', 'event', 'spacesFromTopnavMain', 'click');" title="Get Your Own Website With W3Schools Spaces">Website <span class="ribbon-topnav ws-hide-1066">NEW</span></a> </div> </div> <div style="display: none; position: fixed; z-index: 4; right: 52px; height: 44px; background-color: rgb(40, 42, 53); letter-spacing: normal; top: 0px;" id="googleSearch"> <div class="gcse-search"></div> </div> <div style="display: none; position: fixed; z-index: 3; right: 111px; height: 44px; background-color: rgb(40, 42, 53); text-align: right; padding-top: 9px; top: 0px;" id="google_translate_element"></div> <div class="w3-card-2 topnav notranslate" id="topnav" style="position: fixed; top: 0px;"> <div style="overflow:auto;"> <div class="w3-bar w3-left" style="width:100%;overflow:hidden;height:44px"> <a href="javascript:void(0);" class="topnav-icons fa fa-menu w3-hide-large w3-left w3-bar-item w3-button" onclick="open_menu()" title="Menu"></a> <a href="/default.asp" class="topnav-icons fa fa-home w3-left w3-bar-item w3-button" title="Home"></a> <a class="w3-bar-item w3-button" href="/html/default.asp" title="HTML Tutorial" style="padding-left:18px!important;padding-right:18px!important;">HTML</a> <a class="w3-bar-item w3-button" href="/css/default.asp" title="CSS Tutorial">CSS</a> <a class="w3-bar-item w3-button" href="/js/default.asp" title="JavaScript Tutorial">JAVASCRIPT</a> <a class="w3-bar-item w3-button" href="/sql/default.asp" title="SQL Tutorial">SQL</a> <a class="w3-bar-item w3-button" href="/python/default.asp" title="Python Tutorial">PYTHON</a> <a class="w3-bar-item w3-button" href="/php/default.asp" title="PHP Tutorial">PHP</a> <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_ver.asp" title="Bootstrap Tutorial">BOOTSTRAP</a> <a class="w3-bar-item w3-button" href="/howto/default.asp" title="How To">HOW TO</a> <a class="w3-bar-item w3-button" href="/w3css/default.asp" title="W3.CSS Tutorial">W3.CSS</a> <a class="w3-bar-item w3-button" href="/java/default.asp" title="Java Tutorial">JAVA</a> <a class="w3-bar-item w3-button" href="/jquery/default.asp" title="jQuery Tutorial">JQUERY</a> <a class="w3-bar-item w3-button" href="/c/index.php" title="C Tutorial">C</a> <a class="w3-bar-item w3-button" href="/cpp/default.asp" title="C++ Tutorial">C++</a> <a class="w3-bar-item w3-button" href="/cs/index.php" title="C# Tutorial">C#</a> <a class="w3-bar-item w3-button" href="/r/default.asp" title="R Tutorial">R</a> <a class="w3-bar-item w3-button" href="/react/default.asp" title="React Tutorial">React</a> <a href="javascript:void(0);" class="topnav-icons fa w3-right w3-bar-item w3-button" onclick="gSearch(this)" title="Search W3Schools"></a> <a href="javascript:void(0);" class="topnav-icons fa w3-right w3-bar-item w3-button" onclick="gTra(this)" title="Translate W3Schools"></a> <!-- <a href='javascript:void(0);' class='topnav-icons fa w3-right w3-bar-item w3-button' onclick='changecodetheme(this)' title='Toggle Dark Code Examples'>&#xe80b;</a>--> <a href="javascript:void(0);" class="topnav-icons fa w3-right w3-bar-item w3-button" onmouseover="mouseoverdarkicon()" onmouseout="mouseoutofdarkicon()" onclick="changepagetheme(2)"></a> <!-- <a class="w3-bar-item w3-button w3-right" id='topnavbtn_exercises' href='javascript:void(0);' onclick='w3_open_nav("exercises")' title='Exercises'>EXERCISES <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style='display:none'></i></a> --> </div> <div id="darkmodemenu" class="ws-black" onmouseover="mouseoverdarkicon()" onmouseout="mouseoutofdarkicon()" style="top: -40px;"> <input id="radio_darkpage" type="checkbox" name="radio_theme_mode" onclick="click_darkpage()"><label for="radio_darkpage"> Dark mode</label> <br> <input id="radio_darkcode" type="checkbox" name="radio_theme_mode" onclick="click_darkcode()"><label for="radio_darkcode"> Dark code</label> </div> <nav id="nav_tutorials" class="w3-hide-small" style="position: absolute; padding-bottom: 60px; display: none;"> <div class="w3-content" style="max-width:1100px;font-size:18px"> <span onclick="w3_close_nav('tutorials')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30px;padding-left:30px;">×</span><br> <div class="w3-row-padding w3-bar-block"> <div class="w3-container" style="padding-left:13px"> <h2 style="color:#FFF4A3;"><b>Tutorials</b></h2> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">HTML and CSS</h3> <a class="w3-bar-item w3-button" href="/html/default.asp">Learn HTML</a> <a class="w3-bar-item w3-button" href="/css/default.asp">Learn CSS</a> <a class="w3-bar-item w3-button" href="/css/css_rwd_intro.asp" title="Responsive Web Design">Learn RWD</a> <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_ver.asp">Learn Bootstrap</a> <a class="w3-bar-item w3-button" href="/w3css/default.asp">Learn W3.CSS</a> <a class="w3-bar-item w3-button" href="/colors/default.asp">Learn Colors</a> <a class="w3-bar-item w3-button" href="/icons/default.asp">Learn Icons</a> <a class="w3-bar-item w3-button" href="/graphics/default.asp">Learn Graphics</a> <a class="w3-bar-item w3-button" href="/graphics/svg_intro.asp">Learn SVG</a> <a class="w3-bar-item w3-button" href="/graphics/canvas_intro.asp">Learn Canvas</a> <a class="w3-bar-item w3-button" href="/howto/default.asp">Learn How To</a> <a class="w3-bar-item w3-button" href="/sass/default.php">Learn Sass</a> <div class="w3-hide-large w3-hide-small"> <h3 class="w3-margin-top">Data Analytics</h3> <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a> <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a> <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a> <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a> <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a> <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a> <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a> <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a> <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a> <h3 class="w3-margin-top">XML Tutorials</h3> <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a> <a class="w3-bar-item w3-button" href="/xml/ajax_intro.asp">Learn XML AJAX</a> <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a> <a class="w3-bar-item w3-button" href="/xml/xml_dtd_intro.asp">Learn XML DTD</a> <a class="w3-bar-item w3-button" href="/xml/schema_intro.asp">Learn XML Schema</a> <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a> <a class="w3-bar-item w3-button" href="/xml/xpath_intro.asp">Learn XPath</a> <a class="w3-bar-item w3-button" href="/xml/xquery_intro.asp">Learn XQuery</a> </div> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">JavaScript</h3> <a class="w3-bar-item w3-button" href="/js/default.asp">Learn JavaScript</a> <a class="w3-bar-item w3-button" href="/jquery/default.asp">Learn jQuery</a> <a class="w3-bar-item w3-button" href="/react/default.asp">Learn React</a> <a class="w3-bar-item w3-button" href="/angular/default.asp">Learn AngularJS</a> <a class="w3-bar-item w3-button" href="/js/js_json_intro.asp">Learn JSON</a> <a class="w3-bar-item w3-button" href="/js/js_ajax_intro.asp">Learn AJAX</a> <a class="w3-bar-item w3-button" href="/appml/default.asp">Learn AppML</a> <a class="w3-bar-item w3-button" href="/w3js/default.asp">Learn W3.JS</a> <h3 class="w3-margin-top">Programming</h3> <a class="w3-bar-item w3-button" href="/python/default.asp">Learn Python</a> <a class="w3-bar-item w3-button" href="/java/default.asp">Learn Java</a> <a class="w3-bar-item w3-button" href="/c/index.php">Learn C</a> <a class="w3-bar-item w3-button" href="/cpp/default.asp">Learn C++</a> <a class="w3-bar-item w3-button" href="/cs/index.php">Learn C#</a> <a class="w3-bar-item w3-button" href="/r/default.asp">Learn R</a> <a class="w3-bar-item w3-button" href="/kotlin/index.php">Learn Kotlin</a> <a class="w3-bar-item w3-button" href="/go/index.php">Learn Go</a> <a class="w3-bar-item w3-button" href="/django/index.php">Learn Django</a> <a class="w3-bar-item w3-button" href="/typescript/index.php">Learn TypeScript</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">Server Side</h3> <a class="w3-bar-item w3-button" href="/sql/default.asp">Learn SQL</a> <a class="w3-bar-item w3-button" href="/mysql/default.asp">Learn MySQL</a> <a class="w3-bar-item w3-button" href="/php/default.asp">Learn PHP</a> <a class="w3-bar-item w3-button" href="/asp/default.asp">Learn ASP</a> <a class="w3-bar-item w3-button" href="/nodejs/default.asp">Learn Node.js</a> <a class="w3-bar-item w3-button" href="/nodejs/nodejs_raspberrypi.asp">Learn Raspberry Pi</a> <a class="w3-bar-item w3-button" href="/git/default.asp">Learn Git</a> <a class="w3-bar-item w3-button" href="/aws/index.php">Learn AWS Cloud</a> <h3 class="w3-margin-top">Web Building</h3> <a class="w3-bar-item w3-button" href="https://www.w3schools.com/spaces" target="_blank" onclick="ga('send', 'event', 'spacesFromTutorialsAcc', 'click');" title="Get Your Own Website With W3schools Spaces">Create a Website <span class="ribbon-topnav ws-yellow">NEW</span></a> <a class="w3-bar-item w3-button" href="/where_to_start.asp">Where To Start</a> <a class="w3-bar-item w3-button" href="/w3css/w3css_templates.asp">Web Templates</a> <a class="w3-bar-item w3-button" href="/browsers/default.asp">Web Statistics</a> <a class="w3-bar-item w3-button" href="/cert/default.asp">Web Certificates</a> <a class="w3-bar-item w3-button" href="/whatis/default.asp">Web Development</a> <a class="w3-bar-item w3-button" href="/tryit/default.asp">Code Editor</a> <a class="w3-bar-item w3-button" href="/typingspeed/default.asp">Test Your Typing Speed</a> <a class="w3-bar-item w3-button" href="/codegame/index.html" target="_blank">Play a Code Game</a> <a class="w3-bar-item w3-button" href="/cybersecurity/index.php">Cyber Security</a> <a class="w3-bar-item w3-button" href="/accessibility/index.php">Accessibility</a> </div> <div class="w3-col l3 m6 w3-hide-medium"> <h3 class="w3-margin-top">Data Analytics</h3> <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a> <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a> <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a> <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a> <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a> <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a> <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a> <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a> <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a> <a class="w3-bar-item w3-button" href="/googlesheets/index.php">Learn Google Sheets</a> <h3 class="w3-margin-top">XML Tutorials</h3> <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a> <a class="w3-bar-item w3-button" href="/xml/ajax_intro.asp">Learn XML AJAX</a> <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a> <a class="w3-bar-item w3-button" href="/xml/xml_dtd_intro.asp">Learn XML DTD</a> <a class="w3-bar-item w3-button" href="/xml/schema_intro.asp">Learn XML Schema</a> <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a> <a class="w3-bar-item w3-button" href="/xml/xpath_intro.asp">Learn XPath</a> <a class="w3-bar-item w3-button" href="/xml/xquery_intro.asp">Learn XQuery</a> </div> </div> </div> <br class="hidesm"> </nav> <nav id="nav_references" class="w3-hide-small" style="position: absolute; padding-bottom: 60px; display: none;"> <div class="w3-content" style="max-width:1100px;font-size:18px"> <span onclick="w3_close_nav('references')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30px;padding-left:30px;">×</span><br> <div class="w3-row-padding w3-bar-block"> <div class="w3-container" style="padding-left:13px"> <h2 style="color:#FFF4A3;"><b>References</b></h2> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">HTML</h3> <a class="w3-bar-item w3-button" href="/tags/default.asp">HTML Tag Reference</a> <a class="w3-bar-item w3-button" href="/tags/ref_html_browsersupport.asp">HTML Browser Support</a> <a class="w3-bar-item w3-button" href="/tags/ref_eventattributes.asp">HTML Event Reference</a> <a class="w3-bar-item w3-button" href="/colors/default.asp">HTML Color Reference</a> <a class="w3-bar-item w3-button" href="/tags/ref_attributes.asp">HTML Attribute Reference</a> <a class="w3-bar-item w3-button" href="/tags/ref_canvas.asp">HTML Canvas Reference</a> <a class="w3-bar-item w3-button" href="/graphics/svg_reference.asp">HTML SVG Reference</a> <a class="w3-bar-item w3-button" href="/graphics/google_maps_reference.asp">Google Maps Reference</a> <h3 class="w3-margin-top">CSS</h3> <a class="w3-bar-item w3-button" href="/cssref/default.asp">CSS Reference</a> <a class="w3-bar-item w3-button" href="/cssref/css3_browsersupport.asp">CSS Browser Support</a> <a class="w3-bar-item w3-button" href="/cssref/css_selectors.asp">CSS Selector Reference</a> <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_ref_all_classes.asp">Bootstrap 3 Reference</a> <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_ref_all_classes.asp">Bootstrap 4 Reference</a> <a class="w3-bar-item w3-button" href="/w3css/w3css_references.asp">W3.CSS Reference</a> <a class="w3-bar-item w3-button" href="/icons/icons_reference.asp">Icon Reference</a> <a class="w3-bar-item w3-button" href="/sass/sass_functions_string.php">Sass Reference</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">JavaScript</h3> <a class="w3-bar-item w3-button" href="/jsref/default.asp">JavaScript Reference</a> <a class="w3-bar-item w3-button" href="/jsref/default.asp">HTML DOM Reference</a> <a class="w3-bar-item w3-button" href="/jquery/jquery_ref_overview.asp">jQuery Reference</a> <a class="w3-bar-item w3-button" href="/angular/angular_ref_directives.asp">AngularJS Reference</a> <a class="w3-bar-item w3-button" href="/appml/appml_reference.asp">AppML Reference</a> <a class="w3-bar-item w3-button" href="/w3js/w3js_references.asp">W3.JS Reference</a> <h3 class="w3-margin-top">Programming</h3> <a class="w3-bar-item w3-button" href="/python/python_reference.asp">Python Reference</a> <a class="w3-bar-item w3-button" href="/java/java_ref_keywords.asp">Java Reference</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">Server Side</h3> <a class="w3-bar-item w3-button" href="/sql/sql_ref_keywords.asp">SQL Reference</a> <a class="w3-bar-item w3-button" href="/mysql/mysql_ref_functions.asp">MySQL Reference</a> <a class="w3-bar-item w3-button" href="/php/php_ref_overview.asp">PHP Reference</a> <a class="w3-bar-item w3-button" href="/asp/asp_ref_response.asp">ASP Reference</a> <h3 class="w3-margin-top">XML</h3> <a class="w3-bar-item w3-button" href="/xml/dom_nodetype.asp">XML DOM Reference</a> <a class="w3-bar-item w3-button" href="/xml/dom_http.asp">XML Http Reference</a> <a class="w3-bar-item w3-button" href="/xml/xsl_elementref.asp">XSLT Reference</a> <a class="w3-bar-item w3-button" href="/xml/schema_elements_ref.asp">XML Schema Reference</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top">Character Sets</h3> <a class="w3-bar-item w3-button" href="/charsets/default.asp">HTML Character Sets</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_ascii.asp">HTML ASCII</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_ansi.asp">HTML ANSI</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_ansi.asp">HTML Windows-1252</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_8859.asp">HTML ISO-8859-1</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_symbols.asp">HTML Symbols</a> <a class="w3-bar-item w3-button" href="/charsets/ref_html_utf8.asp">HTML UTF-8</a> </div> </div> <br class="hidesm"> </div> </nav> <nav id="nav_exercises" class="w3-hide-small" style="position: absolute; padding-bottom: 60px; display: none;"> <div class="w3-content" style="max-width:1100px;font-size:18px"> <span onclick="w3_close_nav('exercises')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30px;padding-left:30px;">×</span><br> <div class="w3-row-padding w3-bar-block"> <div class="w3-container" style="padding-left:13px"> <h2 style="color:#FFF4A3;"><b>Exercises and Quizzes</b></h2> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:155px;font-size:21px" href="/exercises/index.php">Exercises</a></h3> <a class="w3-bar-item w3-button" href="/html/html_exercises.asp">HTML Exercises</a> <a class="w3-bar-item w3-button" href="/css/css_exercises.asp">CSS Exercises</a> <a class="w3-bar-item w3-button" href="/js/js_exercises.asp">JavaScript Exercises</a> <a class="w3-bar-item w3-button" href="/sql/sql_exercises.asp">SQL Exercises</a> <a class="w3-bar-item w3-button" href="/mysql/mysql_exercises.asp">MySQL Exercises</a> <a class="w3-bar-item w3-button" href="/php/php_exercises.asp">PHP Exercises</a> <a class="w3-bar-item w3-button" href="/python/python_exercises.asp">Python Exercises</a> <a class="w3-bar-item w3-button" href="/python/numpy/numpy_exercises.asp">NumPy Exercises</a> <a class="w3-bar-item w3-button" href="/python/pandas/pandas_exercises.asp">Pandas Exercises</a> <a class="w3-bar-item w3-button" href="/python/scipy/scipy_exercises.php">SciPy Exercises</a> <a class="w3-bar-item w3-button" href="/jquery/jquery_exercises.asp">jQuery Exercises</a> <a class="w3-bar-item w3-button" href="/java/java_exercises.asp">Java Exercises</a> <a class="w3-bar-item w3-button" href="/cpp/cpp_exercises.asp">C++ Exercises</a> <a class="w3-bar-item w3-button" href="/cs/cs_exercises.asp">C# Exercises</a> <a class="w3-bar-item w3-button" href="/r/r_exercises.asp">R Exercises</a> <a class="w3-bar-item w3-button" href="/kotlin/kotlin_exercises.php">Kotlin Exercises</a> <a class="w3-bar-item w3-button" href="/go/go_exercises.php">Go Exercises</a> <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_exercises.asp">Bootstrap Exercises</a> <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_exercises.asp">Bootstrap 4 Exercises</a> <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_exercises.php">Bootstrap 5 Exercises</a> <a class="w3-bar-item w3-button" href="/git/git_exercises.asp">Git Exercises</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:135px;font-size:21px" href="/quiztest/default.asp">Quizzes</a></h3> <a class="w3-bar-item w3-button" href="/html/html_quiz.asp" target="_top">HTML Quiz</a> <a class="w3-bar-item w3-button" href="/css/css_quiz.asp" target="_top">CSS Quiz</a> <a class="w3-bar-item w3-button" href="/js/js_quiz.asp" target="_top">JavaScript Quiz</a> <a class="w3-bar-item w3-button" href="/sql/sql_quiz.asp" target="_top">SQL Quiz</a> <a class="w3-bar-item w3-button" href="/mysql/mysql_quiz.asp" target="_top">MySQL Quiz</a> <a class="w3-bar-item w3-button" href="/php/php_quiz.asp" target="_top">PHP Quiz</a> <a class="w3-bar-item w3-button" href="/python/python_quiz.asp" target="_top">Python Quiz</a> <a class="w3-bar-item w3-button" href="/python/numpy/numpy_quiz.asp" target="_top">NumPy Quiz</a> <a class="w3-bar-item w3-button" href="/python/pandas/pandas_quiz.asp" target="_top">Pandas Quiz</a> <a class="w3-bar-item w3-button" href="/python/scipy/scipy_quiz.php" target="_top">SciPy Quiz</a> <a class="w3-bar-item w3-button" href="/jquery/jquery_quiz.asp" target="_top">jQuery Quiz</a> <a class="w3-bar-item w3-button" href="/java/java_quiz.asp" target="_top">Java Quiz</a> <a class="w3-bar-item w3-button" href="/cpp/cpp_quiz.asp" target="_top">C++ Quiz</a> <a class="w3-bar-item w3-button" href="/cs/cs_quiz.asp" target="_top">C# Quiz</a> <a class="w3-bar-item w3-button" href="/r/r_quiz.asp" target="_top">R Quiz</a> <a class="w3-bar-item w3-button" href="/kotlin/kotlin_quiz.php" target="_top">Kotlin Quiz</a> <a class="w3-bar-item w3-button" href="/xml/xml_quiz.asp" target="_top">XML Quiz</a> <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_quiz.asp" target="_top">Bootstrap Quiz</a> <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_quiz.asp" target="_top">Bootstrap 4 Quiz</a> <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_quiz.php" target="_top">Bootstrap 5 Quiz</a> <a class="w3-bar-item w3-button" href="/cybersecurity/cybersecurity_quiz.php">Cyber Security Quiz</a> <a class="w3-bar-item w3-button" href="/accessibility/accessibility_quiz.php">Accessibility Quiz</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:135px;font-size:21px" href="https://courses.w3schools.com/" target="_blank">Courses</a></h3> <!-- cert <a class="w3-bar-item w3-button" href="/cert/cert_html_new.asp" target="_top">HTML Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_css.asp" target="_top">CSS Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_javascript.asp" target="_top">JavaScript Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_sql.asp" target="_top">SQL Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_php.asp" target="_top">PHP Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_python.asp" target="_top">Python Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_bootstrap.asp" target="_top">Bootstrap Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_jquery.asp" target="_top">jQuery Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_xml.asp" target="_top">XML Certificate</a> --> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/html" target="_blank">HTML Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/css" target="_blank">CSS Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/javascript" target="_blank">JavaScript Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/programs/front-end" target="_blank">Front End Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/sql" target="_blank">SQL Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/php" target="_blank">PHP Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/python" target="_blank">Python Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/numpy-fundamentals" target="_blank">NumPy Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/pandas-fundamentals" target="_blank">Pandas Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/programs/data-analytics" target="_blank">Data Analytics Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/jquery" target="_blank">jQuery Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/java" target="_blank">Java Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/cplusplus" target="_blank">C++ Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/c-sharp" target="_blank">C# Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/r-fundamentals" target="_blank">R Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/xml" target="_blank">XML Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/introduction-to-cyber-security" target="_blank">Cyber Security Course</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/courses/accessibility-fundamentals" target="_blank">Accessibility Course</a> </div> <div class="w3-col l3 m6"> <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:150px;font-size:21px" href="https://courses.w3schools.com/browse/certifications" target="_blank">Certificates</a></h3> <!-- cert <a class="w3-bar-item w3-button" href="/cert/cert_html_new.asp" target="_top">HTML Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_css.asp" target="_top">CSS Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_javascript.asp" target="_top">JavaScript Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_sql.asp" target="_top">SQL Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_php.asp" target="_top">PHP Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_python.asp" target="_top">Python Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_bootstrap.asp" target="_top">Bootstrap Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_jquery.asp" target="_top">jQuery Certificate</a> <a class="w3-bar-item w3-button" href="/cert/cert_xml.asp" target="_top">XML Certificate</a> --> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/html-certification-exam" target="_blank">HTML Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/css-certification-exam" target="_blank">CSS Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/javascript-certification-exam" target="_blank">JavaScript Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/front-end-certification-exam" target="_blank">Front End Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/sql-certification-exam" target="_blank">SQL Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/php-certification-exam" target="_blank">PHP Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/python-certificaftion-exam" target="_blank">Python Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/data-science-certification-exam" target="_blank">Data Science Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/bootstrap-3-certification-exam" target="_blank">Bootstrap 3 Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/bootstrap-4-certification-exam" target="_blank">Bootstrap 4 Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/jquery-certification-exam" target="_blank">jQuery Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/java-certification-exam" target="_blank">Java Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/c-certification-exam" target="_blank">C++ Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/react-certification-exam" target="_blank">React Certificate</a> <a class="w3-bar-item w3-button" href="https://courses.w3schools.com/browse/certifications/courses/xml-certification-exam" target="_blank">XML Certificate</a> </div> </div> <br class="hidesm"> </div> </nav> </div> </div> <div id="myAccordion" class="w3-card-2 w3-center w3-hide-large w3-hide-medium ws-grey" style="width: 100%; position: absolute; display: none; padding-top: 44px;"> <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-xxlarge w3-right">×</a><br> <div class="w3-container w3-padding-32"> <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('tutorials');" href="javascript:void(0);">Tutorials <i class="fa fa-caret-down"></i></a> <div id="sectionxs_tutorials" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div> <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('references')" href="javascript:void(0);">References <i class="fa fa-caret-down"></i></a> <div id="sectionxs_references" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div> <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('exercises')" href="javascript:void(0);">Exercises <i class="fa fa-caret-down"></i></a> <div id="sectionxs_exercises" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div> <a class="w3-button w3-block" style="font-size:22px;" href="/cert/default.asp" target="_blank">Paid Courses</a> <a class="w3-button w3-block" style="font-size:22px;" href="https://www.w3schools.com/spaces" target="_blank" onclick="ga('send', 'event', 'spacesFromTutorialsAcc', 'click');" title="Get Your Own Website With W3schools Spaces">Spaces</a> <a class="w3-button w3-block" style="font-size:22px;" target="_blank" href="https://www.w3schools.com/videos/index.php" onclick="ga('send', 'event', 'Videos' , 'fromTopnavMain')" title="Video Tutorials">Videos</a> <a class="w3-button w3-block" style="font-size:22px;" href="https://shop.w3schools.com" target="_blank">Shop</a> <a class="w3-button w3-block" style="font-size:22px;" href="/pro/index.php">Pro</a> </div> </div> <script> ( function setThemeCheckboxes() { var x = localStorage.getItem("preferredmode"); var y = localStorage.getItem("preferredpagemode"); if (x == "dark") { document.getElementById("radio_darkcode").checked = true; } if (y == "dark") { document.getElementById("radio_darkpage").checked = true; } })(); function mouseoverdarkicon() { if(window.matchMedia("(pointer: coarse)").matches) { return false; } var a = document.getElementById("darkmodemenu"); a.style.top = "44px"; } function mouseoutofdarkicon() { var a = document.getElementById("darkmodemenu"); a.style.top = "-40px"; } function changepagetheme(n) { var a = document.getElementById("radio_darkcode"); var b = document.getElementById("radio_darkpage"); document.body.className = document.body.className.replace("darktheme", ""); document.body.className = document.body.className.replace("darkpagetheme", ""); document.body.className = document.body.className.replace(" ", " "); if (a.checked && b.checked) { localStorage.setItem("preferredmode", "light"); localStorage.setItem("preferredpagemode", "light"); a.checked = false; b.checked = false; } else { document.body.className += " darktheme"; document.body.className += " darkpagetheme"; localStorage.setItem("preferredmode", "dark"); localStorage.setItem("preferredpagemode", "dark"); a.checked = true; b.checked = true; } } function click_darkpage() { var b = document.getElementById("radio_darkpage"); if (b.checked) { document.body.className += " darkpagetheme"; document.body.className = document.body.className.replace(" ", " "); localStorage.setItem("preferredpagemode", "dark"); } else { document.body.className = document.body.className.replace("darkpagetheme", ""); document.body.className = document.body.className.replace(" ", " "); localStorage.setItem("preferredpagemode", "light"); } } function click_darkcode() { var a = document.getElementById("radio_darkcode"); if (a.checked) { document.body.className += " darktheme"; document.body.className = document.body.className.replace(" ", " "); localStorage.setItem("preferredmode", "dark"); } else { document.body.className = document.body.className.replace("darktheme", ""); document.body.className = document.body.className.replace(" ", " "); localStorage.setItem("preferredmode", "light"); } } </script> <div class="w3-sidebar w3-collapse" id="sidenav" style="top: 44px; display: none;"> <div id="leftmenuinner" style="padding-top: 44px;"> <div id="leftmenuinnerinner"> <!-- <a href='javascript:void(0)' onclick='close_menu()' class='w3-button w3-hide-large w3-large w3-display-topright' style='right:16px;padding:3px 12px;font-weight:bold;'>&times;</a>--> <h2 class="left"><span class="left_h2">HTML</span> Reference</h2> <a target="_top" href="default.asp">HTML by Alphabet</a> <a target="_top" href="ref_byfunc.asp">HTML by Category</a> <a target="_top" href="ref_html_browsersupport.asp">HTML Browser Support</a> <a target="_top" href="ref_attributes.asp">HTML Attributes</a> <a target="_top" href="ref_standardattributes.asp">HTML Global Attributes</a> <a target="_top" href="ref_eventattributes.asp">HTML Events</a> <a target="_top" href="ref_colornames.asp">HTML Colors</a> <a target="_top" href="ref_canvas.asp">HTML Canvas</a> <a target="_top" href="ref_av_dom.asp">HTML Audio/Video</a> <a target="_top" href="ref_charactersets.asp">HTML Character Sets</a> <a target="_top" href="ref_html_dtd.asp">HTML Doctypes</a> <a target="_top" href="ref_urlencode.asp">HTML URL Encode</a> <a target="_top" href="ref_language_codes.asp">HTML Language Codes</a> <a target="_top" href="ref_country_codes.asp">HTML Country Codes</a> <a target="_top" href="ref_httpmessages.asp">HTTP Messages</a> <a target="_top" href="ref_httpmethods.asp">HTTP Methods</a> <a target="_top" href="ref_pxtoemconversion.asp">PX to EM Converter</a> <a target="_top" href="ref_keyboardshortcuts.asp">Keyboard Shortcuts</a> <br> <div class="notranslate"> <h2 class="left"><span class="left_h2">HTML</span> Tags</h2> <a target="_top" href="tag_comment.asp">&lt;!--&gt;</a> <a target="_top" href="tag_doctype.asp">&lt;!DOCTYPE&gt;</a> <a target="_top" href="tag_a.asp">&lt;a&gt;</a> <a target="_top" href="tag_abbr.asp">&lt;abbr&gt;</a> <a target="_top" href="tag_acronym.asp">&lt;acronym&gt;</a> <a target="_top" href="tag_address.asp">&lt;address&gt;</a> <a target="_top" href="tag_applet.asp">&lt;applet&gt;</a> <a target="_top" href="tag_area.asp">&lt;area&gt;</a> <a target="_top" href="tag_article.asp">&lt;article&gt;</a> <a target="_top" href="tag_aside.asp">&lt;aside&gt;</a> <a target="_top" href="tag_audio.asp">&lt;audio&gt;</a> <a target="_top" href="tag_b.asp">&lt;b&gt;</a> <a target="_top" href="tag_base.asp">&lt;base&gt;</a> <a target="_top" href="tag_basefont.asp">&lt;basefont&gt;</a> <a target="_top" href="tag_bdi.asp">&lt;bdi&gt;</a> <a target="_top" href="tag_bdo.asp">&lt;bdo&gt;</a> <a target="_top" href="tag_big.asp">&lt;big&gt;</a> <a target="_top" href="tag_blockquote.asp">&lt;blockquote&gt;</a> <a target="_top" href="tag_body.asp">&lt;body&gt;</a> <a target="_top" href="tag_br.asp">&lt;br&gt;</a> <a target="_top" href="tag_button.asp">&lt;button&gt;</a> <a target="_top" href="tag_canvas.asp">&lt;canvas&gt;</a> <a target="_top" href="tag_caption.asp">&lt;caption&gt;</a> <a target="_top" href="tag_center.asp">&lt;center&gt;</a> <a target="_top" href="tag_cite.asp">&lt;cite&gt;</a> <a target="_top" href="tag_code.asp">&lt;code&gt;</a> <a target="_top" href="tag_col.asp">&lt;col&gt;</a> <a target="_top" href="tag_colgroup.asp">&lt;colgroup&gt;</a> <a target="_top" href="tag_data.asp">&lt;data&gt;</a> <a target="_top" href="tag_datalist.asp">&lt;datalist&gt;</a> <a target="_top" href="tag_dd.asp">&lt;dd&gt;</a> <a target="_top" href="tag_del.asp">&lt;del&gt;</a> <a target="_top" href="tag_details.asp">&lt;details&gt;</a> <a target="_top" href="tag_dfn.asp">&lt;dfn&gt;</a> <a target="_top" href="tag_dialog.asp">&lt;dialog&gt;</a> <a target="_top" href="tag_dir.asp">&lt;dir&gt;</a> <a target="_top" href="tag_div.asp">&lt;div&gt;</a> <a target="_top" href="tag_dl.asp">&lt;dl&gt;</a> <a target="_top" href="tag_dt.asp">&lt;dt&gt;</a> <a target="_top" href="tag_em.asp">&lt;em&gt;</a> <a target="_top" href="tag_embed.asp">&lt;embed&gt;</a> <a target="_top" href="tag_fieldset.asp">&lt;fieldset&gt;</a> <a target="_top" href="tag_figcaption.asp">&lt;figcaption&gt;</a> <a target="_top" href="tag_figure.asp">&lt;figure&gt;</a> <a target="_top" href="tag_font.asp">&lt;font&gt;</a> <a target="_top" href="tag_footer.asp">&lt;footer&gt;</a> <a target="_top" href="tag_form.asp">&lt;form&gt;</a> <a target="_top" href="tag_frame.asp">&lt;frame&gt;</a> <a target="_top" href="tag_frameset.asp">&lt;frameset&gt;</a> <a target="_top" href="tag_hn.asp">&lt;h1&gt; - &lt;h6&gt;</a> <a target="_top" href="tag_head.asp">&lt;head&gt;</a> <a target="_top" href="tag_header.asp">&lt;header&gt;</a> <a target="_top" href="tag_hr.asp">&lt;hr&gt;</a> <a target="_top" href="tag_html.asp">&lt;html&gt;</a> <a target="_top" href="tag_i.asp">&lt;i&gt;</a> <a target="_top" href="tag_iframe.asp">&lt;iframe&gt;</a> <a target="_top" href="tag_img.asp">&lt;img&gt;</a> <a target="_top" href="tag_input.asp">&lt;input&gt;</a> <a target="_top" href="tag_ins.asp">&lt;ins&gt;</a> <a target="_top" href="tag_kbd.asp">&lt;kbd&gt;</a> <a target="_top" href="tag_label.asp">&lt;label&gt;</a> <a target="_top" href="tag_legend.asp">&lt;legend&gt;</a> <a target="_top" href="tag_li.asp">&lt;li&gt;</a> <a target="_top" href="tag_link.asp">&lt;link&gt;</a> <a target="_top" href="tag_main.asp">&lt;main&gt;</a> <a target="_top" href="tag_map.asp">&lt;map&gt;</a> <a target="_top" href="tag_mark.asp">&lt;mark&gt;</a> <a target="_top" href="tag_meta.asp">&lt;meta&gt;</a> <a target="_top" href="tag_meter.asp">&lt;meter&gt;</a> <a target="_top" href="tag_nav.asp">&lt;nav&gt;</a> <a target="_top" href="tag_noframes.asp">&lt;noframes&gt;</a> <a target="_top" href="tag_noscript.asp">&lt;noscript&gt;</a> <a target="_top" href="tag_object.asp">&lt;object&gt;</a> <a target="_top" href="tag_ol.asp">&lt;ol&gt;</a> <a target="_top" href="tag_optgroup.asp">&lt;optgroup&gt;</a> <a target="_top" href="tag_option.asp">&lt;option&gt;</a> <a target="_top" href="tag_output.asp">&lt;output&gt;</a> <a target="_top" href="tag_p.asp" class="active">&lt;p&gt;</a> <a target="_top" href="tag_param.asp">&lt;param&gt;</a> <a target="_top" href="tag_picture.asp">&lt;picture&gt;</a> <a target="_top" href="tag_pre.asp">&lt;pre&gt;</a> <a target="_top" href="tag_progress.asp">&lt;progress&gt;</a> <a target="_top" href="tag_q.asp">&lt;q&gt;</a> <a target="_top" href="tag_rp.asp">&lt;rp&gt;</a> <a target="_top" href="tag_rt.asp">&lt;rt&gt;</a> <a target="_top" href="tag_ruby.asp">&lt;ruby&gt;</a> <a target="_top" href="tag_s.asp">&lt;s&gt;</a> <a target="_top" href="tag_samp.asp">&lt;samp&gt;</a> <a target="_top" href="tag_script.asp">&lt;script&gt;</a> <a target="_top" href="tag_section.asp">&lt;section&gt;</a> <a target="_top" href="tag_select.asp">&lt;select&gt;</a> <a target="_top" href="tag_small.asp">&lt;small&gt;</a> <a target="_top" href="tag_source.asp">&lt;source&gt;</a> <a target="_top" href="tag_span.asp">&lt;span&gt;</a> <a target="_top" href="tag_strike.asp">&lt;strike&gt;</a> <a target="_top" href="tag_strong.asp">&lt;strong&gt;</a> <a target="_top" href="tag_style.asp">&lt;style&gt;</a> <a target="_top" href="tag_sub.asp">&lt;sub&gt;</a> <a target="_top" href="tag_summary.asp">&lt;summary&gt;</a> <a target="_top" href="tag_sup.asp">&lt;sup&gt;</a> <a target="_top" href="tag_svg.asp">&lt;svg&gt;</a> <a target="_top" href="tag_table.asp">&lt;table&gt;</a> <a target="_top" href="tag_tbody.asp">&lt;tbody&gt;</a> <a target="_top" href="tag_td.asp">&lt;td&gt;</a> <a target="_top" href="tag_template.asp">&lt;template&gt;</a> <a target="_top" href="tag_textarea.asp">&lt;textarea&gt;</a> <a target="_top" href="tag_tfoot.asp">&lt;tfoot&gt;</a> <a target="_top" href="tag_th.asp">&lt;th&gt;</a> <a target="_top" href="tag_thead.asp">&lt;thead&gt;</a> <a target="_top" href="tag_time.asp">&lt;time&gt;</a> <a target="_top" href="tag_title.asp">&lt;title&gt;</a> <a target="_top" href="tag_tr.asp">&lt;tr&gt;</a> <a target="_top" href="tag_track.asp">&lt;track&gt;</a> <a target="_top" href="tag_tt.asp">&lt;tt&gt;</a> <a target="_top" href="tag_u.asp">&lt;u&gt;</a> <a target="_top" href="tag_ul.asp">&lt;ul&gt;</a> <a target="_top" href="tag_var.asp">&lt;var&gt;</a> <a target="_top" href="tag_video.asp">&lt;video&gt;</a> <a target="_top" href="tag_wbr.asp">&lt;wbr&gt;</a> </div> <br><br> </div> </div> </div> <div class="w3-main w3-light-grey" id="belowtopnav" style="margin-left: 220px; padding-top: 44px;"> <div class="w3-row w3-white"> <div class="w3-col l10 m12" id="main"> <div id="mainLeaderboard" style="overflow:hidden;"> <!-- MainLeaderboard--> <!--<pre>main_leaderboard, all: [728,90][970,90][320,50][468,60]</pre>--> <div id="adngin-main_leaderboard-0" data-google-query-id="CJPA_sueqvcCFXiOSwUd2fYBLg"><div id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//main_leaderboard_1__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//main_leaderboard_1" name="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//main_leaderboard_1" title="3rd party ad content" width="728" height="90" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" role="region" aria-label="Advertisement" tabindex="0" srcdoc="" data-google-container-id="7" style="border: 0px; vertical-align: bottom;" data-load-complete="true"><div style="position: absolute; width: 0px; height: 0px; border: 0px; padding: 0px; margin: 0px; overflow: hidden;"><button></button><a href="https://yahoo.com"></a><input></div></iframe></div></div> <!-- adspace leaderboard --> </div> <h1>HTML <span class="color_h1">&lt;p&gt;</span> Tag</h1> <div class="w3-clear w3-center nextprev"> <a class="w3-left w3-btn" href="tag_output.asp">❮<span class="w3-hide-small"> Previous</span></a> <a class="w3-btn" href="default.asp"><span class="w3-hide-small">Complete HTML </span>Reference</a> <a class="w3-right w3-btn" href="tag_param.asp"><span class="w3-hide-small">Next </span>❯</a> </div> <br> <div class="w3-example"> <h3>Example</h3> <p>A paragraph is marked up as follows:</p> <div class="w3-code notranslate htmlHigh"> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>p<span class="tagcolor" style="color:mediumblue">&gt;</span></span>This is some text in a paragraph.<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/p<span class="tagcolor" style="color:mediumblue">&gt;</span></span> </div> <a target="_blank" href="tryit.asp?filename=tryhtml_paragraphs1" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <p>More "Try it Yourself" examples below.</p> <hr> <h2>Definition and Usage</h2> <p>The <code class="w3-codespan">&lt;p&gt;</code> tag defines a paragraph.</p> <p>Browsers automatically add a single blank line before and after each <code class="w3-codespan">&lt;p&gt;</code> element.</p> <p><strong>Tip:</strong> Use CSS to <a href="/html/html_css.asp">style paragraphs</a>.</p> <hr> <h2>Browser Support</h2> <table class="browserref notranslate"> <tbody><tr> <th style="width:20%;font-size:16px;text-align:left;">Element</th> <th style="width:16%;" class="bsChrome" title="Chrome"></th> <th style="width:16%;" class="bsEdge" title="Internet Explorer / Edge"></th> <th style="width:16%;" class="bsFirefox" title="Firefox"></th> <th style="width:16%;" class="bsSafari" title="Safari"></th> <th style="width:16%;" class="bsOpera" title="Opera"></th> </tr><tr> <td style="text-align:left;">&lt;p&gt;</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody></table> <hr> <h2>Global Attributes</h2> <p>The <code class="w3-codespan">&lt;p&gt;</code> tag also supports the <a href="ref_standardattributes.asp">Global Attributes in HTML</a>.</p> <hr> <h2>Event Attributes</h2> <p>The <code class="w3-codespan">&lt;p&gt;</code> tag also supports the <a href="ref_eventattributes.asp">Event Attributes in HTML</a>.</p> <hr> <div id="midcontentadcontainer" style="overflow:auto;text-align:center"> <!-- MidContent --> <!-- <p class="adtext">Advertisement</p> --> <div id="adngin-mid_content-0" data-google-query-id="CKfs_8ueqvcCFXiOSwUd2fYBLg"><div id="sn_ad_label_adngin-mid_content-0" class="sn_ad_label" style="color:#000000;font-size:12px;margin:0;text-align:center;">ADVERTISEMENT</div><div id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//mid_content_1__container__" style="border: 0pt none; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://56d0da6c34aaa471db22bb4266aac656.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html" id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//mid_content_1" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="8" style="border: 0px; vertical-align: bottom;" data-load-complete="true"></iframe></div></div> </div> <hr> <h2>More Examples</h2> <div class="w3-example"> <h3>Example</h3> <p>Align text in a paragraph (with CSS):</p> <div class="w3-code notranslate htmlHigh"> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>p<span class="attributecolor" style="color:red"> style<span class="attributevaluecolor" style="color:mediumblue">="text-align:right"</span></span><span class="tagcolor" style="color:mediumblue">&gt;</span></span>This is some text in a paragraph.<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/p<span class="tagcolor" style="color:mediumblue">&gt;</span></span> </div> <a target="_blank" href="tryit.asp?filename=tryhtml_p_align_css" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <div class="w3-example"> <h3>Example</h3> <p>Style paragraphs with CSS:</p> <div class="w3-code notranslate htmlHigh"> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>html<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>head<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>style<span class="tagcolor" style="color:mediumblue">&gt;</span></span><span class="cssselectorcolor" style="color:brown"><br>p <span class="cssdelimitercolor" style="color:black">{</span><span class="csspropertycolor" style="color:red"><br>&nbsp; color<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> navy<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp; text-indent<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 30px<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp; text-transform<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> uppercase<span class="cssdelimitercolor" style="color:black">;</span></span><br></span><span class="cssdelimitercolor" style="color:black">}</span><br></span><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/style<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/head<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>p<span class="tagcolor" style="color:mediumblue">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/p<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/html<span class="tagcolor" style="color:mediumblue">&gt;</span></span> </div> <a target="_blank" href="tryit.asp?filename=tryhtml_p_style_css" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <div class="w3-example"> <h3>Example</h3> <p>&nbsp;More on paragraphs:</p> <div class="w3-code notranslate htmlHigh"> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>p<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>This paragraph<br>contains a lot of lines<br>in the source code,<br> but the browser <br>ignores it.<br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/p<span class="tagcolor" style="color:mediumblue">&gt;</span></span> </div> <a target="_blank" href="tryit.asp?filename=tryhtml_paragraphs2" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <div class="w3-example"> <h3>Example</h3> <p>Poem problems in HTML:</p> <div class="w3-code notranslate htmlHigh"> <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>p<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>My Bonnie lies over the ocean.<br>My Bonnie lies over the sea.<br>My Bonnie lies over the ocean.<br>Oh, bring back my Bonnie to me.<br><span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/p<span class="tagcolor" style="color:mediumblue">&gt;</span></span> </div> <a target="_blank" href="tryit.asp?filename=tryhtml_poem" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <hr> <h2>Related Pages</h2> <p>HTML tutorial: <a href="/html/html_paragraphs.asp">HTML Paragraphs</a></p> <p>HTML DOM reference: <a href="/jsref/dom_obj_paragraph.asp">Paragraph Object</a></p> <hr> <h2>Default CSS Settings</h2> <p>Most browsers will display the <code class="w3-codespan">&lt;p&gt;</code> element with the following default values:</p> <div class="w3-example"> <h3>Example</h3> <div class="w3-code notranslate cssHigh"><span class="cssselectorcolor" style="color:brown"> p <span class="cssdelimitercolor" style="color:black">{</span><span class="csspropertycolor" style="color:red"><br>&nbsp; display<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> block<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp; margin-top<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 1em<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp; margin-bottom<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 1em<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp; margin-left<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 0<span class="cssdelimitercolor" style="color:black">;</span></span><br>&nbsp;&nbsp;margin-right<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 0<span class="cssdelimitercolor" style="color:black">;</span></span><br></span><span class="cssdelimitercolor" style="color:black">}</span> </span></div> <a target="_blank" href="tryit.asp?filename=tryhtml_p_default_css" class="w3-btn w3-margin-bottom">Try it Yourself »</a> </div> <br> <br> <div class="w3-clear w3-center nextprev"> <a class="w3-left w3-btn" href="tag_output.asp">❮<span class="w3-hide-small"> Previous</span></a> <a class="w3-btn" href="default.asp"><span class="w3-hide-small">Complete HTML </span>Reference</a> <a class="w3-right w3-btn" href="tag_param.asp"><span class="w3-hide-small">Next </span>❯</a> </div> <div id="mypagediv2" style="position:relative;text-align:center;"></div> <br> </div> <div class="w3-col l2 m12" id="right"> <div class="sidesection"> <div id="skyscraper"> <div id="adngin-sidebar_top-0" data-google-query-id="CJXA_sueqvcCFXiOSwUd2fYBLg"><div id="sn_ad_label_adngin-sidebar_top-0" class="sn_ad_label" style="color:#000000;font-size:12px;margin:0;text-align:center;">ADVERTISEMENT</div><div id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//wide_skyscraper_1__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//wide_skyscraper_1" name="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//wide_skyscraper_1" title="3rd party ad content" width="320" height="50" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" role="region" aria-label="Advertisement" tabindex="0" srcdoc="" data-google-container-id="9" style="border: 0px; vertical-align: bottom;" data-load-complete="true"></iframe></div></div> </div> </div> <style> .ribbon-vid { font-size:12px; font-weight:bold; padding: 6px 20px; left:-20px; top:-10px; text-align: center; color:black; border-radius:25px; } </style> <div class="sidesection" id="video_sidesection"> <div class="w3-center" style="padding-bottom:7px"> <span class="ribbon-vid ws-yellow">NEW</span> </div> <p style="font-size: 14px;line-height: 1.5;font-family: Source Sans Pro;padding-left:4px;padding-right:4px;">We just launched<br>W3Schools videos</p> <a onclick="ga('send', 'event', 'Videos' , 'fromSidebar');" href="https://www.w3schools.com/videos/index.php" class="w3-hover-opacity"><img src="/images/htmlvideoad_footer.png" style="max-width:100%;padding:5px 10px 25px 10px" loading="lazy"></a> <a class="ws-button" style="font-size:16px;text-decoration: none !important;display: block !important; color:#FFC0C7!important; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; paxdding-top: 10px; padding-bottom: 20px; font-family: 'Source Sans Pro', sans-serif; text-align: center;" onclick="ga('send', 'event', 'Videos' , 'fromSidebar');" href="https://www.w3schools.com/videos/index.php">Explore now</a> </div> <div class="sidesection"> <h4><a href="/colors/colors_picker.asp">COLOR PICKER</a></h4> <a href="/colors/colors_picker.asp"> <img src="/images/colorpicker2000.png" alt="colorpicker" loading="lazy"> </a> </div> <div class="sidesection"> <!--<h4>LIKE US</h4>--> <div class="sharethis" style="visibility: visible;"> <a href="https://www.facebook.com/w3schoolscom/" target="_blank" title="Facebook"><span class="fa fa-facebook-square fa-2x"></span></a> <a href="https://www.instagram.com/w3schools.com_official/" target="_blank" title="Instagram"><span class="fa fa-instagram fa-2x"></span></a> <a href="https://www.linkedin.com/company/w3schools.com/" target="_blank" title="LinkedIn"><span class="fa fa-linkedin-square fa-2x"></span></a> <a href="https://discord.gg/6Z7UaRbUQM" target="_blank" title="Join the W3schools community on Discord"><span class="fa fa-discord fa-2x"></span></a> </div> </div> <!-- <div class="sidesection" style="border-radius:5px;color:#555;padding-top:1px;padding-bottom:8px;margin-left:auto;margin-right:auto;max-width:230px;background-color:#d4edda"> <p>Get your<br>certification today!</p> <a href="/cert/default.asp" target="_blank"> <img src="/images/w3certified_logo_250.png" style="margin:0 12px 20px 10px;max-width:80%"> </a> <a class="w3-btn w3-margin-bottom" style="text-decoration:none;border-radius:5px;" href="/cert/default.asp" target="_blank">View options</a> </div> --> <style> #courses_get_started_btn { text-decoration:none !important; background-color:#04AA6D; width:100%; border-bottom-left-radius:5px; border-bottom-right-radius:5px; padding-top:10px; padding-bottom:10px; font-family: 'Source Sans Pro', sans-serif; } #courses_get_started_btn:hover { background-color:#059862!important; } </style> <div id="internalCourses" class="sidesection"> <p style="font-size:18px;padding-left:2px;padding-right:2px;">Get certified<br>by completing<br>a course today!</p> <a href="https://courses.w3schools.com" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on courses banner in ads column');"> <div style="padding:0 20px 20px 20px"> <svg id="w3_cert_badge2" style="margin:auto;width:85%" data-name="w3_cert_badge2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:#04aa6b;}.cls-2{font-size:23px;}.cls-2,.cls-3,.cls-4{fill:#fff;}.cls-2,.cls-3{font-family:RobotoMono-Medium, Roboto Mono;font-weight:500;}.cls-3{font-size:20.08px;}</style></defs><circle class="cls-1" cx="150" cy="150" r="146.47" transform="translate(-62.13 150) rotate(-45)"></circle><text class="cls-2" transform="translate(93.54 63.89) rotate(-29.5)">w</text><text class="cls-2" transform="translate(107.13 56.35) rotate(-20.8)">3</text><text class="cls-2" transform="matrix(0.98, -0.21, 0.21, 0.98, 121.68, 50.97)">s</text><text class="cls-2" transform="translate(136.89 47.84) rotate(-3.47)">c</text><text class="cls-2" transform="translate(152.39 47.03) rotate(5.12)">h</text><text class="cls-2" transform="translate(167.85 48.54) rotate(13.72)">o</text><text class="cls-2" transform="translate(182.89 52.35) rotate(22.34)">o</text><text class="cls-2" transform="matrix(0.86, 0.52, -0.52, 0.86, 197.18, 58.36)">l</text><text class="cls-2" transform="matrix(0.77, 0.64, -0.64, 0.77, 210.4, 66.46)">s</text><text class="cls-3" transform="translate(35.51 186.66) rotate(69.37)"> </text><text class="cls-3" transform="matrix(0.47, 0.88, -0.88, 0.47, 41.27, 201.28)">C</text><text class="cls-3" transform="matrix(0.58, 0.81, -0.81, 0.58, 48.91, 215.03)">E</text><text class="cls-3" transform="matrix(0.67, 0.74, -0.74, 0.67, 58.13, 227.36)">R</text><text class="cls-3" transform="translate(69.16 238.92) rotate(39.44)">T</text><text class="cls-3" transform="matrix(0.85, 0.53, -0.53, 0.85, 81.47, 248.73)">I</text><text class="cls-3" transform="translate(94.94 256.83) rotate(24.36)">F</text><text class="cls-3" transform="translate(109.34 263.09) rotate(16.83)">I</text><text class="cls-3" transform="translate(124.46 267.41) rotate(9.34)">E</text><text class="cls-3" transform="translate(139.99 269.73) rotate(1.88)">D</text><text class="cls-3" transform="translate(155.7 270.01) rotate(-5.58)"> </text><text class="cls-3" transform="translate(171.32 268.24) rotate(-13.06)"> </text><text class="cls-2" transform="translate(187.55 266.81) rotate(-21.04)">.</text><text class="cls-3" transform="translate(203.27 257.7) rotate(-29.24)"> </text><text class="cls-3" transform="translate(216.84 249.83) rotate(-36.75)"> </text><text class="cls-3" transform="translate(229.26 240.26) rotate(-44.15)">2</text><text class="cls-3" transform="translate(240.39 229.13) rotate(-51.62)">0</text><text class="cls-3" transform="translate(249.97 216.63) rotate(-59.17)">2</text><text class="cls-3" transform="matrix(0.4, -0.92, 0.92, 0.4, 257.81, 203.04)">2</text><path class="cls-4" d="M196.64,136.31s3.53,3.8,8.5,3.8c3.9,0,6.75-2.37,6.75-5.59,0-4-3.64-5.81-8-5.81h-2.59l-1.53-3.48,6.86-8.13a34.07,34.07,0,0,1,2.7-2.85s-1.11,0-3.33,0H194.79v-5.86H217.7v4.28l-9.19,10.61c5.18.74,10.24,4.43,10.24,10.92s-4.85,12.3-13.19,12.3a17.36,17.36,0,0,1-12.41-5Z"></path><path class="cls-4" d="M152,144.24l30.24,53.86,14.94-26.61L168.6,120.63H135.36l-13.78,24.53-13.77-24.53H77.93l43.5,77.46.15-.28.16.28Z"></path></svg> </div> </a> <a class="w3-btn" id="courses_get_started_btn" href="https://courses.w3schools.com" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on courses banner in ads column');">Get started</a> </div> <!-- <div class="sidesection" style="margin-left:auto;margin-right:auto;max-width:230px"> <a href="https://shop.w3schools.com/" target="_blank" title="Buy W3Schools Merchandize"> <img src="/images/tshirt.jpg" style="max-width:100%;"> </a> </div> --> <div class="sidesection" id="moreAboutSubject"> </div> <!-- <div id="sidesection_exercise" class="sidesection" style="background-color:#555555;max-width:200px;margin:auto;margin-bottom:32px"> <div class="w3-container w3-text-white"> <h4>Exercises</h4> </div> <div> <div class="w3-light-grey"> <a target="_blank" href="/html/exercise.asp" style="padding-top:8px">HTML</a> <a target="_blank" href="/css/exercise.asp">CSS</a> <a target="_blank" href="/js/exercise_js.asp">JavaScript</a> <a target="_blank" href="/sql/exercise.asp">SQL</a> <a target="_blank" href="/php/exercise.asp">PHP</a> <a target="_blank" href="/python/exercise.asp">Python</a> <a target="_blank" href="/bootstrap/exercise_bs3.asp">Bootstrap</a> <a target="_blank" href="/jquery/exercise_jq.asp" style="padding-bottom:8px">jQuery</a> </div> </div> </div> --> <div class="sidesection codegameright ws-turquoise" style="font-size:18px;font-family: 'Source Sans Pro', sans-serif;border-radius:5px;color:#FFC0C7;padding-top:12px;margin-left:auto;margin-right:auto;max-width:230px;"> <style> .codegameright .w3-btn:link,.codegameright .w3-btn:visited { background-color:#04AA6D; border-radius:5px; } .codegameright .w3-btn:hover,.codegameright .w3-btn:active { background-color:#059862!important; text-decoration:none!important; } </style> <h4><a href="/codegame/index.html" class="w3-hover-text-black">CODE GAME</a></h4> <a href="/codegame/index.html" target="_blank" class="w3-hover-opacity"><img style="max-width:100%;margin:16px 0;" src="/images/w3lynx_200.png" alt="Code Game" loading="lazy"></a> <a class="w3-btn w3-block ws-black" href="/codegame/index.html" target="_blank" style="padding-top:10px;padding-bottom:10px;margin-top:12px;border-top-left-radius: 0;border-top-right-radius: 0">Play Game</a> </div> <!-- <div class="sidesection w3-light-grey" style="margin-left:auto;margin-right:auto;max-width:230px"> <div class="w3-container w3-dark-grey"> <h4><a href="/howto/default.asp" class="w3-hover-text-white">HOW TO</a></h4> </div> <div class="w3-container w3-left-align w3-padding-16"> <a href="/howto/howto_js_tabs.asp">Tabs</a><br> <a href="/howto/howto_css_dropdown.asp">Dropdowns</a><br> <a href="/howto/howto_js_accordion.asp">Accordions</a><br> <a href="/howto/howto_js_sidenav.asp">Side Navigation</a><br> <a href="/howto/howto_js_topnav.asp">Top Navigation</a><br> <a href="/howto/howto_css_modals.asp">Modal Boxes</a><br> <a href="/howto/howto_js_progressbar.asp">Progress Bars</a><br> <a href="/howto/howto_css_parallax.asp">Parallax</a><br> <a href="/howto/howto_css_login_form.asp">Login Form</a><br> <a href="/howto/howto_html_include.asp">HTML Includes</a><br> <a href="/howto/howto_google_maps.asp">Google Maps</a><br> <a href="/howto/howto_js_rangeslider.asp">Range Sliders</a><br> <a href="/howto/howto_css_tooltip.asp">Tooltips</a><br> <a href="/howto/howto_js_slideshow.asp">Slideshow</a><br> <a href="/howto/howto_js_sort_list.asp">Sort List</a><br> </div> </div> --> <!-- <div class="sidesection w3-round" style="margin-left:auto;margin-right:auto;max-width:230px"> <div class="w3-container ws-black" style="border-top-right-radius:5px;border-top-left-radius:5px;"> <h5><a href="/cert/default.asp" class="w3-hover-text-white">Certificates</a></h5> </div> <div class="w3-border" style="border-bottom-right-radius:5px;border-bottom-left-radius:5px;"> <a href="/cert/cert_html.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">HTML</a> <a href="/cert/cert_css.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">CSS</a> <a href="/cert/cert_javascript.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">JavaScript</a> <a href="/cert/cert_frontend.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">Front End</a> <a href="/cert/cert_python.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">Python</a> <a href="/cert/cert_sql.asp" class="w3-button ws-grey w3-block w3-border-bottom" style="text-decoration:none">SQL</a> <a href="/cert/default.asp" class="w3-button ws-grey w3-block" style="text-decoration:none;">And more</a> </div> </div> --> <div id="stickypos" class="sidesection" style="text-align:center;position:sticky;top:50px;"> <div id="stickyadcontainer" style="width: 653.984px;"> <div style="position:relative;margin:auto;"> <div id="adngin-sidebar_sticky-0-stickypointer" style=""><div id="adngin-sidebar_sticky-0" style=""><div id="sn_ad_label_adngin-sidebar_sticky-0" class="sn_ad_label" style="color:#000000;font-size:12px;margin:0;text-align:center;">ADVERTISEMENT</div></div></div> <script> function secondSnigel() { if(window.adngin && window.adngin.adnginLoaderReady) { if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); }); } else { adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); }); } } else { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); }); } } } else { window.addEventListener('adnginLoaderReady', function() { if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); }); } else { adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); }); } } else { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); }); } } }); } } </script> </div> </div> </div> <script> uic_r_c() </script> </div> </div> <div id="footer" class="footer w3-container w3-white"> <hr> <div style="overflow:auto"> <div class="bottomad"> <!-- BottomMediumRectangle --> <!--<pre>bottom_medium_rectangle, all: [970,250][300,250][336,280]</pre>--> <div id="adngin-bottom_left-0" style="padding:0 10px 10px 0;float:left;width:auto;" data-google-query-id="CJbA_sueqvcCFXiOSwUd2fYBLg"><div id="sn_ad_label_adngin-bottom_left-0" class="sn_ad_label" style="color:#000000;font-size:12px;margin:0;text-align:center;">ADVERTISEMENT</div><div id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//bottom_medium_rectangle_1__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//bottom_medium_rectangle_1" name="google_ads_iframe_/22152718,16833175/sws-hb//w3schools.com//bottom_medium_rectangle_1" title="3rd party ad content" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" role="region" aria-label="Advertisement" tabindex="0" srcdoc="" data-google-container-id="a" style="border: 0px; vertical-align: bottom;" data-load-complete="true"></iframe></div></div> <!-- adspace bmr --> <!-- RightBottomMediumRectangle --> <!--<pre>right_bottom_medium_rectangle, desktop: [300,250][336,280]</pre>--> <div id="adngin-bottom_right-0" style="padding:0 10px 10px 0;float:left;width:auto;"><div id="sn_ad_label_adngin-bottom_right-0" class="sn_ad_label" style="color:#000000;font-size:12px;margin:0;text-align:center;">ADVERTISEMENT</div></div> </div> </div> <hr> <div class="w3-row-padding w3-center w3-small" style="margin:0 -16px;"> <div class="w3-col l3 m3 s12"> <a class="w3-button ws-grey ws-hover-black w3-block w3-round" href="javascript:void(0);" onclick="displayError();return false" style="white-space:nowrap;text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:15px;">Report Error</a> </div> <!-- <div class="w3-col l3 m3 s12"> <a class="w3-button w3-light-grey w3-block" href="javascript:void(0);" target="_blank" onclick="printPage();return false;" style="text-decoration:none;margin-top:1px;margin-bottom:1px">PRINT PAGE</a> </div> --> <div class="w3-col l3 m3 s12"> <a class="w3-button ws-grey ws-hover-black w3-block w3-round" href="/forum/default.asp" target="_blank" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:15px">Forum</a> </div> <div class="w3-col l3 m3 s12"> <a class="w3-button ws-grey ws-hover-black w3-block w3-round" href="/about/default.asp" target="_top" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:15px">About</a> </div> <div class="w3-col l3 m3 s12"> <a class="w3-button ws-grey ws-hover-black w3-block w3-round" href="https://shop.w3schools.com/" target="_blank" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:15px">Shop</a> </div> </div> <hr> <div class="ws-grey w3-padding w3-margin-bottom" id="err_form" style="display:none;position:relative"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright w3-large">×</span> <h2>Report Error</h2> <p>If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:</p> <p>help@w3schools.com</p> <br> <!-- <h2>Your Suggestion:</h2> <form> <div class="w3-section"> <label for="err_email">Your E-mail:</label> <input class="w3-input w3-border" type="text" style="margin-top:5px;width:100%" id="err_email" name="err_email"> </div> <div class="w3-section"> <label for="err_email">Page address:</label> <input class="w3-input w3-border" type="text" style="width:100%;margin-top:5px" id="err_url" name="err_url" disabled="disabled"> </div> <div class="w3-section"> <label for="err_email">Description:</label> <textarea rows="10" class="w3-input w3-border" id="err_desc" name="err_desc" style="width:100%;margin-top:5px;resize:vertical;"></textarea> </div> <div class="form-group"> <button type="button" class="w3-button w3-dark-grey" onclick="sendErr()">Submit</button> </div> <br> </form> --> </div> <div class="w3-container ws-grey w3-padding" id="err_sent" style="display:none;position:relative"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">×</span> <h2>Thank You For Helping Us!</h2> <p>Your message has been sent to W3Schools.</p> </div> <div class="w3-row w3-center w3-small"> <div class="w3-col l3 m6 s12"> <div class="top10"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Tutorials</h5> <a href="/html/default.asp">HTML Tutorial</a><br> <a href="/css/default.asp">CSS Tutorial</a><br> <a href="/js/default.asp">JavaScript Tutorial</a><br> <a href="/howto/default.asp">How To Tutorial</a><br> <a href="/sql/default.asp">SQL Tutorial</a><br> <a href="/python/default.asp">Python Tutorial</a><br> <a href="/w3css/default.asp">W3.CSS Tutorial</a><br> <a href="/bootstrap/bootstrap_ver.asp">Bootstrap Tutorial</a><br> <a href="/php/default.asp">PHP Tutorial</a><br> <a href="/java/default.asp">Java Tutorial</a><br> <a href="/cpp/default.asp">C++ Tutorial</a><br> <a href="/jquery/default.asp">jQuery Tutorial</a><br> </div> </div> <div class="w3-col l3 m6 s12"> <div class="top10"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top References</h5> <a href="/tags/default.asp">HTML Reference</a><br> <a href="/cssref/default.asp">CSS Reference</a><br> <a href="/jsref/default.asp">JavaScript Reference</a><br> <a href="/sql/sql_ref_keywords.asp">SQL Reference</a><br> <a href="/python/python_reference.asp">Python Reference</a><br> <a href="/w3css/w3css_references.asp">W3.CSS Reference</a><br> <a href="/bootstrap/bootstrap_ref_all_classes.asp">Bootstrap Reference</a><br> <a href="/php/php_ref_overview.asp">PHP Reference</a><br> <a href="/colors/colors_names.asp">HTML Colors</a><br> <a href="/java/java_ref_keywords.asp">Java Reference</a><br> <a href="/angular/angular_ref_directives.asp">Angular Reference</a><br> <a href="/jquery/jquery_ref_overview.asp">jQuery Reference</a><br> </div> </div> <div class="w3-col l3 m6 s12"> <div class="top10"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Examples</h5> <a href="/html/html_examples.asp">HTML Examples</a><br> <a href="/css/css_examples.asp">CSS Examples</a><br> <a href="/js/js_examples.asp">JavaScript Examples</a><br> <a href="/howto/default.asp">How To Examples</a><br> <a href="/sql/sql_examples.asp">SQL Examples</a><br> <a href="/python/python_examples.asp">Python Examples</a><br> <a href="/w3css/w3css_examples.asp">W3.CSS Examples</a><br> <a href="/bootstrap/bootstrap_examples.asp">Bootstrap Examples</a><br> <a href="/php/php_examples.asp">PHP Examples</a><br> <a href="/java/java_examples.asp">Java Examples</a><br> <a href="/xml/xml_examples.asp">XML Examples</a><br> <a href="/jquery/jquery_examples.asp">jQuery Examples</a><br> </div> </div> <div class="w3-col l3 m6 s12"> <div class="top10"> <!-- <h4>Web Certificates</h4> <a href="/cert/default.asp">HTML Certificate</a><br> <a href="/cert/default.asp">CSS Certificate</a><br> <a href="/cert/default.asp">JavaScript Certificate</a><br> <a href="/cert/default.asp">SQL Certificate</a><br> <a href="/cert/default.asp">Python Certificate</a><br> <a href="/cert/default.asp">PHP Certificate</a><br> <a href="/cert/default.asp">Bootstrap Certificate</a><br> <a href="/cert/default.asp">XML Certificate</a><br> <a href="/cert/default.asp">jQuery Certificate</a><br> <a href="//www.w3schools.com/cert/default.asp" class="w3-button w3-margin-top w3-dark-grey" style="text-decoration:none"> Get Certified &raquo;</a> --> <h5 style="font-family: 'Source Sans Pro', sans-serif;">Web Courses</h5> <a href="https://courses.w3schools.com/courses/html" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on html course link in footer');">HTML Course</a><br> <a href="https://courses.w3schools.com/courses/css" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on css course link in footer');">CSS Course</a><br> <a href="https://courses.w3schools.com/courses/javascript" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on javascript course link in footer');">JavaScript Course</a><br> <a href="https://courses.w3schools.com/programs/front-end" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on Front End course link in footer');">Front End Course</a><br> <a href="https://courses.w3schools.com/courses/sql" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on sql course link in footer');">SQL Course</a><br> <a href="https://courses.w3schools.com/courses/python" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on python course link in footer');">Python Course</a><br> <a href="https://courses.w3schools.com/courses/php" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on php course link in footer');">PHP Course</a><br> <a href="https://courses.w3schools.com/courses/jquery" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on jquery course link in footer');">jQuery Course</a><br> <a href="https://courses.w3schools.com/courses/java" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on Java course link in footer');">Java Course</a><br> <a href="https://courses.w3schools.com/courses/cplusplus" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on C++ course link in footer');">C++ Course</a><br> <a href="https://courses.w3schools.com/courses/c-sharp" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on bootstrap C# link in footer');">C# Course</a><br> <a href="https://courses.w3schools.com/courses/xml" target="_blank" onclick="ga('send', 'event', 'Courses' , 'Clicked on xml course link in footer');">XML Course</a><br> <a href="https://courses.w3schools.com/" target="_blank" class="w3-button w3-margin-top ws-black ws-hover-black w3-round" style="text-decoration:none" onclick="ga('send', 'event', 'Courses' , 'Clicked on get certified button in footer');"> Get Certified »</a> </div> </div> </div> <hr> <div class="w3-center w3-small w3-opacity"> W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our <a href="/about/about_copyright.asp">terms of use</a>, <a href="/about/about_privacy.asp">cookie and privacy policy</a>.<br><br> <a href="/about/about_copyright.asp">Copyright 1999-2022</a> by Refsnes Data. All Rights Reserved.<br> <a href="//www.w3schools.com/w3css/default.asp">W3Schools is Powered by W3.CSS</a>.<br><br> </div> <div class="w3-center w3-small"> <a href="//www.w3schools.com"> <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i> </a></div><a href="//www.w3schools.com"> <br><br> </a></div><a href="//www.w3schools.com"> </a></div><iframe name="__tcfapiLocator" style="display: none;"></iframe><iframe name="__uspapiLocator" style="display: none;"></iframe><a href="//www.w3schools.com"> <script src="/lib/w3schools_footer.js?update=20220202"></script> <script> MyLearning.loadUser('footer'); function docReady(fn) { document.addEventListener("DOMContentLoaded", fn); if (document.readyState === "interactive" || document.readyState === "complete" ) { fn(); } } uic_r_z(); uic_r_d() </script><iframe src="https://56d0da6c34aaa471db22bb4266aac656.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html" style="visibility: hidden; display: none;"></iframe> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </a><script type="text/javascript" src="https://geo.moatads.com/n.js?e=35&amp;ol=3318087536&amp;qn=%604%7BZEYwoqI%24%5BK%2BdLLU)%2CMm~tM!90vv9L%24%2FoDb%2Fz(lKm3GFlNUU%2Cu%5Bh_GcS%25%5BHvLU%5B4(K%2B%7BgeFWl_%3DNqUXR%3A%3D%2BAxMn%3Ch%2CyenA8p%2FHm%24%60%233P(ry5*ZRocMp1tq%5BN%7Bq%60RP%3CG.ceFW%7CoG%22mxT%3Bwv%40V374BKm55%3D%261fp%5BoU5t(KX%3C%3Ce%24%26%3B%23wPjrBEe31k5X%5BG%5E%5B)%2C2iVSWf3Stnq%263t!9jr%7BRzI%2C%7BOCb%25%24(%3DNqU%60W5u%7Bo(zs1CoK%2Bdr%5BG)%2C3ii)RGL3emgSuRVE&amp;tf=1_nMzjG---CSa7H-1SJH-bW7qhB-LRwqH-nMzjG-&amp;vi=111111&amp;rb=2-90xv0J4P%2FoMsPm8%2BZbNmT2EB%2BBOA3JNdQL68hLPh4bg2%2F%2FnQIIWF3Q%3D%3D&amp;rs=1-iHtHGE9B1zA1OQ%3D%3D&amp;sc=1&amp;os=1-3g%3D%3D&amp;qp=10000&amp;is=BBBBB2BBEYBvGl2BBCkqtUTE1RmsqbKW8BsrBu0rCFE48CRBeeBS2hWTMBBQeQBBn2soYggyUig0CBlWZ0uBBCCCCCCOgRBBiOfnE6Bkg7Oxib8MxOtJYHCBdm5kBhIcC9Y8oBXckXBR76iUUsJBCBBBBBBBBBWBBBj3BBBZeGV2BBBCMciUBBBjgEBBBBBB94UMgTdJMtEcpMBBBQBBBniOccBBBBBB47kNwxBbBBBBBBBBBhcjG6BBJM2L4Bk8BwCBQmIoRBBCzBz1BBCTClBBrbGBC4ehueB57NG9aJeRzBqEKBBBBBBB&amp;iv=8&amp;qt=0&amp;gz=0&amp;hh=0&amp;hn=0&amp;tw=&amp;qc=0&amp;qd=0&amp;qf=1240&amp;qe=883&amp;qh=1280&amp;qg=984&amp;qm=-330&amp;qa=1280&amp;qb=1024&amp;qi=1280&amp;qj=984&amp;to=000&amp;po=1-0020002000002120&amp;vy=ot%24b%5Bh%40%22oDgO%3DLlE6%3Avy%2CUitwb4%5Du!%3CFo%40Y_3r%3F%5DAY~MhXyz%26_%5B*Rp%7C%3EoDKmsiFDRz%5EmlNM%22%254ZpaR%5BA7Do%2C%3Bg%2C%2C%40W7RbzTmejO%3Def%2C%7Bvp%7C9%7C_%3Bm_Qrw5.W%2F84VKp%40i6AKx!ehV%7Du!%3CFo%40pF&amp;ql=%3B%5BpwxnRd%7Dt%3Aa%5DmJVOG)%2C~%405%2F%5BGI%3F6C(TgPB*e%5D1(rI%24(rj2Iy!pw%40aOS%3DyNX8Y%7BQgPB*e%5D1(rI%24(rj%5EB61%2F%3DSqcMr1%7B%2CJA%24Jz_%255tTL%3Fwbs_T%234%25%60X%3CA&amp;qo=0&amp;qr=0&amp;i=TRIPLELIFT1&amp;hp=1&amp;wf=1&amp;ra=1&amp;pxm=8&amp;sgs=3&amp;vb=6&amp;kq=1&amp;hq=0&amp;hs=0&amp;hu=0&amp;hr=0&amp;ht=1&amp;dnt=0&amp;bq=0&amp;f=0&amp;j=https%3A%2F%2Fwww.google.com&amp;t=1650718754860&amp;de=466991431602&amp;m=0&amp;ar=bee2df476bf-clean&amp;iw=2a1d5c5&amp;q=2&amp;cb=0&amp;ym=0&amp;cu=1650718754860&amp;ll=3&amp;lm=0&amp;ln=1&amp;r=0&amp;em=0&amp;en=0&amp;d=6737%3A94724%3Aundefined%3A10&amp;zMoatTactic=undefined&amp;zMoatPixelParams=aid%3A29695277962791520917040%3Bsr%3A10%3Buid%3A0%3B&amp;zMoatOrigSlicer1=2662&amp;zMoatOrigSlicer2=39&amp;zMoatJS=-&amp;zGSRC=1&amp;gu=https%3A%2F%2Fwww.w3schools.com%2Ftags%2Ftag_p.asp&amp;id=1&amp;ii=4&amp;bo=2662&amp;bd=w3schools.com&amp;gw=triplelift879988051105&amp;fd=1&amp;ac=1&amp;it=500&amp;ti=0&amp;ih=1&amp;pe=1%3A512%3A512%3A1026%3A846&amp;jm=-1&amp;fs=198121&amp;na=2100642455&amp;cs=0&amp;ord=1650718754860&amp;jv=1483802810&amp;callback=DOMlessLLDcallback_5147906"></script><iframe src="https://www.google.com/recaptcha/api2/aframe" width="0" height="0" style="display: none;"></iframe></body><iframe sandbox="allow-scripts allow-same-origin" id="936be7941bd9c5c" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://jp-u.openx.net/w/1.0/pd?plm=6&amp;ph=8a7ca719-8c2c-4c16-98ad-37ac6dbf26e9&amp;gdpr=0&amp;us_privacy=1---"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="94da8182082e79b" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://eus.rubiconproject.com/usync.html?us_privacy=1---"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="950ad185776f97c" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://cdn.connectad.io/connectmyusers.php?us_privacy=1---&amp;"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="960961bdb263a5c" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://ads.pubmatic.com/AdServer/js/user_sync.html?kdntuid=1&amp;p=157369&amp;gdpr=0&amp;gdpr_consent=&amp;us_privacy=1---"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="973d77507d8ed2c" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://s.amazon-adsystem.com/iu3?cm3ppd=1&amp;d=dtb-pub&amp;csif=t&amp;dl=n-index_pm-db5_ym_rbd_n-vmg_ox-db5_smrt_an-db5_3lift"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="986df094b3ccc6f" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://biddr.brealtime.com/check.html"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="9984b091a86efa7" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://js-sec.indexww.com/um/ixmatch.html"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="1004b17db44af55b" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://csync.smilewanted.com?us_privacy=1---"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="101af22cac10bcfd" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://onetag-sys.com/usync/?cb=1650718752982&amp;us_privacy=1---"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="10290b51ae900f2b" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://eb2.3lift.com/sync?us_privacy=1---&amp;"> </iframe><iframe sandbox="allow-scripts allow-same-origin" id="103d27603dbc3983" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://acdn.adnxs.com/dmp/async_usersync.html"> </iframe></html>

This is the most modern and comprehensive course available for Spring Framework 5 and Spring Boot 2. All source code examples used in this course have been developed using the latest version of the Spring Framework - Spring Framework 5 and Spring Boot 2. In this course, you will build multiple real world applications using Spring Framework 5. You will see how modern Spring Framework development is done by leveraging the features of Spring Boot 2. Jump In and Build a Spring MVC App with Spring Boot! We'll jump right into web development with the Spring Framework. I'll show you how kick off a Spring Boot project by using the Spring Initializr. We will then go step by step to build a simple Book / Author web application. You will see how easy it is to use Spring Boot, Spring MVC, and Spring Data JPA to create a functional web application running under Tomcat with a H2 in-memory database. Use Test Driven Development! In addition to teaching you Spring Framework 5, you will learn about modern best practices used in enterprise application development. As we build the applications, you'll see me using Test Driven Development (TDD) with JUnit and Mockito. Using Mockito mocks keeps your Spring Framework unit tests light and fast! You'll also see how the Spring context can be used for more complex integration tests. These techniques are best practices used by companies all over the world to build and manage large scale Spring Framework applications. GitHub Source Code You will have complete access to all source code examples used in the course. In each lesson where we write code, you will have a link to GitHub with two branches in the Github repository. The first branch is the starting state of the code. The second branch is the ending state of the code. You can see exactly what changed in each lesson. Each step of the way, you have a working example you can use for troubleshooting. In fact, you will get access to 15 (and growing!) different GitHub repositories - each packed with Spring Framework programming examples. And, you're encouraged to fork my GitHub repositories so you can share the Spring Framework applications, which you built, to future employers! Continuous Integration Builds Since we are using GitHub and have great test coverage, I also show you how easy it is to set up Continuous Integration builds with CircleCI. Continuous Integration builds are another best practice used by enterprise developers. Using CircleCI makes your CI builds a snap! Project Lombok We all know Java development can require a lot of boiler plate code. It's just the nature of Java. Would you like to see how to slash your boiler plate code using Project Lombok? Spring Data JPA and Hibernate Spring MVC and Hibernate have long been cornerstones of the Spring Framework. You will learn how to use Spring MVC, Spring Data JPA and Hibernate to build a real world web application. You'll learn about Hibernate configuration, and about the mapping of JPA entities. The Thymeleaf template engine is hugely popular with the Spring community. You will see how easy Spring Boot makes using Thymeleaf with Spring MVC. While Bootstrap CSS is not a focus of the course, we will leverage Bootstrap CSS to make our web pages look awesome! Spring MVC Spring MVC has a lot of robust capabilities. I start you off showing you how to build recipe application (using TDD, of course). Initially, it's all happy path development. We go back and add custom exception handling, form validation, and internationalization. Reactive Programming A big theme of Spring Framework 5 is Reactive Programming. Inside the course we build a web application using Thymeleaf, Spring MVC, Spring Data MongoDB, and MongoDB. We then take the MongoDB application we built and convert it to a Reactive application. You'll see how you can leverage the new Reactive types inside the Spring Framework from the data tier to the web tier. You will get to see step by step how to convert a traditional Spring MVC application to an end to end reactive application using the WebFlux framework - which is brand new to Spring Framework 5. Coming Soon to the Course I plan to add a lot more content to this course! I want this to be your go-to course for becoming a Spring Framework developer. Coming soon to the course in 2017: Building RESTFul APIs with Spring WebFlux (New in Spring Framework 5!) Spring Security Documenting your APIs with RestDoc and Swagger 2 Aspect Oriented Programming Using Spring Events Scheduling Tasks Using JAXB Caching with eHcache Spring JDBC (JDBC Template) Spring RestTemplate JMS Messaging AMQP with RabbitMQ Logging configuration for Logback and Log4J 2 And more real world Spring Framework apps! Message me if there is a topic you'd like to see! Spring Framework 5 GA Release This Spring Framework course is so new, it has been developed using Spring Framework 5 'Release Candidate' releases. Spring Framework 5 went GA (General Availability) in September of 2017. The Spring Boot 2.0 GA release is expected to be in late 2017. All source code examples will get updated as the GA releases of the Spring Framework and Spring Boot become available. Course Updates August 1, 2017 - All source code examples updated to latest release of Spring Framework 5 and Spring Boot 2. Now on Spring Framework 5.0 RC3 and Spring Boot 2.0.0.M3. August 8, 2017 - Added content for internationalization with Spring MVC. Added new section to course for using MySQL with Spring Boot / Spring MVC. Added CircleCI for CI builds. CodeCov (dot) io for test coverage reporting. August 9th, 2017 - Added whole new section course on Spring Data MongoDB. Learn to build a web application using the best of the Spring Framework! August 25th, 2017 - Reactive Programming with Spring Framework 5! Almost two hours of additional content has been added on Reactive Programming and Reactive MongoDB. October 10th, 2017 - 3 hours of new content added for consuming and building RESTFul web services using Spring MVC. This includes using RestTemplate to consume RESTFul services, Spring 5 WebClient to consume RESTFul services using Reactive data types, and new lessons on using MapStruct for data mapping. Course Extra - Spring Boot Cookbook! Inside this course, I'm including a Spring Boot Cookbook. You will have complete examples of using the Spring Framework with popular open source technologies. When you get hired as a Spring Framework developer, you'll have ready made Spring Framework examples! My Spring Boot Cookbook includes example Spring Boot projects for: MongoDB MySQL Postgres Maria DB DB2 Express Neo4J Redis Cassandra ActiveMQ RabbitMQ Course Extra - Learn Docker! Docker is an exciting technology that is on fire right now! As a course extra, I'm including the first 3 sections from my top rated Docker for Java Developers course. You will learn more about what Docker is and how you can deploy and run a Spring Boot application inside a Docker container. For Java developers, Docker really is a game changer! Course Extra - IntelliJ IDEA Ultimate Students enrolling in the course can receive a free 90 day trial license to IntelliJ IDEA Ultimate! Closed Captioning / Subtitles Closed captioning in english is available for all course videos! PDF Downloads All keynote presentations are available for you to download as PDFs. Lifetime Access When you purchase this course, you will receive lifetime access! You can login anytime from anywhere to access the course content. No Risk - Money Back Guarantee You can buy this course with no risk. If you are unhappy with the course, for any reason, you can get a complete refund. The course has a 30 day Money Back Guarantee. Future Proof Your Programming Career There is huge demand for Spring Framework developers. Downloads of Spring Boot are up 425% year over year, while Gartner Research is calling Java EE "Obsolete". The market trends are clear. Popularity for JEE is rapidly declining. The popularity for the Spring Framework is growing. Spring Framework 5 is packed with exciting and innovative new features making it a natural choice for enterprise application development. Future proof your programming career. Start learning how to building modern applications using the Spring Framework and enroll in this course today! ¿Cuáles son los requisitos? Basic Java knowledge is required HTML Knowledge is very helpful Knowledge of SQL and databases is helpful ¿Qué voy a aprender en este curso? Learn the Spring Framework from an instructor who has worked for Pivotal customers as a Spring Source consultant, and has spoken at Spring One Learn step by step how to build applications using Spring Framework 5 and Spring Boot 2 You will be taught using best practices such as SOLID OOP, GitHub, Test Driven Development, and Continuous Integration Testing You will understand how to access data using Hibernate 5 and Spring Data JPA Build an end to end Reactive application with Spring Framework 5 and MongoDB Learn About Reactive Programming with Spring Framework 5 Build web applications using Spring MVC See how to run a Spring Boot application inside a Docker container Get access to a Spring Boot Application Cookbook ¿A quién está dirigido? This course is ideal for Java developers who wish to use the Spring Framework for enterprise application development Ver más

# online-examination-systen-in-php Online Examination System Today Online Examination System has become a fast growing examination method because of its speed and accuracy. It is also needed less manpower to execute the examination. Almost all organizations now-a-days, are conducting their objective exams by online examination system, it saves students time in examinations. Organizations can also easily check the performance of the student that they give in an examination. As a result of this, organizations are releasing results in less time. It also helps the environment by saving paper. According to today’s requirement, online examination project in php is very useful to learn it. What is an online examination system? In an online examination system examine get their user id and password with his/her admit card. This id is already saved in the examination server. When examine login to the server he/she get his/her profile already register. On the certain time examine gets the message to start the examination. All answers given by examine are saved into the server with his/her profile information. Online examination system also allows to correct the answer if the examine needed to change any answer in the examination time duration, however, after the time duration any change will not allow. This also makes c checking the answer easy and error proof as computers are more accurate than man and provide fast results too. Php is a web base language so we can create an online examination system in PHP. Administrator of Online Examination has multiple features such as Add, Delete, Update Topics and Question. To Login as Admin put inside your browser "http://www.applicationname/admin" The user will automatically get the updated version by logging using the user ID and Password provided at the time of registration. No need of reprinting,appearance,vigilance and the job is done. Online examination system features Login system must be present and secured by password. Ability to save the answer given by the candidate along with the question. Answer checking system should be available. Could Update Profile Log out after the over. Admin Panel Project objective: Online examination system is a non removable examination pattern of today’s life. We need more time saving and more accurate examination system as the number of applicants is increasing day by day. For all IT students and professionals, it is very important to have some basic understanding about the online examination system. On this site you will get source code with the running project. It will help you to understand the concept of the project. Here you find project in php free download. Brief overview of the technology: Front end: HTML, CSS, JavaScript HTML: HTML is used to create and save web document. E.g. Notepad/Notepad++ CSS : (Cascading Style Sheets) Create attractive Layout JavaScript: it is a programming language, commonly use with web browsers. Back end: PHP, MySQL PHP: Hypertext Preprocessor (PHP) is a technology that allows software developers to create dynamically generated web pages, in HTML, XML, or other document types, as per client request. PHP is open source software. MySQL: MySql is a database, widely used for accessing querying, updating, and managing data in databases. Software Requirement(any one) WAMP Server XAMPP Server MAMP Server LAMP Server Installation Steps 1. Download zip file and Unzip file on your local server. 2. Put this file inside "c:/wamp/www/" . 3. Database Configuration Open phpmyadmin Create Database named quiz_new. Import database quiz_new.sql from downloaded folder(inside database) 4. Open Your browser put inside "http://localhost/Online_exam_New/" 5. To Login as admin put "http://localhost/Online_exam_New/admin" Admin Login Details Login Id: admin@a

<!DOCTYPE html><html lang="en"><head><style>.cta{}.default-theme{}#dood{}.fkbx{}#fkbx-hht{}.fkbx-hht-s{}#fkbx-text{}.hide-sf{}.init{}.left-align-attr{}.light-text{}.mv-dot{}.mv-dot-bg{}.mv-focused{}.mv-link-hide{}.mv-locthumb{}.mv-locgradient{}.mv-loctitle{}.mv-locfallback{}#mv-single{}.mv-tiles{}.mv-x{}.mv-x-inner{}.personalized-suggestion-container{}.prm-pt{}.prm{}.prt{}.pt{}.suggestion-init{}.trending-suggestion-container{}@-webkit-keyframes init-hide {0%{opacity:0}99%{opacity:0}100%{opacity:1}}html{height:100%}body{font:small arial,sans-serif;margin:0;text-align:-webkit-center}body._cSc,body.hide-sf #fkbx,body.hide-sf #lga{visibility:hidden}body.init{-webkit-animation:init-hide 0.5s linear}#_Alw{display:flex;flex-direction:column;height:100%;margin:0 auto}#most-visited.suggestion-init,#suggestion-chips.suggestion-init,#lga.init,#fkbx.init{-webkit-animation:init-hide 2s linear}a{color:#1a0dab;text-decoration:none}a:hover,a:active{text-decoration:underline}a:visited{color:#609}._AZu{display:none}.trending-suggestion-container{height:159px;margin-top:5px;}.personalized-suggestion-container{height:0px}#most-visited{-webkit-user-select:none;flex:1;max-height:calc(4px + 128px + 16px + 128px + 8px + 10px + 16px + 10px);overflow:hidden;z-index:1}#mv-tiles{margin:0;overflow:hidden;position:relative;text-align:start}#mv-single{border:none;height:100%;width:100%}.mv-tile{-webkit-transition-duration:200ms;-webkit-transition-property:-webkit-transform,margin,opacity,width;display:inline-block;line-height:normal;position:relative;vertical-align:top}.mv-tile.mv-bl{margin-left:0;margin-right:0;opacity:0;width:0}.mv-page{cursor:pointer;outline:none}._kte{height:100%;visibility:hidden;width:100%}.mv-page ._kte{visibility:visible}.mv-mask,.mv-thumb,.mv-locthumb,.mv-locgradient,.mv-locfallback{position:absolute}.mv-mask{border:1px solid transparent;left:0;pointer-events:none;position:absolute;top:0}.mv-title{border:none;position:absolute}.mv-locthumb,.mv-locgradient,.mv-locfallback{border-radius:3px;pointer-events:none}.mv-locgradient{background:-webkit-linear-gradient(left,rgba(35,35,35,1) 0%,rgba(35,35,35,1) 40%,rgba(35,35,35,0.3) 60%,rgba(35,35,35,0.1) 70%,rgba(35,35,35,0) 100%)}.mv-locthumb img{border-radius:0 3px 3px 0;height:83px;left:55px;pointer-events:none;position:absolute;top:0;width:83px}.mv-locfallback{overflow:hidden}.mv-locfallback ._Gsd{box-sizing:content-box;overflow:hidden;position:absolute;text-align:center;text-overflow:ellipsis;white-space:nowrap}.mv-locfallback img{height:auto;left:0;pointer-events:none;position:absolute;top:0}.mv-loctitle{-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-line-clamp:5;border:none;border-radius:3px 0 0 3px;color:white;display:-webkit-box;height:79px;left:0;margin:2px 0 2px 4px;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;text-shadow:1px 1px #232323;top:0;white-space:normal;width:79px}.mv-x-hide .mv-x{display:none}.mv-x{background-color:transparent;border:none;cursor:pointer;opacity:0;outline:none}.mv-page .mv-x{-webkit-transition:opacity 150ms;position:absolute}.mv-page:hover .mv-x{-webkit-transition-delay:500ms;opacity:1}.mv-page .mv-x:hover{-webkit-transition:none}.mv-domain{bottom:24px;color:#777;margin:0 7px;position:absolute;text-align:center;width:90%}.mv-fav{background-size:16px;height:16px;pointer-events:none;position:absolute;width:16px}#mv-noti,#mv-noti-error{font:bold 12px Arial;padding:10px 0}#mv-noti span,#mv-noti-error span{cursor:default;display:inline-block;height:16px;line-height:16px}#mv-noti-lks span,#mv-noti-error-lks span{-webkit-margin-start:6px;color:#1155cc;cursor:pointer;opacity:1;outline:none;padding:0 4px}#mv-noti-lks span:hover,#mv-noti-lks span:focus,#mv-noti-error-lks span:hover,#mv-noti-error-lks span:focus{text-decoration:underline}#mv-noti-lks .mv-x,#mv-noti-error-lks .mv-x{-webkit-margin-start:8px;display:inline-block;opacity:1;position:relative;vertical-align:top}#mv-noti.mv-noti-hide,#mv-noti-error.mv-noti-hide,#mv-noti .mv-link-hide{display:none}form{height:39px}#fkbx{background-color:#fff;border:1px solid rgb(185,185,185);border-radius:1px;border-top-color:rgb(160,160,160);cursor:text;display:inline-block;font:18px arial,sans-serif;height:36px;line-height:36px;max-width:672px;position:relative;width:618px}#fkbx:hover{border:1px solid #a9a9a9;border-top-color:#909090}.fkbxfcs #fkbx{border:1px solid #4d90fe}#fkbx>input{background:transparent;border:none;bottom:0;box-sizing:border-box;left:0;margin:0;outline:none;padding:0 8px;position:absolute;top:2px;width:100%}html[dir=rtl] #fkbx>input{right:0}#fkbx-text{color:#bbb;bottom:0;font-size:16px;left:9px;margin-top:1px;overflow:hidden;position:absolute;right:9px;text-align:initial;text-overflow:ellipsis;top:0;visibility:hidden;white-space:nowrap}html[dir=rtl] #fkbx-text{left:auto}#fkbx_crt{background:#333;bottom:5px;position:absolute;left:9px;right:auto;top:5px;visibility:hidden;width:1px}html[dir=rtl] #fkbx_crt{left:auto;right:9px}@-webkit-keyframes blink {0%,61.54%{opacity:1}61.55%,100%{opacity:0}}.fkbxfcs #fkbx_crt{visibility:inherit;-webkit-animation:blink 1.3s linear infinite}#fkbx{border:none;border-radius:2px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);height:44px;outline:none;transition:box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1);width:620px}#fkbx:hover,.fkbxfcs #fkbx{border:none;box-shadow:0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08)}#fkbx-text{bottom:4px;color:rgba(0,0,0,0.38);left:13px;right:13px;top:4px}#fkbx_crt{bottom:12px;left:13px;top:12px}html[dir=rtl] #fkbx_crt{right:13px}#theme-attr{bottom:0;display:inline-block;font-size:10pt;left:auto;position:fixed;right:8px;white-space:nowrap;z-index:-1}#theme-attr-msg{cursor:default}html[dir=rtl] #theme-attr,#theme-attr.left-align-attr{left:8px;right:auto;text-align:right}#fkbx-spch,#fkbx-hspch{cursor:pointer;display:none;height:21px;padding:15px 6px 0;width:17px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACTUlEQVR4Ae2XU7fdQBiGv3Nd27aVmV23QXVT2+4vqG3jX9S2rdvaVpLjM8dIZ8pJ1rYxz1rvNt5nsHcCgjAjEFhWmrIlf4G6Oe++sjk/73fIA3VL/iL2HMQzAzbnN1C2kKu0sOUu8hZyfcj2/IZxPPLO8u4l4nIm2BJhBf0Jey3EG2yd+yvAXhuHAvl5AQjkxuMMWIFECISGEKhIcQEhIATKhUBoCIGyRBMQAkKAnIEsGutvso5D9RAOpzOBI7t//xqGiiwuWZEQeMYL5J2DjsDBTuL9FZA3598Gju8y6sQL6Cp6GgmBy7wAOQszHDMw3+8Z2ELmAIeh4lm8gKmiyxBu8s/AGl6A3j/qPKmn5S75LL+JXAQHpopPOATWhH8GTkJXToClJPsctLIvI1LPh8Ql9hpbeVlqR0uX2ZaQjLtFaiM/dT8LzpnIn/9nT+SysNvsMXCDrqGT9g0sPYNIkX8aRrPitpyGJRAktPByVpqPrknjIv1zeosXyN1X45qhoWUBl1fwUlq4wiFwHyJN4WloSk6Dzspn76lx/f/Gk47rSq9W4ANdQy0NBR11FGdJ/zEUt4BokHsO+uXsrXnJTYkSQ0OHTBVNY5szY4SrqjG4U2V229TwVFr8IHuNu/eZqkuGaKIPkfrRQgYrEEp0FWVw5aPLN6VHM1ribgjlH7pZdtHnhyaNMhT02O/yGn5NrydZAGkQT+iqqyv7FzVU6drXofjdDw2RHxrO/zoEf6CFr1PJjeYQLPHF4xbpwDiLD8Q/QiD6CAEhIBAIfgIDXvSOOYNfugAAAABJRU5ErkJggg==) no-repeat center;background-size:24px 24px;position:absolute;right:0}#fkbx-hspch{display:none}html[dir=rtl] #fkbx-spch,html[dir=rtl] #fkbx-hspch{left:0;right:auto}#fkbx-hht{-webkit-transition:opacity 200ms;color:#777;font-size:13px;line-height:normal;opacity:0;padding-top:10px;position:absolute;right:29px}html[dir=rtl] #fkbx-hht{float:left}#fkbx-hht.fkbx-hht-s{opacity:1}#fkbx-spch,#fkbx-hspch{padding:22px 12px 0}#lga{flex-shrink:0;height:231px;margin-top:45px;text-align:-webkit-center}#lga>#dood{display:inline-block;opacity:0;-webkit-transition:opacity 130ms}#dood.cta{cursor:pointer}#logo-sub{color:#4285f4;font-size:16px;left:79px;position:relative;top:-20px;white-space:nowrap;width:0}#mngb{position:absolute;top:15px;-webkit-transition:opacity 130ms;width:100%}#mngb.h{opacity:0}#gb #_N2{margin-right:0;padding-top:0;top:0}#prpd{text-align:start}span#prt{display:block}#prm,#prt,#_vrc{-webkit-user-select:auto}#prm-pt{font-size:83%;position:relative;z-index:1}._rzc{font-family:'Roboto'}body._cSc ._rzc{display:none}.des-cla{}.des-cla #most-visited{margin-top:50px}.des-cla #mv-tiles{height:276px;line-height:138px}.des-cla .mv-tile{background:-webkit-linear-gradient(#f2f2f2,#e8e8e8);border-radius:4px;box-shadow:inset 0 2px 3px rgba(0,0,0,.09);height:85px;margin-left:10px;margin-right:10px;width:140px}.des-cla .mv-tile.mv-bl{-webkit-transform:scale(0.5)}.des-cla .mv-mask{border-radius:3px;box-shadow:inset 0 2px 3px rgba(0,0,0,0.09);height:83px;width:138px}.des-cla .mv-page .mv-mask{border-style:solid}.default-theme.des-cla .mv-page .mv-mask{border-color:#c0c0c0}.default-theme.des-cla .mv-page:hover .mv-mask,.default-theme.des-cla .mv-focused~.mv-page .mv-mask,.default-theme.des-cla .mv-page:focus .mv-mask{border-color:#7f7f7f}.des-cla .mv-page .mv-focused~.mv-mask,.des-cla .mv-page:focus .mv-mask{-webkit-transition:background-color 100ms ease-in-out;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 80%,rgba(255,255,255,0.9));background-color:rgba(0,0,0,0.35);opacity:0.35}.des-cla .mv-thumb,.des-cla .mv-locthumb,.des-cla .mv-locgradient,.des-cla .mv-locfallback{border:none;left:1px;height:83px;top:1px;width:138px}.des-cla .mv-title{bottom:-27px;height:18px;left:0;width:140px}.des-cla .mv-locfallback .mv-domain{bottom:24px;margin:0 7px;width:124px}.des-cla .mv-locfallback img{border-radius:3px;width:138px}.des-cla .mv-x{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQVR42r2RsQrDMAxEBRdl8SDcX8lQPGg1GBI6lvz/h7QyRRXV0qUULwfvwZ1tenw5PxToRPWMC52eA9+WDnlh3HFQ/xBQl86NFYJqeGflkiogrOvVlIFhqURFVho3x1moGAa3deMs+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==');border-radius:2px;height:16px;width:16px}.des-cla .mv-x:hover,.des-cla .mv-x:focus{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAqklEQVR4XqWRMQ6DMAxF/1Fyilyj2SmIBUG5QcTCyJA5Z8jGhlBPgRi4TmoDraVmKFJlWYrlp/g5QfwRlwEVNWVa4WzfH9jK6kCkEkBjwxOhLghheMWMELUAqqwQ4OCbnE4LJnhr5IYdqQt4DJQjhe9u4vBBmnxHHNzRFkDGjHDo0VuTAqy2vAG4NkvXXDHxbGsIGlj3e835VFNtdugma/Jk0eXq0lP//5svi4PtO01oFfYAAAAASUVORK5CYII=')}.des-cla .mv-page .mv-x{right:2px;top:2px}html[dir=rtl] .des-cla .mv-page .mv-x{left:2px;right:auto}.des-cla .mv-fav{bottom:-7px;left:62px}.des-cla #fkbx{box-shadow:inset 0px 1px 2px rgba(0,0,0,0.1)}.des-cla #fkbx-text{visibility:hidden}.des-cla #mv-tiles{width:320px}.des-cla #fkbx{width:298px}@media only screen and (min-width:660px){.des-cla #mv-tiles{width:480px}.des-cla #fkbx{width:458px}}@media only screen and (min-width:820px){.des-cla #mv-tiles{width:640px}.des-cla #fkbx{width:618px}}.des-mat{}.des-mat #most-visited{margin-top:63px}.des-mat #mv-tiles{height:calc(4px + 128px + 16px + 128px + 8px);line-height:146px;max-height:calc(100% - 10px - 16px - 10px)}.des-mat .mv-tile{background:rgb(242,242,242);border-radius:2px;height:130px;margin-left:8px;margin-right:8px;width:156px}.des-mat.light-text .mv-tile{background:rgb(51,51,51)}.des-mat .mv-tile.mv-bl{-webkit-transform:scale(0);-webkit-transform-origin:0 65px;margin-left:0;margin-right:0;width:0}.des-mat .mv-mask{border-color:transparent;border-radius:2px;height:128px;width:154px}.default-theme.des-mat .mv-page .mv-mask{-webkit-transition:box-shadow 200ms,border 200ms}.default-theme.des-mat .mv-page:hover .mv-mask,.default-theme.des-mat .mv-page .mv-focused~.mv-mask{box-shadow:0 1px 2px 0 rgba(0,0,0,0.1),0 4px 8px 0 rgba(0,0,0,0.2)}.des-mat .mv-page .mv-focused~.mv-mask{-webkit-transition:box-shadow 200ms,border 200ms,background-color 100ms ease-in-out;background:rgba(0,0,0,0.3);border-color:rgba(0,0,0,0.3)}.des-mat .mv-thumb,.des-mat .mv-locthumb,.des-mat .mv-locgradient,.des-mat .mv-locfallback{border:none;border-radius:0;height:94px;left:4px;top:32px;width:148px}.des-mat .mv-title{bottom:auto;height:15px;left:32px;top:9px;width:120px}html[dir=rtl] .des-mat .mv-title{left:auto;right:32px}@media (-webkit-min-device-pixel-ratio:2){.des-mat .mv-title{top:8px}}.des-mat .mv-locfallback .mv-dot-bg{background:#fff;height:100%;width:100%}.des-mat.light-text .mv-locfallback .mv-dot-bg{background:#555}.des-mat .mv-locfallback .mv-dot{background-color:#f2f2f2;border-radius:8px;display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.des-mat.light-text .mv-locfallback .mv-dot{background-color:#333}.des-mat .mv-locfallback img{width:148px}.des-mat .mv-x{border-radius:2px;height:32px;width:32px}.des-mat .mv-x .mv-x-inner{-webkit-mask-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALklEQVQI12NgaABCZADmNzD8RxKG8xDCKAogHFQ9UGE0IayCWLRjsQirk7A4HgDcDSHxzPGFWwAAAABJRU5ErkJggg==') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAV0lEQVQoz42TWw4AEAwE9+i9OR8EDV3jSzqTVB8kKRRyZ/JQUzPq4uNSqYnW6kXe6jN6B8s8GdiXb+gLPNSPllU/BCrC1LAY2B7YcDhCuBR4zfDiwq/QAfvmh51S6zwEAAAAAElFTkSuQmCC') 2x);-webkit-mask-repeat:no-repeat;-webkit-mask-size:10px 10px;background-color:rgba(90,90,90,0.7);height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:50%;width:10px}.des-mat.light-text .mv-x .mv-x-inner{background-color:rgba(255,255,255,0.7)}.des-mat .mv-x:hover .mv-x-inner,.des-mat #_z1e:focus .mv-x-inner{background-color:rgb(90,90,90)}.des-mat.light-text .mv-x:hover .mv-x-inner,.des-mat.light-text #_z1e:focus .mv-x-inner{background-color:rgb(255,255,255)}.des-mat .mv-x:active .mv-x-inner,.des-mat #_z1e:active .mv-x-inner{background-color:rgb(66,133,244)}.des-mat.light-text .mv-x:active .mv-x-inner,.des-mat.light-text #_z1e:active .mv-x-inner{background-color:rgba(255,255,255,0.5)}.des-mat .mv-page .mv-x{background:linear-gradient(to right,transparent,rgb(242,242,242) 10%);right:0;top:0}html[dir=rtl] .des-mat .mv-page .mv-x{background:linear-gradient(to left,transparent,rgb(242,242,242) 10%);left:0;right:auto}.des-mat.light-text .mv-page .mv-x{background:linear-gradient(to right,transparent,rgba(51,51,51,0.9) 30%)}html[dir=rtl] .des-mat.light-text .mv-page .mv-x{background:linear-gradient(to left,transparent,rgba(51,51,51,0.9) 30%)}.des-mat .mv-fav{left:8px;top:8px}html[dir=rtl] .des-mat .mv-fav{left:auto;right:8px}.des-mat #mv-noti-lks .mv-x,.des-mat#mv-noti-error-lks .mv-x{-webkit-transform:translate(0,-8px)}.des-mat #mv-tiles{width:344px}.des-mat #fkbx-text{visibility:inherit}.des-mat #fkbx{width:326px}@media only screen and (min-width:700px){.des-mat #mv-tiles{width:516px}.des-mat #fkbx{width:498px}}@media only screen and (min-width:872px){.des-mat #mv-tiles{width:688px}.des-mat #fkbx{width:670px}}.des-ico{}.des-ico #most-visited{margin-top:63px}.des-ico #mv-tiles{background:rgba(255,255,255,0.2);border-radius:4px;height:224px;line-height:112px;margin-bottom:20px;padding:18px 6px}.des-ico.light-text #mv-tiles{background:rgba(0,0,0,0.4)}.default-theme.des-ico #mv-tiles{background:none}.des-ico .mv-tile{border-radius:2px;height:108px;margin:0 12px 4px 12px;width:84px}.des-ico .mv-tile.mv-bl{-webkit-transform:scale(0);-webkit-transform-origin:0 41px;margin-left:0;margin-right:0;width:0}.des-ico .mv-mask{border-color:transparent;border-radius:0;height:100%;width:100%;z-index:5}.des-ico .mv-page .mv-focused~.mv-mask{-webkit-transition:none;background:rgba(0,0,0,0.2);border:none;border-radius:2px;box-shadow:none}.des-ico.light-text .mv-page .mv-focused~.mv-mask{background:rgba(255,255,255,0.2)}.des-ico .mv-thumb,.des-ico .mv-locthumb,.des-ico .mv-locgradient,.des-ico .mv-locfallback{border:none;height:48px;left:50%;margin-left:-24px;position:absolute;top:18px;width:48px;z-index:10}.des-ico .mv-title{bottom:auto;height:28px;left:auto;right:auto;top:76px;width:100%;z-index:10}.des-ico .mv-x{border-radius:0;height:16px;width:16px;z-index:15}.des-ico .mv-page .mv-x .mv-x-inner{display:none}.des-ico .mv-page .mv-x,.des-ico.light-text .mv-page .mv-x{background-color:transparent;background-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOMvlkz0KwCAMRnscDyJ6DBEdPIH/iPdWSInQDu1QpVs7uMS8R76IGyEE3pztgwLGGCilbo1CCKCUPgsQbq1BjPGsWWuh9w7GmLkIIYRT4pwbcK11bQfe+yFBuJSyvkScAmGUpJTWBDj6EeGYJOc8J9BaDwDBaxy8exRwzkFKeWvE2tQz/vAv7E36qwAYPrp5AAAAAElFTkSuQmCC') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAQ9JREFUWMPt1tsKRFAUBmCP46GcjyWHB5ILeTVcIHfOak1L2Ulj0GCa2kqp+fN/w9o7DMuy8MuToQAKoAAKOBIKwxCKogBVVXezHMdBHMcQBMF1gCzLAI+u60DTtM0cz/NQVdWUTZLkOgD+87ZtPyIEQYC6rqfMOI7guu61M7BG6LpOfhNFkZQPwwCe590zhO8QkiRB0zSk3HGce1fBGjGX930Ptm0/swwVRSGIGWJZ1nP7wPIpzADDMJ4BbL0CvDZN814ALr/1EMqy/BXiMADLsAAPRCx3xW8QzNlyLMIhXGeWy/HMTBwClGVJyrFoK7dE5Hl+HSCKoumGuN3uZTGTpin4vk+/ByiAAijgPwAvFKeuJTQjB0kAAAAASUVORK5CYII=') 2x);top:10px}.des-ico #mv-noti-x{border-radius:2px;height:32px;width:32px}.des-ico #mv-noti-x .mv-x-inner{-webkit-mask-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALklEQVQI12NgaABCZADmNzD8RxKG8xDCKAogHFQ9UGE0IayCWLRjsQirk7A4HgDcDSHxzPGFWwAAAABJRU5ErkJggg==') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAV0lEQVQoz42TWw4AEAwE9+i9OR8EDV3jSzqTVB8kKRRyZ/JQUzPq4uNSqYnW6kXe6jN6B8s8GdiXb+gLPNSPllU/BCrC1LAY2B7YcDhCuBR4zfDiwq/QAfvmh51S6zwEAAAAAElFTkSuQmCC') 2x);-webkit-mask-repeat:no-repeat;-webkit-mask-size:10px 10px;background-color:rgba(90,90,90,0.7);height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:50%;width:10px}.des-ico.light-text #mv-noti-x .mv-x-inner{background-color:rgba(255,255,255,0.7)}.des-ico #mv-noti-x:hover .mv-x-inner,.des-ico #mv-noti-x:focus .mv-x-inner{background-color:rgb(90,90,90)}.des-ico.light-text #mv-noti-x:hover .mv-x-inner,.des-ico.light-text #mv-noti-x:focus .mv-x-inner{background-color:rgb(255,255,255)}.des-ico #mv-noti-x:active .mv-x-inner{background-color:rgb(66,133,244)}.des-ico.light-text #mv-noti-x:active .mv-x-inner{background-color:rgba(255,255,255,0.5)}.des-ico .mv-page .mv-x{right:10px}html[dir=rtl] .des-ico .mv-page .mv-x{left:10px;right:auto}.des-ico .mv-fav{left:8px;top:8px}html[dir=rtl] .des-ico .mv-fav{left:auto;right:8px}.des-ico #mv-noti-lks .mv-x,.des-ico#mv-noti-error-lks .mv-x{-webkit-transform:translate(0,-8px)}.des-ico #fkbx-text{visibility:inherit}.des-ico #mv-noti{margin-top:30px}.des-ico #mv-tiles{width:216px}.des-ico #fkbx{width:454px}@media only screen and (min-width:764px){.des-ico #mv-tiles{width:324px}.des-ico #fkbx{width:562px}}@media only screen and (min-width:872px){.des-ico #mv-tiles{width:432px}.des-ico #fkbx{width:670px}}.fkbx-drgfcs{}#fkbx_crt{}.fkbxfcs{}.fkbx-drgfcs #fkbx-text,.fkbxfcs #fkbx-text{visibility:hidden}.fkbx-drgfcs #fkbx_crt{visibility:inherit}</style><link href="chrome-search://local-ntp/theme.css" rel="stylesheet" type="text/css"><style>.s2er{}.s2fp{}.s2fp-h{}.s2ml{}.s2ra{}.s2tb{}.s2tb-h{}.spch{}.spchc{}.spch{background:#fff;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:left;top:0;visibility:hidden;width:100%;z-index:10000;transition:visibility 0s linear 0.218s,opacity 0.218s,background-color 0.218s}.s2fp.spch{opacity:1;visibility:visible;transition-delay:0s}.s2tb-h.spch{background:rgba(255,255,255,0);opacity:0;visibility:hidden}.s2tb.spch{background:rgba(255,255,255,0);opacity:1;visibility:visible;transition-delay:0s}.close-button{color:#777;cursor:pointer;font-size:26px;right:0;height:11px;line-height:15px;margin:15px;opacity:.6;padding:0;position:absolute;top:0;width:15px}.close-button:hover{opacity:.8}.close-button:active{opacity:1}.google-logo{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAABACAQAAAAKENVCAAAI/ElEQVR4Ae3ae3BU5RnH8e/ZTbIhhIRbRIJyCZcEk4ZyE4RBAiRBxRahEZBLQYUZAjIgoLUWB6wjKIK2MtAqOLVUKSqWQW0ZaOQq0IFAIZVrgFQhXAOShITEbHY7407mnPfc8u6ya2f0fN6/9rzvc87Z39nbed/l/8OhIKMDQ+hHKp1JJB6FKq5QQhH72MZ1IsDRhvkU4bds9WxlLNE4wqg9q6jBL9G+4knc/HB9qXmuG4goD89TjT+IVkimE/zt6sYh/EG3WmaiOMGHbgQ38YfY3ibKCV6GMabHWY0bo+Ps5jjnuYlCczrSk8Hcgd5U1rONoDnG48Ova2W8RGeMXAxiHfWakT4mOx81oRiG1/C5vYh47KSx5fZid4JvxxVd7MdIp3EK06kNNXYneIWtutgLaIasQUwkJE7wE3SxbycWR8SD93BOiL2YRBwRDN5FwOPchaqecZQTQQ4XAApz0FrFQSLPwQD8mlZNEt8L5841D62/cJVIi2cgPelEAlBOCYfYSxXymjKAXqSQAFRwloPspRp5dzOMHiTThEqK2c1OvGHIsg/30YUWKHzDKfZwEB+2xBn3gUSSwmA+MpluruYDySMPYD23TOrX0V/q+CPZYai+yHw8wKscbmhMD+IVfyevcMlkuvxXxGOphTD4Gi4iJ40C/DZtM12wk8Lfbes/oSN27mGPZW0RnVmvebxIMng3z1Bluddz5Mh9wm8icqZIzPHfZDxW8qhotL6cUVh5zP74XOBg0MEnsgW/bfMxzyIOYdgSIuV5/JJtPmZmSlb7mI6ZGTLVQQafSKHUvp7BxFxhSD6N8UsH4An5aT+J3mNB1T+K3hj8YQ/ezRbpvY3CYKEwYFLYgvfTkQZ9qTN8nS3lIdJJZwTLDdNztfwUrTTDp+hllmnqrxo+sLqi1dWwuFPKYnK5h0we5c/UhhT8fF1FHWsZTis8dGAyB4S+67RF5wVhwC/DGHxvAqI4Imyv50Vi0YpjsW4l4AAuGii63yE+lhCHVlOW6o79TxRN/ee64y/SHb8TO4MOvq3uYh6iO1oufiP0r0VnjtA9K4zBDzSdgKtjJGbyqBfG5dFguC62sZiZoLt0Qy3qvYzCKIZNQQYvXupdxGO0Rni5dLebl1wexuD7A4DuC+gprMwTxu2hwT+E7c9iZYEw7lMaiBPeczAXT3EQwcdwTbP1Eq3RiyaPvcIe/4igj9C5NYzBpwOQKmzbh4IVF4dMviOShHfCEdxYieKY8M5qCUCy8E4oxIWVnwcRfK4wdhqitiyk1JBHJc3UU4UT+HDRYADR1GEnB2s9WYrqssn41/BjxcdrrEOVzRogS4hqOfVY8fI6qzWXYTAbgRwUVMvwYeUzzpKCnMGobvIeDRTuZyajiMLoMG2oRONfwnV5kNDNFH5ZKAD8SbPtFrHYaSr8+nkLgCXC53sCdloJz+RlAFYJv5bisPOG9Cv+U+F+O6AZM4Sx2iz+QKZxWrgArSmEbiAIpwvQGdV/qMFOFUdRdTbUn6QCO9c4bajvJhy/GjuFyOqEqhhIZyUXWEk6esd4imTyKTIG/1e08kghNNEMR7WfgERUpTTmPKrmIdSXGupbiHu3dQFZCagy2MGXzCAekZcPySKDlVSYTwsf5QB9aeBiCWMJxcO0RPU5AW5UPuyJI9xhr/diz4ssF6ohGJXyFmu42Fj5MrTGMILgKTyHqpoCAipR3YE9cURFWOorUCVhrzWyKrFWwGg68hIXG79uGziG1rt0IFhPcC+qj6gioARVJm7sRPMTVCWG+u54sBNHqm19Ji7sZCDrv5gp53ekkcNGvHJvGB+zdVd+M60JRi/eREt9VIQqgfuxM5Q4VEcM9R5ysfMAUaA78iFUzRmIfb2sw+j9m6m042lOEqS1hv+R3Y2svpSJCxJCn9hjR5ztywSgg7BtGwpWFHYLY+8CIB2/5Jppj5BvoE7Qz/a8bCVSrIv+quQrYCLVQl0NXVEpnBF6f4aVX+guvELAPmH7GMk/ZX1BgKJb2szBnEJBEMFHUyY841SsjGcr7bGVabLC8z6dsJPC3ww1sxE9LfTeoAdmeumOPkNzYcUb776Y6aebOh5Hg6m6l1MaZhYGOUn2sjD6MAmYyeIWfiqYhoKNLJNlaC/ryCUGvRhyWUedYfx7KIiack4XfZ5ujMI4XewlxIpzMEL04w31k3STtEW4NWd6Uugr4yFEHt4Ielo4iRvC+P20R6QwTZPnFtpjI4dKi5veAlbwLPnM4NesZDs3Tcd9RgxGIw3jdjCeO1FQSGYiuw39D6A1CJ+u/wsm0pZA/STDEnY9A9DKMtRvZjStAIVOzOJMSAsh+YaMltGXGEChHVPYr+s/igsbPTmHP8T2IR7MvW46voZa0+2voLfAor7GdPtz6C0yHVfNt4S+9KewwXTJ8xtumWyv5T6w14pNIYTu40VcWHHzvvSe3sWFnsIq6foVKCb1qyOw2N2EnZJ7+5aRSFAYS2lQp3maLOy5WS61pyW4MKOwCJ/E5X8BBTMuXsW+tpITQQYPcXws8Zyuk420eOZyQSqqy8zDg4yH+cp2T2cYjp1sim3rTzEEO4/YPKNL9AvpD00K+ZTbnZXwc1KSh9FspNrmDbSZicQirwmzLMI7Qb7EnjxM57hp/TGmEUNjEljAZUNtHW/TGvhA+J6QCx4gicVcNT2r7TyIgoEiGf+99CeVLiTSDKimjK85QSH7qCJ4Cr0YRi9SaI6fG5zlIAUcwS9d34Nsen9Xz3f1hRRQJF0fzVCyyaQdcZRzil18zCUAPtHc3s3mTYIRzWCGkEEH4vFSxmn2s5kSJDgOGP/l4Ii8aOHetzeOsIhiNAX0wVq28O3lwXHbklnIeQJ/PHJhQbh72YXjts3Eq4n0t5h7BL+mzcVx29Kpxy9E70IvV5h7qiEJRxiswC+0feTgJkAhg3d098S/J8IUfhziOUAaouscoYJmpNIO0WXSuYYjLLpxFb9U85KNI4wyKJWKfQKOMEtmm33sXCCbCHC4mMxZIWpx/aglEeNwM4J3KNb8jvmaDTxBIt8jhR8vD22IpYYr1PBD5HA4HP8DxVcxdwELEFUAAAAASUVORK5CYII=) no-repeat center;background-size:94px 32px;height:32px;width:94px;top:8px;opacity:0;float:right;left:255px;pointer-events:none;position:relative;transition:opacity .5s ease-in,left .5s ease-in}.s2tb .google-logo{opacity:0.54;left:270px;transition:opacity .5s ease-out,left .5s ease-out}.spchc{display:block;height:42px;position:absolute;pointer-events:none}.s2fp .spchc,.s2fp-h .spchc{margin:auto;margin-top:312px;max-width:572px;min-width:534px;padding:0 223px;position:relative;top:0}.s2tb .spchc,.s2tb-h .spchc{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.2);margin:0;min-width:100%;overflow:hidden;padding:51px 0 50px 126px;position:absolute}._o3{height:100%;opacity:.1;pointer-events:none;width:100%;transition:opacity .318s ease-in}.s2tb-h ._o3,.s2tb ._o3{height:100%;width:572px;transition:opacity .318s ease-in}.s2ml ._o3,.s2ra ._o3,.s2er ._o3{opacity:1;transition:opacity 0s}.button{background-color:#fff;border:1px solid #eee;border-radius:100%;bottom:0;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;display:inline-block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color 0.218s,border 0.218s,box-shadow 0.218s}.s2tb-h .button{left:-83px;opacity:0;pointer-events:none;position:absolute;top:-83px;transition-delay:0}.s2fp-h .button{opacity:0;pointer-events:none;position:absolute;transition-delay:0}.s2fp .button,.s2tb .button{opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition-delay:0}.s2ra .button{background-color:#ff4444;border:0;box-shadow:none}._CMb{background-color:#dbdbdb;border-radius:100%;display:inline-block;height:301px;left:-69px;opacity:1;pointer-events:none;position:absolute;top:-69px;width:301px;transform:scale(.01);transition:opacity 0.218s}.s2tb-h ._CMb,.s2tb ._CMb{height:151px;left:-28px;top:-28px;width:151px}._AM{float:right;pointer-events:none;position:relative;transition:transform 0.218s,opacity 0.218s ease-in}.s2fp-h ._AM,.s2fp ._AM{height:165px;right:-70px;top:-70px;width:165px}.s2fp-h ._AM,.s2tb-h ._AM{transform:scale(.1)}.s2fp ._AM,.s2tb ._AM{transform:scale(1)}.s2tb-h ._AM,.s2tb ._AM{height:95px;right:-31px;top:-27px;width:95px}.s2ra .button:active{background-color:#cd0000}.button:active{background-color:#eee}._wPb{height:87px;left:43px;pointer-events:none;position:absolute;top:47px;width:42px;transform:scale(1)}.s2tb-h ._wPb,.s2tb ._wPb{left:17px;top:7px;transform:scale(.53)}._AUb{background-color:#999;border-radius:30px;height:46px;left:25px;pointer-events:none;position:absolute;width:24px}._Fjd{bottom:0;height:53px;left:11px;overflow:hidden;pointer-events:none;position:absolute;width:52px}._oXb{background-color:#999;bottom:14px;height:14px;left:22px;pointer-events:none;position:absolute;width:9px;z-index:1}._dWb{border:7px solid #999;border-radius:28px;bottom:27px;height:57px;pointer-events:none;position:absolute;width:38px;z-index:0}.s2ml ._AUb,.s2ml ._oXb{background-color:#f44}.s2ml ._dWb{border-color:#f44}.s2ra ._AUb,.s2ra ._oXb{background-color:#fff}.s2ra ._dWb{border-color:#fff}.spcht{}.spchta{}.spch-2l{}.spch-3l{}.spch-4l{}.spch-5l{}._gjb{pointer-events:none}.s2fp-h ._gjb,.s2fp ._gjb{position:absolute}.s2tb-h ._gjb,.s2tb ._gjb{position:relative}.spcht{font-weight:normal;line-height:1.2;opacity:0;pointer-events:none;position:absolute;text-align:left;-webkit-font-smoothing:antialiased;transition:opacity .1s ease-in,margin-left .5s ease-in,top 0s linear 0.218s}.s2fp-h .spcht{margin-left:44px}.s2tb-h .spcht{margin-left:32px}.s2fp-h .spcht,.s2fp .spcht{font-size:32px;left:-44px;top:-.2em;width:460px}.s2tb-h .spcht,.s2tb .spcht{font-size:27px;left:7px;top:.2em;width:490px}.s2fp .spcht,.s2tb .spcht{margin-left:0;opacity:1;transition:opacity .5s ease-out,margin-left .5s ease-out}.spchta{color:#1155cc;cursor:pointer;font-size:18px;font-weight:500;pointer-events:auto;text-decoration:underline}.spch-2l.spcht,.spch-3l.spcht,.spch-4l.spcht{transition:top 0.218s ease-out}.spch-2l.spcht{top:-.6em}.spch-3l.spcht{top:-1.3em}.spch-4l.spcht{top:-1.7em}.s2fp .spch-5l.spcht{top:-2.5em}.s2tb .spch-5l.spcht{font-size:24px;top:-1.7em;transition:font-size 0.218s ease-out}.s2wfp{}._ypc{margin-top:-100px;opacity:0;pointer-events:none;position:absolute;width:500px;transition:opacity 0.218s ease-in,margin-top .4s ease-in}.s2wfp ._ypc{margin-top:-300px;opacity:1;transition:opacity .5s ease-out 0.218s,margin-top 0.218s ease-out 0.218s}._zpc{box-shadow:0 1px 0px #4285F4;height:80px;left:0;margin:0;opacity:0;pointer-events:none;position:fixed;right:0;top:-80px;transition:opacity 0.218s,box-shadow 0.218s}.s2wfp ._zpc{box-shadow:0 1px 80px #4285F4;opacity:1;pointer-events:none;animation:allow-alert .75s 0 infinite;animation-direction:alternate;animation-timing-function:ease-out;transition:opacity 0.218s,box-shadow 0.218s}@-webkit-keyframes allow-alert {from{opacity:1}to{opacity:.35}}#fkbx-tchm{}.fkbx-chm{}.fkbx-chme{}#fkbx-chmer{}#fkbx-chmed{}.fkbx-chmt{}#fkbx-chmtr{}.chw-oc{}#chw-o{}#fkbx-tchm{display:none}.fkbx-chm{line-height:22px;text-align:center}.fkbx-chm a{color:#1a0dab;cursor:pointer;margin:5px}._gSc{background:url(data:image/gif;base64,R0lGODlhEAAQAKIHAPzu7PfT0Oh5cfGtqONbUuBLQeBKP////yH5BAEAAAcALAAAAAAQABAAAANKeLrcfkAI8NowZtQFCCbUJmCYsAWFAQBGEVSjyhqmc2HBnDUdGQQkEOOGA5I0CkCKxMQUQjEnAMU0GUkuZTPgaRaWTEK0Sa5tGgkAOw==) no-repeat center;display:inline-block;height:16px;width:16px}#chw-o{display:none}#chw-o a{color:#4285F4;line-height:31px}.chw-oc{font-size:13px;padding:20px !important;text-align:left;width:400px}._mSc{color:#000;font-size:16px;font-weight:bold}._kSc{color:#555}._dKb{border-radius:2px;cursor:pointer;font-size:12px;line-height:27px;margin:0;padding-left:14px;padding-right:14px}#chw-o ._dKb{float:right;margin-left:10px}._k3{background-color:#f9f9f9;border:1px solid #bdbdbd;color:#000}._k3:hover{background-color:#fcfcfc}._k3:active,._k3:hover,._k3:focus{border-color:#3e7ef8}._k3:active{background-color:#e6e6e6}._WW{background-color:#5a97ff;border:1px solid #2558b0;color:#fff}._WW:hover{background-color:#629cff}._WW:hover,._WW:focus{box-shadow:inset 0 0 1px}._WW:active,._qyd:focus,._WW:hover{border-color:#2352a2}._WW:active{background-color:#4279d8}</style><link href="//ssl.gstatic.com/chrome/components/doodle-notifier-02.html" rel="import"><meta content="none" name="robots"><script>(function(){window.google={kEI:'kkoPWoOaAseJ0gKP07CIBg',kEXPI:'1354277,1354688,1354723,1354916,1355218,1355736,1356031,1356078,3300118,3300130,3313274,3313321,4029815,4031109,4038214,4038394,4041776,4043492,4045096,4045293,4045841,4047140,4047454,4048347,4048980,4050750,4051887,4056126,4056682,4058016,4061666,4061980,4062724,4063220,4064468,4064796,4069829,4072270,4076999,4078430,4078588,4080760,4081039,4081165,4082230,4093169,4093524,4095910,4097147,4097195,4097922,4097928,4098733,4098739,4098751,4102238,4102827,4103475,4103845,4103861,4104202,4104258,4104414,4106647,4107914,4109293,4109316,4109489,4110086,4110931,4113217,4115624,4115697,4116351,4116724,4116730,4117328,4117570,4117980,4118227,4118798,4119032,4119034,4119036,4119797,4119798,4119805,4120415,4120660,4120911,4121035,4121175,4121805,4122382,4124090,4124497,4124727,4124850,4125837,4126204,4127095,4127744,4127775,4128586,4128623,4128998,4128999,4129520,4129555,4129559,4130560,4130783,4131073,4131370,4131834,4132528,4132956,4133090,4133113,4133274,4133396,4133416,4133430,4133509,4133755,4133756,4134271,4134946,4134951,4135084,4135088,4135249,4135576,4135744,4135856,4135934,4136073,4136235,4136397,4136459,4136549,4136627,4137110,4137461,4137462,4137597,4138247,4138341,4138346,4138432,4139042,4139216,4139395,4139436,4139464,4139701,4140032,4140111,4140117,4140153,4140241,4140691,4140786,4140957,4141066,4141581,4141600,4141677,4142232,4142328,4142494,4142503,4142504,4142610,4142666,4143060,4143197,4143202,4143313,10200083,10202524,10202562,22311504,41317155',authuser:0,esrp:{sourceid:'chrome-psyapi2'},esrnh:false,kscs:'c9c918f0_kkoPWoOaAseJ0gKP07CIBg',u:'c9c918f0',kGL:'US'};google.kHL='en';})();(function(){google.lc=[];google.li=0;google.getEI=function(a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||google.kEI};google.getLEI=function(a){for(var b=null;a&&(!a.getAttribute||!(b=a.getAttribute("leid")));)a=a.parentNode;return b};google.https=function(){return"https:"==window.location.protocol};google.ml=function(){return null};google.wl=function(a,b){try{google.ml(Error(a),!1,b)}catch(d){}};google.time=function(){return(new Date).getTime()};google.log=function(a,b,d,c,g){if(a=google.logUrl(a,b,d,c,g)){b=new Image;var e=google.lc,f=google.li;e[f]=b;b.onerror=b.onload=b.onabort=function(){delete e[f]};google.vel&&google.vel.lu&&google.vel.lu(a);b.src=a;google.li=f+1}};google.logUrl=function(a,b,d,c,g){var e="",f=google.ls||"";d||-1!=b.search("&ei=")||(e="&ei="+google.getEI(c),-1==b.search("&lei=")&&(c=google.getLEI(c))&&(e+="&lei="+c));c="";!d&&google.cshid&&-1==b.search("&cshid=")&&(c="&cshid="+google.cshid);a=d||"/"+(g||"gen_204")+"?atyp=i&ct="+a+"&cad="+b+e+f+"&zx="+google.time()+c;/^http:/i.test(a)&&google.https()&&(google.ml(Error("a"),!1,{src:a,glmm:1}),a="");return a};}).call(this);(function(){google.y={};google.x=function(a,b){if(a)var c=a.id;else{do c=Math.random();while(google.y[c])}google.y[c]=[a,b];return!1};google.lm=[];google.plm=function(a){google.lm.push.apply(google.lm,a)};google.lq=[];google.load=function(a,b,c){google.lq.push([[a],b,c])};google.loadAll=function(a,b){google.lq.push([a,b])};}).call(this);google.f={};(function(){google.hs={h:true};})();(function(){window.chrome||(window.chrome={});window.chrome.embeddedSearch||(window.chrome.embeddedSearch={});window.chrome.embeddedSearch.searchBox||(window.chrome.embeddedSearch.searchBox={});window.chrome.embeddedSearch.searchBox.onsubmit=function(){var a=encodeURIComponent(window.chrome.embeddedSearch.searchBox.value);google.x({id:"psyapi"},function(a,b){google.esrp.q=a;if(b)for(var c in b)google.esrp[c]=encodeURIComponent(b[c]);var d=google.esrnh;google.esrnh=!1;return function(){google.nav.search(google.esrp,!1,d)}}(a,window.chrome.embeddedSearch.searchBox.requestParams))};}).call(this);(function(){google.c={c:{a:true,d:true,e:true,i:false,m:true,n:false}};google.sn='newtab';(function(){var e={gen204:"iml",clearcut:8};var f=function(a,b,c){a.addEventListener?a.removeEventListener(b,c,!1):a.attachEvent&&a.detachEvent("on"+b,c)},h=function(a,b,c){g.push({g:a,h:b,l:c});a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},g=[];google.timers={};google.startTick=function(a,b){var c=b&&google.timers[b].t?google.timers[b].t.start:google.time();google.timers[a]={t:{start:c},e:{},m:{}};(c=window.performance)&&c.now&&(google.timers[a].wsrt=Math.floor(c.now()))};google.tick=function(a,b,c){google.timers[a]||google.startTick(a);c=void 0!==c?c:google.time();b instanceof Array||(b=[b]);for(var d=0;d<b.length;++d)google.timers[a].t[b[d].clearcut]={key:b[d],ts:c}};google.c.e=function(a,b,c){google.timers[a].e[b]=c};google.c.b=function(a){var b=google.timers.load.m;b[a]&&google.wl("ch_mab",{m:a});b[a]=!0};google.c.u=function(a){var b=google.timers.load.m;if(b[a]){b[a]=!1;for(a in b)if(b[a])return;google.csiReport()}else google.wl("ch_mnb",{m:a})};google.rll=function(a,b,c){var d=function(b){c(b);f(a,"load",d);f(a,"error",d)};h(a,"load",d);b&&h(a,"error",d)};google.ull=function(){for(var a;a=g.shift();)f(a.g,a.h,a.l)};google.iTick=function(a){var b=google.time();google.tick("load",e,b);a=a.id||a.src||a.name;google.timers.iml||google.startTick("iml");google.timers.iml.t[a]=b;google.c.c.a&&(google.timers.aft||google.startTick("aft"),google.timers.aft.t[a]=b)};google.afte=!0;google.aft=function(a){google.c.c.a&&google.afte&&(google.timers.aft||google.startTick("aft"),google.timers.aft.t[a.id||a.src||a.name]=google.time())};google.c.c.e&&google.startTick("webaft");google.startTick("load");google.c.b("pr");google.c.b("xe");}).call(this);})();(function(){var k=this,l=Date.now||function(){return+new Date};var t={};var v=function(a,d){if(null===d)return!1;if("contains"in a&&1==d.nodeType)return a.contains(d);if("compareDocumentPosition"in a)return a==d||!!(a.compareDocumentPosition(d)&16);for(;d&&a!=d;)d=d.parentNode;return d==a};var w=function(a,d){return function(b){b||(b=window.event);return d.call(a,b)}},B=function(a){a=a.target||a.srcElement;!a.getAttribute&&a.parentNode&&(a=a.parentNode);return a},C="undefined"!=typeof navigator&&/Macintosh/.test(navigator.userAgent),D="undefined"!=typeof navigator&&!/Opera/.test(navigator.userAgent)&&/WebKit/.test(navigator.userAgent),E={A:1,INPUT:1,TEXTAREA:1,SELECT:1,BUTTON:1},aa=function(){this._mouseEventsPrevented=!0},F={A:13,BUTTON:0,CHECKBOX:32,COMBOBOX:13,GRIDCELL:13,LINK:13,LISTBOX:13,MENU:0,MENUBAR:0,MENUITEM:0,MENUITEMCHECKBOX:0,MENUITEMRADIO:0,OPTION:0,RADIO:32,RADIOGROUP:32,RESET:0,SUBMIT:0,TAB:0,TREE:13,TREEITEM:13},G=function(a){return(a.getAttribute("type")||a.tagName).toUpperCase()in ba},H=function(a){return(a.getAttribute("type")||a.tagName).toUpperCase()in ca},ba={CHECKBOX:!0,OPTION:!0,RADIO:!0},ca={COLOR:!0,DATE:!0,DATETIME:!0,"DATETIME-LOCAL":!0,EMAIL:!0,MONTH:!0,NUMBER:!0,PASSWORD:!0,RANGE:!0,SEARCH:!0,TEL:!0,TEXT:!0,TEXTAREA:!0,TIME:!0,URL:!0,WEEK:!0},da={A:!0,AREA:!0,BUTTON:!0,DIALOG:!0,IMG:!0,INPUT:!0,LINK:!0,MENU:!0,OPTGROUP:!0,OPTION:!0,PROGRESS:!0,SELECT:!0,TEXTAREA:!0};var I=function(){this.v=this.o=null},K=function(a,d){var b=J;b.o=a;b.v=d;return b};I.prototype.s=function(){var a=this.o;this.o&&this.o!=this.v?this.o=this.o.__owner||this.o.parentNode:this.o=null;return a};var L=function(){this.w=[];this.o=0;this.v=null;this.H=!1};L.prototype.s=function(){if(this.H)return J.s();if(this.o!=this.w.length){var a=this.w[this.o];this.o++;a!=this.v&&a&&a.__owner&&(this.H=!0,K(a.__owner,this.v));return a}return null};var J=new I,M=new L;var P=function(){this.T=[];this.o=[];this.s=[];this.H={};this.v=null;this.w=[];O(this,"_custom")},ea="undefined"!=typeof navigator&&/iPhone|iPad|iPod/.test(navigator.userAgent),Q=String.prototype.trim?function(a){return a.trim()}:function(a){return a.replace(/^\s+/,"").replace(/\s+$/,"")},fa=/\s*;\s*/,ka=function(a,d){return function(b){var c=d;if("_custom"==c){c=b.detail;if(!c||!c._type)return;c=c._type}if("click"==c&&(C&&b.metaKey||!C&&b.ctrlKey||2==b.which||null==b.which&&4==b.button||"auxclick"== b.type||b.shiftKey))c="clickmod";else{var e=b.which||b.keyCode||b.key;D&&3==e&&(e=13);if(13!=e&&32!=e)e=!1;else{var f=B(b),q=(f.getAttribute("role")||f.type||f.tagName).toUpperCase(),h;(h="keydown"!=b.type)||("getAttribute"in f?(h=(f.getAttribute("role")||f.tagName).toUpperCase(),h=!H(f)&&("COMBOBOX"!=h||"INPUT"!=h)&&!f.isContentEditable):h=!1,h=!h);(h=h||b.ctrlKey||b.shiftKey||b.altKey||b.metaKey||G(f)&&32==e)||((h=f.tagName in E)||(h=f.getAttributeNode("tabindex"),h=null!=h&&h.specified),h=!(h&& !f.disabled));h?e=!1:(f="INPUT"!=f.tagName.toUpperCase()||f.type,h=!(q in F)&&13==e,e=(0==F[q]%e||h)&&!!f)}e&&(c="clickkey")}q=b.srcElement||b.target;e=R(c,b,q,"",null);b.path?(M.w=b.path,M.o=0,M.v=this,M.H=!1,f=M):f=K(q,this);for(;h=f.s();){var m=h;var g=m;h=c;var p=g.__jsaction;if(!p){var u=null;"getAttribute"in g&&(u=g.getAttribute("jsaction"));if(u){p=t[u];if(!p){p={};for(var x=u.split(fa),y=0,ha=x?x.length:0;y<ha;y++){var r=x[y];if(r){var z=r.indexOf(":"),N=-1!=z,ia=N?Q(r.substr(0,z)):"click";r=N?Q(r.substr(z+1)):r;p[ia]=r}}t[u]=p}g.__jsaction=p}else p=ja,g.__jsaction=p}"clickkey"==h?h="click":"click"!=h||p.click||(h="clickonly");g={S:h,action:p[h]||"",event:null,U:!1};e=R(g.S,g.event||b,q,g.action||"",m,e.timeStamp);if(g.U||g.action)break}e&&"touchend"==e.eventType&&(e.event._preventMouseEvents=aa);if(g&&g.action){if(g="clickkey"==c)g=B(b),g=(g.type||g.tagName).toUpperCase(),(g=32==(b.which||b.keyCode||b.key)&&"CHECKBOX"!=g)||(g=B(b),q=(g.getAttribute("role")||g.tagName).toUpperCase(),g=g.tagName.toUpperCase()in da&&"A"!=q&&!G(g)&&!H(g)||"BUTTON"==q);g&&(b.preventDefault?b.preventDefault():b.returnValue=!1);if("mouseenter"==c||"mouseleave"==c)if(g=b.relatedTarget,!("mouseover"==b.type&&"mouseenter"==c||"mouseout"==b.type&&"mouseleave"==c)||g&&(g===m||v(m,g)))e.action="",e.actionElement=null;else{c={};for(var n in b)"function"!==typeof b[n]&&"srcElement"!==n&&"target"!==n&&(c[n]=b[n]);c.type="mouseover"==b.type?"mouseenter":"mouseleave";c.target=c.srcElement=m;c.bubbles=!1;e.event= c;e.targetElement=m}}else e.action="",e.actionElement=null;m=e;a.v&&(n=R(m.eventType,m.event,m.targetElement,m.action,m.actionElement,m.timeStamp),"clickonly"==n.eventType&&(n.eventType="click"),a.v(n,!0));if(m.actionElement){"A"!=m.actionElement.tagName||"click"!=m.eventType&&"clickmod"!=m.eventType||(b.preventDefault?b.preventDefault():b.returnValue=!1);if(a.v)a.v(m);else{if((n=k.document)&&!n.createEvent&&n.createEventObject)try{var A=n.createEventObject(b)}catch(na){A=b}else A=b;m.event=A;a.w.push(m)}if("touchend"== m.event.type&&m.event._mouseEventsPrevented){b=m.event;for(var oa in b);l()}}}},R=function(a,d,b,c,e,f){return{eventType:a,event:d,targetElement:b,action:c,actionElement:e,timeStamp:f||l()}},ja={},la=function(a,d){return function(b){var c=a,e=d,f=!1;"mouseenter"==c?c="mouseover":"mouseleave"==c&&(c="mouseout");if(b.addEventListener){if("focus"==c||"blur"==c||"error"==c||"load"==c)f=!0;b.addEventListener(c,e,f)}else b.attachEvent&&("focus"==c?c="focusin":"blur"==c&&(c="focusout"),e=w(b,e),b.attachEvent("on"+ c,e));return{S:c,R:e,capture:f}}},O=function(a,d){if(!a.H.hasOwnProperty(d)){var b=ka(a,d),c=la(d,b);a.H[d]=b;a.T.push(c);for(b=0;b<a.o.length;++b){var e=a.o[b];e.s.push(c.call(null,e.o))}"click"==d&&O(a,"keydown")}};P.prototype.R=function(a){return this.H[a]};var V=function(a,d){var b=new ma(d),c;a:{for(c=0;c<a.o.length;c++)if(S(a.o[c],d)){c=!0;break a}c=!1}if(c)return a.s.push(b),b;T(a,b);a.o.push(b);U(a);return b},U=function(a){for(var d=a.s.concat(a.o),b=[],c=[],e=0;e<a.o.length;++e){var f=a.o[e];W(f,d)?(b.push(f),X(f)):c.push(f)}for(e=0;e<a.s.length;++e)f=a.s[e],W(f,d)?b.push(f):(c.push(f),T(a,f));a.o=c;a.s=b},T=function(a,d){var b=d.o;ea&&(b.style.cursor="pointer");for(b=0;b<a.T.length;++b)d.s.push(a.T[b].call(null,d.o))},Y=function(a,d){a.v=d;a.w&& (0<a.w.length&&d(a.w),a.w=null)},ma=function(a){this.o=a;this.s=[]},S=function(a,d){for(var b=a.o,c=d;b!=c&&c.parentNode;)c=c.parentNode;return b==c},W=function(a,d){for(var b=0;b<d.length;++b)if(d[b].o!=a.o&&S(d[b],a.o))return!0;return!1},X=function(a){for(var d=0;d<a.s.length;++d){var b=a.o,c=a.s[d];b.removeEventListener?b.removeEventListener(c.S,c.R,c.capture):b.detachEvent&&b.detachEvent("on"+c.S,c.R)}a.s=[]};var Z=new P;V(Z,window.document.documentElement);O(Z,"click");O(Z,"focus");O(Z,"focusin");O(Z,"blur");O(Z,"focusout");O(Z,"error");O(Z,"load");O(Z,"change");O(Z,"dblclick");O(Z,"input");O(Z,"keyup");O(Z,"keydown");O(Z,"keypress");O(Z,"mousedown");O(Z,"mouseenter");O(Z,"mouseleave");O(Z,"mouseout");O(Z,"mouseover");O(Z,"mouseup");O(Z,"touchstart");O(Z,"touchend");O(Z,"touchcancel");O(Z,"speech");(function(a){google.jsad=function(d){Y(a,d)};google.jsaac=function(d){return V(a,d)};google.jsarc=function(d){X(d);for(var b=!1,c=0;c<a.o.length;++c)if(a.o[c]===d){a.o.splice(c,1);b=!0;break}if(!b)for(c=0;c<a.s.length;++c)if(a.s[c]===d){a.s.splice(c,1);break}U(a)}})(Z);window.gws_wizbind=function(a){return{trigger:function(d){var b=a.R(d.type);b||(O(a,d.type),b=a.R(d.type));var c=d.target||d.srcElement;b&&b.call(c.ownerDocument.documentElement,d)},bind:function(d){Y(a,d)}}}(Z);}).call(this);</script><script>if ('serviceWorker' in navigator){navigator.serviceWorker.register('/_/chrome/newtab-serviceworker.js',{scope:'.'}) .then(function(sw){console.log("SW registered");},function(x){console.log("SW failed to register: " + x.message);});} </script></head><body class="init"><div id="prpd"></div><div class="h" id="mngb"><div id="gb"></div></div><span id="prt"></span><div id="_Alw"><div class="init" id="lga"><script>(function(){var hhGroup=2;window.google = window.google || {};window.google.doodle = window.google.doodle || {};window.google.doodle.flags = window.google.doodle.flags || {};window.google.doodle.flags.hhGroup = hhGroup;})();</script><img style="padding-top:112px" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="272" alt="Google" id="hplogo" title="Google" onload="typeof google==='object'&&google.aft&&google.aft(this)"><div id="logo-sub"></div></div><form action="/search" id="f" method="get"><div id="hf"></div><div class="init" id="fkbx"><div id="fkbx-text">Search Google or type URL</div><input id="q" aria-hidden="true" autocomplete="off" name="q" tabindex="-1" type="url" jsaction="mousedown:ntp.fkbxclk"><div id="fkbx_crt"></div><div id="fkbx-spch" tabindex="0"></div><div id="fkbx-hspch" tabindex="0"></div><div id="fkbx-hht">Say "Ok Google"</div><div id="fkbx-tchm"><div id="fkbx-chme"><div class="_gSc"></div><div>Not listening. Something went wrong.</div><div><a href="#" id="fkbx-chmer" tabindex="1">Restart listening</a><a href="#" id="fkbx-chmed" tabindex="1">Help</a></div></div><div id="fkbx-chmt"><div>Hotword detection is off.</div><a href="#" id="fkbx-chmtr" tabindex="1">Start listening for "Ok Google"</a></div></div><div id="chw-o"><div class="_mSc">Say "Ok Google" to start a voice search.</div><p class="_kSc">Search without lifting a finger. When you say "Ok Google," Chrome will search for what you say next.</p><div><a href="https://support.google.com/chrome/?p=ui_hotword_search" target="_blank">Learn more</a><button class="_dKb _k3" href="#" id="hotword__chw-on" data-noload="" jsaction="chw.optInNoThanksButtonClicked">No thanks</button><button class="_dKb _WW" href="#" id="hotword__chw-oe" data-noload="" jsaction="chw.optInEnableButtonClicked">Enable "Ok Google"</button></div></div></div></form><div class="spch s2fp-h" style="display:none" id="spch"><div class="spchc" id="spchc"><div class="_o3"><div class="_AM"><span class="_CMb" id="spchl"></span><span class="button" id="spchb"><div class="_wPb"><span class="_AUb"></span><div class="_Fjd"><span class="_oXb"></span><span class="_dWb"></span></div></div></span></div><div class="_gjb"><span class="spcht" id="spchi" style="color:#777"></span><span class="spcht" id="spchf" style="color:#000"></span></div><div class="google-logo"></div></div><div class="_ypc"><div class="_zpc"></div></div></div><div class="close-button" id="spchx">&times;</div></div><div class="mv-hide" id="most-visited"><div id="mv-tiles"></div><div class="mv-noti-hide" id="mv-noti"><span id="mv-noti-msg">Thumbnail removed.</span>&nbsp;<span id="mv-noti-lks"><span id="mv-undo" tabindex="1">Undo</span>&nbsp;<span id="mv-restore" tabindex="1">Restore all</span>&nbsp;<div class="mv-x" id="mv-noti-x" tabindex="-1"></div></span></div><div class="mv-noti-hide" id="mv-noti-error"><span id="mv-noti-msg">Error removing thumbnail; Chrome needs to be online.</span></div></div><div id="prm-pt"><br><div id="prm"></div></div></div><div id="theme-attr" style="display:none"><div id="theme-attr-msg">Theme created by</div></div><textarea name="csi" id="csi" style="display:none"></textarea><script>(function(){var a={gen204:"ol",clearcut:14};google.rll(window,!1,function(){google.tick("load",a);google.c.u("pr")});google.tick("load",{gen204:"prt",clearcut:16});}).call(this);</script><div id="xjsd"></div><div id="xjsi"><script>(function(){function c(b){window.setTimeout(function(){var a=document.createElement("script");a.src=b;google.timers&&google.timers.load.t&&google.tick("load",{gen204:"xjsls",clearcut:31});document.getElementById("xjsd").appendChild(a)},0)}google.dljp=function(b,a){google.xjsu=b;c(a)};google.dlj=c;}).call(this);(function(){var r=[];google.plm(r);})();if(!google.xjs){window._=window._||{};window._DumpException=window._._DumpException=function(e){throw e};google.dljp('/xjs/_/js/k\x3dxjs.ntp.en_US.0EwZPAYFgeY.O/m\x3dsx,jsa,ntp,d,csi/am\x3dAAGEAw/rt\x3dj/d\x3d1/t\x3dzcms/rs\x3dACT90oH7pLOIHsaPumzX3z3HA-lpdGft2g','/xjs/_/js/k\x3dxjs.ntp.en_US.0EwZPAYFgeY.O/m\x3dsx,jsa,ntp,d,csi/am\x3dAAGEAw/rt\x3dj/d\x3d1/t\x3dzcms/rs\x3dACT90oH7pLOIHsaPumzX3z3HA-lpdGft2g');google.xjs=1;}google.pmc={"sx":{},"jsa":{"csi":true,"csir":100},"ntp":{"ffb":false,"lang":"en-US","mvrt":"Don't show on this page","stt":"Search by voice","tc":{"dnt":"Click to view today's doodle","tlh":92,"tlu":"/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png","tlw":272},"xid":1},"spch":{"ae":"Please check your microphone. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003ELearn more\u003C/a\u003E","hen":true,"hl":"en-US","htt":"Listening for \"Ok Google\"","im":"Click \u003Cb\u003EAllow\u003C/b\u003E to start voice search","iw":"Waiting...","lm":"Listening...","lu":"%1$s voice search not available","ne":"No Internet connection","nt":"Didn't get that. \u003Cspan\u003ETry again\u003C/span\u003E","nv":"Please check your microphone and audio levels. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003ELearn more\u003C/a\u003E","pe":"Voice search has been turned off. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003EDetails\u003C/a\u003E","rm":"Speak now"},"d":{},"csi":{"acsi":true,"jsmf":true},"w5TOlw":{},"hmvvig":{},"aWiv7g":{},"NpA8BQ":{},"YFCs/g":{}};google.plm(['spch']);google.x(null,function(){});(function(){var ctx=[] ;google.jsc && google.jsc.x(ctx);})();(function(){var m=[];for(var a=window,b=m,c={},d=0;d<b.length;d+=2)c[b[d]]=JSON.parse(b[d+1]);a.W_jd=c;})();</script></div></body></html><!DOCTYPE html><html lang="en"><head><style>.cta{}.default-theme{}#dood{}.fkbx{}#fkbx-hht{}.fkbx-hht-s{}#fkbx-text{}.hide-sf{}.init{}.left-align-attr{}.light-text{}.mv-dot{}.mv-dot-bg{}.mv-focused{}.mv-link-hide{}.mv-locthumb{}.mv-locgradient{}.mv-loctitle{}.mv-locfallback{}#mv-single{}.mv-tiles{}.mv-x{}.mv-x-inner{}.personalized-suggestion-container{}.prm-pt{}.prm{}.prt{}.pt{}.suggestion-init{}.trending-suggestion-container{}@-webkit-keyframes init-hide {0%{opacity:0}99%{opacity:0}100%{opacity:1}}html{height:100%}body{font:small arial,sans-serif;margin:0;text-align:-webkit-center}body._cSc,body.hide-sf #fkbx,body.hide-sf #lga{visibility:hidden}body.init{-webkit-animation:init-hide 0.5s linear}#_Alw{display:flex;flex-direction:column;height:100%;margin:0 auto}#most-visited.suggestion-init,#suggestion-chips.suggestion-init,#lga.init,#fkbx.init{-webkit-animation:init-hide 2s linear}a{color:#1a0dab;text-decoration:none}a:hover,a:active{text-decoration:underline}a:visited{color:#609}._AZu{display:none}.trending-suggestion-container{height:159px;margin-top:5px;}.personalized-suggestion-container{height:0px}#most-visited{-webkit-user-select:none;flex:1;max-height:calc(4px + 128px + 16px + 128px + 8px + 10px + 16px + 10px);overflow:hidden;z-index:1}#mv-tiles{margin:0;overflow:hidden;position:relative;text-align:start}#mv-single{border:none;height:100%;width:100%}.mv-tile{-webkit-transition-duration:200ms;-webkit-transition-property:-webkit-transform,margin,opacity,width;display:inline-block;line-height:normal;position:relative;vertical-align:top}.mv-tile.mv-bl{margin-left:0;margin-right:0;opacity:0;width:0}.mv-page{cursor:pointer;outline:none}._kte{height:100%;visibility:hidden;width:100%}.mv-page ._kte{visibility:visible}.mv-mask,.mv-thumb,.mv-locthumb,.mv-locgradient,.mv-locfallback{position:absolute}.mv-mask{border:1px solid transparent;left:0;pointer-events:none;position:absolute;top:0}.mv-title{border:none;position:absolute}.mv-locthumb,.mv-locgradient,.mv-locfallback{border-radius:3px;pointer-events:none}.mv-locgradient{background:-webkit-linear-gradient(left,rgba(35,35,35,1) 0%,rgba(35,35,35,1) 40%,rgba(35,35,35,0.3) 60%,rgba(35,35,35,0.1) 70%,rgba(35,35,35,0) 100%)}.mv-locthumb img{border-radius:0 3px 3px 0;height:83px;left:55px;pointer-events:none;position:absolute;top:0;width:83px}.mv-locfallback{overflow:hidden}.mv-locfallback ._Gsd{box-sizing:content-box;overflow:hidden;position:absolute;text-align:center;text-overflow:ellipsis;white-space:nowrap}.mv-locfallback img{height:auto;left:0;pointer-events:none;position:absolute;top:0}.mv-loctitle{-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-line-clamp:5;border:none;border-radius:3px 0 0 3px;color:white;display:-webkit-box;height:79px;left:0;margin:2px 0 2px 4px;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;text-shadow:1px 1px #232323;top:0;white-space:normal;width:79px}.mv-x-hide .mv-x{display:none}.mv-x{background-color:transparent;border:none;cursor:pointer;opacity:0;outline:none}.mv-page .mv-x{-webkit-transition:opacity 150ms;position:absolute}.mv-page:hover .mv-x{-webkit-transition-delay:500ms;opacity:1}.mv-page .mv-x:hover{-webkit-transition:none}.mv-domain{bottom:24px;color:#777;margin:0 7px;position:absolute;text-align:center;width:90%}.mv-fav{background-size:16px;height:16px;pointer-events:none;position:absolute;width:16px}#mv-noti,#mv-noti-error{font:bold 12px Arial;padding:10px 0}#mv-noti span,#mv-noti-error span{cursor:default;display:inline-block;height:16px;line-height:16px}#mv-noti-lks span,#mv-noti-error-lks span{-webkit-margin-start:6px;color:#1155cc;cursor:pointer;opacity:1;outline:none;padding:0 4px}#mv-noti-lks span:hover,#mv-noti-lks span:focus,#mv-noti-error-lks span:hover,#mv-noti-error-lks span:focus{text-decoration:underline}#mv-noti-lks .mv-x,#mv-noti-error-lks .mv-x{-webkit-margin-start:8px;display:inline-block;opacity:1;position:relative;vertical-align:top}#mv-noti.mv-noti-hide,#mv-noti-error.mv-noti-hide,#mv-noti .mv-link-hide{display:none}form{height:39px}#fkbx{background-color:#fff;border:1px solid rgb(185,185,185);border-radius:1px;border-top-color:rgb(160,160,160);cursor:text;display:inline-block;font:18px arial,sans-serif;height:36px;line-height:36px;max-width:672px;position:relative;width:618px}#fkbx:hover{border:1px solid #a9a9a9;border-top-color:#909090}.fkbxfcs #fkbx{border:1px solid #4d90fe}#fkbx>input{background:transparent;border:none;bottom:0;box-sizing:border-box;left:0;margin:0;outline:none;padding:0 8px;position:absolute;top:2px;width:100%}html[dir=rtl] #fkbx>input{right:0}#fkbx-text{color:#bbb;bottom:0;font-size:16px;left:9px;margin-top:1px;overflow:hidden;position:absolute;right:9px;text-align:initial;text-overflow:ellipsis;top:0;visibility:hidden;white-space:nowrap}html[dir=rtl] #fkbx-text{left:auto}#fkbx_crt{background:#333;bottom:5px;position:absolute;left:9px;right:auto;top:5px;visibility:hidden;width:1px}html[dir=rtl] #fkbx_crt{left:auto;right:9px}@-webkit-keyframes blink {0%,61.54%{opacity:1}61.55%,100%{opacity:0}}.fkbxfcs #fkbx_crt{visibility:inherit;-webkit-animation:blink 1.3s linear infinite}#fkbx{border:none;border-radius:2px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);height:44px;outline:none;transition:box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1);width:620px}#fkbx:hover,.fkbxfcs #fkbx{border:none;box-shadow:0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08)}#fkbx-text{bottom:4px;color:rgba(0,0,0,0.38);left:13px;right:13px;top:4px}#fkbx_crt{bottom:12px;left:13px;top:12px}html[dir=rtl] #fkbx_crt{right:13px}#theme-attr{bottom:0;display:inline-block;font-size:10pt;left:auto;position:fixed;right:8px;white-space:nowrap;z-index:-1}#theme-attr-msg{cursor:default}html[dir=rtl] #theme-attr,#theme-attr.left-align-attr{left:8px;right:auto;text-align:right}#fkbx-spch,#fkbx-hspch{cursor:pointer;display:none;height:21px;padding:15px 6px 0;width:17px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACTUlEQVR4Ae2XU7fdQBiGv3Nd27aVmV23QXVT2+4vqG3jX9S2rdvaVpLjM8dIZ8pJ1rYxz1rvNt5nsHcCgjAjEFhWmrIlf4G6Oe++sjk/73fIA3VL/iL2HMQzAzbnN1C2kKu0sOUu8hZyfcj2/IZxPPLO8u4l4nIm2BJhBf0Jey3EG2yd+yvAXhuHAvl5AQjkxuMMWIFECISGEKhIcQEhIATKhUBoCIGyRBMQAkKAnIEsGutvso5D9RAOpzOBI7t//xqGiiwuWZEQeMYL5J2DjsDBTuL9FZA3598Gju8y6sQL6Cp6GgmBy7wAOQszHDMw3+8Z2ELmAIeh4lm8gKmiyxBu8s/AGl6A3j/qPKmn5S75LL+JXAQHpopPOATWhH8GTkJXToClJPsctLIvI1LPh8Ql9hpbeVlqR0uX2ZaQjLtFaiM/dT8LzpnIn/9nT+SysNvsMXCDrqGT9g0sPYNIkX8aRrPitpyGJRAktPByVpqPrknjIv1zeosXyN1X45qhoWUBl1fwUlq4wiFwHyJN4WloSk6Dzspn76lx/f/Gk47rSq9W4ANdQy0NBR11FGdJ/zEUt4BokHsO+uXsrXnJTYkSQ0OHTBVNY5szY4SrqjG4U2V229TwVFr8IHuNu/eZqkuGaKIPkfrRQgYrEEp0FWVw5aPLN6VHM1ribgjlH7pZdtHnhyaNMhT02O/yGn5NrydZAGkQT+iqqyv7FzVU6drXofjdDw2RHxrO/zoEf6CFr1PJjeYQLPHF4xbpwDiLD8Q/QiD6CAEhIBAIfgIDXvSOOYNfugAAAABJRU5ErkJggg==) no-repeat center;background-size:24px 24px;position:absolute;right:0}#fkbx-hspch{display:none}html[dir=rtl] #fkbx-spch,html[dir=rtl] #fkbx-hspch{left:0;right:auto}#fkbx-hht{-webkit-transition:opacity 200ms;color:#777;font-size:13px;line-height:normal;opacity:0;padding-top:10px;position:absolute;right:29px}html[dir=rtl] #fkbx-hht{float:left}#fkbx-hht.fkbx-hht-s{opacity:1}#fkbx-spch,#fkbx-hspch{padding:22px 12px 0}#lga{flex-shrink:0;height:231px;margin-top:45px;text-align:-webkit-center}#lga>#dood{display:inline-block;opacity:0;-webkit-transition:opacity 130ms}#dood.cta{cursor:pointer}#logo-sub{color:#4285f4;font-size:16px;left:79px;position:relative;top:-20px;white-space:nowrap;width:0}#mngb{position:absolute;top:15px;-webkit-transition:opacity 130ms;width:100%}#mngb.h{opacity:0}#gb #_N2{margin-right:0;padding-top:0;top:0}#prpd{text-align:start}span#prt{display:block}#prm,#prt,#_vrc{-webkit-user-select:auto}#prm-pt{font-size:83%;position:relative;z-index:1}._rzc{font-family:'Roboto'}body._cSc ._rzc{display:none}.des-cla{}.des-cla #most-visited{margin-top:50px}.des-cla #mv-tiles{height:276px;line-height:138px}.des-cla .mv-tile{background:-webkit-linear-gradient(#f2f2f2,#e8e8e8);border-radius:4px;box-shadow:inset 0 2px 3px rgba(0,0,0,.09);height:85px;margin-left:10px;margin-right:10px;width:140px}.des-cla .mv-tile.mv-bl{-webkit-transform:scale(0.5)}.des-cla .mv-mask{border-radius:3px;box-shadow:inset 0 2px 3px rgba(0,0,0,0.09);height:83px;width:138px}.des-cla .mv-page .mv-mask{border-style:solid}.default-theme.des-cla .mv-page .mv-mask{border-color:#c0c0c0}.default-theme.des-cla .mv-page:hover .mv-mask,.default-theme.des-cla .mv-focused~.mv-page .mv-mask,.default-theme.des-cla .mv-page:focus .mv-mask{border-color:#7f7f7f}.des-cla .mv-page .mv-focused~.mv-mask,.des-cla .mv-page:focus .mv-mask{-webkit-transition:background-color 100ms ease-in-out;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 80%,rgba(255,255,255,0.9));background-color:rgba(0,0,0,0.35);opacity:0.35}.des-cla .mv-thumb,.des-cla .mv-locthumb,.des-cla .mv-locgradient,.des-cla .mv-locfallback{border:none;left:1px;height:83px;top:1px;width:138px}.des-cla .mv-title{bottom:-27px;height:18px;left:0;width:140px}.des-cla .mv-locfallback .mv-domain{bottom:24px;margin:0 7px;width:124px}.des-cla .mv-locfallback img{border-radius:3px;width:138px}.des-cla .mv-x{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQVR42r2RsQrDMAxEBRdl8SDcX8lQPGg1GBI6lvz/h7QyRRXV0qUULwfvwZ1tenw5PxToRPWMC52eA9+WDnlh3HFQ/xBQl86NFYJqeGflkiogrOvVlIFhqURFVho3x1moGAa3deMs+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==');border-radius:2px;height:16px;width:16px}.des-cla .mv-x:hover,.des-cla .mv-x:focus{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAqklEQVR4XqWRMQ6DMAxF/1Fyilyj2SmIBUG5QcTCyJA5Z8jGhlBPgRi4TmoDraVmKFJlWYrlp/g5QfwRlwEVNWVa4WzfH9jK6kCkEkBjwxOhLghheMWMELUAqqwQ4OCbnE4LJnhr5IYdqQt4DJQjhe9u4vBBmnxHHNzRFkDGjHDo0VuTAqy2vAG4NkvXXDHxbGsIGlj3e835VFNtdugma/Jk0eXq0lP//5svi4PtO01oFfYAAAAASUVORK5CYII=')}.des-cla .mv-page .mv-x{right:2px;top:2px}html[dir=rtl] .des-cla .mv-page .mv-x{left:2px;right:auto}.des-cla .mv-fav{bottom:-7px;left:62px}.des-cla #fkbx{box-shadow:inset 0px 1px 2px rgba(0,0,0,0.1)}.des-cla #fkbx-text{visibility:hidden}.des-cla #mv-tiles{width:320px}.des-cla #fkbx{width:298px}@media only screen and (min-width:660px){.des-cla #mv-tiles{width:480px}.des-cla #fkbx{width:458px}}@media only screen and (min-width:820px){.des-cla #mv-tiles{width:640px}.des-cla #fkbx{width:618px}}.des-mat{}.des-mat #most-visited{margin-top:63px}.des-mat #mv-tiles{height:calc(4px + 128px + 16px + 128px + 8px);line-height:146px;max-height:calc(100% - 10px - 16px - 10px)}.des-mat .mv-tile{background:rgb(242,242,242);border-radius:2px;height:130px;margin-left:8px;margin-right:8px;width:156px}.des-mat.light-text .mv-tile{background:rgb(51,51,51)}.des-mat .mv-tile.mv-bl{-webkit-transform:scale(0);-webkit-transform-origin:0 65px;margin-left:0;margin-right:0;width:0}.des-mat .mv-mask{border-color:transparent;border-radius:2px;height:128px;width:154px}.default-theme.des-mat .mv-page .mv-mask{-webkit-transition:box-shadow 200ms,border 200ms}.default-theme.des-mat .mv-page:hover .mv-mask,.default-theme.des-mat .mv-page .mv-focused~.mv-mask{box-shadow:0 1px 2px 0 rgba(0,0,0,0.1),0 4px 8px 0 rgba(0,0,0,0.2)}.des-mat .mv-page .mv-focused~.mv-mask{-webkit-transition:box-shadow 200ms,border 200ms,background-color 100ms ease-in-out;background:rgba(0,0,0,0.3);border-color:rgba(0,0,0,0.3)}.des-mat .mv-thumb,.des-mat .mv-locthumb,.des-mat .mv-locgradient,.des-mat .mv-locfallback{border:none;border-radius:0;height:94px;left:4px;top:32px;width:148px}.des-mat .mv-title{bottom:auto;height:15px;left:32px;top:9px;width:120px}html[dir=rtl] .des-mat .mv-title{left:auto;right:32px}@media (-webkit-min-device-pixel-ratio:2){.des-mat .mv-title{top:8px}}.des-mat .mv-locfallback .mv-dot-bg{background:#fff;height:100%;width:100%}.des-mat.light-text .mv-locfallback .mv-dot-bg{background:#555}.des-mat .mv-locfallback .mv-dot{background-color:#f2f2f2;border-radius:8px;display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.des-mat.light-text .mv-locfallback .mv-dot{background-color:#333}.des-mat .mv-locfallback img{width:148px}.des-mat .mv-x{border-radius:2px;height:32px;width:32px}.des-mat .mv-x .mv-x-inner{-webkit-mask-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALklEQVQI12NgaABCZADmNzD8RxKG8xDCKAogHFQ9UGE0IayCWLRjsQirk7A4HgDcDSHxzPGFWwAAAABJRU5ErkJggg==') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAV0lEQVQoz42TWw4AEAwE9+i9OR8EDV3jSzqTVB8kKRRyZ/JQUzPq4uNSqYnW6kXe6jN6B8s8GdiXb+gLPNSPllU/BCrC1LAY2B7YcDhCuBR4zfDiwq/QAfvmh51S6zwEAAAAAElFTkSuQmCC') 2x);-webkit-mask-repeat:no-repeat;-webkit-mask-size:10px 10px;background-color:rgba(90,90,90,0.7);height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:50%;width:10px}.des-mat.light-text .mv-x .mv-x-inner{background-color:rgba(255,255,255,0.7)}.des-mat .mv-x:hover .mv-x-inner,.des-mat #_z1e:focus .mv-x-inner{background-color:rgb(90,90,90)}.des-mat.light-text .mv-x:hover .mv-x-inner,.des-mat.light-text #_z1e:focus .mv-x-inner{background-color:rgb(255,255,255)}.des-mat .mv-x:active .mv-x-inner,.des-mat #_z1e:active .mv-x-inner{background-color:rgb(66,133,244)}.des-mat.light-text .mv-x:active .mv-x-inner,.des-mat.light-text #_z1e:active .mv-x-inner{background-color:rgba(255,255,255,0.5)}.des-mat .mv-page .mv-x{background:linear-gradient(to right,transparent,rgb(242,242,242) 10%);right:0;top:0}html[dir=rtl] .des-mat .mv-page .mv-x{background:linear-gradient(to left,transparent,rgb(242,242,242) 10%);left:0;right:auto}.des-mat.light-text .mv-page .mv-x{background:linear-gradient(to right,transparent,rgba(51,51,51,0.9) 30%)}html[dir=rtl] .des-mat.light-text .mv-page .mv-x{background:linear-gradient(to left,transparent,rgba(51,51,51,0.9) 30%)}.des-mat .mv-fav{left:8px;top:8px}html[dir=rtl] .des-mat .mv-fav{left:auto;right:8px}.des-mat #mv-noti-lks .mv-x,.des-mat#mv-noti-error-lks .mv-x{-webkit-transform:translate(0,-8px)}.des-mat #mv-tiles{width:344px}.des-mat #fkbx-text{visibility:inherit}.des-mat #fkbx{width:326px}@media only screen and (min-width:700px){.des-mat #mv-tiles{width:516px}.des-mat #fkbx{width:498px}}@media only screen and (min-width:872px){.des-mat #mv-tiles{width:688px}.des-mat #fkbx{width:670px}}.des-ico{}.des-ico #most-visited{margin-top:63px}.des-ico #mv-tiles{background:rgba(255,255,255,0.2);border-radius:4px;height:224px;line-height:112px;margin-bottom:20px;padding:18px 6px}.des-ico.light-text #mv-tiles{background:rgba(0,0,0,0.4)}.default-theme.des-ico #mv-tiles{background:none}.des-ico .mv-tile{border-radius:2px;height:108px;margin:0 12px 4px 12px;width:84px}.des-ico .mv-tile.mv-bl{-webkit-transform:scale(0);-webkit-transform-origin:0 41px;margin-left:0;margin-right:0;width:0}.des-ico .mv-mask{border-color:transparent;border-radius:0;height:100%;width:100%;z-index:5}.des-ico .mv-page .mv-focused~.mv-mask{-webkit-transition:none;background:rgba(0,0,0,0.2);border:none;border-radius:2px;box-shadow:none}.des-ico.light-text .mv-page .mv-focused~.mv-mask{background:rgba(255,255,255,0.2)}.des-ico .mv-thumb,.des-ico .mv-locthumb,.des-ico .mv-locgradient,.des-ico .mv-locfallback{border:none;height:48px;left:50%;margin-left:-24px;position:absolute;top:18px;width:48px;z-index:10}.des-ico .mv-title{bottom:auto;height:28px;left:auto;right:auto;top:76px;width:100%;z-index:10}.des-ico .mv-x{border-radius:0;height:16px;width:16px;z-index:15}.des-ico .mv-page .mv-x .mv-x-inner{display:none}.des-ico .mv-page .mv-x,.des-ico.light-text .mv-page .mv-x{background-color:transparent;background-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOMvlkz0KwCAMRnscDyJ6DBEdPIH/iPdWSInQDu1QpVs7uMS8R76IGyEE3pztgwLGGCilbo1CCKCUPgsQbq1BjPGsWWuh9w7GmLkIIYRT4pwbcK11bQfe+yFBuJSyvkScAmGUpJTWBDj6EeGYJOc8J9BaDwDBaxy8exRwzkFKeWvE2tQz/vAv7E36qwAYPrp5AAAAAElFTkSuQmCC') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAQ9JREFUWMPt1tsKRFAUBmCP46GcjyWHB5ILeTVcIHfOak1L2Ulj0GCa2kqp+fN/w9o7DMuy8MuToQAKoAAKOBIKwxCKogBVVXezHMdBHMcQBMF1gCzLAI+u60DTtM0cz/NQVdWUTZLkOgD+87ZtPyIEQYC6rqfMOI7guu61M7BG6LpOfhNFkZQPwwCe590zhO8QkiRB0zSk3HGce1fBGjGX930Ptm0/swwVRSGIGWJZ1nP7wPIpzADDMJ4BbL0CvDZN814ALr/1EMqy/BXiMADLsAAPRCx3xW8QzNlyLMIhXGeWy/HMTBwClGVJyrFoK7dE5Hl+HSCKoumGuN3uZTGTpin4vk+/ByiAAijgPwAvFKeuJTQjB0kAAAAASUVORK5CYII=') 2x);top:10px}.des-ico #mv-noti-x{border-radius:2px;height:32px;width:32px}.des-ico #mv-noti-x .mv-x-inner{-webkit-mask-image:-webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALklEQVQI12NgaABCZADmNzD8RxKG8xDCKAogHFQ9UGE0IayCWLRjsQirk7A4HgDcDSHxzPGFWwAAAABJRU5ErkJggg==') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAV0lEQVQoz42TWw4AEAwE9+i9OR8EDV3jSzqTVB8kKRRyZ/JQUzPq4uNSqYnW6kXe6jN6B8s8GdiXb+gLPNSPllU/BCrC1LAY2B7YcDhCuBR4zfDiwq/QAfvmh51S6zwEAAAAAElFTkSuQmCC') 2x);-webkit-mask-repeat:no-repeat;-webkit-mask-size:10px 10px;background-color:rgba(90,90,90,0.7);height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:50%;width:10px}.des-ico.light-text #mv-noti-x .mv-x-inner{background-color:rgba(255,255,255,0.7)}.des-ico #mv-noti-x:hover .mv-x-inner,.des-ico #mv-noti-x:focus .mv-x-inner{background-color:rgb(90,90,90)}.des-ico.light-text #mv-noti-x:hover .mv-x-inner,.des-ico.light-text #mv-noti-x:focus .mv-x-inner{background-color:rgb(255,255,255)}.des-ico #mv-noti-x:active .mv-x-inner{background-color:rgb(66,133,244)}.des-ico.light-text #mv-noti-x:active .mv-x-inner{background-color:rgba(255,255,255,0.5)}.des-ico .mv-page .mv-x{right:10px}html[dir=rtl] .des-ico .mv-page .mv-x{left:10px;right:auto}.des-ico .mv-fav{left:8px;top:8px}html[dir=rtl] .des-ico .mv-fav{left:auto;right:8px}.des-ico #mv-noti-lks .mv-x,.des-ico#mv-noti-error-lks .mv-x{-webkit-transform:translate(0,-8px)}.des-ico #fkbx-text{visibility:inherit}.des-ico #mv-noti{margin-top:30px}.des-ico #mv-tiles{width:216px}.des-ico #fkbx{width:454px}@media only screen and (min-width:764px){.des-ico #mv-tiles{width:324px}.des-ico #fkbx{width:562px}}@media only screen and (min-width:872px){.des-ico #mv-tiles{width:432px}.des-ico #fkbx{width:670px}}.fkbx-drgfcs{}#fkbx_crt{}.fkbxfcs{}.fkbx-drgfcs #fkbx-text,.fkbxfcs #fkbx-text{visibility:hidden}.fkbx-drgfcs #fkbx_crt{visibility:inherit}</style><link href="chrome-search://local-ntp/theme.css" rel="stylesheet" type="text/css"><style>.s2er{}.s2fp{}.s2fp-h{}.s2ml{}.s2ra{}.s2tb{}.s2tb-h{}.spch{}.spchc{}.spch{background:#fff;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:left;top:0;visibility:hidden;width:100%;z-index:10000;transition:visibility 0s linear 0.218s,opacity 0.218s,background-color 0.218s}.s2fp.spch{opacity:1;visibility:visible;transition-delay:0s}.s2tb-h.spch{background:rgba(255,255,255,0);opacity:0;visibility:hidden}.s2tb.spch{background:rgba(255,255,255,0);opacity:1;visibility:visible;transition-delay:0s}.close-button{color:#777;cursor:pointer;font-size:26px;right:0;height:11px;line-height:15px;margin:15px;opacity:.6;padding:0;position:absolute;top:0;width:15px}.close-button:hover{opacity:.8}.close-button:active{opacity:1}.google-logo{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAABACAQAAAAKENVCAAAI/ElEQVR4Ae3ae3BU5RnH8e/ZTbIhhIRbRIJyCZcEk4ZyE4RBAiRBxRahEZBLQYUZAjIgoLUWB6wjKIK2MtAqOLVUKSqWQW0ZaOQq0IFAIZVrgFQhXAOShITEbHY7407mnPfc8u6ya2f0fN6/9rzvc87Z39nbed/l/8OhIKMDQ+hHKp1JJB6FKq5QQhH72MZ1IsDRhvkU4bds9WxlLNE4wqg9q6jBL9G+4knc/HB9qXmuG4goD89TjT+IVkimE/zt6sYh/EG3WmaiOMGHbgQ38YfY3ibKCV6GMabHWY0bo+Ps5jjnuYlCczrSk8Hcgd5U1rONoDnG48Ova2W8RGeMXAxiHfWakT4mOx81oRiG1/C5vYh47KSx5fZid4JvxxVd7MdIp3EK06kNNXYneIWtutgLaIasQUwkJE7wE3SxbycWR8SD93BOiL2YRBwRDN5FwOPchaqecZQTQQ4XAApz0FrFQSLPwQD8mlZNEt8L5841D62/cJVIi2cgPelEAlBOCYfYSxXymjKAXqSQAFRwloPspRp5dzOMHiTThEqK2c1OvGHIsg/30YUWKHzDKfZwEB+2xBn3gUSSwmA+MpluruYDySMPYD23TOrX0V/q+CPZYai+yHw8wKscbmhMD+IVfyevcMlkuvxXxGOphTD4Gi4iJ40C/DZtM12wk8Lfbes/oSN27mGPZW0RnVmvebxIMng3z1Bluddz5Mh9wm8icqZIzPHfZDxW8qhotL6cUVh5zP74XOBg0MEnsgW/bfMxzyIOYdgSIuV5/JJtPmZmSlb7mI6ZGTLVQQafSKHUvp7BxFxhSD6N8UsH4An5aT+J3mNB1T+K3hj8YQ/ezRbpvY3CYKEwYFLYgvfTkQZ9qTN8nS3lIdJJZwTLDdNztfwUrTTDp+hllmnqrxo+sLqi1dWwuFPKYnK5h0we5c/UhhT8fF1FHWsZTis8dGAyB4S+67RF5wVhwC/DGHxvAqI4Imyv50Vi0YpjsW4l4AAuGii63yE+lhCHVlOW6o79TxRN/ee64y/SHb8TO4MOvq3uYh6iO1oufiP0r0VnjtA9K4zBDzSdgKtjJGbyqBfG5dFguC62sZiZoLt0Qy3qvYzCKIZNQQYvXupdxGO0Rni5dLebl1wexuD7A4DuC+gprMwTxu2hwT+E7c9iZYEw7lMaiBPeczAXT3EQwcdwTbP1Eq3RiyaPvcIe/4igj9C5NYzBpwOQKmzbh4IVF4dMviOShHfCEdxYieKY8M5qCUCy8E4oxIWVnwcRfK4wdhqitiyk1JBHJc3UU4UT+HDRYADR1GEnB2s9WYrqssn41/BjxcdrrEOVzRogS4hqOfVY8fI6qzWXYTAbgRwUVMvwYeUzzpKCnMGobvIeDRTuZyajiMLoMG2oRONfwnV5kNDNFH5ZKAD8SbPtFrHYaSr8+nkLgCXC53sCdloJz+RlAFYJv5bisPOG9Cv+U+F+O6AZM4Sx2iz+QKZxWrgArSmEbiAIpwvQGdV/qMFOFUdRdTbUn6QCO9c4bajvJhy/GjuFyOqEqhhIZyUXWEk6esd4imTyKTIG/1e08kghNNEMR7WfgERUpTTmPKrmIdSXGupbiHu3dQFZCagy2MGXzCAekZcPySKDlVSYTwsf5QB9aeBiCWMJxcO0RPU5AW5UPuyJI9xhr/diz4ssF6ohGJXyFmu42Fj5MrTGMILgKTyHqpoCAipR3YE9cURFWOorUCVhrzWyKrFWwGg68hIXG79uGziG1rt0IFhPcC+qj6gioARVJm7sRPMTVCWG+u54sBNHqm19Ji7sZCDrv5gp53ekkcNGvHJvGB+zdVd+M60JRi/eREt9VIQqgfuxM5Q4VEcM9R5ysfMAUaA78iFUzRmIfb2sw+j9m6m042lOEqS1hv+R3Y2svpSJCxJCn9hjR5ztywSgg7BtGwpWFHYLY+8CIB2/5Jppj5BvoE7Qz/a8bCVSrIv+quQrYCLVQl0NXVEpnBF6f4aVX+guvELAPmH7GMk/ZX1BgKJb2szBnEJBEMFHUyY841SsjGcr7bGVabLC8z6dsJPC3ww1sxE9LfTeoAdmeumOPkNzYcUb776Y6aebOh5Hg6m6l1MaZhYGOUn2sjD6MAmYyeIWfiqYhoKNLJNlaC/ryCUGvRhyWUedYfx7KIiack4XfZ5ujMI4XewlxIpzMEL04w31k3STtEW4NWd6Uugr4yFEHt4Ielo4iRvC+P20R6QwTZPnFtpjI4dKi5veAlbwLPnM4NesZDs3Tcd9RgxGIw3jdjCeO1FQSGYiuw39D6A1CJ+u/wsm0pZA/STDEnY9A9DKMtRvZjStAIVOzOJMSAsh+YaMltGXGEChHVPYr+s/igsbPTmHP8T2IR7MvW46voZa0+2voLfAor7GdPtz6C0yHVfNt4S+9KewwXTJ8xtumWyv5T6w14pNIYTu40VcWHHzvvSe3sWFnsIq6foVKCb1qyOw2N2EnZJ7+5aRSFAYS2lQp3maLOy5WS61pyW4MKOwCJ/E5X8BBTMuXsW+tpITQQYPcXws8Zyuk420eOZyQSqqy8zDg4yH+cp2T2cYjp1sim3rTzEEO4/YPKNL9AvpD00K+ZTbnZXwc1KSh9FspNrmDbSZicQirwmzLMI7Qb7EnjxM57hp/TGmEUNjEljAZUNtHW/TGvhA+J6QCx4gicVcNT2r7TyIgoEiGf+99CeVLiTSDKimjK85QSH7qCJ4Cr0YRi9SaI6fG5zlIAUcwS9d34Nsen9Xz3f1hRRQJF0fzVCyyaQdcZRzil18zCUAPtHc3s3mTYIRzWCGkEEH4vFSxmn2s5kSJDgOGP/l4Ii8aOHetzeOsIhiNAX0wVq28O3lwXHbklnIeQJ/PHJhQbh72YXjts3Eq4n0t5h7BL+mzcVx29Kpxy9E70IvV5h7qiEJRxiswC+0feTgJkAhg3d098S/J8IUfhziOUAaouscoYJmpNIO0WXSuYYjLLpxFb9U85KNI4wyKJWKfQKOMEtmm33sXCCbCHC4mMxZIWpx/aglEeNwM4J3KNb8jvmaDTxBIt8jhR8vD22IpYYr1PBD5HA4HP8DxVcxdwELEFUAAAAASUVORK5CYII=) no-repeat center;background-size:94px 32px;height:32px;width:94px;top:8px;opacity:0;float:right;left:255px;pointer-events:none;position:relative;transition:opacity .5s ease-in,left .5s ease-in}.s2tb .google-logo{opacity:0.54;left:270px;transition:opacity .5s ease-out,left .5s ease-out}.spchc{display:block;height:42px;position:absolute;pointer-events:none}.s2fp .spchc,.s2fp-h .spchc{margin:auto;margin-top:312px;max-width:572px;min-width:534px;padding:0 223px;position:relative;top:0}.s2tb .spchc,.s2tb-h .spchc{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.2);margin:0;min-width:100%;overflow:hidden;padding:51px 0 50px 126px;position:absolute}._o3{height:100%;opacity:.1;pointer-events:none;width:100%;transition:opacity .318s ease-in}.s2tb-h ._o3,.s2tb ._o3{height:100%;width:572px;transition:opacity .318s ease-in}.s2ml ._o3,.s2ra ._o3,.s2er ._o3{opacity:1;transition:opacity 0s}.button{background-color:#fff;border:1px solid #eee;border-radius:100%;bottom:0;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;display:inline-block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color 0.218s,border 0.218s,box-shadow 0.218s}.s2tb-h .button{left:-83px;opacity:0;pointer-events:none;position:absolute;top:-83px;transition-delay:0}.s2fp-h .button{opacity:0;pointer-events:none;position:absolute;transition-delay:0}.s2fp .button,.s2tb .button{opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition-delay:0}.s2ra .button{background-color:#ff4444;border:0;box-shadow:none}._CMb{background-color:#dbdbdb;border-radius:100%;display:inline-block;height:301px;left:-69px;opacity:1;pointer-events:none;position:absolute;top:-69px;width:301px;transform:scale(.01);transition:opacity 0.218s}.s2tb-h ._CMb,.s2tb ._CMb{height:151px;left:-28px;top:-28px;width:151px}._AM{float:right;pointer-events:none;position:relative;transition:transform 0.218s,opacity 0.218s ease-in}.s2fp-h ._AM,.s2fp ._AM{height:165px;right:-70px;top:-70px;width:165px}.s2fp-h ._AM,.s2tb-h ._AM{transform:scale(.1)}.s2fp ._AM,.s2tb ._AM{transform:scale(1)}.s2tb-h ._AM,.s2tb ._AM{height:95px;right:-31px;top:-27px;width:95px}.s2ra .button:active{background-color:#cd0000}.button:active{background-color:#eee}._wPb{height:87px;left:43px;pointer-events:none;position:absolute;top:47px;width:42px;transform:scale(1)}.s2tb-h ._wPb,.s2tb ._wPb{left:17px;top:7px;transform:scale(.53)}._AUb{background-color:#999;border-radius:30px;height:46px;left:25px;pointer-events:none;position:absolute;width:24px}._Fjd{bottom:0;height:53px;left:11px;overflow:hidden;pointer-events:none;position:absolute;width:52px}._oXb{background-color:#999;bottom:14px;height:14px;left:22px;pointer-events:none;position:absolute;width:9px;z-index:1}._dWb{border:7px solid #999;border-radius:28px;bottom:27px;height:57px;pointer-events:none;position:absolute;width:38px;z-index:0}.s2ml ._AUb,.s2ml ._oXb{background-color:#f44}.s2ml ._dWb{border-color:#f44}.s2ra ._AUb,.s2ra ._oXb{background-color:#fff}.s2ra ._dWb{border-color:#fff}.spcht{}.spchta{}.spch-2l{}.spch-3l{}.spch-4l{}.spch-5l{}._gjb{pointer-events:none}.s2fp-h ._gjb,.s2fp ._gjb{position:absolute}.s2tb-h ._gjb,.s2tb ._gjb{position:relative}.spcht{font-weight:normal;line-height:1.2;opacity:0;pointer-events:none;position:absolute;text-align:left;-webkit-font-smoothing:antialiased;transition:opacity .1s ease-in,margin-left .5s ease-in,top 0s linear 0.218s}.s2fp-h .spcht{margin-left:44px}.s2tb-h .spcht{margin-left:32px}.s2fp-h .spcht,.s2fp .spcht{font-size:32px;left:-44px;top:-.2em;width:460px}.s2tb-h .spcht,.s2tb .spcht{font-size:27px;left:7px;top:.2em;width:490px}.s2fp .spcht,.s2tb .spcht{margin-left:0;opacity:1;transition:opacity .5s ease-out,margin-left .5s ease-out}.spchta{color:#1155cc;cursor:pointer;font-size:18px;font-weight:500;pointer-events:auto;text-decoration:underline}.spch-2l.spcht,.spch-3l.spcht,.spch-4l.spcht{transition:top 0.218s ease-out}.spch-2l.spcht{top:-.6em}.spch-3l.spcht{top:-1.3em}.spch-4l.spcht{top:-1.7em}.s2fp .spch-5l.spcht{top:-2.5em}.s2tb .spch-5l.spcht{font-size:24px;top:-1.7em;transition:font-size 0.218s ease-out}.s2wfp{}._ypc{margin-top:-100px;opacity:0;pointer-events:none;position:absolute;width:500px;transition:opacity 0.218s ease-in,margin-top .4s ease-in}.s2wfp ._ypc{margin-top:-300px;opacity:1;transition:opacity .5s ease-out 0.218s,margin-top 0.218s ease-out 0.218s}._zpc{box-shadow:0 1px 0px #4285F4;height:80px;left:0;margin:0;opacity:0;pointer-events:none;position:fixed;right:0;top:-80px;transition:opacity 0.218s,box-shadow 0.218s}.s2wfp ._zpc{box-shadow:0 1px 80px #4285F4;opacity:1;pointer-events:none;animation:allow-alert .75s 0 infinite;animation-direction:alternate;animation-timing-function:ease-out;transition:opacity 0.218s,box-shadow 0.218s}@-webkit-keyframes allow-alert {from{opacity:1}to{opacity:.35}}#fkbx-tchm{}.fkbx-chm{}.fkbx-chme{}#fkbx-chmer{}#fkbx-chmed{}.fkbx-chmt{}#fkbx-chmtr{}.chw-oc{}#chw-o{}#fkbx-tchm{display:none}.fkbx-chm{line-height:22px;text-align:center}.fkbx-chm a{color:#1a0dab;cursor:pointer;margin:5px}._gSc{background:url(data:image/gif;base64,R0lGODlhEAAQAKIHAPzu7PfT0Oh5cfGtqONbUuBLQeBKP////yH5BAEAAAcALAAAAAAQABAAAANKeLrcfkAI8NowZtQFCCbUJmCYsAWFAQBGEVSjyhqmc2HBnDUdGQQkEOOGA5I0CkCKxMQUQjEnAMU0GUkuZTPgaRaWTEK0Sa5tGgkAOw==) no-repeat center;display:inline-block;height:16px;width:16px}#chw-o{display:none}#chw-o a{color:#4285F4;line-height:31px}.chw-oc{font-size:13px;padding:20px !important;text-align:left;width:400px}._mSc{color:#000;font-size:16px;font-weight:bold}._kSc{color:#555}._dKb{border-radius:2px;cursor:pointer;font-size:12px;line-height:27px;margin:0;padding-left:14px;padding-right:14px}#chw-o ._dKb{float:right;margin-left:10px}._k3{background-color:#f9f9f9;border:1px solid #bdbdbd;color:#000}._k3:hover{background-color:#fcfcfc}._k3:active,._k3:hover,._k3:focus{border-color:#3e7ef8}._k3:active{background-color:#e6e6e6}._WW{background-color:#5a97ff;border:1px solid #2558b0;color:#fff}._WW:hover{background-color:#629cff}._WW:hover,._WW:focus{box-shadow:inset 0 0 1px}._WW:active,._qyd:focus,._WW:hover{border-color:#2352a2}._WW:active{background-color:#4279d8}</style><link href="//ssl.gstatic.com/chrome/components/doodle-notifier-02.html" rel="import"><meta content="none" name="robots"><script>(function(){window.google={kEI:'kkoPWoOaAseJ0gKP07CIBg',kEXPI:'1354277,1354688,1354723,1354916,1355218,1355736,1356031,1356078,3300118,3300130,3313274,3313321,4029815,4031109,4038214,4038394,4041776,4043492,4045096,4045293,4045841,4047140,4047454,4048347,4048980,4050750,4051887,4056126,4056682,4058016,4061666,4061980,4062724,4063220,4064468,4064796,4069829,4072270,4076999,4078430,4078588,4080760,4081039,4081165,4082230,4093169,4093524,4095910,4097147,4097195,4097922,4097928,4098733,4098739,4098751,4102238,4102827,4103475,4103845,4103861,4104202,4104258,4104414,4106647,4107914,4109293,4109316,4109489,4110086,4110931,4113217,4115624,4115697,4116351,4116724,4116730,4117328,4117570,4117980,4118227,4118798,4119032,4119034,4119036,4119797,4119798,4119805,4120415,4120660,4120911,4121035,4121175,4121805,4122382,4124090,4124497,4124727,4124850,4125837,4126204,4127095,4127744,4127775,4128586,4128623,4128998,4128999,4129520,4129555,4129559,4130560,4130783,4131073,4131370,4131834,4132528,4132956,4133090,4133113,4133274,4133396,4133416,4133430,4133509,4133755,4133756,4134271,4134946,4134951,4135084,4135088,4135249,4135576,4135744,4135856,4135934,4136073,4136235,4136397,4136459,4136549,4136627,4137110,4137461,4137462,4137597,4138247,4138341,4138346,4138432,4139042,4139216,4139395,4139436,4139464,4139701,4140032,4140111,4140117,4140153,4140241,4140691,4140786,4140957,4141066,4141581,4141600,4141677,4142232,4142328,4142494,4142503,4142504,4142610,4142666,4143060,4143197,4143202,4143313,10200083,10202524,10202562,22311504,41317155',authuser:0,esrp:{sourceid:'chrome-psyapi2'},esrnh:false,kscs:'c9c918f0_kkoPWoOaAseJ0gKP07CIBg',u:'c9c918f0',kGL:'US'};google.kHL='en';})();(function(){google.lc=[];google.li=0;google.getEI=function(a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||google.kEI};google.getLEI=function(a){for(var b=null;a&&(!a.getAttribute||!(b=a.getAttribute("leid")));)a=a.parentNode;return b};google.https=function(){return"https:"==window.location.protocol};google.ml=function(){return null};google.wl=function(a,b){try{google.ml(Error(a),!1,b)}catch(d){}};google.time=function(){return(new Date).getTime()};google.log=function(a,b,d,c,g){if(a=google.logUrl(a,b,d,c,g)){b=new Image;var e=google.lc,f=google.li;e[f]=b;b.onerror=b.onload=b.onabort=function(){delete e[f]};google.vel&&google.vel.lu&&google.vel.lu(a);b.src=a;google.li=f+1}};google.logUrl=function(a,b,d,c,g){var e="",f=google.ls||"";d||-1!=b.search("&ei=")||(e="&ei="+google.getEI(c),-1==b.search("&lei=")&&(c=google.getLEI(c))&&(e+="&lei="+c));c="";!d&&google.cshid&&-1==b.search("&cshid=")&&(c="&cshid="+google.cshid);a=d||"/"+(g||"gen_204")+"?atyp=i&ct="+a+"&cad="+b+e+f+"&zx="+google.time()+c;/^http:/i.test(a)&&google.https()&&(google.ml(Error("a"),!1,{src:a,glmm:1}),a="");return a};}).call(this);(function(){google.y={};google.x=function(a,b){if(a)var c=a.id;else{do c=Math.random();while(google.y[c])}google.y[c]=[a,b];return!1};google.lm=[];google.plm=function(a){google.lm.push.apply(google.lm,a)};google.lq=[];google.load=function(a,b,c){google.lq.push([[a],b,c])};google.loadAll=function(a,b){google.lq.push([a,b])};}).call(this);google.f={};(function(){google.hs={h:true};})();(function(){window.chrome||(window.chrome={});window.chrome.embeddedSearch||(window.chrome.embeddedSearch={});window.chrome.embeddedSearch.searchBox||(window.chrome.embeddedSearch.searchBox={});window.chrome.embeddedSearch.searchBox.onsubmit=function(){var a=encodeURIComponent(window.chrome.embeddedSearch.searchBox.value);google.x({id:"psyapi"},function(a,b){google.esrp.q=a;if(b)for(var c in b)google.esrp[c]=encodeURIComponent(b[c]);var d=google.esrnh;google.esrnh=!1;return function(){google.nav.search(google.esrp,!1,d)}}(a,window.chrome.embeddedSearch.searchBox.requestParams))};}).call(this);(function(){google.c={c:{a:true,d:true,e:true,i:false,m:true,n:false}};google.sn='newtab';(function(){var e={gen204:"iml",clearcut:8};var f=function(a,b,c){a.addEventListener?a.removeEventListener(b,c,!1):a.attachEvent&&a.detachEvent("on"+b,c)},h=function(a,b,c){g.push({g:a,h:b,l:c});a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},g=[];google.timers={};google.startTick=function(a,b){var c=b&&google.timers[b].t?google.timers[b].t.start:google.time();google.timers[a]={t:{start:c},e:{},m:{}};(c=window.performance)&&c.now&&(google.timers[a].wsrt=Math.floor(c.now()))};google.tick=function(a,b,c){google.timers[a]||google.startTick(a);c=void 0!==c?c:google.time();b instanceof Array||(b=[b]);for(var d=0;d<b.length;++d)google.timers[a].t[b[d].clearcut]={key:b[d],ts:c}};google.c.e=function(a,b,c){google.timers[a].e[b]=c};google.c.b=function(a){var b=google.timers.load.m;b[a]&&google.wl("ch_mab",{m:a});b[a]=!0};google.c.u=function(a){var b=google.timers.load.m;if(b[a]){b[a]=!1;for(a in b)if(b[a])return;google.csiReport()}else google.wl("ch_mnb",{m:a})};google.rll=function(a,b,c){var d=function(b){c(b);f(a,"load",d);f(a,"error",d)};h(a,"load",d);b&&h(a,"error",d)};google.ull=function(){for(var a;a=g.shift();)f(a.g,a.h,a.l)};google.iTick=function(a){var b=google.time();google.tick("load",e,b);a=a.id||a.src||a.name;google.timers.iml||google.startTick("iml");google.timers.iml.t[a]=b;google.c.c.a&&(google.timers.aft||google.startTick("aft"),google.timers.aft.t[a]=b)};google.afte=!0;google.aft=function(a){google.c.c.a&&google.afte&&(google.timers.aft||google.startTick("aft"),google.timers.aft.t[a.id||a.src||a.name]=google.time())};google.c.c.e&&google.startTick("webaft");google.startTick("load");google.c.b("pr");google.c.b("xe");}).call(this);})();(function(){var k=this,l=Date.now||function(){return+new Date};var t={};var v=function(a,d){if(null===d)return!1;if("contains"in a&&1==d.nodeType)return a.contains(d);if("compareDocumentPosition"in a)return a==d||!!(a.compareDocumentPosition(d)&16);for(;d&&a!=d;)d=d.parentNode;return d==a};var w=function(a,d){return function(b){b||(b=window.event);return d.call(a,b)}},B=function(a){a=a.target||a.srcElement;!a.getAttribute&&a.parentNode&&(a=a.parentNode);return a},C="undefined"!=typeof navigator&&/Macintosh/.test(navigator.userAgent),D="undefined"!=typeof navigator&&!/Opera/.test(navigator.userAgent)&&/WebKit/.test(navigator.userAgent),E={A:1,INPUT:1,TEXTAREA:1,SELECT:1,BUTTON:1},aa=function(){this._mouseEventsPrevented=!0},F={A:13,BUTTON:0,CHECKBOX:32,COMBOBOX:13,GRIDCELL:13,LINK:13,LISTBOX:13,MENU:0,MENUBAR:0,MENUITEM:0,MENUITEMCHECKBOX:0,MENUITEMRADIO:0,OPTION:0,RADIO:32,RADIOGROUP:32,RESET:0,SUBMIT:0,TAB:0,TREE:13,TREEITEM:13},G=function(a){return(a.getAttribute("type")||a.tagName).toUpperCase()in ba},H=function(a){return(a.getAttribute("type")||a.tagName).toUpperCase()in ca},ba={CHECKBOX:!0,OPTION:!0,RADIO:!0},ca={COLOR:!0,DATE:!0,DATETIME:!0,"DATETIME-LOCAL":!0,EMAIL:!0,MONTH:!0,NUMBER:!0,PASSWORD:!0,RANGE:!0,SEARCH:!0,TEL:!0,TEXT:!0,TEXTAREA:!0,TIME:!0,URL:!0,WEEK:!0},da={A:!0,AREA:!0,BUTTON:!0,DIALOG:!0,IMG:!0,INPUT:!0,LINK:!0,MENU:!0,OPTGROUP:!0,OPTION:!0,PROGRESS:!0,SELECT:!0,TEXTAREA:!0};var I=function(){this.v=this.o=null},K=function(a,d){var b=J;b.o=a;b.v=d;return b};I.prototype.s=function(){var a=this.o;this.o&&this.o!=this.v?this.o=this.o.__owner||this.o.parentNode:this.o=null;return a};var L=function(){this.w=[];this.o=0;this.v=null;this.H=!1};L.prototype.s=function(){if(this.H)return J.s();if(this.o!=this.w.length){var a=this.w[this.o];this.o++;a!=this.v&&a&&a.__owner&&(this.H=!0,K(a.__owner,this.v));return a}return null};var J=new I,M=new L;var P=function(){this.T=[];this.o=[];this.s=[];this.H={};this.v=null;this.w=[];O(this,"_custom")},ea="undefined"!=typeof navigator&&/iPhone|iPad|iPod/.test(navigator.userAgent),Q=String.prototype.trim?function(a){return a.trim()}:function(a){return a.replace(/^\s+/,"").replace(/\s+$/,"")},fa=/\s*;\s*/,ka=function(a,d){return function(b){var c=d;if("_custom"==c){c=b.detail;if(!c||!c._type)return;c=c._type}if("click"==c&&(C&&b.metaKey||!C&&b.ctrlKey||2==b.which||null==b.which&&4==b.button||"auxclick"== b.type||b.shiftKey))c="clickmod";else{var e=b.which||b.keyCode||b.key;D&&3==e&&(e=13);if(13!=e&&32!=e)e=!1;else{var f=B(b),q=(f.getAttribute("role")||f.type||f.tagName).toUpperCase(),h;(h="keydown"!=b.type)||("getAttribute"in f?(h=(f.getAttribute("role")||f.tagName).toUpperCase(),h=!H(f)&&("COMBOBOX"!=h||"INPUT"!=h)&&!f.isContentEditable):h=!1,h=!h);(h=h||b.ctrlKey||b.shiftKey||b.altKey||b.metaKey||G(f)&&32==e)||((h=f.tagName in E)||(h=f.getAttributeNode("tabindex"),h=null!=h&&h.specified),h=!(h&& !f.disabled));h?e=!1:(f="INPUT"!=f.tagName.toUpperCase()||f.type,h=!(q in F)&&13==e,e=(0==F[q]%e||h)&&!!f)}e&&(c="clickkey")}q=b.srcElement||b.target;e=R(c,b,q,"",null);b.path?(M.w=b.path,M.o=0,M.v=this,M.H=!1,f=M):f=K(q,this);for(;h=f.s();){var m=h;var g=m;h=c;var p=g.__jsaction;if(!p){var u=null;"getAttribute"in g&&(u=g.getAttribute("jsaction"));if(u){p=t[u];if(!p){p={};for(var x=u.split(fa),y=0,ha=x?x.length:0;y<ha;y++){var r=x[y];if(r){var z=r.indexOf(":"),N=-1!=z,ia=N?Q(r.substr(0,z)):"click";r=N?Q(r.substr(z+1)):r;p[ia]=r}}t[u]=p}g.__jsaction=p}else p=ja,g.__jsaction=p}"clickkey"==h?h="click":"click"!=h||p.click||(h="clickonly");g={S:h,action:p[h]||"",event:null,U:!1};e=R(g.S,g.event||b,q,g.action||"",m,e.timeStamp);if(g.U||g.action)break}e&&"touchend"==e.eventType&&(e.event._preventMouseEvents=aa);if(g&&g.action){if(g="clickkey"==c)g=B(b),g=(g.type||g.tagName).toUpperCase(),(g=32==(b.which||b.keyCode||b.key)&&"CHECKBOX"!=g)||(g=B(b),q=(g.getAttribute("role")||g.tagName).toUpperCase(),g=g.tagName.toUpperCase()in da&&"A"!=q&&!G(g)&&!H(g)||"BUTTON"==q);g&&(b.preventDefault?b.preventDefault():b.returnValue=!1);if("mouseenter"==c||"mouseleave"==c)if(g=b.relatedTarget,!("mouseover"==b.type&&"mouseenter"==c||"mouseout"==b.type&&"mouseleave"==c)||g&&(g===m||v(m,g)))e.action="",e.actionElement=null;else{c={};for(var n in b)"function"!==typeof b[n]&&"srcElement"!==n&&"target"!==n&&(c[n]=b[n]);c.type="mouseover"==b.type?"mouseenter":"mouseleave";c.target=c.srcElement=m;c.bubbles=!1;e.event= c;e.targetElement=m}}else e.action="",e.actionElement=null;m=e;a.v&&(n=R(m.eventType,m.event,m.targetElement,m.action,m.actionElement,m.timeStamp),"clickonly"==n.eventType&&(n.eventType="click"),a.v(n,!0));if(m.actionElement){"A"!=m.actionElement.tagName||"click"!=m.eventType&&"clickmod"!=m.eventType||(b.preventDefault?b.preventDefault():b.returnValue=!1);if(a.v)a.v(m);else{if((n=k.document)&&!n.createEvent&&n.createEventObject)try{var A=n.createEventObject(b)}catch(na){A=b}else A=b;m.event=A;a.w.push(m)}if("touchend"== m.event.type&&m.event._mouseEventsPrevented){b=m.event;for(var oa in b);l()}}}},R=function(a,d,b,c,e,f){return{eventType:a,event:d,targetElement:b,action:c,actionElement:e,timeStamp:f||l()}},ja={},la=function(a,d){return function(b){var c=a,e=d,f=!1;"mouseenter"==c?c="mouseover":"mouseleave"==c&&(c="mouseout");if(b.addEventListener){if("focus"==c||"blur"==c||"error"==c||"load"==c)f=!0;b.addEventListener(c,e,f)}else b.attachEvent&&("focus"==c?c="focusin":"blur"==c&&(c="focusout"),e=w(b,e),b.attachEvent("on"+ c,e));return{S:c,R:e,capture:f}}},O=function(a,d){if(!a.H.hasOwnProperty(d)){var b=ka(a,d),c=la(d,b);a.H[d]=b;a.T.push(c);for(b=0;b<a.o.length;++b){var e=a.o[b];e.s.push(c.call(null,e.o))}"click"==d&&O(a,"keydown")}};P.prototype.R=function(a){return this.H[a]};var V=function(a,d){var b=new ma(d),c;a:{for(c=0;c<a.o.length;c++)if(S(a.o[c],d)){c=!0;break a}c=!1}if(c)return a.s.push(b),b;T(a,b);a.o.push(b);U(a);return b},U=function(a){for(var d=a.s.concat(a.o),b=[],c=[],e=0;e<a.o.length;++e){var f=a.o[e];W(f,d)?(b.push(f),X(f)):c.push(f)}for(e=0;e<a.s.length;++e)f=a.s[e],W(f,d)?b.push(f):(c.push(f),T(a,f));a.o=c;a.s=b},T=function(a,d){var b=d.o;ea&&(b.style.cursor="pointer");for(b=0;b<a.T.length;++b)d.s.push(a.T[b].call(null,d.o))},Y=function(a,d){a.v=d;a.w&& (0<a.w.length&&d(a.w),a.w=null)},ma=function(a){this.o=a;this.s=[]},S=function(a,d){for(var b=a.o,c=d;b!=c&&c.parentNode;)c=c.parentNode;return b==c},W=function(a,d){for(var b=0;b<d.length;++b)if(d[b].o!=a.o&&S(d[b],a.o))return!0;return!1},X=function(a){for(var d=0;d<a.s.length;++d){var b=a.o,c=a.s[d];b.removeEventListener?b.removeEventListener(c.S,c.R,c.capture):b.detachEvent&&b.detachEvent("on"+c.S,c.R)}a.s=[]};var Z=new P;V(Z,window.document.documentElement);O(Z,"click");O(Z,"focus");O(Z,"focusin");O(Z,"blur");O(Z,"focusout");O(Z,"error");O(Z,"load");O(Z,"change");O(Z,"dblclick");O(Z,"input");O(Z,"keyup");O(Z,"keydown");O(Z,"keypress");O(Z,"mousedown");O(Z,"mouseenter");O(Z,"mouseleave");O(Z,"mouseout");O(Z,"mouseover");O(Z,"mouseup");O(Z,"touchstart");O(Z,"touchend");O(Z,"touchcancel");O(Z,"speech");(function(a){google.jsad=function(d){Y(a,d)};google.jsaac=function(d){return V(a,d)};google.jsarc=function(d){X(d);for(var b=!1,c=0;c<a.o.length;++c)if(a.o[c]===d){a.o.splice(c,1);b=!0;break}if(!b)for(c=0;c<a.s.length;++c)if(a.s[c]===d){a.s.splice(c,1);break}U(a)}})(Z);window.gws_wizbind=function(a){return{trigger:function(d){var b=a.R(d.type);b||(O(a,d.type),b=a.R(d.type));var c=d.target||d.srcElement;b&&b.call(c.ownerDocument.documentElement,d)},bind:function(d){Y(a,d)}}}(Z);}).call(this);</script><script>if ('serviceWorker' in navigator){navigator.serviceWorker.register('/_/chrome/newtab-serviceworker.js',{scope:'.'}) .then(function(sw){console.log("SW registered");},function(x){console.log("SW failed to register: " + x.message);});} </script></head><body class="init"><div id="prpd"></div><div class="h" id="mngb"><div id="gb"></div></div><span id="prt"></span><div id="_Alw"><div class="init" id="lga"><script>(function(){var hhGroup=2;window.google = window.google || {};window.google.doodle = window.google.doodle || {};window.google.doodle.flags = window.google.doodle.flags || {};window.google.doodle.flags.hhGroup = hhGroup;})();</script><img style="padding-top:112px" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="272" alt="Google" id="hplogo" title="Google" onload="typeof google==='object'&&google.aft&&google.aft(this)"><div id="logo-sub"></div></div><form action="/search" id="f" method="get"><div id="hf"></div><div class="init" id="fkbx"><div id="fkbx-text">Search Google or type URL</div><input id="q" aria-hidden="true" autocomplete="off" name="q" tabindex="-1" type="url" jsaction="mousedown:ntp.fkbxclk"><div id="fkbx_crt"></div><div id="fkbx-spch" tabindex="0"></div><div id="fkbx-hspch" tabindex="0"></div><div id="fkbx-hht">Say "Ok Google"</div><div id="fkbx-tchm"><div id="fkbx-chme"><div class="_gSc"></div><div>Not listening. Something went wrong.</div><div><a href="#" id="fkbx-chmer" tabindex="1">Restart listening</a><a href="#" id="fkbx-chmed" tabindex="1">Help</a></div></div><div id="fkbx-chmt"><div>Hotword detection is off.</div><a href="#" id="fkbx-chmtr" tabindex="1">Start listening for "Ok Google"</a></div></div><div id="chw-o"><div class="_mSc">Say "Ok Google" to start a voice search.</div><p class="_kSc">Search without lifting a finger. When you say "Ok Google," Chrome will search for what you say next.</p><div><a href="https://support.google.com/chrome/?p=ui_hotword_search" target="_blank">Learn more</a><button class="_dKb _k3" href="#" id="hotword__chw-on" data-noload="" jsaction="chw.optInNoThanksButtonClicked">No thanks</button><button class="_dKb _WW" href="#" id="hotword__chw-oe" data-noload="" jsaction="chw.optInEnableButtonClicked">Enable "Ok Google"</button></div></div></div></form><div class="spch s2fp-h" style="display:none" id="spch"><div class="spchc" id="spchc"><div class="_o3"><div class="_AM"><span class="_CMb" id="spchl"></span><span class="button" id="spchb"><div class="_wPb"><span class="_AUb"></span><div class="_Fjd"><span class="_oXb"></span><span class="_dWb"></span></div></div></span></div><div class="_gjb"><span class="spcht" id="spchi" style="color:#777"></span><span class="spcht" id="spchf" style="color:#000"></span></div><div class="google-logo"></div></div><div class="_ypc"><div class="_zpc"></div></div></div><div class="close-button" id="spchx">&times;</div></div><div class="mv-hide" id="most-visited"><div id="mv-tiles"></div><div class="mv-noti-hide" id="mv-noti"><span id="mv-noti-msg">Thumbnail removed.</span>&nbsp;<span id="mv-noti-lks"><span id="mv-undo" tabindex="1">Undo</span>&nbsp;<span id="mv-restore" tabindex="1">Restore all</span>&nbsp;<div class="mv-x" id="mv-noti-x" tabindex="-1"></div></span></div><div class="mv-noti-hide" id="mv-noti-error"><span id="mv-noti-msg">Error removing thumbnail; Chrome needs to be online.</span></div></div><div id="prm-pt"><br><div id="prm"></div></div></div><div id="theme-attr" style="display:none"><div id="theme-attr-msg">Theme created by</div></div><textarea name="csi" id="csi" style="display:none"></textarea><script>(function(){var a={gen204:"ol",clearcut:14};google.rll(window,!1,function(){google.tick("load",a);google.c.u("pr")});google.tick("load",{gen204:"prt",clearcut:16});}).call(this);</script><div id="xjsd"></div><div id="xjsi"><script>(function(){function c(b){window.setTimeout(function(){var a=document.createElement("script");a.src=b;google.timers&&google.timers.load.t&&google.tick("load",{gen204:"xjsls",clearcut:31});document.getElementById("xjsd").appendChild(a)},0)}google.dljp=function(b,a){google.xjsu=b;c(a)};google.dlj=c;}).call(this);(function(){var r=[];google.plm(r);})();if(!google.xjs){window._=window._||{};window._DumpException=window._._DumpException=function(e){throw e};google.dljp('/xjs/_/js/k\x3dxjs.ntp.en_US.0EwZPAYFgeY.O/m\x3dsx,jsa,ntp,d,csi/am\x3dAAGEAw/rt\x3dj/d\x3d1/t\x3dzcms/rs\x3dACT90oH7pLOIHsaPumzX3z3HA-lpdGft2g','/xjs/_/js/k\x3dxjs.ntp.en_US.0EwZPAYFgeY.O/m\x3dsx,jsa,ntp,d,csi/am\x3dAAGEAw/rt\x3dj/d\x3d1/t\x3dzcms/rs\x3dACT90oH7pLOIHsaPumzX3z3HA-lpdGft2g');google.xjs=1;}google.pmc={"sx":{},"jsa":{"csi":true,"csir":100},"ntp":{"ffb":false,"lang":"en-US","mvrt":"Don't show on this page","stt":"Search by voice","tc":{"dnt":"Click to view today's doodle","tlh":92,"tlu":"/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png","tlw":272},"xid":1},"spch":{"ae":"Please check your microphone. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003ELearn more\u003C/a\u003E","hen":true,"hl":"en-US","htt":"Listening for \"Ok Google\"","im":"Click \u003Cb\u003EAllow\u003C/b\u003E to start voice search","iw":"Waiting...","lm":"Listening...","lu":"%1$s voice search not available","ne":"No Internet connection","nt":"Didn't get that. \u003Cspan\u003ETry again\u003C/span\u003E","nv":"Please check your microphone and audio levels. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003ELearn more\u003C/a\u003E","pe":"Voice search has been turned off. \u003Ca href=\"https://support.google.com/chrome/?p=ui_voice_search\" target=\"_blank\"\u003EDetails\u003C/a\u003E","rm":"Speak now"},"d":{},"csi":{"acsi":true,"jsmf":true},"w5TOlw":{},"hmvvig":{},"aWiv7g":{},"NpA8BQ":{},"YFCs/g":{}};google.plm(['spch']);google.x(null,function(){});(function(){var ctx=[] ;google.jsc && google.jsc.x(ctx);})();(function(){var m=[];for(var a=window,b=m,c={},d=0;d<b.length;d+=2)c[b[d]]=JSON.parse(b[d+1]);a.W_jd=c;})();</script></div></body></html>

No description available

Angular-Directive-Project Directives range from very basic to extremely complex. This project will build up to some somewhat difficult directives. Keep in mind that the format we're learning for directives is the same format used to build some extremely complex things in angular. Using directives often and well is one way to show you're a talented developer. Starting Out We've included only a few things for you to begin with. index.html, app.js, styles.css. At this point the best way to get more comfortable with angular is to initialize an app without relying heavily on boilerplate code (reusable code that starts out your projects for you). You'll notice that in the index.html we've included the angular-route CDN. Yes, we'll be using angular's router here. Put an ng-view into your index.html. In your app.js set up a config and set up our first route for when a user is at the '/home' url. If you're having trouble remembering how to set up the router go look at how you set up the router on the previous project. One way these projects will be beneficial to you is allowing you to look back at something *you** did and seeing how you got that something to work.* You may also want add an otherwise that defaults to /home. Create a controller and a template file for this route in your app folder. Don't forget to include the controller as a script in your index.html Check that everything is hooked up correctly. Try adding a div with some text in your home template just to make sure it's showing up. Once you've got that going you're ready to start on some directives. Now let's make our directive. We'll start with a simple one that we can use to display information passed to it. Step 1. Start your directive Woot. When you're initializing your directive just remember that it works very similarly to how you start up a controller or a service. It can also be very helpful to think of your directive as a route. Create your directive. You'll use the directive method on your angular module. It takes two arguments, the name string and the callback function, which will return the object that represents your directive. When naming your directive give it a name with two words; dirDisplay would be nice, but anything works. Just remember it's best practice to give a directive a camel case name so that it's clear in your html what it is. Also we're going to need a template html for our directive. We could do it inline, but let's make another file instead. Just name it something that makes sense for the name of your directive and put it in the same directory as your directive file. For your template just make a <div> and inside a <h1> tag that says User. Now in your home route html add in your directive. It will look like this if you named it dirDisplay: <dir-display></dir-display> Start up your app and go to the home route. Check and make sure you see User where your directive was placed. If you're not seeing it at this point it could mean a few things. Here's some more common issues. You didn't link your directive in your index as a script. Your name for your directive doesn't match the name in your html. Remember camel case becomes snake case so myDirective becomes <my-directive></my-directive>. You're file path to your html template is wrong. You have to think of file paths in angular as relative to the index. Here's some code to see just for this part, and just for the directive's js file. var app = angular.module('directivePractice'); app.directive('dirDisplay', function(){ return { templateUrl: 'app/directives/dirDisplay.html' }; }); What we're returning is the directive object. You won't see anymore code in this tutorial so it's important you get things working right and refer back to what you've already done to advance from now on. Step 2. Advancing directives Your directive should be loaded up now, but it's not really doing much. Let's make it better. In your home controller. Make a variable on your $scope called user. Set it's value to { name: "Geoff McMammy", age: 43, email: "geofdude@gmail.com" } Now inside your directive's html specifically inside the <h3> tags display our new user's name. Then inside maybe some <h4> tags display his email and age. This is going to work exactly the same as if it was just inside your home controller. Reload the page and make sure it works. This is still very cosmetic and really not all that useful. It needs functionality. Add into your directive's object the link property. The link property's value is a function definition that takes (generally) three parameters. scope, element, and attributes. Unlike in other places with angular injection these parameter names don't carry meaning. The first parameter will always represent your $scope for that directive, the second will always be the element that wraps your whole directive, and the third will always be an object containing all the properties and values of the attributes on your directive in the dom. Try the following to get a feel for all three. Add two attributes to your directive in your html. Like this - <dir-display test="myTest" my-check="checkItOut"></dir-display> Now in the link property you've added console.log the three parameters in the function. You'll see an object for scope that should look identical to the $scope of your html function. For element you'll see an object the represents the DOM wrapper for your directive. For attributes you'll see an object that will look like this: { test: "myTest", myCheck: "checkItOut" } An important thing to notice is how it has again converted snake case to camel case for you. my-check became myCheck. Don't forget this. You'll run into this issue one day. It counts for both attributes and directive names. To feel some of what the link function could do let's try this. Add a ng-show to both the email and age wrappers. This should be familiar to you. Now inside your link function add a click event listener to your element property. It's going to look just like jQuery. element.on('click', function(){ }) Inside the click listener's callback add a toggle for the ng-show property you passed in. Along with a console.log to make sure things are connecting when you click. Try it out. Don't call for a mentor when it doesn't work. Let's talk about that first. You should see the console.log firing, but why isn't it toggling. This is going to be a common problem when working with the link function and event listeners. What we have here is an angular digest problem. The value is changing on the scope object, but the change isn't being reflected by our DOM. That's because angular isn't aware of the change yet. Anytime we cause an event to happen using something like jQuery or even angular's jQLite we need to let angular know that we've made a change. Add this line of code in place of your console.log, scope.$apply(). Now try it out. It should be working now, so if you're still having issues it's time to debug. What we've done is forced angular to run it's digest cycle. This is where angular checks the scope object for changes and then applies those to the DOM. This is another good lesson to learn for later. You'll most likely hit this when making changes to your element using event listeners. Step 3. Directive's re-usability. Now our directive has some extremely basic functionality. One of a directive's greatest advantages though is its ability to be placed anywhere and still be functional. Let's say instead we had a list of users instead of just one. Change the $scope property in your home controller to be users and give it this array as its value: [ { name: "Geoff McMammy", age: 43, email: "geofdude@gmail.com", city: "Provo" }, { name: "Frederick Deeder", age: 26, email: "fredeed@gmail.com", city: "Austin" }, { name: "Spencer Rentz", age: 35, email: "spencerrentz@gmail.com", city: "Sacramento" }, { name: "Geddup Ngo", age: 43, email: "geddupngo@gmail.com", city: "Orlando" }, { name: "Donst Opbie Leevin", age: 67, email: "gernee@gmail.com", city: "Phoenix" } ] Now in your home HTML add a ng-repeat to the directive call. Tell it to repeat for each user in users. Reload your page. It's working! But why? How does each directive instance know what information to display? In the link function console.log the scope parameter. Make sure it's outside of your click listener. You'll see five print outs in your console. Open up any one of them and look to the bottom. Open up the user property. It's exactly what we would want! But again why would that be the case? Don't get too caught up in this next bit if it's too hard to understand, but the ng-repeat is essentially making new tiny scope objects for each individual user in our users array. Now each of our directives is still getting a user property on the scope object just like the directive wanted in the beginning. Woot. Step 4. Ramp it up with Isolate Scope. Directives can do so much more. So let's make that happen. That means we should make.... a new directive!!! This directive's purpose will be to display a selected User and the weather in his/her/its location. Link it up just like the last one. Create a js file for our directive and name it dirWeather. Make an html file named dirWeather.html. Link it up in your index.html and add the template to your new directive object. In your directive's template give it an <h3> tag that says Weather just so we can know it's working. Above your ng-repeat on dirDisplay add your new dirWeather directive. If it's not working check the instructions above as to some common reasons why before asking a mentor for help. If you're seeing the Weather text on your page then we're ready to try out the dreaded Isolate Scope. The isolate scope object is one of the stranger API's in angular. I'm sorry but it is. Just refer to this for now. scope: { string: '@', link: '=', func: '&' } The properties on the scope object represent the attributes on the directive in the html. Our example scope object here would look something like this in the html. <example-directive string="a string" link="user" func="updateUser()"></example-directive> The hard part here is the @, =, and &. They each have very important and distinct meanings. @ says take in my attribute value as a string. = says take in my attribute value as a two-way bound variable from the parent scope. & says take in my attribute value as a reference to a function on the parent scope. It's also critical to point out that once you add a scope object you have no isolated your directive's scope. Meaning, aside from the values passed in through attributes, this directive has no connection to the $scope of its parent. That being said let's isolate our directive's scope. :worried: Add the scope property to your dirWeather. Give it the value of an object with a property of currentUser whose value is '='. Remember in your html this will look like current-user. This is the third time I've said so don't expect it again. This means that whatever comes into the currentUser attribute is going to be a value of the parent's scope object. For now test this out by passing in users[0]. Find a way to show that users information inside your dirWeather's html. Remember inside your directive now the user is represented by currentUser. Step 5. &? &!? The '=' value on your scope object has created a two-way binding between users[0] and currentUser. Now let's try out the '&'. On your home controller add a function called getWeather. It takes one parameter called city. This function will make a call to a service so we'll need to create that. Make a weather service. Name it something cool and creative like weatherService. Inside the weather service make a function called getWeather that also takes one parameter, city. Make an $http get to this url - 'http://api.openweathermap.org/data/2.5/weather?q=' After the q= add on the city parameter. If you want you can test this out in postman. See what kind of data you get back. If it's the weather of that city then... you win! Use $q to return a promise that only resolves with the data you want. Temperature (preferably not in Kelvin) and the weather description. Use console.log on the data coming from the $http request to get to what you want. You'll need to add both on an object that you resolve your new promise with. On your home controller have it return the result of invoking the get getWeather function on the service. You should be returning a promise. Now in your home route's HTML pass in the getWeather function to the dirWeather directive through an attribute called weather-call. Add the attribute to your isolate scope object. That was a lot of linking, but let's walk through it. Your controller has a function linked to the service, which is in turn linked to your directive. So if you run the weatherCall function in your directive it will go through your controller to your service and then back. Now things get a little bit tricky. Angular's way of passing along arguments through a directive to your controller are tricky, but once you understand how to do it, it's not hard. I'm going to give an example here of how it works. <my-directive pass-func="callFunc(data)"></my-directive> Here's how it would look in your HTML. But where's the data supposed to be coming from? It seems that you'd rather be able to pass in data from your directive. Well you still can, you just have to essentially tell angular what do use as an argument to replace data when it calls that function in your controller. The actualy function call inside the directive will look like this. $scope.passFunc({data: wantedData}) So what you'll do is pass in an object where the property name is what the argument is named in the HTML where you call the directive. That might sound confusing, but just look at the two code blocks above for a pattern. Note that pass-func becomes $scope.passFunc and data is being replaced with wantedData with the {data: wantedData} object. In our directive we want to replace city in the attribute call, for something else inside the directive. You'll follow the same pattern as above. For now let's get things set up for that function call. Add to the dirWeather directive object a property called controller. It's value will be a function. Yes, this is a controller specifically for your one directive. It works the same as any other controller, except you don't give it a name. It's $scope object will only be accessible within an instance of your directive. Don't forget to inject $scope in the function. Inside your controller function run the weatherCall function with the city property from the currentUser on your $scope. Here's where you need to make sure you've passed in a city argument in the attribute function call, and then replace that with your currentUser's city using an object with a city property. The function call should return a promise, so call .then afterward and add the data onto your $scope to display both the weather and temperature of the currentUser's city. The properties can be named whatever makes sense to you. You may also want to find a way to get rid of all the decimal places on your temperature. Now you should have everything hooked up so it shows Geoff's data and the weather data for Provo. But is that good enough? Step 6. Ramping up our ramp up. Now let's change this so it shows the weather data for whichever user we select. We're going to need to use '&' again. Make a function on the home controller that takes in a parameter and sets a property on the $scope to be that parameter. Maybe you see where this is going. We want to get this function into our dirDisplay controller. But in order to do that we need to isolate dirDisplay's scope. This also means we need to pass in each individual user through the scope object as well. To make it easier on ourselves, let's pass the current user from our ng-repeat into our directive through a user attribute. This way we can leave our two-way bindings as they are. Also pass our new function that sets our current user from our home controller into our directive through a setUser attribute. You'll need to add an argument in there again. Go with user. Your scope object in dirDisplay should have two properties. setUser with the value of '&' and user with the value of '='. As before we're going to need to do some tricky stuff to get our argument back to our controller. Call the setUser function inside our click event listener and pass in an object the sets our user argument to be the user on our directive's scope object. If you've forgotten this part go back up and take a look at how you did it before or the example in this README. Whatever user you click on now should show up in the dirWeather directive as the current user. But we're missing one thing, we want to be able to see the weather for that user too. We'll have to do one more thing that will seem a little bit tricky at first, but it's good to learn if you don't know it already since it's actually used quite frequently. We need to step up a change listener on our currentUser in the dirWeather directive. We'll use angular's $watch functionality. $watch is a method on your $scope that will watch for changes in a variable you give it. It works in two ways. $scope.$watch('property', function(value){ console.log("When $scope.property changes its new value is: ", value) }); And $scope.$watch(function(){ return myVar }, function(value){ console.log("When myVar changes its new value is: ", value); }); Remove the immediate function call that we have in there now. Maybe just comment it out for now because we'll use it in a bit. Now call the $watch method on your scope and have it watch currentUser. Either way of using $watch is fine. Have its callback run the $scope.weatherCall function just like you had it before. One thing to note is that $scope.$watch will always run once to begin with. Since that's what we want here it's great, but just be aware of that. If you've reached this point congratulate yourself. You've messed with some serious stuff today, namely directives. There are still a lot of things about directives that we can't possibly cover in a single project. If you like what we've done so far then you're in a good place to keep going. A developer who understands directives well can build a really clean looking code base. Just look at your home.html. It could have just two lines in it. If you're feeling good move on now to Step 7. Step 7. Finishing touches Try to work out these problems on your own. There should be a way to let the user know that the weather data is loading. Something that appears while our $http request is retrieving our data. The $http request shouldn't fire on both opening and closing a user's information. A color change for the currently active user would be nicer than showing that user's info inside the dirWeather modal. Or at least less redundant. Whatever else you want. We still haven't explored transclusion and ng-transclude so give that a try if you're feeling adventurous. Just know that it's a way for deciding where to put the HTML child elements of a directive. It's cool stuff that can involve some criss-crossing of scopes.

Today we will learn together how to add a 3d model to our website in HTML and CSS in only 5 minutes.

In today's digital age, education is evolving beyond traditional classroom settings. However, many students still struggle to find effective ways to collaborate and learn online. Student-ify provides them with tools and resources to enhance their educational experience. HTML | CSS | JS

<Online library with links to free e-literature (short stories, novels, novellas, and poems) of Classics and many, many great new to present-day authors and true to present-past-few eras authors who have written some of the greatest works ever. Now all-in-one site, research and time has enabled the making of this site for anyone to use to read for free any of the literature of their choosing anytime; that is, on an ever-growing list of awesome books to read(any e-mail suggestions for add-ins are highly recommended--you can start now: e-mail me at amcii777@me.com. Amcii Cullum @mc112014, LLC. There are more features available related and extra, however: a blog you can post with issues or essays about books you've read and would like to critique or how your day went or how you feel, you get the point. It is there for you as a signed up user to do what you please with it. The blog could be a doorway where you propose an interesting issue that perhaps begins a conversational bit for our forum where people can talk about reading, writing, favorite music, this era today and how it is difference from the baby boomers children, religious issues, anything theme-related to talk about and hopefully learn from. This is a learning library to have fun with and use with no library card required and no late fees ;)! It is crucial for the site to grow, so I will continue to look for great literature as it is recommended (though please e-mail me on any topics that are of interest to you concerning this site; i.e. add-on links to free literature on the web, things you'd like to see added or removed from the site and why, topic that you'd like me to bring forth in the forum rather than you having to do it, though you may want to participate later, anything at all. Since Heartbleed and NSA et al maintaining an appearance whereby we feel there is no security in our input on the web, I want this to be a liberal arts explosion of ideas coming forth with taboo-topics and a feeling of freedom to talk(1st amendment right, right?!) I am very excited at the potential for what can be done with an online library where the books are always on the shelf for everyone even at the same time. There is a personal profile you can fill out once you register and sign in as a user agent. I am wondering if I should include check boxes next to authors works with -read, -want-to-read,-currently reading,-highly recommend, -do not recommend to others, with a block to type in reason why, a -like block with rating of 1-5 for you to input and it will be saved to your account profile. There will also be a template for you to keep notes on: words you want to look up from the text you're reading, comments you have on literary devices or metaphors used that you liked and why, extrapolation of obscured realities; that is, your take on what the book is trying to say really, and so on. You could even keep a list of books you recommend others to read on the front HOME Page which will be posted for all to see and maybe later after some analytics of what people are reading most etc. I can put lit that's trending now up on the site. There are planned weekly updates to be made to the site for as long as I can do so requiring that I find new literature to post. MY stack so far is planning to run node.js, twitter bootstrap 3.1.1, html5, css and less.js for styling, glyphicons, perhaps meteor.js, history.js, mocha, reveal.js, ember.js, jQuery, list.js, and kraken.js

Up-and-coming:: bibliomaniacs.js ( so far planning to use CloudFlare as CDN for selectize.js,turn.js, idiomatic.js, nd jsPDF with a Yeoman generator I'm sure to make reading books online easier and enable you to make notes on a sidebar; analytics are taken in this process and the results will appear of Parse, Ink. as to general population worldwide by country, area, etc. as to what is being read the most. This is a javacript framework that you can download as a program from github (COMING SOON) and it will have an icon representing the tooling as you read anything online. All you'd have to do is click on the icon for the tooling to enable and open and the source of text you are reading will go into pdf format with a sidebar and a save button as well as a bookmark this page option, so you can go back to look up words or to refer to the information or to share it later with someone else, or....:<Online library with links to free e-literature (short stories, novels, novellas, and poems) of Classics and many, many great new to present-day authors and true to present-past-few eras authors who have written some of the greatest works ever. Now all-in-one site, research and time has enabled the making of this site for anyone to use to read for free any of the literature of their choosing anytime; that is, on an ever-growing list of awesome books to read(any e-mail suggestions for add-ins are highly recommended--you can start now: e-mail me at amcii777@me.com. Amcii Cullum @mc112014, LLC. There are more features available related and extra, however: a blog you can post with issues or essays about books you've read and would like to critique or how your day went or how you feel, you get the point. It is there for you as a signed up user to do what you please with it. The blog could be a doorway where you propose an interesting issue that perhaps begins a conversational bit for our forum where people can talk about reading, writing, favorite music, this era today and how it is difference from the baby boomers children, religious issues, anything theme-related to talk about and hopefully learn from. This is a learning library to have fun with and use with no library card required and no late fees ;)! It is crucial for the site to grow, so I will continue to look for great literature as it is recommended (though please e-mail me on any topics that are of interest to you concerning this site; i.e. add-on links to free literature on the web, things you'd like to see added or removed from the site and why, topic that you'd like me to bring forth in the forum rather than you having to do it, though you may want to participate later, anything at all. Since Heartbleed and NSA et al maintaining an appearance whereby we feel there is no security in our input on the web, I want this to be a liberal arts explosion of ideas coming forth with taboo-topics and a feeling of freedom to talk(1st amendment right, right?!) I am very excited at the potential for what can be done with an online library where the books are always on the shelf for everyone even at the same time. There is a personal profile you can fill out once you register and sign in as a user agent. I am wondering if I should include check boxes next to authors works with -read, -want-to-read,-currently reading,-highly recommend, -do not recommend to others, with a block to type in reason why, a -like block with rating of 1-5 for you to input and it will be saved to your account profile. There will also be a template for you to keep notes on: words you want to look up from the text you're reading, comments you have on literary devices or metaphors used that you liked and why, extrapolation of obscured realities; that is, your take on what the book is trying to say really, and so on. You could even keep a list of books you recommend others to read on the front HOME Page which will be posted for all to see and maybe later after some analytics of what people are reading most etc. I can put lit that's trending now up on the site. There are planned weekly updates to be made to the site for as long as I can do so requiring that I find new literature to post. MY stack so far is planning to run node.js, twitter bootstrap 3.1.1, html5, css and less.js for styling, glyphicons, perhaps meteor.js, history.js, mocha, reveal.js, ember.js, jQuery, list.js, and kraken.js

nline Examination System Today Online Examination System has become a fast growing examination method because of its speed and accuracy. It is also needed less manpower to execute the examination. Almost all organizations now-a-days, are conducting their objective exams by online examination system, it saves students time in examinations. Organizations can also easily check the performance of the student that they give in an examination. As a result of this, organizations are releasing results in less time. It also helps the environment by saving paper. According to today’s requirement, online examination project in php is very useful to learn it. What is an online examination system? In an online examination system examine get their user id and password with his/her admit card. This id is already saved in the examination server. When examine login to the server he/she get his/her profile already register. On the certain time examine gets the message to start the examination. All answers given by examine are saved into the server with his/her profile information. Online examination system also allows to correct the answer if the examine needed to change any answer in the examination time duration, however, after the time duration any change will not allow. This also makes c checking the answer easy and error proof as computers are more accurate than man and provide fast results too. Php is a web base language so we can create an online examination system in PHP. Administrator of Online Examination has multiple features such as Add, Delete, Update Topics and Question. To Login as Admin put inside your browser "http://www.applicationname/admin" The user will automatically get the updated version by logging using the user ID and Password provided at the time of registration. No need of reprinting,appearance,vigilance and the job is done. Online examination system features Login system must be present and secured by password. Ability to save the answer given by the candidate along with the question. Answer checking system should be available. Could Update Profile Log out after the over. Admin Panel Project objective: Online examination system is a non removable examination pattern of today’s life. We need more time saving and more accurate examination system as the number of applicants is increasing day by day. For all IT students and professionals, it is very important to have some basic understanding about the online examination system. On this site you will get source code with the running project. It will help you to understand the concept of the project. Here you find project in php free download. Brief overview of the technology: Front end: HTML, CSS, JavaScript HTML: HTML is used to create and save web document. E.g. Notepad/Notepad++ CSS : (Cascading Style Sheets) Create attractive Layout JavaScript: it is a programming language, commonly use with web browsers. Back end: PHP, MySQL PHP: Hypertext Preprocessor (PHP) is a technology that allows software developers to create dynamically generated web pages, in HTML, XML, or other document types, as per client request. PHP is open source software. MySQL: MySql is a database, widely used for accessing querying, updating, and managing data in databases. Software Requirement(any one) WAMP Server XAMPP Server MAMP Server LAMP Server Installation Steps 1. Download zip file and Unzip file on your local server. 2. Put this file inside "c:/wamp/www/" . 3. Database Configuration Open phpmyadmin Create Database named quiz_new. Import database quiz_new.sql from downloaded folder(inside database) 4. Open Your browser put inside "http://localhost/Online_exam_New/" 5. To Login as admin put "http://localhost/Online_exam_New/admin" Admin Login Details Login Id: admin@a

This project created when I started to learn HTML and CSS. I haven't experience with JS at those moment. But today it was remastered by me in design and functionality. Maybe it's not last version, and I'll improve this project, but today u can see it.

https://github.com/WebDevSimplified/Learn-CSS-Today

🔥 Learn how to use future CSS in Svelte today

Welcome to our open source repository for web development beginners! Here you'll find a collection of fun and easy projects to help you get started with HTML, CSS, and JavaScript. Our code is open and well-documented, making it easy to learn and customize. Join our community and start building today!

Today we are going to create a Animation Box. This is for HTML & CSS practice and also you can learn how to work animation .

Hello friend, I hope you are doing and creating awesome projects. As usual today in today's blog, you will learn to create a Responsive Website in HTML CSS, and JavaScript this website will be focused on the coffee base.

Hello all of you, welcome to my other blog of Responsive Side Navigation Bar. Today in this blog will learn how to create a Responsive Sidebar Menu using HTML CSS and Javascript.

Flex Playground is a beginner-friendly website that teaches CSS Flexbox. Through practical examples and interactive exercises, you'll learn how to quickly and easily create responsive layouts. No prior CSS knowledge is required. Come join our community of learners today!

Code Master Pro offers interactive programming courses for beginners, covering HTML, CSS, and JavaScript. Learn by doing with real-time code editors, step-by-step lessons, and hands-on projects. Start building web pages and gain valuable skills to kickstart your web development journey today!

Code Master Pro offers interactive programming courses for beginners, covering HTML, CSS, and JavaScript. Learn by doing with real-time code editors, step-by-step lessons, and hands-on projects. Start building web pages and gain valuable skills to kickstart your web development journey today!

In today’s digital landscape, a well-designed and user-friendly website is essential for establishing an online presence. So, as a beginner web developer, it’s important to learn how to create responsive custom websites using HTML and CSS. In this blog post, we’ll guide you through building your responsive custom website using HTML and CSS. Our ex

Create stunning 3D websites with this interactive project! Using HTML, CSS, and JavaScript, this design features 3D animations, smooth transitions, and an engaging user interface. Ideal for students and developers to learn modern web design techniques. Clone the repo and start building your own 3D web experience today!

Explore my portfolio website built with Next.js and Tailwind CSS! This repo not only showcases my skills but also helps you create your own site. Enjoy the video background that makes the site pop and dive into the code. Learn about me and pick up some cool web development tips along the way. Start building your dream website today!

COMPLETELY REDONE WITH OVER 500 BRAND NEW VIDEOS! Hi! Welcome to the brand new version of The Web Developer Bootcamp, Udemy's most popular web development course. This course was just completely overhauled to prepare students for the 2022 job market, with over 60 hours of brand new content. This is the only course you need to learn web development. There are a lot of options for online developer training, but this course is without a doubt the most comprehensive and effective on the market. Here's why: This is the only Udemy course taught by a professional bootcamp instructor with a track record of success. 94% of my in-person bootcamp students go on to get full-time developer jobs. Most of them are complete beginners when I start working with them. The previous 2 bootcamp programs that I taught cost $14,000 and $21,000. This course is just as comprehensive but with brand new content for a fraction of the price. Everything I cover is up-to-date and relevant to 2022's developer job market. This course does not cut any corners. I just spent 8 months redoing this behemoth of a course! We build 13+ projects, including a gigantic production application called YelpCamp. No other course walks you through the creation of such a substantial application. The course is constantly updated with new content, projects, and modules. Think of it as a subscription to a never-ending supply of developer training. You get to meet my cats and chickens! When you're learning to program you often have to sacrifice learning the exciting and current technologies in favor of the "beginner friendly" classes. With this course, you get the best of both worlds. This is a course designed for the complete beginner, yet it covers some of the most exciting and relevant topics in the industry. Throughout the brand new version of the course we cover tons of tools and technologies including: HTML5 CSS3 Flexbox Responsive Design JavaScript (all 2022 modern syntax, ES6, ES2018, etc.) Asynchronous JavaScript - Promises, async/await, etc. AJAX and single page apps Bootstrap 4 and 5 (alpha) SemanticUI Bulma CSS Framework DOM Manipulation Unix(Command Line) Commands NodeJS NPM ExpressJS Templating REST SQL vs. NoSQL databases MongoDB Database Associations Schema Design Mongoose Authentication From Scratch Cookies & Sessions Authorization Common Security Issues - SQL Injection, XSS, etc. Developer Best Practices Deploying Apps Cloud Databases Image Upload and Storage Maps and Geocoding This course is also unique in the way that it is structured and presented. Many online courses are just a long series of "watch as I code" videos. This course is different. I've incorporated everything I learned in my years of teaching to make this course not only more effective but more engaging. The course includes: Lectures Code-Alongs Projects Exercises Research Assignments Slides Downloads Readings Too many pictures of my dog Rusty If you have any questions, please don't hesitate to contact me. I got into this industry because I love working with people and helping students learn. Sign up today and see how fun, exciting, and rewarding web development can be! Who this course is for: This course is for anyone who wants to learn about web development, regardless of previous experience It's perfect for complete beginners with zero experience It's also great for anyone who does have some experience in a few of the technologies(like HTML and CSS) but not all If you want to take ONE COURSE to learn everything you need to know about web development, take this course

No description available