Posts

Showing posts with the label HTML5

ASP.NET Core : Adding The Default View With _ViewStart.cshtml

Image
In ASP.NET MVC there is a default layout file that the application use when one exists.  If you look at the markup at the top of the "Index.cshtml" file you will see that there is a markup to specify the layout of the page in the code below. @{ Layout = null; } The code above tells ASP.NET MVC to not assign any layout to the page because it is being set to null. In this blog we will build on our existing NorthwindCafe.Web    project and add a default layout view to the project so that each page in the project will have a common layout.  This is similar what you would a master page for in web forms.
Post a Comment
Read more

Enable ASP.NET Core to Serve Static Files

Image
As I have mentioned before ASP.NET Core decouples the application from the infrastructure as much as possible.  Therefore, you have to tell it exactly what you want in your project.  In this blog post we are going to tell ASP.NET that we want to serve static html files in our application. Here are the steps to serve static files in our ASP.NET Core application. 1.  Open the "NorthwindCafe.Web" project, then click on the "Startup.cs" file in the project.  You will see the following markup in the Configure method public void Configure(IApplicationBuilder app) { app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); } 2.  Go into the Configure method, remove the existing code and type in the following code public void Configure(IApplicationBuilder app) { app.UseStaticFiles() } You will notice that the app.UseStaticFil...
Post a Comment
Read more

HTML5 Page Template

A little bit fancier, you want to specify the language and character set: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> This is the bare minimum you need to write a HTML5 page: <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
Post a Comment
Read more

HTML5 Tags

Image
Not Supported in HTML5: <tt> <strike> <noframes> <frame> <frameset> <dir> <center> <big> <basefont> <applet> <acronym> DOCTYPE tag: HTML5: <!DOCTYPE html> HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML Traditional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> New HTML5 Tags: Layout: Top area of the page: <header> Bottom area of the page: <footer> Navigation links: <nav> Line breaks: <wbr> UI: Progress bar, shows defined progress with flashing light: <progress> Show result of a calculation: <output> Meter (like a progress bar) but no flashing light: ...
Post a Comment
Read more

Using Bootstrap To Make Your Form Fields Look More Professional

Image
In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title></title> </head> <body> ...
Post a Comment
Read more

HTML5: Mark Element

The <mark> element is used to highlight a text by assigning a background-color attribute Example: This is an example of the <mark style="background-color:yellow;">mark</mark> element This is an example of the mark element
Post a Comment
Read more

HTML5 : Progress Element

<progress> element represents the progress of a task or goals and objectives, there are two ways that you can set this element, they are the following Determinate - know in advance the starting and ending values Indeterminate - end value is unknown in advance (remove value attribute) Determinate Example: <p>Our goal is to have 500 runners: </p> 0 <progress value=”250” max=”500”></progress> 500 Our goal is to have 500 runners: 0 500 Indeterminate Example: <p>Please wait while we download your TPS Report!</p> <progress></progress> Please wait while we download your TPS Report!
Post a Comment
Read more