Skip to main content

HTML-1

<!doctype html>
<html>
<head>
<title>
md-manir-hossain
</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tfLCZS5k870?list=PLP2Oqg5TBlcpe7AuagUGHItMrPN4LxhuE" frameborder="0" allowfullscreen align="right"></iframe>
<h1> Learn HTML with Manir </h1>
<h2> Basic of HTML </h2>
<p id="top">html stands for Hyper Text Markup Language.</p>
<p>All HTML documents must start with a document type declaration: <strong>&lt;!DOCTYPEhtml&gt;</strong>.</p>
<p>The HTML document itself begins with <strong>&lt;html&gt;</strong> and ends with <strong> &lt;/html&gt; </strong> </p>
<p>The visible part of the HTML document is between <strong>&lt;body&gt;</strong> and <strong>&lt;/body&gt;</strong> </p>
Header can be minimum h6
<p> For line break in the paragraph, use <strong>&lt;br&gt;</strong> tag <br> it is called line break </p>
<p> For line break in the paragraph, use <strong>&lt;br&gt;</strong> tag <br /> it is called line break </p>
<p> to bold a word use <strong>&lt;b&gt;</strong> tag or strong tag: <b> bold </b> or <strong> strong </strong></p>
<p> The horizontal tag <strong>&lt;hr&gt;</strong> is as follows: this is self closing tag, does not have any closing tag </p>
<p> italic tag <strong>&lt;i&gt;</strong>: <i> italic</i> or <em> italic </em></p>
<p> underline tag<strong>&lt;u&gt;</strong>: <u>underline</u> or <ins>underline</ins></p>
<p> superscript tag<strong>&lt;sup&gt;</strong>: <sup>supercript</sup></p>
<p> subcript tag <strong>&lt;sub&gt;</strong>: <sub> subcript </sub></p>
<p>deleted tag <strong>&lt;del&gt;</strong>: <del>deleted </del> or <strike> deleted</strike></p>
<hr>
<h2>Unordered and ordered list </h2>
<p>for unordered list use <strong>&lt;ul&gt;</strong> tag and for list item use <strong>&lt;li&gt;</strong> tag
</p>
<ul>
<li><b>Manir</b></li>
<li><em> Nur</em></li>
<li> <del>Aslam</del> </li>
<li><ins>Liton</ins></li>
<li><i>Nasreen</i></li>
</ul>
<p>For ordered list, use <strong>&lt;ol&gt;</strong> tag: </p>

<ol>
<li><b>Manir</b></li>
<li><em> Nur</em></li>
<li> <del>Aslam</del> </li>
<li><ins>Liton</ins></li>
<li><i>Nasreen</i></li>
</ol>
<p>To set start value in ordered list use tag <strong>&lt;ol start=10&gt;</strong>: </p>
<ol start=10>
<li><b>Manir</b></li>
<li><em> Nur</em></li>
<li> <del>Aslam</del> </li>
<li><ins>Liton</ins></li>
<li><i>Nasreen</i></li>
</ol>
<p>for reverse order use <strong>&lt;reversed&gt;</strong>tag: </p>

<ol reversed>
<li><b>Manir</b></li>
<li><em> Nur</em></li>
<li> <del>Aslam</del> </li>
<li><ins>Liton</ins></li>
<li><i>Nasreen</i></li>
</ol>
<p>for type of order use tag <strong>&lt;ol=type="a"&gt;</strong>: </p>

<ol type=>
<li><b>Manir</b></li>
<li><em> Nur</em></li>
<li> <del>Aslam</del> </li>
<li><ins>Liton</ins></li>
<li><i>Nasreen</i></li>
</ol>
<hr>
<h2> Image adding</h2>
<p> To add image, use the tag <strong>&lt;img src="filename.png width="number" height="number" align="left or right"&gt;</strong>. <strong>&lt;img&gt;</strong> is self ending tag.</p>
<img src="homer.png">
<p>Homer Simpson</p>
<p>To customise the image, use width, height, left, right or link of the image as follows: </p>
<img src="homer.png" width="100" height="100" align="right">
<p>Homer Simpson</p>
<hr>
<h2> Use of form</h2>
<p id="forms">Use of forms:</p>
Use <strong>&lt;form&gt;</strong> tag, inside this tag use <strong>&lt;input&gt;</strong>, imput is self closing tag.
<form>
Username: <input>
</form>
For different typeof imput form, use <strong>&lt;input=type"text" or "checkbox" or "email"&gt;</strong>
<form>
<p>Username: <input type="text"> </p>
<p>Checkbox: <input type="checkbox"> </p>
<p>Button: <input type="button"> </p>
<p>Color: <input type="color"> </p>
<p>Date: <input type="date"> </p>
<p>Datetime: <input type="datetime"></p>
<p>Datetime-local:<input type="datetime-local"></p>
<p>Email:<input type="email"></p>
<p>Under 18: <input type="radio"></p>
<p>Over 18: <input type="rario"></p>
<p> To connect two radio type give a name as follows: <strong>&lt;inout type="radio" name="age"&gt;</strong> tag</p>
<p>Under 18: <input type="radio" name="age"></p>
<p>Over 18: <input type="radio" name="age"></p>
<p>Use of <strong>&lt;select&gt;</strong> tag:</p>
<p>Favourite food:
<select>
<option>Pizza</option>
<option>Ice Cream</option>
<option>Sandwiches</option>
</select>
</p>
<p><input type="submit"></p>
</form>

<hr>
<h2> Use of table:</h2>
<p> use table tag:<strong>&lt;table&gt;</strong>, <br>
table row tag: <strong>&lt;tr&gt;</strong>, <br>
table data tag: <strong>&lt;td&gt;</strong>,
table head tag: <strong>&lt;thead&gt;</strong>
table heading section tag: <strong>&lt;th&gt;</strong>
table body tag: <strong>&lt;tbody&gt;</strong> tag
</p>

<table>
<thead>
<tr>
<th> Name </th>
<th> Favourite <br> Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manir</td>
<td>Green</td>
</tr>
<tr>
<td>Ruhin</td>
<td>Red</td>
</tr>
<tr>

<td>Sohel</td>
<td>White</td>

</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Md Manir</td>
<td>Hossain</td>
</tr>
</tbody>
</table>

<hr>
<h2>How to add links</h2>
<p>There are three types of links namely: </p>
<ol>
<li>Absolute link</li>
<li> Relative link and </li>
<li>Anchorlink</li>
</ol>
<p>For hyper link reference (absolute link): use link tag:<strong>&lt;a href=&gt;</strong>,</p>
<p> <a href="http://www.google.com">Click here to go to google.com</a>
</p>
<p>use image as a link: use img tag</p>
<p> <a href="http://www.wikipedia.org"><img src="homer.png"></a> </p>
<p>Link from your folder page (relative link):</p>
<p> <a href="1-helloworld.html">Hello world</a> </p>
<p> Link within the same page:</p>
<p> use "id=top" in your first paragraph, then use "#top" as a link in your last paragraph. </p>
<p> <a href="#top">Back to the top</a> </p>
<p> back to any paragraph (Anchor link):</p>
<p> <a href="#forms">Back to the forms</a> </p>
<hr>

<h2> HTML entities: to use characters and symbles </h2>
&lt;a href="https://www.w3schools.com/html/html_entities.asp"&gt;
<p> <a href="https://www.w3schools.com/html/html_entities.asp">w3schools</a> </p>
<p><a href="https://dev.w3.org/html5/html-author/charref">List of symbles</a></p>
<h2> Use of iframes </h2>
<p> To show another website in your page</p>
<p> use tag: &lt;<strong>iframe src="link"</strong>&gt;</p>
<iframe width="560" height="315" src="http://www.ecowebhosting.co.uk"></iframe>
<iframe align="right" width="560" height="315" src="1-helloworld.html"></iframe>
<hr>
<p> Youtube vedio link: </p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/kVbW4156A24?list=PLsv4iUgyA4ioZN4inpZ1qx4UA863o_0zd" frameborder="0" allowfullscreen></iframe>
<hr>
<p> Using link as a form</p>
<form action="https://www.w3schools.com/html/default.asp">
<p>Want to know more?</p>
<p> <input type="submit" value="Click Here"> </p>
</form>
</body>


</html>

Comments

Post a Comment

Popular posts from this blog

About Free Code Camp

Write down everything for future searching. How many hours, roughly, would it take the average person to complete all four certificates for Free Code Camp? **So. my $45,000 offer. Why so low? Why am I excited about it? Well, it's been almost two years for me to get here. **Our best estimate is about 2,000 hours: 1,200 hours to complete the 25 projects + 60 algorithms required to earn all the certificates (all the other coding challenges are optional) 800 hours to contribute the 200 open source pull requests necessary to earn the final Full Stack Development certificate **We have about 3200+ hours of curriculum and that is for someone who is an absolute new comer to programming of any sort. It sure would be shorter for anyone who is refreshing their skills. The new beta curriculum is targeted to be around 6200+ hours in total. You can not put a timeline, to this because at the end of the day the learning curve is different. But just to give you a r...
Post a Comment
Read more