Logo in header of layout page code

Question

The code below works to put a logo in the header (re: layout page).

Is this the correct way of doing it...correct syntax? What is the best way of doing this?

Answer 1

Is this the correct way of doing it...correct syntax? What is the best way of doing this?

If you are happy with the image size, location, etc, then you're done. However, the img tag you shared is missing the tag ending />.

<img src="/media/logo.png" alt="Company" />

https://www.w3schools.com/tags/tag_img.asp

I notice that the Company Name in the following line of code... ...appears smaller than it normally would.

The "Company" link uses the "navbar-brand" style. You can find the "navbar-brand" style in the browser's dev tools. Simply right click "Company" and select "Inspect".

.navbar-brand {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

Override the style if you want a larger company name. One way to do that is to add an inline style.

<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index" style="font-size:4.0em">MvcDemo</a>

Another option is to take advantage of the "cascade" in cascading style sheets (CSS) and add a .navbar-brand style to the site.css file that comes with the MVC template.

.navbar-brand {
    font-size: 4.0em;
}

Learn CSS.

https://www.w3schools.com/css/