Scribd
Upload
59 views20 pages

BMC 201 Unit 1 HTML Notes

The document provides an overview of UI technologies essential for web application development, focusing on HTML, CSS, JavaScript, and backend technologies like Python and Django. It explains the structure of HTML pages, the difference between static and dynamic responses, and how to create various HTML elements such as lists, tables, and forms. Additionally, it highlights the importance of frontend and backend components in web applications and gives examples of popular applications built using these technologies.

Uploaded by

amitsharma.himcs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views20 pages

BMC 201 Unit 1 HTML Notes

The document provides an overview of UI technologies essential for web application development, focusing on HTML, CSS, JavaScript, and backend technologies like Python and Django. It explains the structure of HTML pages, the difference between static and dynamic responses, and how to create various HTML elements such as lists, tables, and forms. Additionally, it highlights the importance of frontend and backend components in web applications and gives examples of popular applications built using these technologies.

Uploaded by

amitsharma.himcs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

UI

TECHNOLOGIES
UI
TECHNOLOGIES

HTML (HYPER TEXT MARKUP LANGUAGE)


Agenda
1) HTML
2) JS
3) CSS
4) Bootstrap
5) JQuery
6) Python
7) Django
8) SQLite|Oracle|MySQL

Web Application:
The applications which will provide services over the web are called web applications.

Eg: gmail.com, facebook.com, Amitsoftvideos.com et

Every web application contains 2 main components

1) Front-End
2) Back-End

1) Front-End:
It represents what user is seeing on the website
We can develop Front-End content by using the following technologies:
HTML, JS, CSS, JQuery and BootStrap

JQuery and Bootstrap are advanced front-end technologies, which are developed by
using HTML, CSS and JavaScript only.

HTML: HyperText Markup Language


Every web application should contain HTML. i.e HTML is the mandatory technology for
web development.It represents structure of web page
UI
TECHNOLOGIES

CSS: Cascading Style Sheets


It is optional technology; still every web application contains CSS.
The main objective of CSS is to add styles to the HTML Pages like colors, fonts, borders
etc.

Java Script:
It allows to add interactivity to the web application including programming logic.
The main objective of Java Script is to add functionality to the HTML Pages. ie to add
dynamic nature to the HTML Pages.
HTML Meant for Static Responses
HTML+JS Meant for Dynamic Responses

Eg 1: To display "Welcome to AMITSOFT" response to the end user only HTML is enough,
because it is static response.

Eg 2: To display current server date and time to the end user, only HTML is not enough
we required to use some extra technology like JavaScript, JSP, ASP, PHP etc as it is
dynamic response.

Static Response vs Dynamic Response:


If the response is not varied from time to time and person to person then it is
considered as static response.
Eg: login page of gmail
home page of icici bank

If the response is varied from time to time and person to person then it is considered
as dynamic response.
Eg: inbox page of gmail
balance page of icicibank

2) Back End:
It is the technology used to decide what to show to the end user on the Front-End.
ie Backend is responsible to generate required response to the end user,which is
displayed by the Front-End.

Back-End has 3 important components:

1) The Language like Java, Python etc


2) The Framework like DJango, Pyramid, Flask etc
3) The Database like SQLite, Oralce, MySQL etc
UI
TECHNOLOGIES

For the Backend language Python is the best choice because of the following reasons:
Simple and easy to learn, libraries and concise code.
For the Framework DJango is the best choice because it is Fast, Secure and Scalable.
Django is the most popular web application framework for Python.
DJango provides inbuilt database which is nothing but SQLite, which is the best choice
for database.
The following are various popular web applications which are developed by using
Python and DJango.
YouTube, Dropbox, Quora, Instagram, Reddit, Yahoo Maps etc

HTML Basics:
HTML stands for HyperText Markup language.
This is the most basic building block of every web application.Without using HTML we
cannot build web applications. It is the mandotory technology.

We can use CSS to sstyle HTML Pages.


We can use Java Script to add functionality to the HTML pages.

In general we will add django template tags to HTML for generating dynamic content
based on our requirement.

Strcutre of HTML Page:


Every HTML page contains 2 parts
1) Head
2) Body

Head contains meta data like title of the page, keywords etc. CSS files and Java Script
files information we have to specify in the Head Part only.

Body contains actual content.

1) <!doctype html>// to indicate that it is HTML page


2) <html >
3) <head>
4) Meta Data like keywords,author,title...
5) css files information
6) js files information
7) </head>
8) <body>
9) Actual Data
10) </body>
11) </html>
UI
TECHNOLOGIES

HTML Comment:
<!-- Anything here is considered as Comment -->

Title:
1) <head>
2) <title>Basic HTML for DJango Classes</title>
3) </head>

Heading Tags:
HTML supports 6 heading tags
<h1>,<h2>,....

<h1>This is Heading1</h1>

Paragraph tag: <p>:


We can use this tag to represent paragraph of text.
<p> This is first paragraph </p>

Case-1:

1) <p>This is First Line


2) This is Second Line
3) This is Third Line
4) This is Four Line
5) </p>

Total Data will come in a single line, because we are using only one paragraph tag.

Case-2:

1) <p>This is First Line</p>


2) <p>This is Second Line</p>
3) <p>This is Third Line</p>
4) <p>This is Fourth Line</p>

Output will come in 4 lines

Case-3:
<p>This is First Line</p><p>This is Second Line</p>

output will come in multiple lines


UI
TECHNOLOGIES

Note: In HTML indentation is not important but tags are important. Blocking also takes
care by html tags only.

1) <body>
2) <h1>This is HTML Demo Class</h1>
3) <p>This is First Line</p>
4) <p>This is Second Line</p>
5) <p>This is Third Line</p>
6) <p>This is Fourth Line</p>
7) </body>

Bold and Italic:


Legacy Tags:
<b> for bold
<i> for italic
These are old (lEgacy)html tags and not recommended to use.
Eg: <p><b><i>This is First Line</i></b></p>

Advanced Tags:
We can use the following HTML 5 advanced tags for bold and italic
<strong> for strong text(bold)
<em> for emphasis (italic)
Eg: <p><strong><em>This is Second Line</em></strong></p>

HTML Lists:
There are 2 types of lists
1) Ordered List
2) Unordered List

1) Ordered List:
All list items will be displayed with numbers

1) <ol>
2) <li>Chicken</li>
3) <li>Mutton</li>
4) <li>Fish</li>
5) <li>Beer</li>
6) </ol>
UI
TECHNOLOGIES

Output:
1. Chicken
2. Mutton
3. Fish
4. Beer

2) Unordered List:
Instead of numbers bullet symbol will come. Here order is not important.

1) <ul>
2) <li>Chicken</li>
3) <li>Mutton</li>
4) <li>Fish</li>
5) <li>Beer</li>
6) </ul>

Nested Lists:
We can take list inside list, which are nothing but nested lists.

1) <ol>
2) <li>Chicken</li>
3) <li>Mutton</li>
4) <li>Fish</li>
5) <li>Beer</li>
6) <ul>
7) <li>KF</li>
8) <li>KO</li>
9) <li>RC</li>
10) </ul>
11) </ol>

Note: For outer and inner lists we can take both ordered and unordered lists
Eg: We can take unordered list inside ordered list

Div and Span Tags:


We can use div and span tags to group related tags into a single unit.
In general we can use these tags with CSS.

1) <div class="groupone">
2) <h1> Group One Content</h1>
3) <p>This division tag helpful to style a group of
4) html tags with css</p>
5) </div>
UI
TECHNOLOGIES

div means division


<span> tag is exactly same as division tag except that it is inline. i.e to define group
within the line of text we can use <span> tag.
<p>This <span>division tag helpful</span> to style a group of html tags with css</p>
<div> will work for group of lines where as <span> will work within the line.

Note: <div> and <span> tags are helpful only for styling html. Hence they will always
work with css only.

Attributes:
HTML Attributes will provide extra information to HTML tags.
To insert image in the html page, src attribute specify location of the image to the
<img> tag.

Setting Image inside HTML:


<img src="guido.jpg" alt="OOPS Image is missing">
src means source where we have to specify the image source(complete location). We
can take image address from the google also.
alt means alternate. If image is missing then broken link image will display.In this case
if we want to display some meaningful text information then we should go for alt
attribute.

Note: We have to open the tag and we are not responsible to close the tag,such type of
tags are called self closing tags.
Eg: <img> tag

Creating Hyperlinks by using anchor tag: <a>:


<a href="second.html">Click Here to go Second Page</a>
<a href="https://facebook.com">FaceBook</a>
UI
TECHNOLOGIES

Ajay Bar and Restaurant Application:

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <meta charset="UTF-8">
5) <meta name="Generator" content="EditPlus®">
6) <meta name="Author" content="">
7) <meta name="Keywords" content="">
8) <meta name="Description" content="">
9) <title>Moonlight Bar and Restaurant</title>
10) </head>
11) <body>
12) <h1>Welcome to Ajay Bar and Restaurant</h1>
13) <img src="dbar.jpg" alt="image missing upload soon">
14) <p>We are very specialized for Chilled Beer. We have virtual rain environment wi
th all facilities so that 100% guarantee for the Kick</p>
15) <h2>Our Brand Ambassodor is : Sunny Leone</h2>
16) <img src="sunny.jpg" alt="missing image"/>
17) <h3>Our offered Products:</h3>
18) <ol>
19) <li>KF</li>
20) <li>KO</li>
21) <li>RC</li>
22) <li>FO</li>
UI
TECHNOLOGIES
23) </ol>
24) <h1>Offer of the Day: Buy One Get One FREE</h1>
25) <p>View Our Profile:</p>
26) <a href="http://youtube.com">YouTube</a>
27) <a href="http://twitter.com">Twitter</a>
28) <a href="https://facebook.com">Facebook</a>
29) </body>
30) </html>

Table Creation:
We can use
<table> to create table
<thead> to specify head row
<th> to specify column data in head row(column name)
<tr> to insert row in the table
<td> to specify column data in the row/record

We can use border attribute inside <table> tag

1) <table border="1">
2) <thead>
3) <th>ENO</th>
4) <th>ENAME</th>
5) <th>ESAL</th>
6) <th>EADDR</th>
7) </thead>
8) <tr>
9) <td>100</td>
10) <td>Ajay</td>
11) <td>1000</td>
12) <td>Hyd</td>
13) </tr>
14) <tr>
15) <td>200</td>
16) <td>SUNNY</td>
17) <td>2000</td>
18) <td>Mumbai</td>
19) </tr>
20) <tr>
21) <td>300</td>
22) <td>Bunny</td>
23) <td>3000</td>
24) <td>Chennai</td>
25) </tr>
UI
TECHNOLOGIES
26) </table>

Oscar Awards Winners List 2018 Application


(Assignment on tables):

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Oscar awards winners list</title>
5) </head>
6) <body>
7) <h1> Oscar Awards Winners List 2018</h1>
8) <table border="1">
9) <thead>
10) <th>S.No</th>
11) <th>Winner</th>
12) <th>Winner Pic</th>
13) <th>CatEgory</th>
14) <th>Country Log</th>
15) <th>View Profile</th>
16) </thead>
17) <tr>
18) <td>1</td>
19) <td>Sunny</td>
UI
TECHNOLOGIES
20) <td><img src="sunny.jpg" alt="Image not available"></td>
21) <td>Best Actress</td>
22) <td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_
of_India.svg/255px-Flag_of_India.svg.png" alt="Image not available"></td>
23) <td><a href="http://youtube.com/Amitsoftware">View Info</a></td>
24) </tr>
25) </table>
26) </body>
27) </html>

Creation of HTML Forms:


As the part of web application development, we have to develop several forms like
login form, registration form etc
We can create Html form by using <form> tag.

<form class="" action="" method="">


.....
</form>

Within the form to collect end user input, we have to use <input> tag.
This <input> tag will play very important role in form creation.

Syntax: <input type="" name="" value=""/>

type attribute can be used to specify the type of input end user has to provide. The
main important types are:
text
email
password
color
submit
checkbox
radio
etc
name attribute represents the name of input tag. By using this name,in the next target
page we can access end user provided input value.
value attribute represents default value will be displayed in the form.

Eg:
<input type="text" name="username" value="Enter User Name"/>
<input type="email" name="mailid" value=""/>
<input type="password" name="pwd" value=""/>
<input type="checkbox" name="course" value=""/>
<input type="radio" name="married" value=""/>
UI
TECHNOLOGIES

To provide default value it is highly recommended to use placeholder attribute


because end user is not required to delete defualt value while entering data.
Eg: <input type="text" name="username" placeholder="Enter User Name"/>

Creation of Labels for HTML Elements:


We can define Label Text for our HTML Elements like Radio Buttons, Text Box etc by using
<label> tag.
Syntax: <label for="name">Enter Name:</label>

Eg: <p>Enter Name:</p>


<input type="text" name="username" placeholder="Enter Name">

The result looks like

In this case there is no relation between text box and data.

To link data to text box,we have to use <label> tag.

<label for="name">Enter Name:</label>


<input id="name" type='text' name='username' placeholder='Name to Contact' >

The result looks like

required Attribute:
If end user compulsory should required to provide input value then we should go for
required attribute.
Eg:
<input id="name" type='text' name='username' placeholder='Name to Contact' required>

action Attribute:
Once we fill the form and click submit, then to which page it will go is decided by action
attribute.The value of action attribute can be either local resource or web url.
Eg:
<form action="target.html" >
<form action="https://facebook.com" >
UI
TECHNOLOGIES

Demo Program:
test.html

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Form Input</title>
5) </head>
6) <body>
7) <h1>User Contact Form</h1>
8) <form action="target.html">
9) <label for="name">Enter Name:</label>
10) <input id="name" type='text' name='username' placeholder='Name to Contact' r
equired>
11) <input type="submit" value="ClickToContact">
12) </form>
13) </body>
14) </html>

target.html:

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Target HTML</title>
5) </head>
6) <body>
7) <h1>Thanks for Confirmation</h1>
8) </body>
9) </html>

Implementing Radio Buttons:


1) <h3>Are you Married:</h3>
2) <label for='ma'>Yes</label>
3) <input id='ma' type='radio' name="married" value="">
4) <label for='ma1'>No</label>
5) <input id='ma1' type='radio' name="married" value="">

nd
UI
TECHNOLOGIES

Eg 2:

1) <h3>Gender:</h3>
2) <label for='m'>Male</label>
3) <input id='m' type='radio' name="gender" value="Male">
4) <label for='f'>Female</label>
5) <input id='f' type='radio' name="gender" value="Female">
6) <label for='t'>Transgender</label>
7) <input id='t' type='radio' name="gender" value="Transgender">

How to implement Drop down box/select box:


1) <h3>Please Select Your Payment Mode:</h3>
2) <select name='pmode'>
3) <option value='ccard'>Credit Card</option>
4) <option value='dcard'>Dedit Card</option>
5) <option value='ppal'>Paypal</option>
6) <option value='otransfer'>OnlineTransfer</option>
7) </select>

textarea element:

1) <h2>Enter Your FeedBack:</h2>


2) <textarea name="feedback" rows="8" cols="80">

checkbox:

1) <form>
2) <h2>Choose Your Known Languages:</h2>
3) <input type="checkbox" name="languages" value="english" checked> English<br>
4) <input type="checkbox" name="languages" value="telugu"> Telugu<br>
5) <input type="checkbox" name="languages" value="hindi"> Hindi<br>
6) <input type="checkbox" name="languages" value="tamil"> Tamil<br>
7) </form>

How to include spaces in HTML:


1) Type "nbsp" to add a single space.
2) Type "ensp" to add 2 spaces.
3) Type "emsp" to add 4 spaces.
4) Use the non-breaking space (nbsp) 4 times to insert a tab.
5) Use "br" to add a line break.
UI
TECHNOLOGIES

ATOM IDE/Editor:
https://atom.io/

freeware
open source
supports cross platform
several auto completion short-cuts
etc

Shaadi Matrimonial Application:


UI
TECHNOLOGIES

home.html:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
UI
TECHNOLOGIES
5) <link rel="stylesheet" href="form.css">
6) <title>Shaadi Matrimonial</title>
7) </head>
8) <body>
9) <h1>Welcome to Shaadi Matrimonial</h1>
10) <img src="mat.png" alt="">
11) <p>We are specialized in the following areas:</p>
12) <ul>
13) <li>Late Marriages</li>
14) <li>Early Marriages</li>
15) <li>Second and Third Marriages</li>
16) <li>Dating cum Marriages</li>
17) </ul>
18) <a href="rEgister.html">Click Here to rEgister</a>
19) </body>
20) </html>

register.html:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <title>Registration Form</title>
6) </head>
7) <body>
8) <h1>Registration Form</h1>
9) <h2>All Fields are Mandatory</h2>
10) <form class="" action="thankyou.html" method="post">
11) <label for="name">Name</label>
12) <input id="name" type="text" name="name" placeholder="Enter Name" requir
ed><br>
13) <label for="mail">Email</label>
14) <input id="mail" type="email" name="mail" placeholder="Enter Email" require
d><br>
15) <label for="age">Age</label>
16) <input id="age" type="text" name="age" placeholder="Enter Age" required>
17) <h3>Are You Interested In Dating</h3>
18) <label for="dat">Yes</label>
19) <input id="dat" type="radio" name="dating" value="">
20) <label for="dat1">No</label>
21) <input id="dat1" type="radio" name="dating" value="">
22) <h3>Your Expections like:</h3>
23) <select class="" name="expe">
24) <option value="katrina">Katrina Kaif</option>
UI
TECHNOLOGIES
25) <option value="kareena">Kareena Kapoor</option>
26) <option value="sunny">Sunny Leone</option>
27) <option value="mallika">Mallika Sherawat</option>
28) </select>
29) <h3>How many marraiges you want:</h3>
30) <select class="" name="nom">
31) <option value="One">1</option>
32) <option value="Two">2</option>
33) <option value="Three">3</option>
34) <option value="Four">4</option>
35) </select>
36) <h3>Are You Heavy Alocholic:</h3>
37) <input type="checkbox" name="Alocholic" value="yes">YES
38) <input type="checkbox" name="Alocholic" value="no">NO
39) <input type="checkbox" name="Alocholic" value="week-end">Only on week-
ends
40) <h3>Your Preferences and Extra Information</h3>
41) <textarea name="pref" rows="8" cols="80"></textarea>
42) <input type="submit" name="" value="Register">
43) </form>
44) </body>
45) </html>

thankyou.html:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <title>Thank You</title>
6) </head>
7) <body>
8) <h1>Thanks for Registration</h1>
9) <h2>You will get match details soon by email</h2>
10) </body>
11) </html>

form.css:

1) h1{
2) color:red;
3) }
4) ul{
5) color:blue;
6) }
UI
TECHNOLOGIES
google drive link: https://goo.gl/6iq64Y

How to declare multiple submit buttons in the form:


Within the form we can define multiple submit buttons. But based on value we can
implement corresponding action in the back-end.

1) <form action="target">
2) ......
3) <input type="submit" name="action" value="update"/>
4) <input type="submit" name="action" value="edit"/>
5) <input type="submit" name="action" value="delete"/>
6) </form>

In the target, based on submit button value we have to implement corresponding action.

1) choice = req.getParameter("action")
2) if choice=="update":
3) perform update releated action
4) elif choice=="edit":
5) perform edit related action
6) elif choice=="delete":
7) perform delete related action

HTML Validations:
By using HTML, we can perform the following validations
1) required
2) email
3) min and max length

Eg: password should be minimum 5 characters and maximum 10 characters

Eg:
<label for = "password">Password:</label>
<input type = "password" name = "password" id = "password" pattern = ".{5,10}"
placeholder = "your password" required title = "5 to 10 characters">

Pattern for only digits:[0-9]{5,10}


Pattern for only word characters:\w{5,10}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy