Create structure using HTML with the OneNote API
This topic provides background and platform-specific code samples showing how to create structure in captured OneNote notebook pages by using more-complex HTML with the Microsoft OneNote API.
Last modified: January 22, 2016
Applies to: OneNote service
In this article
Creating structure with HTML in an Android app
Creating structure with HTML in an iOS app
Creating structure with HTML in an Windows Phone app
Creating structure with HTML in an Windows Store app
Creating structure with HTML using REST
Note
|
|---|
|
See this content on our new documentation site for consumer and enterprise OneNote APIs. |
Creating a captured OneNote notebook page look just right with the OneNote API requires knowing both how to define the page structure and staying within the limitations of what is supported. Use the links and samples on this page to define the page structure your app creates in the user's notebooks.
There are two variations in how to pass HTML to the OneNote API. The first, and simplest, is to pass an HTML document as the sole contents of the POST request body. The more flexible and useful method is to use a multi-part POST request, in which the HTML page structure is defined in a part named "Presentation", and other parts can carry image, file or other data directly in the POST. Each of the examples in this topic use the more-flexible multi-part request style.
So that your apps can be a little more flexible in capturing whole blocks of HTML from a browser, the API can accept pretty much any DOCTYPE declaration. The simplest, of course is the newer <!DOCTYPE HTML>, but XHTML and the older declarations will work fine as well, back to about HTML 4. We recommend using just "HTML", but it shouldn't cause problems if you just use what the HTML document comes with.
The following is a list of the basic element types supported:
-
<head> and <body>
-
<title> and <meta> that set the page title and creation date
-
<h1> through <h6> for section headings
-
<p> for paragraphs
-
<table>, <tr> and <td>, including nested tables
-
<b> and <i> for bold and italic character styles
Remember that the API maps the HTML tags into features available in OneNote. Features that don't exist in OneNote have nothing to be translated to, so they aren't recognized in the source HTML. For more information about what's supported by the OneNote API, see HTML tag support for pages. In general, if something in your HTML isn't listed in that reference topic, it's not supported, and it might be ignored. For best results, use what's supported.
The OneNote API only accepts UTF-8 encoded data. Always encode your data and pass the content-encoding header in your requests.
You can find even more samples at Capture photos and images with the OneNote API and Capture embedded files with the OneNote API.
Important
|
|---|
|
Before POST requests like the ones shown here can succeed, you need to Get a client ID for use with the OneNote API (or package ID for a Windows Store application), and your app has to Authenticate the user for the OneNote API. If you don't supply a valid OAuth token with your request, it will definitely fail. |
Tip
|
|---|
|
As with most code samples in documentation, these code samples should not be considered production-ready. Things like detailed user-input validation have been left out to make it easier to understand the code flow. Carefully review your code for potential code-quality and security issues before you publish your app. |
The following code builds a multi-part request that contains a more-complex HTML page that illustrates many of the HTML features available. There are three parts of code. The first defines the pages REST endpoint, where the app will send the data. The second, ConnectForMultipart method adds the content type and authorization headers to the request. The third builds the request body with the HTML. Be aware that, in this example, the HTML is contained in a part named "Presentation". The OneNote API recognizes that name and expects the HTML-based page structure to be in that part.
This code is adapted from the SendPageCreateAsyncTask class in the Android code sample on GitHub, to add the more-complex HTML. For more information, see Get the OneNote API sample applications.
/* The first part: define a constant for the REST endpoint */ private final String PAGES_ENDPOINT = "https://www.onenote.com/api/v1.0/me/notes/pages"; /* The second part: build the HTTP connection object, adds the Content-Type and Authorization headers, and makes the connection */ private void connectForMultipart(String endpoint) throws Exception { mUrlConnection = (HttpsURLConnection) ( new URL(endpoint)).openConnection(); mUrlConnection.setDoOutput(true); mUrlConnection.setRequestMethod("POST"); mUrlConnection.setDoInput(true); mUrlConnection.setRequestProperty("Connection", "Keep-Alive"); mUrlConnection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY); mUrlConnection.setRequestProperty("Authorization", "Bearer " + mAccessToken); mUrlConnection.connect(); mOutputStream = mUrlConnection.getOutputStream(); } /* The third part: build the POST request part with the HTML */ public ApiResponse createSimplePage() { try { this.connectForMultipart(PAGES_ENDPOINT); String date = getDate(); String simpleHtml = "<!DOCTYPE HTML> \n"+ "<html>\n" + " <head>\n " + " <title>HTML / ONML sample block</title>\n " + " <meta name=\"created\" content=\"2013-06-11T06:30:00-08:00\"/>\n " + " </head>\n " + " <body style=\"font-family:Arial;\"> \n " + " <h1>HTML / ONML sample block</h1>\n " + " <h2>The basics</h2>\n " + " <p>For the most part, try to keep the HTML simple, and be \n " + " sure to properly close all tags.</p>\n " + " <p>Character encoding must be in UTF-8; the API doesn't \n " + " accept other encodings</p>\n " + " <h2>Overall structure</h2>\n " + " <p>The normal <html>, <head> and <body> tags are \n " + " expected, but the API is usually okay if they aren't included.</p>\n " + " <p>Inside the <head> tag, we recognize only the <title> tag. \n " + " The tag value overrides the Title property in the Json, if it exists. \n " + " All includes, CSS, script, and so on in the <head> and <body> \n " + " blocks are ignored.</p>\n " + " <p>As you can tell from the <body> tag's style attribute, in this\n " + " HTML, the API ignores CSS styles</p>\n " + " <h2>Block formatting</h2>\n " + " <p>Paragraph (<p>) and line-break (<br/>) tags are handled \n " + " properly. They get the "Normal" OneNote styling</p>\n " + " <p>The <div> and <span> tags are recognized but generally \n " + " don't have any significant effect, since CSS styling is ignored. A\n " + " <div> tag acts like a <p> tag. \n " + " <p>The header tags <h1> through <h6> are recognized, and\n " + " are mapped to the OneNote Heading 1 through Heading 6 styles.</p>\n " + " <h2>Simple character formatting</h2>\n " + " <p>This paragraph shows how the API handles <b>HTML4+ bold \n " + " <b></b> tags</p>\n " + " <p>...and <strong>HTML4+ strong <strong></strong> tags</p>\n " + " <p>...and <i>HTML4+ italics <i></i> and <cite> tags</p>\n " + " <p>...and <em>HTML4+ emphasis <em></em> tags</p>\n " + " <p>...and <a href=".">HTML anchor <a></a> tags. \n " + " <h2>Images</h2>\n " + " <p>The <img> tag is supported. The src attribute can be either\n " + " a URL to an actual image, or can be a reference to an image provide\n " + " in the data sent to the OneNote API in the request. For\n " + " example, here's a referenced image: </p>\n " + " <img src=\"http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png\"/>\n " + " <p>The OneNote API supports JPG, GIF, TIFF, and PNG images</p>\n " + " <p>This next tag inserts a screenshot thumbnail image of the OneNote.com web\n " + " page into the captured page, displayed as 500 pixels wide.</p>\n " + " <img data-render-src=\"http://www.onenote.com\" width=\"500\"/>\n " + " <h2>Tables</h2>\n " + " <p>Tables are understood, but not table headers. You can nest them. </p>\n " + " <p>Tables have to be "regular", in that the API assumes all \n " + " rows have same number of columns. Similarly, all columns have the same \n " + " number of rows. That is, the API ignores colspan and rowspan \n " + " attributes.</p>\n " + " <p>Table boder and other styling is ignored, but they will get the default \n " + " OneNote table styling, so a no-border table like the below will have\n " + " visible borders on the notebook page. \n " + " <table>\n " + " <tr>\n " + " <td>First row First column</td>\n " + " <td>First row Second column</td>\n " + " </tr>\n " + " <tr>\n " + " <td>Second row First column</td>\n " + " <td>Second row Second column</td>\n " + " </tr>\n " + " </table>\n " + " <h2>Not (yet) supported</h2>\n " + " <p>The API doesn't support lists (<ul>, <ol> \n " + " and <li>)</p>\n " + " <p>Nested tables are supported, but table header rows (<th>) \n " + " are treated like normal table rows (<tr>)</p>\n " + " <p>CSS styles are ignored at this time.</p>\n " + " <p>Scripts are ignored.</p>\n " + " <p>Other tags (for example, <article>, <header>, \n " + " <footer>, <section> and <aside>) are largely\n " + " ignored, but their otherwise-valid contents are included.</p>\n " + " </body>\n " + "</html>\n "; this.addFormPart("Presentation", "application/xhtml+xml", simpleHtml); this.finishMultipart(); ApiResponse response = this.getResponse(); return response; } catch (Exception ex) { String test = ex.getMessage(); } return null; }
The following code builds a request that contains a more-complex HTML page illustrating many of the HTML features available. This code puts the HTML directly in the HTTPS request body. It doesn't use the multi-part format. The code also adds the Content-Type and Authentication headers to the POST request. Although this code uses a variable named "presentation", it isn't using that variable identifier like it was the "Presentation" part of a multi-part message. This code also verifies that the Windows Live Connect session status indicates the user is logged in.
This code is adapted from the ONSCPSCreateExamples class in the iOS code sample on GitHub, to add the more-complex HTML. For more information, see Get the OneNote API sample applications.
// The endpoint for the OneNote API
NSString *const PagesEndPoint = @"https://www.onenote.com/api/v1.0/me/notes/pages";
- (void)createSimplePage {
NSString *date = [ONSCPSCreateExamples getDate];
NSString *simpleHtml = [NSString stringWithFormat:
@"<!DOCTYPE HTML> \n"
"<html>\n"
" <head>\n "
" <title>HTML / ONML sample block</title>\n "
" <meta name=\"created\" content=\"%@\"/>\n "
" </head>\n "
" <body style=\"font-family:Arial;\"> \n "
" <h1>HTML / ONML sample block</h1>\n "
" <h2>The basics</h2>\n "
" <p>For the most part, try to keep the HTML simple, and be \n "
" sure to properly close all tags.</p>\n "
" <p>Character encoding must be in UTF-8; the API doesn't \n "
" accept other encodings</p>\n "
" <h2>Overall structure</h2>\n "
" <p>The normal <html>, <head> and <body> tags are \n "
" expected, but the API is usually okay if they aren't included.</p>\n "
" <p>Inside the <head> tag, we recognize only the <title> tag. \n "
" The tag value overrides the Title property in the Json, if it exists. \n "
" All includes, CSS, script, and so on in the <head> and <body> \n "
" blocks are ignored.</p>\n "
" <p>As you can tell from the <body> tag's style attribute, in this\n "
" HTML, the API ignores CSS styles</p>\n "
" <h2>Block formatting</h2>\n "
" <p>Paragraph (<p>) and line-break (<br/>) tags are handled \n "
" properly. They get the "Normal" OneNote styling</p>\n "
" <p>The <div> and <span> tags are recognized but generally \n "
" don't have any significant effect, since CSS styling is ignored. A\n "
" <div> tag acts like a <p> tag. \n "
" <p>The header tags <h1> through <h6> are recognized, and\n "
" are mapped to the OneNote Heading 1 through Heading 6 styles.</p>\n "
" <h2>Simple character formatting</h2>\n "
" <p>This paragraph shows how the API handles <b>HTML4+ bold \n "
" <b></b> tags</p>\n"
" <p>...and <strong>HTML4+ strong <strong></strong> tags</p>\n "
" <p>...and <i>HTML4+ italics <i></i> and <cite> tags</p>\n "
" <p>...and <em>HTML4+ emphasis <em></em> tags</p>\n "
" <p>...and <a href=".">HTML anchor <a></a> tags. \n "
" <h2>Images</h2>\n "
" <p>The <img> tag is supported. The src attribute can be either\n "
" a URL to an actual image, or can be a reference to an image provide\n "
" in the data sent to the OneNote API in the request. For\n "
" example, here's a referenced image: </p>\n "
" <img src=\"http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png\"/>\n "
" <p>The OneNote API supports JPG, GIF, TIFF and PNG images</p>\n "
" <p>This next tag inserts a screenshot thumbnail image of the OneNote.com web\n "
" page into the captured page, displayed as 500 pixels wide.</p>\n "
" <img data-render-src=\"http://www.onenote.com\" width=\"500\"/>\n "
" <h2>Tables</h2>\n "
" <p>Tables are understood, but not table headers. You can nest them. </p>\n "
" <p>Tables have to be "regular", in that the API assumes all \n "
" rows have same number of columns. Similarly, all columns have the same \n "
" number of rows. That is, the API ignores colspan and rowspan \n "
" attributes.</p>\n "
" <p>Table boder and other styling is ignored, but they will get the default \n "
" OneNote table styling, so a no-border table like the below will have\n "
" visible borders on the notebook page. \n "
" <table>\n "
" <tr>\n "
" <td>First row First column</td>\n "
" <td>First row Second column</td>\n "
" </tr>\n "
" <tr>\n "
" <td>Second row First column</td>\n "
" <td>Second row Second column</td>\n "
" </tr>\n "
" </table>\n "
" <h2>Not (yet) supported</h2>\n "
" <p>Nested tables are supported, but table header rows (<th>) \n "
" are treated like normal table rows (<tr>)</p>\n "
" <p>CSS styles are ignored at this time.</p>\n "
" <p>Scripts are ignored.</p>\n "
" <p> Other tags (e.g, <article>, <header>, \n "
" <footer>, <section> and <aside>) are largely\n "
" ignored, but their otherwise-valid contents are included.</p>\n "
" </body>\n "
"</html>", date];
NSData *presentation = [simpleHtml dataUsingEncoding:NSUTF8StringEncoding];
NSMutableURLRequest * request =
[[NSMutableURLRequest alloc]
initWithURL:[[NSURL alloc] initWithString:PagesEndPoint]];
request.HTTPMethod = @"POST";
request.HTTPBody = presentation;
[request addValue:@"text/html" forHTTPHeaderField:@"Content-Type"];
if (liveClient.session)
{
[request setValue:[@"Bearer "
stringByAppendingString:liveClient.session.accessToken]
forHTTPHeaderField:@"Authorization"];
}
currentConnection =
[[NSURLConnection alloc] initWithRequest:request
delegate:self startImmediately:YES];
}
The following code builds a POST request that contains a more-complex HTML page that illustrates many of the HTML features available. This code places the HTML directly in the HTTPS request body. It doesn't use the multi-part format. The code defines a constant for the OneNote API pages endpoint, adds the Content-Type and Authentication headers to the POST request, forms the HTML, verifies the status of the Login session, and then calls the API. The EndRequest method handles the results returned from the API. For more information, see https://msdn.microsoft.com/en-us/library/office/dn575430.
This code is adapted from the Windows Phone code sample on GitHub, to add the more-complex HTML. For more information, see Get the OneNote API sample applications.
// v1.0 Endpoint private const string PAGESENDPOINT = "https://www.onenote.com/api/v1.0/me/notes/pages"; private async void btn_CreateSimple_Click(object sender, RoutedEventArgs e) { StartRequest(); string date = GetDate(); string simpleHtml = "<!DOCTYPE HTML> \r\n" + "<html>\r\n" + " <head>\r\n " + " <title>HTML / ONML sample block</title>\r\n " + " <meta name=\"created\" content=\"2013-06-11T06:30:00-08:00\"/>\r\n " + " </head>\r\n " + " <body style=\"font-family:Arial;\"> \r\n " + " <h1>HTML / ONML sample block</h1>\r\n " + " <h2>The basics</h2>\r\n " + " <p>For the most part, try to keep the HTML simple, and be \r\n " + " sure to properly close all tags.</p>\r\n " + " <p>Character encoding must be in UTF-8; the API doesn't \r\n " + " accept other encodings</p>\r\n " + " <h2>Overall structure</h2>\r\n " + " <p>The normal <html>, <head> and <body> tags are \r\n " + " expected, but the API is usually okay if they aren't included.</p>\r\n " + " <p>Inside the <head> tag, we recognize only the <title> tag. \r\n " + " The tag value overrides the Title property in the Json, if it exists. \r\n " + " All includes, CSS, script, and so on in the <head> and <body> \r\n " + " blocks are ignored.</p>\r\n " + " <p>As you can tell from the <body> tag's style attribute, in this\r\n " + " HTML, the API ignores CSS styles</p>\r\n " + " <h2>Block formatting</h2>\r\n " + " <p>Paragraph (<p>) and line-break (<br/>) tags are handled \r\n " + " properly. They get the "Normal" OneNote styling</p>\r\n " + " <p>The <div> and <span> tags are recognized but generally \r\n " + " don't have any significant effect, since CSS styling is ignored. A\r\n " + " <div> tag acts like a <p> tag. \r\n " + " <p>The header tags <h1> through <h6> are recognized, and\r\n " + " are mapped to the OneNote Heading 1 through Heading 6 styles.</p>\r\n " + " <h2>Simple character formatting</h2>\r\n " + " <p>This paragraph shows how the API handles <b>HTML4+ bold \r\n " + " <b></b> tags</p>\r\n" + " <p>...and <strong>HTML4+ strong <strong></strong> tags</p>\r\n " + " <p>...and <i>HTML4+ italics <i></i> and <cite> tags</p>\r\n " + " <p>...and <em>HTML4+ emphasis <em></em> tags</p>\r\n " + " <p>...and <a href=".">HTML anchor <a></a> tags. \r\n " + " <h2>Images</h2>\r\n " + " <p>The <img> tag is supported. The src attribute can be either\r\n " + " a URL to an actual image, or can be a reference to an image provide\r\n " + " in the data sent to the OneNote API in the request. For\r\n " + " example, here's a referenced image: </p>\r\n " + " <img src=\"http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png\"/>\r\n " + " <p>The OneNote API supports JPG, GIF, TIFF and PNG images</p>\r\n " + " <p>This next tag inserts a screenshot thumbnail image of the OneNote.com web\r\n " + " page into the captured page, displayed as 500 pixels wide.</p>\r\n " + " <img data-render-src=\"http://www.onenote.com\" width=\"500\"/>\r\n " + " <h2>Tables</h2>\r\n " + " <p>Tables are understood, but not table headers. You can nest them. </p>\r\n " + " <p>Tables have to be "regular", in that the API assumes all \r\n " + " rows have same number of columns. Similarly, all columns have the same \r\n " + " number of rows. That is, the API ignores colspan and rowspan \r\n " + " attributes.</p>\r\n " + " <p>Table boder and other styling is ignored, but they will get the default \r\n " + " OneNote table styling, so a no-border table like the below will have\r\n " + " visible borders on the notebook page. \r\n " + " <table>\r\n " + " <tr>\r\n " + " <td>First row First column</td>\r\n " + " <td>First row Second column</td>\r\n " + " </tr>\r\n " + " <tr>\r\n " + " <td>Second row First column</td>\r\n " + " <td>Second row Second column</td>\r\n " + " </tr>\r\n " + " </table>\r\n " + " <h2>Not (yet) supported</h2>\r\n " + " <p>Nested tables are supported, but table header rows (<th>) \r\n " + " are treated like normal table rows (<tr>)</p>\r\n " + " <p>CSS styles are ignored at this time.</p>\r\n " + " <p>Scripts are ignored.</p>\r\n " + " <p> Other tags (e.g, <article>, <header>, \r\n " + " <footer>, <section> and <aside>) are largely\r\n " + " ignored, but their otherwise-valid contents are included.</p>\r\n " + " </body>\r\n " + "</html>\r\n "; // Create the request message var createMessage = new HttpRequestMessage(HttpMethod.Post, PAGESENDPOINT) { Content = new StringContent(simpleHtml, System.Text.Encoding.UTF8, "text/html") }; HttpClient httpClient = new HttpClient(); // Add Authorization header httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", m_AccessToken); // API only supports JSON return type. httpClient.DefaultRequestHeaders.Accept.Add( new MediaTypeWithQualityHeaderValue("application/json")); HttpResponseMessage response = await httpClient.SendAsync(createMessage); await EndRequest(response); }
The following code builds a POST request that contains a more-complex HTML page that illustrates many of the HTML features available. This code places the HTML directly in the HTTPS request body. It doesn't use the multi-part format. The code defines a constant for the OneNote API pages endpoint, adds the Content-Type and Authentication headers to the POST request, forms the HTML, verifies the status of the Login session, and then calls the API. The EndRequest method handles the results returned from the API. For more information, see https://msdn.microsoft.com/en-us/library/office/dn575430.
This code is adapted from the OneNoteCloudCreatePagesSample class in the Windows Store code sample on GitHub. For more information, see Get the OneNote API sample applications.
private static readonly Uri PagesEndPoint = new Uri("https://www.onenote.com/api/v1.0/me/notes/pages"); async public Task<StandardResponse> CreateSimplePage(bool debug) { var client = new HttpClient(); // The API only supports JSON return type. client.DefaultRequestHeaders.Accept.Add( new MediaTypeWithQualityHeaderValue("application/json")); // This allows you to see what happens when an unauthenticated call is made. if (this.IsAuthenticated) { client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue( "Bearer", this._authClient.Session.AccessToken); } string date = GetDate(); string simpleHtml = "<!DOCTYPE HTML> \r\n" + "<html>\r\n" + " <head>\r\n " + " <title>HTML / ONML sample block</title>\r\n " + " <meta name=\"created\" content=\"2013-06-11T06:30:00-08:00\"/>\r\n " + " </head>\r\n " + " <body style=\"font-family:Arial;\"> \r\n " + " <h1>HTML / ONML sample block</h1>\r\n " + " <h2>The basics</h2>\r\n " + " <p>For the most part, try to keep the HTML simple, and be \r\n " + " sure to properly close all tags.</p>\r\n " + " <p>Character encoding must be in UTF-8; the API doesn't \r\n " + " accept other encodings</p>\r\n " + " <h2>Overall structure</h2>\r\n " + " <p>The normal <html>, <head> and <body> tags are \r\n " + " expected, but the API is usually okay if they aren't included.</p>\r\n " + " <p>Inside the <head> tag, we recognize only the <title> tag. \r\n " + " The tag value overrides the Title property in the Json, if it exists. \r\n " + " All includes, CSS, script, and so on in the <head> and <body> \r\n " + " blocks are ignored.</p>\r\n " + " <p>As you can tell from the <body> tag's style attribute, in this\r\n " + " HTML, the API ignores CSS styles</p>\r\n " + " <h2>Block formatting</h2>\r\n " + " <p>Paragraph (<p>) and line-break (<br/>) tags are handled \r\n " + " properly. They get the "Normal" OneNote styling</p>\r\n " + " <p>The <div> and <span> tags are recognized but generally \r\n " + " don't have any significant effect, since CSS styling is ignored. A\r\n " + " <div> tag acts like a <p> tag. \r\n " + " <p>The header tags <h1> through <h6> are recognized, and\r\n " + " are mapped to the OneNote Heading 1 through Heading 6 styles.</p>\r\n " + " <h2>Simple character formatting</h2>\r\n " + " <p>This paragraph shows how the API handles <b>HTML4+ bold \r\n " + " <b></b> tags</p>\r\n" + " <p>...and <strong>HTML4+ strong <strong></strong> tags</p>\r\n " + " <p>...and <i>HTML4+ italics <i></i> and <cite> tags</p>\r\n " + " <p>...and <em>HTML4+ emphasis <em></em> tags</p>\r\n " + " <p>...and <a href=".">HTML anchor <a></a> tags. \r\n " + " <h2>Images</h2>\r\n " + " <p>The <img> tag is supported. The src attribute can be either\r\n " + " a URL to an actual image, or can be a reference to an image provide\r\n " + " in the data sent to the OneNote API in the request. For\r\n " + " example, here's a referenced image: </p>\r\n " + " <img src=\"http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png\"/>\r\n " + " <p>The OneNote API supports JPG, GIF, TIFF and PNG images</p>\r\n " + " <p>This next tag inserts a screenshot thumbnail image of the OneNote.com web\r\n " + " page into the captured page, displayed as 500 pixels wide.</p>\r\n " + " <img data-render-src=\"http://www.onenote.com\" width=\"500\"/>\r\n " + " <h2>Tables</h2>\r\n " + " <p>Tables are understood, but not table headers. You can nest them. </p>\r\n " + " <p>Tables have to be "regular", in that the API assumes all \r\n " + " rows have same number of columns. Similarly, all columns have the same \r\n " + " number of rows. That is, the API ignores colspan and rowspan \r\n " + " attributes.</p>\r\n " + " <p>Table boder and other styling is ignored, but they will get the default \r\n " + " OneNote table styling, so a no-border table like the below will have\r\n " + " visible borders on the notebook page. \r\n " + " <table>\r\n " + " <tr>\r\n " + " <td>First row First column</td>\r\n " + " <td>First row Second column</td>\r\n " + " </tr>\r\n " + " <tr>\r\n " + " <td>Second row First column</td>\r\n " + " <td>Second row Second column</td>\r\n " + " </tr>\r\n " + " </table>\r\n " + " <h2>Not (yet) supported</h2>\r\n " + " <p>Nested tables are supported, but table header rows (<th>) \r\n " + " are treated like normal table rows (<tr>)</p>\r\n " + " <p>CSS styles are ignored at this time.</p>\r\n " + " <p>Scripts are ignored.</p>\r\n " + " <p> Other tags (e.g, <article>, <header>, \r\n " + " <footer>, <section> and <aside>) are largely\r\n " + " ignored, but their otherwise-valid contents are included.</p>\r\n " + " </body>\r\n " + "</html>\r\n "; var createMessage = new HttpRequestMessage(HttpMethod.Post, PagesEndPoint) { Content = new StringContent(simpleHtml, System.Text.Encoding.UTF8, "text/html") }; HttpResponseMessage response = await client.SendAsync(createMessage); return await TranslateResponse(response); }
The following HTTP requests show the REST-style headers and body to create a page that contains a more-complex HTML page that illustrates many of the HTML features available. The example shows a request formatted using a multi-part message. The part is named "Presentation", which is a special name recognized by the OneNote API as containing the page HTML.
For more information about the REST-focused API, see our REST API interactive reference.
POST https://www.onenote.com/api/v1.0/me/notes/pages Content-Type:multipart/form-data; boundary=MyAppPartBoundary Authorization:Bearer tokenString --MyAppPartBoundary Content-Disposition:form-data; name="Presentation" Content-Type:text/html <!DOCTYPE HTML> <html> <head> <title>HTML / ONML sample block</title> <meta name="created" content="2013-06-11T06:30:00-08:00"/> </head> <body style="font-family:Arial;"> <h1>HTML / ONML sample block</h1> <h2>The basics</h2> <p>For the most part, try to keep the HTML simple, and be sure to properly close all tags.</p> <p>Character encoding must be in UTF-8; the API doesn't accept other encodings</p> <h2>Overall structure</h2> <p>The normal <html>, <head> and <body> tags are expected, but the API is usually okay if they aren't included.</p> <p>Inside the <head> tag, we recognize only the <title> tag. The tag value overrides the Title property in the Json, if it exists. All includes, CSS, script, and so on in the <head> and <body> blocks are ignored.</p> <p>As you can tell from the <body> tag's style attribute, in this HTML, the API ignores CSS styles</p> <h2>Block formatting</h2> <p>Paragraph (<p>) and line-break (<br/>) tags are handled properly. They get the "Normal" OneNote styling</p> <p>The <div> and <span> tags are recognized but generally don't have any significant effect, since CSS styling is ignored. A <div> tag acts like a <p> tag. <p>The header tags <h1> through <h6> are recognized, and are mapped to the OneNote Heading 1 through Heading 6 styles.</p> <h2>Simple character formatting</h2> <p>This paragraph shows how the API handles <b>HTML4+ bold <b></b> tags</p> <p>...and <strong>HTML4+ strong <strong></strong> tags</p> <p>...and <i>HTML4+ italics <i></i> and <cite> tags</p> <p>...and <em>HTML4+ emphasis <em></em> tags</p> <p>...and <a href=".">HTML anchor <a></a> tags. <h2>Images</h2> <p>The <img> tag is supported. The src attribute can be either a URL to an actual image, or can be a reference to an image provide in the data sent to the OneNote API in the request. For example, here's a referenced image: </p> <img src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png"/> <p>The OneNote API supports JPG, GIF, TIFF and PNG images</p> <p>This next tag inserts a screenshot thumbnail image of the OneNote.com web page into the captured page, displayed as 500 pixels wide.</p> <img data-render-src="http://www.onenote.com" width="500"/> <h2>Tables</h2> <p>Tables are understood, but not table headers, and don't nest them! </p> <p>Tables have to be "regular", in that the API assumes all rows have same number of colums. Similarly, all columns have the same number of rows. That is, the API ignores colspan and rowspan attributes.</p> <p>Table boder and other styling is ignored, but they will get the default OneNote table styling, so a no-border table like the below will have visible borders on the notebook page. <table> <tr> <td>First row First column</td> <td>First row Second column</td> </tr> <tr> <td>Second row First column</td> <td>Second row Second column</td> </tr> </table> <h2>Not (yet) supported</h2> <p>The API doesn't yet support lists (<ul>, <ol> and <li>)</p> <p>Nested tables are supported, but table header rows (<th>) are treated like normal table rows (<tr>)</p> <p>CSS styles are ignored at this time.</p> <p>Scripts are ignored.</p> <p>Other tags (e.g, <article>, <header>, <footer>, <section> and <aside>) are largely ignored, but their otherwise-valid contents are included.</p> </body> </html> --MyAppPartBoundary--
Note
Important