HTML Basic
HTML Basic
HTML Documents
All HTML Documents should start with a document declaration: <!DOCTYPE html>
The HTML file automatically starts with <html> and </html>.
HTML Headings
HTML Headings aredeined from <h1> to <h6>.
<h1> denotes as the main important heading.
<h6> denotes as the smallest or least heading.
HTML Paragraph
<p> tag defined as paragraph in HTML.
HTML line break
<br> this tag is used to break a line without starting a new paragraph.
HTML Links
<a> is defined the HTML links.
In href the link address is contented.
<a href="https://www.Khanacademy.com">This is a link</a>
HTML Image
<img> tag is defined for HTML images.
src is the image source in which the filename specified.
alt is defined for alternative text.
<img src="Khanacademy" alt="khanacademy.com" width="104" height="142
">
HTML Buttons
<button> tag is defines as HTML button.
<button>LOG IN</button>
HTML Lists
<ul> (unordered list) or <ol> (ordered list)tags are defined as HTML lists.
<h2>Unordered list</h2>
<ul>
<li>tiger</li.
<li>Lion</li>
<li>bear</li>
</ul>
<h2> Ordered List</h2>
<ol>
<li>tiger</li>
<li>lion</li>
<li>bear</li>
</ol>
HTML Style
background color
background-color attribute defines the background color of the html element.
<body style="background-color:powderblue;">
Text color
The color of the html element is defined by a property color .
<h1 style="color:blue;">Beautiful Flowers</h1>
<p style="color:red;">Flowers are wonderful nature.</p>
<p style="color:red;">Flowers are wonderful nature.</p>
Fonts
font-family is used to decide the font that can be included in html element.
<h1 style="font-family:verdana;">Beautiful Flowers</h1>
<p style="font-family:courier;">Flowers are wonderful nature.</p>
Text size
font-size element is used to define the text size of the html element.
<h1 style="font-size:300%;">Beautiful Flowers</h1>
<p style="font-size:160%;">Flowers are wonderful nature.</p>
Text Alignment
text-alignment defines the text alignment of the html element.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
<b> - bold text
<em> - emphasized text
<i> - italic text
<small> - small text
<strong> - important text
<sub> - sub scripted text
<sup> - super-scripted text
<ins> - inserted text
<del> - deleted text
<mark> - highlighted text
HTML Colors
HTML Colors are predined and specified by color names or RGB, HEX, HSL, RGBA, HSLA values.
140 standard colors are supported in HTML.
Border color
<h1 style="border:2px solid Tomato;">Welcome World</h1>
<h1 style="border:2px solid DodgerBlue;">Welcome World</h1>
<h1 style="border:2px solid DodgerBlue;">Welcome World</h1>
<h1 style="border:2px solid Violet;">Welcome World</h1>
Color value
RGB Value
RGB defines as red, green, blue and shows out the intensity of the color 0 to 225.
HEX Value
#rrggbb
rr(red), gg(green), bb(blue) are hexadecimal value betwwen 00 to ff.
HSL Value
HSL(hue, saturation, lightness)
hue is degree of color, saturation the percentage value, light is also percentage
Hue
Saturation
Lightness
RGBA Value
RGBA(red, green, blue, alpha)
They are extension of RGB color value.
HSLA Value
HSLA(hue, saturation, lightness, alpha)
They are extension of HSL color value.
HTML Table
<table> tag defines the HTML table.
<tr> defines as table row.
<th> defines as table header.
<td> defines as table data.
<table style="width:100%">
<tr>
<th>FirstName</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Vinoliya</td>
<td>Kavignan</td>
<td>21</td>
</tr>
<tr>
<td>Sriskantharaja</td>
<td>Mithushan</td>
<td>22</td>
</tr>
</table>
<tr>
<th>FirstName</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Vinoliya</td>
<td>Kavignan</td>
<td>21</td>
</tr>
<tr>
<td>Sriskantharaja</td>
<td>Mithushan</td>
<td>22</td>
</tr>
</table>
Colspan attribute defines how many columns you wanted to insert in the table.
Rowspan attribute defines how many rows you wanted to insert in the table.
<caption> tag defines the caption you wanted to add in the table.
<id> tag contributes the special style for a special table.
HTML Forms
<form> element defines the form that the collect data input.
<input> element is important element in a form.
<input type="text" - one line text input
<input type="radio" - radio button
<input type="submit" - submit button
No comments