HTML
What is HTML?
History:
● Founder of HTML: Tim Berners Lee
● The First available description of HTML was a document called HTML tags. Its
proposed by 1991.
● Current latest version is HTML5
Versions:
● HTML1.0
● HTML2.0
● HTML3.2
● HTML4.01
● HTML5
HTML:
● Hypertext Markup Language
● It is used to developing (build) the structure of webpage
● File extensions: .html/.htm
● HTML files can be created by using simple text editors
HTML HTML5
1. Audio & Video are not supported by 1. Audio & Video are the parts of
HTML4. HTML5.
2. It is not possible to create shapes. 2. We can create shapes.
3. It uses cookies to store data. 3. It uses local storage instead of
cookies.
4. It does not allow drag and drop 4. It allows a drag and drop effect.
effect.
5. It is less mobile friendly. 5. It is more mobile friendly.
6. It does not allow JS to run in 6. It allows JS to run in browser.
browser.
7. <html>, <body>, <head> tags are 7. These tags can be emitted while
mandatory while writing a code. writing HTML code.
8. Doctype Declaration is too long + 8. Doctype Declaration is quite simple
complicated. + easy.
9. Elements like Nav, header, 9. All elements are visible.
10.
Tags → “<>” anything
HTML
Element: Opening and Closing bracket along with content.
Subtypes of element:
1. Inline level: Only occupied specific content width.
2. Inline-block level: You can modify.
3. Block-level: Occupies entire browser width.
Attribute: Additional information about the tag
Eg: <p class=”p1”></p>
id , name, class, style
Anchor tag: Links the webpages.
Hyperlinks:
It is used to join multiple webpages.
To provide hyperlinks in web pages we have to use anchor tag <a></a>
< a href =”address” target=””>link</a>
Hyperlink reference: It is used to provide link of webpage which you want to join.
Target:
List: HTML lists are used to list out items on web-page
There are two types: Ordered list
Unordered list
1. Order list: It is use to provide ordered items.
To provide the ordered list we use <ol> tag.
To list out items we have to <li> tag.
<ol type=”1.”>
<li>Soft drink</li>
<li>Cold drink</li>
<li>Hard drink</li>
</ol>
2. Unordered List: Unorder way of list. It is used to provide list out the items
Types: Square, circle, none.
E.g.:
<ul type="square">
<li>Burger</li>
<li>Pizza</li>
<li>Pasta</li>
</ul>
3. Other List:
Also known as Descriptive list
It is used to list our items with description <dl>
Eg:
Java
- Backend language
HTML
HTML
- Frontend
<table>:
● Combination of rows and columns
● It represents data in the form of table
● It consist of rows and columns
● To provide table in web-page we have to use <table> tag
● Each row of table tag is represented by using <tr>
● Whereas each column is represented by using <td>
● Table contains heading which is represented as <th>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
Cell Padding: Distance between cell edge(border) and content known as a Padding.
Cell Spacing: Distance between two cells known as a Spacing.
Spanning: Merging Together
There are 2 types:
1. Rowspan: Two rows you can merge.
rowspan=“ ”
2. Colspan: Two columns can be merge
colspan=“ ”
Nested table: Table inside another table.
Block-Level Inline-Level
Occupied entire browser width. Occupied only specific content width.
You can modify using height and width. You can’t modify inline level element.
E.g.: All heading, div, para. E.g.: Span.
<div> <span>
Block level element. Inline level element.
One type of container to store the One type of contain to store the information.
information.
You can modify. You can’t modify because inline level
element.
HTML
Validation Attributes:
1. Accept
2. Max
3. Min
4. Placeholder
5. Required
6. Readonly
7. Disabled
8. Multiple
9. Size
10. Autofocus
11. Maxlength
12. minlength
13. Autocomplete
HTML Layout & Semantics:
Semantic elements: Clearly describes its meaning to both the browser the developer
Eg: form, header,navbar.
Non-semantic: div, span
HTML
SVG:
● Support Vector Graphics
● Its is used to define vector based graphics for the web in xml format
● Predefined shapes: Circle, Ellipse, Polyline, Polygon, Path, Rectangle, Line
Advantages of SVG:
1. Created and Edited with any text editor
2. Searched, indexed, scripted, compressed
3. SVG images are scalable.
4. SVG images can be printed with high quality at any resolution it is zoomable.
5. SVG graphics do not lose any quality if they are zoom or resized.
1. Circle
Attributes:
● Radius of the circle(r)
● Centre point of the circle(x,y)
● Fill: to color
● Stroke: outline of the circle/ tomake strong outline stroke-width:””
2. Rectangle:
Attributes:
● Width: Width of the rectangle.
● Height: Height of the rectangle.
● X: Left position of the rectangle.
● Y: Top position of the rectangle.
● Rx,ry: Rounds of the rectangle.
3. Line:
Attributes:
● x1,y1: 1st coordinate.
● X2,y2: 2nd coordinate.
4. Polygon:
● It should have atleast 3 sides.
● They are made of straight lines and shape is “closed”.all lines are connected
● Attribute: x,y coordinate for each other.
5. Polyline:
Attribute: points
6. Path:
Attribute: x,y coordinate
M= move to
L= line to
H= Horizontal line
V= vertical line
C= curve
S= smooth curve to
Q= quadratic bezier curve
HTML
T= smooth quadratic bezeir curve.
A= elliptical arc.
Z= classpath
7. Text:
Attribute: x,y coordinate