Html
Hyper Text Markup language
Html is mainly used for desiging webapges.
collection of webpage creates website.
Now days people are dependent on these websites for their
daily requirements . ex - online shopping of cloths
Groceries , vegitables , and online booking of train
bus and plane tickets etc.
History
It is invented by Tim Burners Lee in 1991.
He was computer scientist . For proper communication
between scientist of all over the world he invented html.
To write html code we need text editors
[Link]
[Link]++
[Link]
[Link] studio
[Link] text editor
html files are saved with extension of [Link] or .htm
To run html files we need webbrowsers.
<html>
<head>
<titel> </title>
</head>
<body>
</body>
</html>
Heading Tags
<h1> </h1> - Max size
<h2> </h2>
<h3> </h3>
<h6> </h6> - Min size
Empty tags
These are tags which does not have closing tag
<br>
<hr>
<img>
<input>
<meta>
<link>
Formatting tags
<b> </b>
<i>
<u>
<sup>
<sub>
<mark>
<strike>
<pre>
Attributes defines characterstics for elements.
<p align="right"> ---------- </p>
<img src="" border="3">
Fonts
<font> </font>
size - 1 - 7
color -red
face -arial
<marquee> -- used to get scrolling effects for text
direction
width
bgcolor
scrollamount
loop
Table
<table>
<tr> - used to create rows
<th> - is used add headings
<td> - is used add column data
attributes for table
border
cellspacing - used to create space between 2 cells
cellpadding - used to create space between content and
borders of the cell
rowspan - to merge rows
colspan - to merge cols
List
It is collection of similer items or data
unordered list <ul> - output is displayed with bullets
type - disc , circle , square
ordered list <ol> - output is displayed with alpha numeric
values
type - 1 , a , A , i , I
Descrption list <dl>
<dt> <dt>
<dd> </dd>
<dl>
Anchor tag is used to convert normal text or image in to
hyper text or hyper link
<a href=""> </a>
href -- hypertext reference
With the help of hyper links we can connect to different
websites and webpages
Another use is to we can connect to emails with help of
hyperlinks.
Images
<img src="">
.jpg
.gif
.png
.webp
Forms
forms acts like a container where different input controls
are placed. It recives data from user and send it to backend
like oracle or mysql.
<form> </form>
Differnt input controls are
[Link] text control
a. single line b. password c. multiple line
[Link] checkbox control
[Link] radio control
[Link] control
[Link] select control
[Link] and reset button control
checkbox allow us to select multiple options
radio button allow us to select single option.
New input types in html 5
date
color
time
number
range
email
url
tel -
pattern=" [0-9] "
pattern="[0-9]{10}"
pattern="[6-9]{1}[0-9]{9}
Vivek Kapashi4:32 PM
I shared a Jam file with the meeting: [Link]
d/13uvZHF3hQnmsc4hab98EiDCGttQaVn5fyK_kiaNb4j0/edit?
usp=meet_whiteboard
New attributes in html 5
readonly
disabled
size
multiple
autofocus
placeholder
required
pattern
Validation
Range
[abc] - we can add characters abc
[^abc]- except abc use other characters
[0-9]- We can add integers between 0 and 9
[a-zA-Z]- both lower case and upper case letters
Quantifiers
Defines repeation of values
[ ] + -- 1 time or more times
[ ] ? -- 0 or 1 time
[ ] * -- 0 or more times
[ ] {n} - n times
[ ] {n,} - n times or more
[ ] {n,m} - between n times and m times
Validation of integers
pattern="[0-9]+ - Numbers between 0 to infinity
pattern="[0-9]? - 0 or 1 time
pattern="[0-9]* - 0 or more time
pattern="[0-9]{2} - 2 digit integers only
pattern="[0-9]{1,2}- we can enter digits from 0 to 99 only
pattern="[0-9]{2,} - we can enter min 2 digit number max -infinity
validation for characters
pattern="[a-zA-Z0-9\s]+"
validation for alph numeric values
pattern="[0-9a-zA-Z\s]+"
Validation for emails
pattern="[a-z0-9_\-]+@[a-z]+[\.][a-z]{2,3}">
validation for url
pattern="[^'\x22]+"
validation for simple password
pattern=".{7}"
validation for complex password
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
<div> element dont have its own attributes .
But we can use style , class , id as attributes with div.
And write style for individul attributes.
<div>
</div>
There are 2 default display values for each element:
block or inline
Block- Always starts from new line and browser will add some
same space before and after element.
ex -
<div>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<nav>
<ol>
<p>
<pre>
<section>
<table>
<ul>
<video>
Inline - Does not start from new line .
They will takes up only space required for them.
ex -
<a>
<b>
<br>
<i>
<img>
<input>
<span>
Multimedia files
<video>
Formats -mp4
-mov
-avi
-mpeg
-mkv
<audio>
Formats -
- mp3
- wav
validation using pattern
* 0 or more times
+ 1 or more times
? 0 or 1 time
^ matches the start of the string or line
$ matches the end of the string or line
\ signifies an escape sequence
. matches any single character except newline
( ) capturing group. Save to reuse later
| used as a logic OR inside a capturing group
[abc] character set. or range
[^abc] Matches anything except...
quantifiers
These comes after character set or range
[a-z]+ - repeat letters one or more times
[a-z]{3} - repeat letters 3 times
[a-z]{2,} - repeat letters 2 or more times
[a-z]{2,5} - repeat letters between 2 and 5 times
Meta characters
\s any whitespace character
\d any digit. Same as [0-9]
\D any NON digit
\w any word character. Same as [a-zA-Z0-9_]
\W any NON word character. Same as [^a-za-z0-9_]
IND
PAK
AUS
<input type="text" name="t1" >