• HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of Web pages using markup
  • To be a Web Developer HTML learning is a must
  • HTML elements are represented by tags
  • Browsers do not display the HTML tags, but use them to render the content of the page

HTML Elements, Tags & Attribute

<!DOCTYPE html>
<html>
<head>
<!--- JS/CSS file will be added here -->
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading.</h1>
<p>This is a Paragraph.</p>
<p style="color:red;">Paragraph with Style Attribute</p>
</body>
</html>

This is a Heading.

This is a Paragraph.

Paragraph with Style Attribute

  • <!DOCTYPE html> declaration defines this document to be HTML5
  • <html> element is the root element of an HTML page
  • <head> element contains meta information about the document
  • Comments are not displayed in the browser
  • <title> element specifies a title for the document
  • <body> element contains the visible page content
  • <h1> element defines a large heading
  • <p> element defines a paragraph
  • An HTML element usually consists of a start tag and end tag.
  • All HTML elements can have attributes.
  • Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs like: name=”value”.
  • Style is an attribute and color is the property and red is its value.

Links & Images

<a href="#">Link</a>
<a href="#" rel="nofollow">Nofollow Link</a>
<a href="#" hreflang="en">Language</a>
<a href="#" type="text/html">Type</a>
<a href="mailto:webmaster@example.com">Email Link</a>.
<a href="#" target="_blank">New Window Link</a>
<!-- target="_blank|_self|_parent|_top|framename" -->
<a href="#" download="filename">Download</a>
<link rel="stylesheet" type="text/css" href="theme.css">
<img src="image.jpg" alt="" height="" width=""/>
<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#/">JavaScript</a> |
  <a href="#">jQuery</a>
</nav>

Audio

<audio controls autoplay>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
</audio>
<audio controls loop>
<audio controls muted>
<audio controls preload="none">
<audio src="song.ogg" controls>

Video

<video controls width="" height="" poster="poster.jpg">
<source src="Movie.webm"/>
<source src="Movie.mp4"/>
<track src="" kind="subtitles" srclang="en" label="English" default>
<track src="" kind="subtitles" srclang="no" label="Norwegian">
</video>

IFrame

<iframe src="/portfolio" width="515" height="400">
<p>Your browser does not support iframes.</p>
</iframe>

Formatting

<!-- Abbreviation --> 
<abbr title="World Health Organization">WHO</abbr>
WHO
<!-- Address --> 
<address>
Abdullah Al Mamun<br> 
Mirpur 6, Dhaka, Bangladesh<br> 
<a href="mailto:info@workratio.com">Email Me</a><br> 
</address>
Abdullah Al Mamun
Mirpur 6, Dhaka, Bangladesh
Email Me
<p><b>Blod Text</b></p><br>
<p><i>Italic Text</i></p><br>
<p><code>Code Text</code></p><br>
<em>Emphasized text</em><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var><br>
<p>This is a <mark>Mark</mark></p><br>
<p>Why Need <q>HTML</q>?</p><br>
<p><s>My car is blue.</s></p><br>
<strong>Strong text</strong><br>
<p>Everyday<time>06:00</time>AM</p><br>
<p>This is a <u>parragraph</u>.</p>

Blod Text

Italic Text

Code Text

Emphasized text
Sample output from a computer program
Keyboard input
Variable

This is a Mark

Why Need HTML?

My car is blue.

Strong text

EverydayAM

This is a parragraph.

<pre>
Abdulah Al Mamun
  workratio.com
  Mirpur 6, Dhaka, BD
</pre>
Abdulah Al Mamun
  workratio.com
  Mirpur 6, Dhaka, BD
<!-- bdi -->
<ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
<hr>
<!-- bdo -->
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

This text will go right-to-left.
<blockquote cite="#">
Work Ratio is my self skill management website.
</blockquote>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p><dfn>HTML</dfn> is the standard markup language</p>
Work Ratio is my self skill management website.
<p>Design score:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
</p>
<p>Development score: 
<meter min="0" low="40" high="90" max="100" value="65"></meter>
</p>
<p>Marketing score: 
<meter min="0" low="40" high="90" max="100" value="35"></meter>
</p>

Design score:

Development score:

Marketing score:

<progress value="22" max="100"></progress>
<p>2<sup>3</sup> = 8</p>
<p>H<sub>2</sub>0 - Water</p>
<p>This text is <del>scratched</del> out!</p>
<p contenteditable="true">contenteditable</p>
<p><del datetime="">This text has been deleted</del></p>
<details close>
<summary>Copyright 1999-2014.</summary>
<p> - Abdullah Al Mamun</p>
<p>www.workratio.com</p>
</details>

23 = 8

H20 - Water

This text is scratched out!

contenteditable

This text has been deleted

Copyright 1999-2014.

- Abdullah Al Mamun

www.workratio.com

<dialog open>This is an open dialog window</dialog>
This is an open dialog window

List

<p>Unordered List</p>
<ul>
<li>BUET</li>
<li>KUET</li>
<li>RUET</li>
<li>CUET</li>
</ul>
<p>Ordered List</p>
<ol>
<li>BUET</li>
<li>KUET</li>
<li>RUET</li>
<li>CUET</li>
</ol>
<p>Ordered List with a number</p>
<ol start="10">
<li>BUET</li>
<li>KUET</li>
<li>RUET</li>
<li>CUET</li>
</ol>
<p>Ordered List with exact number</p>
<ol>
<li value="5">BUET</li>
<li value="10">KUET</li>
<li value="15">RUET</li>
<li value="20">CUET</li>
</ol>
<p>Description list</p>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Unordered List

  • BUET
  • KUET
  • RUET
  • CUET

Ordered List

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Ordered List with a number

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Ordered List with exact number

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Description list

Coffee
Black hot drink
Milk
White cold drink

Table

<table class="expand" width="100%">
<caption>Domain Registration</caption>
<thead>
<tr>
<th>TLD</th>
<th>Basic Reseller</th>
<th>Pro Reseller</th>
</thead>
<tbody>
<tr>
<td>.com</td>
<td>$9.59</td>
<td>$8.29</td>
</tr>
<tr>
<td>.net</td>
<td>$10.99</td>
<td>$9.99</td>
</tr>
<tr>
<td>.org</td>
<td>$10.99</td>
<td>$9.99</td>
</tr>
<tr>
<td>.ca</td>
<td>$9.79</td>
<td>$8.49</td>
</tr>
<tr>
<td>.us</td>
<td>$7.99</td>
<td>$7.29</td>
</tr>
<tr>
<td>.uk</td>
<td>$7.99</td>
<td>$7.49</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
If you want to know the other extension pricing please visit
<a href="#">GoDaddy Buy rates</a>
</td>
</tr>
</tfoot>
</table>
Domain Registration
TLD Basic Reseller Pro Reseller
.com $9.59 $8.29
.net $10.99 $9.99
.org $10.99 $9.99
.ca $9.79 $8.49
.us $7.99 $7.29
.uk $7.99 $7.49
If you want to know the other extension pricing please visit GoDaddy Buy rates

Forms

<form action="/page.php" method="POST">
<label>Your name:</label><br>
<input type="text" value="Type" size="30" maxlength="10" />
<label>Your email:</label><br />
<input type="text" name="email" placeholder="Type" size="30" />
<label>Your message:</label>
<textarea name="message" rows="7" cols="30"></textarea>
<input type="file" name="pic" accept="image/*" multiple>
<input type="submit" value="Send email" />
</form>







<input type="checkbox" name="service" value="">Domain<br>
<input type="checkbox" name="service" value="" checked>Hosting<br>
Domain
Hosting
<input type="radio" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" value="female">
<label for="female">Female</label><br>


<form action="/page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

Entity

&reg; &trade; &dollar; &lt; &gt;
© ® ™ $ < >