As part of this post let us see step by step details about creating simple HTML page
- Introduction to Web applications
- Understanding HTML
- Create simple HTML page
- Styling it using CSS
- Make responsive using bootstrap
- Deploying it on Azure
Introduction to Web applications
In computing, a web application or web app is a client–server software application in which the client (or user interface) runs in a web browser. Common web applications include webmail, online retail sales, online auctions, wikis, instant messaging services and many other functions.
- Email – hotmail/gmail etc.
- Social networking – skype/facebook
- Corporate – www.microsoft.com
- NGOs – https://girlsintech.org/
- Banks – www.icici.com
- Ecommerce – flipkart
- and the list is endless
Why web applications?
In earlier computing models like client–server, the processing load for the application was shared between code on the server and code installed on each client locally. In other words, an application had its own pre-compiled client program which served as its user interface and had to be separately installed on each user’s personal computer.
- Customer registration
- Buy and Sell Products
- It is used to describe web pages
- Tags such as <HTML> are used to define the behavior of section of the web page
- Tags are typically pairs – EG: <TEXT></TEXT>
- <> Represents opening tag and </> representing closing tag
- Tags also have attributes – e.g.: <text name=”textbox”>
Create Simple HTML Page
- We can develop simple HTML pages using any editor
- Visual studio code is the popular editor from Microsoft
- Visual Studio code can be used to develop sophisticated websites using HTML and other web technologies such as ASP.NET, C# etc.
- If we are using another advanced editor called Visual Studio
- We will create ASP.NET web forms project
- It will have Default.aspx, which is a template for complete web application
- Default.aspx has HTML code for static content
- It also has asp tags which start with <asp>, to make the pages’ dynamic
- We will ignore some of the asp code using <asp> and start adding simple HTML code
- With Visual Studio code
- Create Directory HELLO
- Open the directory using Visual Studio Code
- Create index.html
- Copy paste below code
Style using CSS
CSS – Cascading style sheet
- We can style our HTML pages
- Each HTML tag has certain properties/attributes
- Tag key words – such as label, input, name, type, background color, foreground/text color etc.
- We might want to display certain information in certain style
- Let’s us change format of our HTML page
- Size of labels and text boxes have to be uniform
- Change the label text color
- Change the format of text box, border and other details
- Add these lines of CSS code in the style tag of HTML page
Here is the full page code including CSS
Make responsive using bootstrap
- First let us understand what responsive is!!!
- Depending up on the size of the screen the web page will adjust giving same level of user experience
- Using bootstrap we can develop responsive web pages
- Bootstrap works on top of CSS
- You see new set of tags with respect to boot strap such as <div>
- You do not need to use CSS code directly.
- Bootstrap facilitate us to create templates for web pages, which can give better user experience in all forms of screens
- Here is the bootstrap example
- Let us also change the background of colors
- Added background image
- Change colors of buttons and labels