html presentation pdf

Principles of Web Design 3-2-0? — (3 weeks)

• Wednesdays in 56-114
• 7:00pm–9:00pm
• January 6th, 13th, & 20th
• Fridays in 56-114
• 6:30pm–9:30pm
• January 8th, 14th , & 22nd

Note: The second Lab scheduled for January 15th will be on Thursday, January 14th instead.

• SitePoint HTML Reference
• SitePoint CSS Reference
• W3C Document Validator
• W3C CSS Validator
• Open Source Web Design

Lecture 1: Introduction to HTML & CSS

• HTML [ PPT | PDF ]
• CSS & Validation [ PDF - with Notes , PPT , PDF - slides only ]
• Common HTML Elements and Attributes
• Basic CSS Cheatsheet
• Advanced CSS Cheatsheet (more properties)
• Solution Click to view, Right-click and Save Target As… to download
• Windows, Linux, and OS X: jEdit
• Windows: Notepad++
• Use this to get started building a valid XHTML document

© 2010 MIT SIPB — All content free to use via CC-BY-SA 3.0

Valid XHTML | Valid CSS | Generated by webgen

This is a PHP TEST

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS ) or functionality/behavior ( JavaScript ).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head> , <title> , <body> , <header> , <footer> , <article> , <section> , <p> , <div> , <span> , <img> , <aside> , <audio> , <canvas> , <datalist> , <details> , <embed> , <nav> , <search> , <output> , <progress> , <video> , <ul> , <ol> , <li> and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by " < " and " > ". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title> , <TITLE> , or in any other way. However, the convention and recommended practice is to write tags in lowercase.

The articles below can help you learn more about HTML.

Key resources

If you're new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.

For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area .

In our extensive HTML reference section, you'll find the details about every element and attribute in HTML.

Beginner's tutorials

Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.

This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

Advanced topics

The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.

Some HTML elements that provide support for CORS , such as <img> or <video> , have a crossorigin attribute ( crossOrigin property), which lets you configure the CORS requests for the element's fetched data.

The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head> , specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

HTML consists of elements , each of which may be modified by some number of attributes . HTML documents are connected to each other with links .

Browse a list of all HTML elements .

Elements in HTML have attributes . These are additional values that configure the elements or adjust their behavior in various ways.

Global attributes may be specified on all HTML elements , even those not specified in the standard . This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.

HTML elements are usually "inline-level" or "block-level" elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block box".

The <audio> and <video> elements allow you to play audio and video media natively within your content without the need for external software support.

HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.

Historical information on quirks mode and standards mode.

Related topics

This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so.

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Start your digital transformation journey now

How to create an interactive multichannel presentation (from that PDF file you have)

So you want a full-function interactive presentation – one that is clickable, tablet-tappable, swipeable, and ideal for reps to use – but what you’ve got at the moment is a static PDF file? Maybe the file came from the agency, or was sent from the global office as a guideline – and now your department is facing the perspective of hiring a whole digital content team to create a multichannel wonder based on this. Maybe it is also upsetting that the project is nearly a from-scratch one, what with the whole HTML+CSS things to think of – so how challenging will it be for the budget?

Have you wondered whether there is a shortcut from PDF to interactive format? In that case, you’re not alone – and yes, that’s an excellent idea! HTML presentations, eDetailing, interactive visual aids (IVAs) – whatever they are called in your organization, they are THE content in many cases, especially when it comes to rep interactions. Besides, once you have the presentation, it can (after just a little tinkering perhaps) be used in a variety of channels, including remote conferencing. At the same time, just having everything delivered by IT team is, well, not as cost-efficient as using the file the designers have carefully styled through.

That is why Viseven team has created a PDF-to-HTML converter as part of the eWizard platform – a response to the many requests that (mainly) life sciences brand managers and marketers had. In this brief guide, you’ll see how this works and what can be achieved with the possibility.

[in case you are curious] When best to use the PDF converter

There are these moments is pharma communications where the responsible executive just needs more content. Preferably with minimum investment, of course. Since the “digital transformation” gained its full speed several years ago, the marketing budgets have grown slowly but steadily – a sign that the global offices started taking digital content very seriously but are reluctant to “overfinance” it. Out of the marketing directions considered in statistics, it is precisely the HCP audience that gains the steadiest attention, with about 50% pharma endorsing the effort to that end. A lion share of that content is presentations, of course.

Yet, it’s not secret budgeting is also careful – about 1.5-2 years ago, only 30% of enterprises could track digital spending fully, mostly the more digitally savvy ones, according to McKinsey. As more pharma has been digitalized, the question has become more pressing, and regional affiliates are often left with a product/campaign launch in a new (emerging) market – and with restraints to comply with. At the same time, no one wants to sacrifice time-to-market (in fact, the #1 area of opportunity, as attested by 67% of companies). This is where the possibility to convert comes in handy.

In general, it’s up to the organization to decide when to use a PDF converter to get an interactive aid – and when to go old-school and develop from scratch. Here are the three situations in which conversion becomes indispensable:

• Launching a new multichannel campaign that needs to be filled out with content really fast – and there are preexisting static assets.
• Budget restraints and focus on content reuse – but that content needs to get a “new life”.
• More and more content is required for field force efficiency – and a general strategy to foster in-house talent.

Now, the converter itself. In fact, the procedure of creating an IVA is very simple, and only spans 3 steps. Ready?

Step #1. Open the PDF converter in eWizard

In your eWizard account, go to your eDetailers gallery – the place where you can see all the presentations you are (or have been) working on. In the corner, there is the +ADD NEW button, which presents you with several options.

The last of these is Convert . Once you select it, you will see the popup that asks to upload the original file.

The default method is simply to drag&drop the PDF from a folder on your PC. If your company is using Veeva Vault PromoMats, the left sidebar of the popup presents an option to load a file from Vault.

Step #2. Find the PDF file you want to convert

Rather self-explanatory, in fact. You can either drag&drop the file or click anywhere inside the popup to open the file manager.

Your PDF file will most likely contain text on top of the background (so that it’s selectable with the mouse). Such text will be recognized by the system during the conversion so that you will later be able to edit it in the resulting HTML (the background will be, of course, preserved). All pages in the PDF will become separate slides.

As soon as you select the file, a conversion starts, taking a few seconds before the magic begins…

Step #3. Edit and add interactive components (events, actions)

As soon as the conversion finishes, you will see the new presentation right there in the gallery. If already have some experience working with eWizard, you know what to do next: click the Edit icon (“pen”) and voilà – you can tinker with your new presentation, changing whatever needs to be changed.

The selectable texts from the original PDF are up to you to change:

You can even add new elements and whole new slides, expanding the presentation.

Quite simple, isn’t it? If you have followed along, you can already consider yourself to be at quite an advanced level in content management.

And, of course, if you are completely new to eWizard and have not yet got an account, don’t hesitate to request a demo to try out what you have read.

Get creative with your digital initiatives – because multichannel excellence relies on your freedom of action. Now is a perfect time to start!

Country* Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil British Indian Ocean Territory British Virgin Islands Brunei Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Colombia Comoros Costa Rica Croatia Cuba Curacao Cyprus Czech Republic Democratic Republic of the Congo Denmark Djibouti Dominica Dominican Republic East Timor Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands Faroe Islands Fiji Finland France French Polynesia Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guam Guatemala Guernsey Guinea Guinea-Bissau Guyana Haiti Honduras Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Ivory Coast Jamaica Japan Jersey Jordan Kazakhstan Kenya Kingdom of Swaziland Kiribati Korea Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macau Macedonia Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Mauritania Mauritius Mexico Micronesia Middle Africa Moldova Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norway Oman Pakistan Palau Palestine Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Puerto Rico Qatar Republic of Kosovo Romania Russia Rwanda Saint Barthelemy Saint Helena Saint Kitts and Nevis Samoa San Marino Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Sudan Spain Sri Lanka Sudan Suriname Sweden Switzerland Syria Taiwan Tajikistan Tanzania Thailand The Gambia Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Tuvalu USA Uganda Ukraine United Arab Emirates United Kingdom Uruguay Uzbekistan Vanuatu Venezuela Vietnam Yemen Zambia Zimbabwe

Reason of inquiry* Product and Services Free consultancy Partnerships Careers Other

By submitting this form, you hereby consent that Viseven can process your personal data (including sending information and marketing materials) according to Viseven Privacy Policy *.

How Pharma Brands Can Improve Patient Experience in 2024 

DCF Formats: From Hybrid to Self-Service 

• Pharma events

Exciting Life Science Events: A Look Back at Q1 2024

• No translations available for this page

Welcome to the Department of Dermatology

The department of dermatology is committed to the highest level of patient care, as well as the discovery and development of better treatments for dermatologic diseases., message from the chair.

Our mission is sustained leadership in patient care, in research, and in training leaders of our specialty in an environment that fosters creativity, diversity, inclusiveness and synergy. Paul Khavari, MD, PhD, Professor and Chair

Wipe Out Melanoma

Wipe Out Melanoma is changing the way our community faces melanoma by increasing awareness among Californians.

Find a Clinic Near You

Stanford Dermatology Clinic in Redwood City Stanford Medicine Outpatient Center 450 Broadway Street Pavilion B, 4th Floor  Redwood City, CA 94063 (650) 723-6316

• View Clinics

Stanford Dermatology News

We are stanford.

Meet Christopher Lopez, a third-year MD-PhD student and proud member of the Costanoan Rumsen Carmel Tribe. He discusses overcoming early challenges with school, navigating his Indigenous identity, and his commitment to advocating for more Native representation in health care and medicine.

Dr. Erica Wang

Dr. Erica Wang joined our multidisciplinary program in 2022 after completing her dermatology residency training at Stanford. 

Dr. Jennifer Chen

Dr. Chen is elected President of the American Contact Dermatitis Society.

Dr. Howard Chang

Dr. Howard Change was feature on  ‘90 Seconds with Lisa Kim’.

Dr. Jennifer Wang

Dr. Jennifer Wang joined our multidisciplinary CL program in 2021 and serves as Director of the Cutaneous Oncology Tumor Board at Stanford Cancer Center.

Dr. Susan Swetter

Dr. Swetter is named Chair of the National Comprehensive Cancer Network Melanoma Panel.

Dr. Paul Khavari

Dr. Khavari led a team of researchers who discovered a specialized cancer cell that gathers at the edge of skin tumors and aids in metastasis.

Dr. Leandra Barnes

Dr. Barnes has been elected to the Board of Directors of the Society for Investigative Dermatology.

Dr. Anthony Oro

Stanford Medicine recently featured Dr. Jean Tang, Dr. Anthony Oro, Dr. Paul Khavari, and others on "Outsmarting cancer cells that evade treatment."

Dr. Chang is selected to the American Academy of Arts and Sciences.

Dr. Zakia Rahman

Dr. Rahman has been elected Chair of the School of Medicine Faculty Senate.

Dr. Dickman in the Pleasanton Weekly

Dr. Meghan Dickman was recently featured in the Pleasanton Weekly to discuss basal cell carcinoma.

Award Winning Faculty

Stanford Dermatology Faculty are regionally and nationally recognized for their clinical expertise and teaching. As a part of one of the preeminent departments at Stanford Medicine, Dermatology Faculty are committed to Discovery, Education, and Patient Care.

Wipe Out Melanoma California

Wipe Out Melanoma: A community newsletter produced by Stanford Cancer Center

Welcome to SUNSPORT

Stanford’s innovative education and research program reduces skin cancer and sun damage among outdoor athletes.

• Watch the Video

Dr. Meghan Dickman CTV30 Interview

Dr. Meghan Dickman was recently gave an intreview to CTV regarding sun safety.

Subspecialty Clinics

Stanford Dermatology has a longstanding commitment to providing multidisciplinary care for patients.

At Stanford Dermatology, we feel we are able to provide the clinical experience, mentorship support and educational resources to allow each resident to reach their personal goals and potential as they embark on a successful career in Dermatology.

Dermatology Residency Welcome Picnic

• Dr. Susan Swetter sits with Lissa Kreisler at KCAT TV 15 to discuss Wipe Out Melanoma. Watch Video
• Dr. Howard Chang has been been selected as the recipient of American Skin Association (ASA)’s Inaugural Research Achievement Award in Discovery .
• Dr. Howard Chang has been been selected to the American Academy of Arts and Sciences  and  the National Academy of Sciences .
• Dr. Susan Swetter shares insights on interpreting new AAD Melanoma Guidelines. Learn More
• Dr. Elizabeth Bailey had the great fortune of traveling to Nepal with Stanford residents in pathology and dermatology. Learn More

Spring 2024 Commencement

FROM YOUR FIRST DAY AT PURDUE THROUGH THESE FINAL MONTHS, YOU PERSISTED. UNEXPECTED TURNS, DIFFICULT CLASSES, BRUTAL NIGHTS. BIG CHALLENGES AND SMALL VICTORIES.

YOUR REMARKABLE ACHIEVEMENT DESERVES A PROPER CELEBRATION.

Commencement Livestreams

Beginning Friday, May 10, you can join your family, friends and classmates in watching videos from Purdue's Sp r ing 2024 Commencement ceremonies.  

View Livestreams 

Digital Downloads

Boilermaker poster.

Cake Topper Template

Graduate Yard Signs

Mortar Board Art

Graduate Mortar Boards

If you intend to have any of the above materials professionally printed, you will be asked to provide an official letter of approval from the University.

How to Insert a PDF into PowerPoint Document.

Present your PDFs seamlessly on PowerPoint. Learn how to insert a PDF into a PowerPoint deck with Adobe .

When you’re giving a presentation, whether it’s virtual or in person, you’ll want to make sure that it goes as smoothly as possible. Presenting can be stressful enough without adding extra steps to it.

If you need to display and talk through a PDF document during your presentation, trying to find the file while pausing your slideshow can be challenging, distracting and waste precious time. Luckily, there’s a way around this – you can insert a PDF directly into your Microsoft PowerPoint presentation with Adobe’s useful tools.

Make your presentation appear fluid and professional and find out how to insert a PDF into PowerPoint with our helpful guide.

What You’ll Learn.

How to insert a pdf into powerpoint., how to insert multiple pdfs into powerpoint..

• Inserting a PDF into a PowerPoint. The Benefits.

There are many ways you can insert a PDF into a PowerPoint to enhance your presentation and showcase some eye-catching data:

Be sure to finalise your PDF.

First and foremost, before you embed a PDF into a PowerPoint, your document needs to be ready to present. This is because you can’t go back and edit your PDF within PowerPoint, so be sure to finalise and proofread your document before you add it to your deck.

Adobe Acrobat online services offer you a range of professional PDF editing tools to re-arrange , sign and share your files securely . Access your PDFs from anywhere on any device on your Adobe cloud.

Inserting a PDF into PowerPoint as an Object.

One way to import a PDF to PowerPoint is by inserting it as an object. This creates a shortcut within the presentation, quickly and seamlessly opening the file with your PDF reader so you don’t have to find it manually while you present.

Here’s how to do it:

• Open your presentation deck in Microsoft PowerPoint.
• Navigate to the slide you wish to insert your PDF into.
• From the top toolbar, click the Insert tab.

• Find the Text section and select Object. You can hover your mouse over each icon to help you find it.

• From the Object window, click Create from File.
• Click Browse to find your PDF.
• Select OK to add your PDF to the slide as an object. It will look like an image, which you can arrange how you like.

How to Open a PDF as an Object from a Slide Show.

So, your PDF is looking great in your presentation, but how does it work during the slide show? To open the document as a high-quality file with your PDF reader, you’ll need to assign an action to it.

• Select Insert from the top toolbar.
• Click the PDF image so it becomes highlighted.

• In the Links section of the Insert toolbar, click Action.

• From the Actions Settings box, choose whether you want to open it with a Mouse Click or with Mouse Over (which will open the PDF by hovering your mouse over the image).
• Select Object action, and make sure Open is selected.

• Click OK to accept your changes.

Now, when you click your PDF image in Slide Show mode, it will automatically open your document with your PDF reader.

Add a PDF to PowerPoint as an Image.

If you don’t need to view your document in a PDF reader during your presentation, you can also insert a PDF into PowerPoint as an image.

To do this, simply complete the steps to insert the PDF as an object, but don’t assign an action to it.

Alternatively, you can also insert a single page of your PDF as a screenshot image. Just follow these instructions for similar results:

• Open the PDF file in your PDF reader and select the page you wish to insert to PowerPoint.
• Launch PowerPoint and find the slide that you’d like to insert the PDF image into.
• Select Insert > Screenshot . This tool lets you take a screenshot of any open window on your computer.

• Select the window with your PDF reader. PowerPoint will automatically insert a screenshot of that window into the slide.
• Use the Picture Format tab to crop and resize the image to your liking.

Insert PDF into PowerPoint as a PPT File.

Finally, if you’d prefer to integrate your PDF document into your PowerPoint in the form of presentation slides, there is another way to achieve this. You can embed a PDF into PowerPoint by converting it into a PPT (PowerPoint) file.

You can quickly convert any PDF file to PPT using Acrobat online:

• Head to Adobe Acrobat online services and select Convert PDF to PowerPoint .

• Drag and drop your PDF file into the drop zone or click Select a file to find your PDF.
• Download your new PowerPoint file.

To embed the slides into an existing PowerPoint presentation, open your PowerPoint deck and select Home > New Slide > Reuse Slides. You can locate your new PDF to PPT file by selecting Browse > Choose Content.

As a side note, it’s also possible to convert your PPT to PDF quickly and easily using Adobe’s online tool. This makes it easier to share with others after the presentation.

If you have multiple PDFs to display in your PowerPoint presentation, there’s a simple solution. Just repeat the process above with each PDF file to achieve your desired results.

You can also assign an action to multiple objects in a single presentation, so you can open each one in your PDF reader while you present your deck.

Alternatively, you can insert your PDF files as images, or convert them to PPT files, and arrange them in your presentation however you like.

Presenting data has never been so easy!

Related content.

• How to Add and Remove Highlights in PDF
• How to Compress a PDF to 1MB or Less
• How to Remove Signatures from PDF