How to learn html?
What is HTML?
HTML is the base of any web page. This stands for HyperText Markup Language. This is a markup language. This tag will be shown with < >. If we need to create a web page then we use it.
You can use some following attributes for all elements as class, style, id.
Html structure = heading, paragraph, ul, ol, div, form, table, src, href, span, br, hr, cellpadding, cellspacing, etc.
Below is the example of the basic HTML structure code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a another paragraph.</p>
</body>
</html>
Now you can understand some HTML elements for the beginner's level.
Heading
HTML heading tag is starting from the h1 to h6. H1 tag is the largest size and h6 is the smallest size.
- All heading tag has default margin for margin-top and margin-bottom, margin-left and margin-right value be null. Also,
- All heading be block label container by default.
- All heading have default font-weight bolder. If you require font should not be bold then need to use style or class for the heading need to set margin value zero and font-weight value normal.
- All heading have default font size following below mention:
h1 = 2em(32px)
h2 = 1.5em(24px)
h3 = 1.17em(18.72px)
h4 = 1em(16px)
h5 = 0.83em(13.28px)
h6 = 0.67em(10.72px)
Heading html tag example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph:
The paragraph is the block-level elements it contains images, text, media, form, etc. means need to add any content. Paragraph example is below:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Unordered List (ul)
an unordered list be a bulleted of the content. This is the start from the <ul> tag and then closing tag is </ul>. If we need insert content then mandatory use <li>text </li>.
Unordered list have default small black circle.
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
If you want to change bullet style then need to add css as below: example:
<ul style="list-style-type:square;
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
Ordered List (ol)
An ordered list is the same as the unordered list only difference is that it shows in order like any numbers or alphabet example: a, A, 1, i, etc.
Ordered list have default numbers.
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
Document Divisions
<div>Div means is divisions, but really means it, Document divisions. These is block-level elements. You can use as a container where you can place your all type content.</div>
Form
Basically form have a lot of input fields as. Input, Textarea, fieldset, legend, label etc. But maximum numbers be in the inside of the input type: text, password, email, number, date, time, submit, reset, button, image, color, etc. we use it for the sending data All input fields must be required for the data getting name attribute. Here is some basic example below: -
<form>
<p><input type=”text” placeholder=”Name”></p>
<p><input type=”password” placeholder=”Password”></p>
<p><label>Email Address</label></p>
<p><input type=”email” placeholder=”Email Address”></p>
<p><input type=”submit” value=”Submit”></p>
<p><input type=”reset” value=”Cancel”></p>
</form>
Table
What is an HTML table?
HTML table is begin from the table tag <table> and it's required a closing tag </table>. Before the HTML5 version had not come, we used a table for the web page structure. Everywhere did we use table structure or nested table. when the HTML5 version launched then team decided that we will use of table only for the showing data in tabular format.
Basically we create table structure: first of all we start from the <table> tag and then table Row <tr> this is for the creating a row, after then create table data <td> where we use data: images, text, audio, video, etc.
You can understand from this HTML table structure as below:
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>Sr. Number</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>1</td>
<td>Sheo</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Ragni</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Test Name</td>
<td>Other</td>
</tr>
</table>
Another table structure :
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Test name 1</td>
<td>Address test content 1</td>
</tr>
<tr>
<td>Test name 2</td>
<td>Address test content 2</td>
</tr>
</tbody>
</table>
Another table structure :
<table>
<colgroup>
<col style="background:#0bf">
<col span="2" style="background:#0b6">
<col style="background:#ccc">
</colgroup>
<tr>
<th>Sr. Number</th>
<th>Name</th>
<th>Address</th>
<th>Pin code</th>
</tr>
<tr>
<td>1</td>
<td>Raj</td>
<td>Test address</td>
<td>110023</td>
</tr>
<tr>
<td>2</td>
<td>Kumar</td>
<td>Test address New</td>
<td>110010</td>
</tr>
<tr>
<td>3</td>
<td>Suraj</td>
<td>Test address 2</td>
<td>254879</td>
</tr>
</table>
Src
Src is the source details as we use.
<img src="testimagename.jpg" alt="Test image">
Href
Href is the stand for the “Hypertext Reference”. You can use any URLs like about.html, product.php, services.jsp as you wish.
Span
Span is the inline tag. If we need add any new text with different style then we use as below example:
<div><span>Hello!</span> Sheo <span style=”color:Red”>S</span>
<span>Test</span>
Br
We use br for the line breaking purpose, where we found inline tag. Br tag needs to close self but in the end position.
<br />
HTML <dl> Tag, HTML <dt> Tag
This tag is describe description lists and he has two tag one is the <dt> and another is the <dd>. <dt> tag means title or terms. <dd> tag means Definition Description, as below example:
<dl>
<dt>Green</dt>
<dd>All tree leave have green color</dd>
<dt>Water</dt>
<dd>Water can move to liquid, solid and steem</dd>
<dt>Javascript</dt>
<dd>Javascript have a lot of library as jquery, node.js, angularjs etc</dd>
</dl>
No comments:
Note: Only a member of this blog may post a comment.