HTML (Hypertext Markup Language)
History
- HTML 1.0 - first version of HTML
- HTML 2.0 - RFC 1866
- HTML 3.0 - W3C Recommendation
- 3.2
- 4.0
- 4.01 - W3C Recommendation (December 24 1999)
- XHTML Extensible HTML - reformulation of HTML in XML (2000)
- strict
- transitional
- frameset
- Web Hypertext Technology Group (WHATWG) - Ian Hickson (2005-2006)
- HTML 5.0 (2014) - supports HTML flexible syntax and XHTML strict syntax
- HTML 5.1 (2016)
Head
- title - Defines the title of the document.
- base - Used to know or specify the URL or URI of the webpage.
- link - Used to redirect the user to another link.
- meta - Used to specify a webpage description.
- style - Used for the design of the webpage.
- script - Used to define client-side scripting.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 </title>
<meta name="description" content="The HTML5 head element code">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="css/styles.css">
</head>
</html>
Body
- Grouping element (div, span)
- Headings (h1 – h6)
- Paragraphs, line breaks, horizontal rules (p , br , hr)
- Lists (ul, ol, li, dl, dt, dd, dir, menu)
- Tables (table, th, tr, td, thead, tfoot, tbody, colgroup, col)
- Structured text
- Phrase elements (em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)
- Quotations (blockquote, q)
- Subscripts and superscripts (sub, sup)
- Preformatted texts (pre)
- Font styles and alignments (tt, i, b, big, small, strike, s, u, font, basefont, center)
- Document changes (ins, del)
- Links and anchors (a)
- Objects, images, applets (object, img, param, applet)
- Scripts (script, noscript)
- Miscellaneous (address, bdo)
- Frames, noframes, iframe
- Frameset (for frameset DTD)
<html>
<body>
<h3> Use of a Tag</h3>
<a href="https://webtek.com">Webtech</a>
<p>This is a Sample code</p>
<div class="container">
<h3>Use of p, ul, li, h1-h6 Tag</h3>
<ul>
<li><h1>Header1</h1></li>
<li><h2>Header2</h2></li>
<li><h3>Header3</h3></li>
<li><h4>Header4</h4></li>
<li><h5>Header5</h5></li>
<li><h6>Header6</h6></li>
</ul>
<h3>Use of ol, li, hr Tag</h3>
<ol>
<li>H</li>
<li>I</li>
</ol>
<hr>
<h3>Use of dl, dt, dd Tag</h3>
<dl>
<dt>H</dt>
<dd>I</dd>
</dl>
<hr>
<h3>Use of table, tr, th, td Tag</h3>
<table>
<tr>
<th>Sample1</th>
<th>Sample2</th>
<th>Sample3</th>
</tr>
<tr>
<td>Black</td>
<td>Red</td>
<td>Green</td>
</tr>
</table>
<hr>
<h3>Use of thead, tbody and tfoot Tag</h3>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Hello</td>
<td>Hi</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hi</td>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
<td>HI</td>
</tr>
</tbody>
</table>
<hr>
<h3>Use of em, strong, dfn, code, samp, kbd, cite, acronym Tag</h3>
<p>it should be <em>emphasized</em>.</p>
<p>We are <strong>strong</strong>.</p>
<p>I need a <dfn>Definition</dfn>.</p>
<p>Program <code>code</code>.</p>
<p><samp>Sample</samp> code.</p>
<p>Hi <kbd>This is inside kbd element</kbd>.</p>
<p>This is a quote <cite>Don't cry because it's over, smile because it happened.</cite></p>
<p>Creating a webpage using <accronym>html </accronym>is great.</p>
<hr>
<h3>Use of sub and sup Tag</h3>
<p>This is a <sub>subscript</sub>.</p>
<p>This is a <sup>superscript</sup>.</p>
<hr>
<h3>Use of pre Tag</h3>
<pre>She loves me
She loves me not
She loves me
She loves me not
</pre>
<hr>
<h3>Use of i, b, u, small Tag</h3>
<p> He is good at <i>programming</i></p>
<p> This is a <b>bold</b> text.</p>
<p> This is a <u>sentence</u></p>
<p> This is a <small>small</small> text. </p>
<hr>
<h3>Use of ins, del Tag</h3>
<p> I like to <ins>become</ins> a <del>professional</del> programmer</p>
<hr>
<h3>Use of object, img Tag</h3>
<object width="520" height="520" data="object.swf"></object>
<img src="web.png" alt="page" height="30" width="30">
<hr>
<h3>Use of script, noscript</h3>
<script>
document.getElementById("sample").innerHTML = "Sample!";
</script>
<noscript>The browser you use not support JS</noscript>
<hr>
<h3>Use of bdo</h3>
<p><bdo dir="rtl">HELLOWORLD.</bdo></p>
</div>
</body>
</html>
XHTML (Extensible Hypertext Markup Language)
Versions
- XHTML 1.0 - W3C Recommendation and first version of XHTML
- XHTML 1.1 - W3C Recommendation
- XHTML 1.2
- XHTML 2.0
- XHTML 5 - Current version of XHTML
Document Component of XHTML
- Document Type Declaration(DOCTYPES)
- HTML 4.01 Doctypes
- XHTML 1.0 Doctypes
- Elements - units for document structure
- Tags
- Content
- Attribute - element parameter delcared document type definition
- Character Entity References
XHTML Elements
- Block-level and inline elements
Some XHTML rules to consider
- Document Structure
- requires XHTML DOCTYPE
- requires xmlns attribute in <html>
- requires <html>, <head>, <title>, and <body> that are necessarilly closed
- Elements
- must be nested properly
- must be closed always
- must be in lowercase
- must have one root element
- Attributes
- names are required to be in lowercase
- values are required to be enclosed in quotation marks
- minimization is not allowed
HTML/XHTML Style Sheets
Author Styles
- External style sheets
- Embedded styles
- Inline styles