update markdown image to Learn format to include border by default.

Author: meaghanlewis

aspnetcore/tutorials/razor-pages/da1.md

@@ -14,7 +14,8 @@ uid: tutorials/razor-pages/da1
 
 The scaffolded movie app is a good start, but the presentation isn't ideal. **ReleaseDate** should be two words, **Release Date**.
 
-![Movie application open in Chrome](~/tutorials/razor-pages/sql/media/seed-data-in-app.png)
+:::image type="content" source="~/tutorials/razor-pages/sql/media/seed-data-in-app.png" alt-text="Movie application open in Chrome.":::
+
 
 ## Update the model
 
@@ -32,7 +33,7 @@ In the previous code:
 
 Browse to *Pages/Movies* and hover over an **Edit** link to see the target URL.
 
-![Browser window with mouse over the Edit link and a link Url of https://localhost:1234/Movies/Edit/5 is shown](~/tutorials/razor-pages/da1/media/edit-movie.png)
+:::image type="content" source="~/tutorials/razor-pages/da1/media/edit-movie.png" alt-text="Browser window with mouse over the Edit link and a link Url of https://localhost:1234/Movies/Edit/5 is shown.":::
 
 The **Edit**, **Details**, and **Delete** links are generated by the [Anchor Tag Helper](xref:mvc/views/tag-helpers/builtin-th/anchor-tag-helper) in the `Pages/Movies/Index.cshtml` file.
 

aspnetcore/tutorials/razor-pages/index.md

@@ -30,6 +30,6 @@ This series includes the following tutorials:
 
 At the end, you'll have an app that can display and manage a database of movies.
 
-![Sample page of sample app](~/tutorials/razor-pages/search/media/search-string-ghost.png)
+:::image type="content" source="~/tutorials/razor-pages/search/media/search-string-ghost.png" alt-text="Sample page of sample app.":::
 
-![Sample edit validation of sample app](~/tutorials/razor-pages/validation/media/validation-errors.png)
+:::image type="content" source="~/tutorials/razor-pages/validation/media/validation-errors.png" alt-text="Sample edit validation of sample app.":::

aspnetcore/tutorials/razor-pages/model.md

@@ -82,11 +82,11 @@ In this section, you scaffold the movie model. The scaffolding tool generates pa
 
 1. Right-click on the *Pages/Movies* folder > **Add** > **New Scaffolded Item**.
 
-   ![New Scaffolded Item](~/tutorials/razor-pages/model/media/new-scaffolded-item-vs2026.png)
+  :::image type="content" source="~/tutorials/razor-pages/model/media/new-scaffolded-item-vs2026.png" alt-text="New Scaffolded Item.":::
 
 1. In the **Add New Scaffold** dialog, select **Razor Pages using Entity Framework (CRUD)** > **Add**.
 
-   ![Add Scaffold](~/tutorials/razor-pages/model/media/add-scaffold-vs2026.png)
+  :::image type="content" source="~/tutorials/razor-pages/model/media/add-scaffold-vs2026.png" alt-text="Add Scaffold.":::
 
 1. Complete the **Add Razor Pages using Entity Framework (CRUD)** dialog:
    1. In the **Model class** drop down, select **Movie (RazorPagesMovie.Models)**.
@@ -95,7 +95,7 @@ In this section, you scaffold the movie model. The scaffolding tool generates pa
       1. In the **Database provider** drop down, select **SQL Server**.
    1. Select **Add**.
 
-   ![Add Razor Pages](~/tutorials/razor-pages/model/media/add-razor-pages-vs2026.png)
+   :::image type="content" source="~/tutorials/razor-pages/model/media/add-razor-pages-vs2026.png" alt-text="Add Razor Pages.":::
 
 The `appsettings.json` file is updated with the connection string used to connect to a local database.
 
@@ -169,7 +169,7 @@ In this section, use the **Package Manager Console** (PMC) window to:
 
 * From the **Tools** menu, select **NuGet Package Manager** > **Package Manager Console**.
 
-  ![PMC menu](~/tutorials/razor-pages/model/media/package-manager-console-vs2026.png)
+  :::image type="content" source="~/tutorials/razor-pages/model/media/package-manager-console-vs2026.png" alt-text="PMC menu.":::
 
 * In the PMC, enter the following command:
 
@@ -245,7 +245,7 @@ The name of the connection string is passed to the context by calling a method o
 
 1. Test the **Create New** link.
 
-   ![Create page](~/tutorials/razor-pages/model/media/create-new.png)
+  :::image type="content" source="~/tutorials/razor-pages/model/media/create-new.png" alt-text="Create page.":::
 
    > [!NOTE]
    > You might not be able to enter decimal commas in the `Price` field. To support [jQuery validation](https://jqueryvalidation.org/) for non-English locales that use a comma (",") for a decimal point and for non US-English date formats, the app must be globalized. For globalization instructions, see [this GitHub issue](https://github.com/dotnet/AspNetCore.Docs/issues/4076#issuecomment-326590420).

aspnetcore/tutorials/razor-pages/page.md

@@ -164,7 +164,7 @@ Visual Studio displays the following tags in a distinctive bold font used for Ta
 * `<input asp-for="Movie.Title" class="form-control" />`
 * `<span asp-validation-for="Movie.Title" class="text-danger"></span>`
 
-![VS view of Create.cshtml page](~/tutorials/razor-pages/page/media/tag-helpers-vs2026.png)
+:::image type="content" source="~/tutorials/razor-pages/page/media/tag-helpers-vs2026.png" alt-text="Visual Studio view of Create.cshtml page showing Tag Helper highlighting.":::
 
 ---
 

aspnetcore/tutorials/razor-pages/razor-pages-start.md

@@ -25,7 +25,7 @@ For a more advanced introduction aimed at developers who are familiar with contr
 
 At the end of this tutorial, you have a Razor Pages web app that manages a database of movies.
 
-![Home or Index page](~/tutorials/razor-pages/razor-pages-start/media/home10.png)
+:::image type="content" source="~/tutorials/razor-pages/razor-pages-start/media/home10.png" alt-text="Home or Index page.":::
 
 ## Prerequisites
 
@@ -52,11 +52,11 @@ At the end of this tutorial, you have a Razor Pages web app that manages a datab
   * Verify: **Do not use top-level statements** is unchecked.
 * Select **Create**.
 
-   ![Additional information](~/tutorials/razor-pages/razor-pages-start/media/net10-additional-info.png)
+  :::image type="content" source="~/tutorials/razor-pages/razor-pages-start/media/net10-additional-info.png" alt-text="Additional information dialog.":::
 
   The following starter project is created:
 
-   ![Solution Explorer](~/tutorials/razor-pages/razor-pages-start/media/solution-explorer-project.png)
+  :::image type="content" source="~/tutorials/razor-pages/razor-pages-start/media/solution-explorer-project.png" alt-text="Solution Explorer showing the RazorPagesMovie project structure.":::
 
 For alternative approaches to create the project, see [Create a new project in Visual Studio](/visualstudio/ide/create-new-project).
 
@@ -91,13 +91,13 @@ Select **RazorPagesMovie** in **Solution Explorer**, and then press <kbd>Ctrl</k
 
 Visual Studio displays the following dialog when a project isn't yet configured to use SSL:
 
-![This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?](~/static/trustCertVS22.png)
+:::image type="content" source="~/static/trustCertVS22.png" alt-text="This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?":::
 
 Select **Yes** if you trust the IIS Express SSL certificate.
 
 The following dialog is displayed:
 
-![Security warning dialog](~/static/cert.png)
+:::image type="content" source="~/static/cert.png" alt-text="Security warning dialog.":::
 
 Select **Yes** if you agree to trust the development certificate.
 
@@ -118,7 +118,7 @@ In Visual Studio Code, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> to run the app withou
 
 At the **Select debugger** prompt, select **C#**.
 
-![Select environment dialog](~/tutorials/razor-pages/razor-pages-start/media/vsc-select-debugger-csharp-devkit10.png)
+:::image type="content" source="~/tutorials/razor-pages/razor-pages-start/media/vsc-select-debugger-csharp-devkit10.png" alt-text="Select environment dialog.":::
 
 At the **Select Launch Configuration** prompt, select **C#: RazorPagesMovie [https] RazorPagesMovie**.
 

aspnetcore/tutorials/razor-pages/search.md

@@ -54,7 +54,7 @@ The `s => s.Title.Contains()` code is a [Lambda Expression](/dotnet/csharp/progr
 
 Navigate to the Movies page and append a query string such as `?searchString=Ghost` to the URL. For example, `https://localhost:7247/Movies?searchString=Ghost`. The filtered movies are displayed.
 
-![Index view](~/tutorials/razor-pages/search/media/search-string-ghost.png)
+:::image type="content" source="~/tutorials/razor-pages/search/media/search-string-ghost.png" alt-text="Index view with the search string ghost in the URL and a returned movie list.":::
 
 If you add the following route template to the Index page, you can pass the search string as a URL segment. For example, `https://localhost:7247/Movies/Ghost`.
 
@@ -64,7 +64,7 @@ If you add the following route template to the Index page, you can pass the sear
 
 The preceding route constraint allows searching the title as route data (a URL segment) instead of as a query string value.  The `?` in `"{searchString?}"` means this is an optional route parameter.
 
-![Index view with the word ghost added to the Url and a returned movie list of two movies, Ghostbusters and Ghostbusters 2](~/tutorials/razor-pages/search/media/ghost-title-route-data.png)
+:::image type="content" source="~/tutorials/razor-pages/search/media/ghost-title-route-data.png" alt-text="Index view with the word ghost added to the Url and a returned movie list of two movies, Ghostbusters and Ghostbusters 2.":::
 
 The ASP.NET Core runtime uses [model binding](xref:mvc/models/model-binding) to set the value of the `SearchString` property from the query string (`?searchString=Ghost`) or route data (`https://localhost:7247/Movies/Ghost`). Model binding isn't case sensitive.
 
@@ -81,7 +81,7 @@ The HTML `<form>` tag uses the following [Tag Helpers](xref:mvc/views/tag-helper
 
 Save your changes and test the filter.
 
-![Index view with the word ghost typed into the Title filter textbox](~/tutorials/razor-pages/search/media/filter-by-title.png)
+:::image type="content" source="~/tutorials/razor-pages/search/media/filter-by-title.png" alt-text="Index view with the word ghost typed into the Title filter textbox.":::
 
 ## Search by genre
 
@@ -105,7 +105,7 @@ Update the `Index.cshtml` [`<form>` element](https://developer.mozilla.org/docs/
 
 Test the app by searching by genre, by movie title, and by both:
 
-![Index view complete with Genre selector and Title textbox search filters](~/tutorials/razor-pages/search/media/filter-by-genre-title.png)
+:::image type="content" source="~/tutorials/razor-pages/search/media/filter-by-genre-title.png" alt-text="Index view complete with Genre selector and Title textbox search filters.":::
 
 ## Next steps
 

aspnetcore/tutorials/razor-pages/sql.md

@@ -51,31 +51,31 @@ LocalDB is a lightweight version of the SQL Server Express database engine that'
 
 1. From the **View** menu, open **SQL Server Object Explorer** (SSOX).
 
-   ![View menu](~/tutorials/razor-pages/sql/media/sql-server-object-explorer-vs2026.png)
+   :::image type="content" source="~/tutorials/razor-pages/sql/media/sql-server-object-explorer-vs2026.png" alt-text="View menu showing SQL Server Object Explorer option.":::
 
 1. Right-click on the `Movie` table and select **View Designer**:
 
-   ![Contextual menus open on Movie table](~/tutorials/razor-pages/sql/media/view-designer-vs2026.png)
+   :::image type="content" source="~/tutorials/razor-pages/sql/media/view-designer-vs2026.png" alt-text="Contextual menus open on Movie table.":::
 
-   ![Movie tables open in Designer](~/tutorials/razor-pages/sql/media/movie-table-in-designer-vs2026.png)
+   :::image type="content" source="~/tutorials/razor-pages/sql/media/movie-table-in-designer-vs2026.png" alt-text="Movie tables open in Designer.":::
 
    Note the key icon next to `ID`. By default, EF creates a property named `ID` for the primary key.
 
 1. Right-click on the `Movie` table and select **View Data**:
 
-   ![Movie table open showing table data](~/tutorials/razor-pages/sql/media/view-movie-data-vs2026.png)
+   :::image type="content" source="~/tutorials/razor-pages/sql/media/view-movie-data-vs2026.png" alt-text="Movie table open showing table data.":::
 
 # [Visual Studio Code](#tab/visual-studio-code)
 
 ## SQLite
 
 The [SQLite](https://www.sqlite.org/) website states:
 
-> SQLite is a self-contained, high-reliability, embedded, full-featured, public-domain, Azure SQL Database engine. SQLite is the most used database engine in the world.
+> SQLite is a self-contained, high-reliability, embedded, full-featured, public-domain, SQL Database engine. SQLite is the most used database engine in the world.
 
 You can download many third-party tools to manage and view a SQLite database. The following image is from [DB Browser for SQLite](https://sqlitebrowser.org/). If you have a favorite SQLite tool, leave a comment on what you like about it.
 
-![DB Browser for SQLite showing movie database](~/tutorials/first-mvc-app-xplat/working-with-sql/_static/dbb.png)
+:::image type="content" source="~/tutorials/first-mvc-app-xplat/working-with-sql/_static/dbb.png" alt-text="DB Browser for SQLite showing movie database.":::
 
 > [!NOTE]
 > For this tutorial, use the Entity Framework Core *migrations* feature where possible. Migrations updates the database schema to match changes in the data model. However, migrations can only make changes that the EF Core provider supports, and the SQLite provider's capabilities are limited. For example, adding a column is supported, but removing or changing a column isn't supported. If you create a migration to remove or change a column, the `ef migrations add` command succeeds but the `ef database update` command fails. Due to these limitations, this tutorial doesn't use migrations for SQLite schema changes. Instead, when the schema changes, the database is dropped and re-created.
@@ -144,7 +144,7 @@ Delete all the records in the database so the seed method runs. Stop and start t
 
 The app shows the seeded data:
 
-![Movie application open in browser showing movie data](~/tutorials/razor-pages/sql/media/seed-data-in-app.png)
+:::image type="content" source="~/tutorials/razor-pages/sql/media/seed-data-in-app.png" alt-text="Movie application open in browser showing movie data.":::
 
 ## Next steps
 

aspnetcore/tutorials/razor-pages/validation.md

@@ -89,7 +89,7 @@ Run the app and go to **Pages/Movies**.
 
 Select the **Create New** link. Complete the form with some invalid values. When jQuery client-side validation detects the error, it displays an error message.
 
-![Movie view form with multiple jQuery client-side validation errors](~/tutorials/razor-pages/validation/media/validation-errors.png)
+:::image type="content" source="~/tutorials/razor-pages/validation/media/validation-errors.png" alt-text="Movie view form with multiple jQuery client-side validation errors.":::
 
 [!INCLUDE[](~/includes/localization/currency.md)]