HyperText Markup Language - HTML
- HTML works by surrounding text and graphics content appearing on the page with special codes instructing the browser on how to arrange and display this content.
- Markup codes, also called html tags or elements, are always enclosed inside “<” and “>” symbols to set them apart from the text content to which they apply.
- Normally, an “opening” tag indicates the beginning form of formatting( e.g.
<h2>
) an a separate “closing” tag indicates the ending point of formatting (e.g.</h2>
)
Classes Of HTML Tags
- Document layout tags: These tags are used to structure the html document. They organize the information content on a page so that text and graphical elements appear where you want them to appear. e.g.
<p> <div> <span>
- Text formatting tags: These tags are used to apply font faces, styles and sizes and colors to text appearing on the page. e.g.
<font> <bold> <center>
- List formatting tags: They are used to organize text information into lists. These include bulleted lists, numbers and others. e.g.
<ol> <ul> <li>
- Linking tags: They set up linkages between pages or different sections of the same page. e.g.
<a>
- Table tags: They organize data in a tabular form, into rows and columns, for better presentation, readability and understanding.
- Form tags: They are used to collect information from visitors inoder to capture data for processing or to solicit user preferences about displays.
- Multimedia tags: They are used to link audio, videos, images and other media content on a webpage.
<!DOCTYPE html> <html lang="en"> <head> <title><!-- Page Title --></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="description_content"> <!-- JavaScript and CSS files can be linked here --> </head> <body> <!-- Page Content--> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<title><!-- Page Title --></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="description_content">
<!-- JavaScript and CSS files can be linked here -->
</head>
<body>
<!-- Page Content-->
</body>
</html>
Tag | Description |
---|---|
<!-- -->
|
Defines a comment |
<!DOCTYPE html>
|
Defines a document type |
<a>
|
Defines a hyperlink |
<abbr>
|
Defines an abbreviation |
<address>
|
Defines contact information for the author or owner of a document |
<area>
|
Defines an area inside an image-map |
<article>
|
Defines an article |
<aside>
|
Defines a content aside from page content |
<audio>
|
Defines a sound content |
<b>
|
Defines a bold text |
<base>
|
Specifies the target URL/target for all relative URLs in a document |
<bdi>
|
Isolates a part of text that might be formatted in a different from other text outside it |
<bdo>
|
Overides the current text direction |
<blockquote>
|
Defines a section that is quoted from another source |
<body>
|
Defines the document's body |
<br>
|
Defines a line break |
<button>
|
Defines a clickable button |
<canvas>
|
Used to draw graohics on the fly via scripting(usually javascript) |
<caption>
|
Defines a table caption |
<cite>
|
Defines the title of a work |
<code>
|
Defines a piece of computer code |
<col>
|
Specifies cloumn property for each column within a <colgroup> element |
<colgroup>
|
Specifies a group of one or more columns in a table for formatting |
<datalist>
|
Specifies a list of pre-defined options for input controls |
<dd>
|
Defines a description/value of a term in a description list |
<del>
|
Defines text that has been deleted from a document |
<details>
|
Defines additional details that the user can view or hide |
<dfn>
|
Represents the defining instance of a term |
<dialog>
|
Defines a dialog box or window |
<div>
|
Defines a section in a document |
<dl>
|
Defines a description list |
<dt>
|
Defines a term/name in a description list |
<em>
|
Defines emphasized text |
<embed>
|
Defines a container for an external(non-HTML) application |
<fieldset>
|
groups related elements in a form |
<figcaption>
|
Defines a caption for a <figure> element |
<figure>
|
Specifies self-contained conntent |
<footer>
|
Defines a footer for a document or section |
<form>
|
Defines an HTML form for user input |
<h1 ... h6>
|
Defines HTML headings |
<head>
|
Defines information about the document |
<header>
|
Defines a header for a document or a section |
<hr>
|
Defines a horizontal line - a thematic change in content |
<html>
|
Defines the root of an HTML document |
<i>
|
Defines italicised text |
<iframe>
|
Defines an inline frame |
<img>
|
Defines an image |
<input>
|
Defines an input control |
<ins>
|
Defines a text that has been inserrted into s document |
<kbd>
|
Defines keyboard input |
<keygen>
|
Defines a key-pair generator field (for forms) |
<label>
|
Defines a label for a input field |
<legend>
|
Defines a caption for <fieldset> element |
<li>
|
Defines a list item |
<link>
|
Defines a relationship between a document and anexternal resource |
<main>
|
Specifies the main content of a document |
<map>
|
Defines a client-side image map |
<mark>
|
Defines highlighted text |
<menu>
|
Defines a list of menu/commands |
<menuitem>
|
Defines a command that a user can invoke in a popup menu |
<meta>
|
Defines metadata about an HTML document |
<meter>
|
Defines a scalar measurement within a known range |
<nav>
|
Defines navigation links |
<noscript>
|
defines an alternate content for users that do not support client-side scripts |
<object>
|
Defines an embedded object |
<ol>
|
Defines an ordered list |
<optgroup>
|
Defines a group of related options in a dropdown list |
<option>
|
Defines an option in a dropdown list |
<output>
|
Defines the result of a calculation |
<p>
|
Defines a paragraph |
<param>
|
Defines a parameter for an object |
<picture>
|
Defines a container for multiple image resources |
<pre>
|
Defines pre-formatted text |
<progress>
|
Represents the progress of a task |
<q>
|
Defines a short quotation |
<rp>
|
Defines what to show in browsers tha do not support ruby annotations |
<samp>
|
Defines a sample output from a computer program |
<script>
|
Defines a client-side script |
<section>
|
Defines a section in a document |
<select>
|
Defines a dropdown list |
<small>
|
Defines a smaller text |
<source>
|
Defines multiple media sources for media elements (<audio> & <video>) |
<span>
|
Defines a section in a document |
<strong>
|
Defines important text |
<sub>
|
Defines a subscripted text |
<summary>
|
Defines a visible heading for <details> element |
<sup>
|
Defines a superscripted text |
<svg>
|
defines a container for SVG graphics |
<table>
|
Defines a table |
<tbody>
|
Groups the body content in a table |
<td>
|
Defines a cell in a table |
<textarea>
|
Defines a multiline text input control |
<tfoot>
|
Groups the footer content in a table |
<th>
|
Defines a header cell in a table |
<thead>
|
Groups the header content in a table |
<time>
|
Deines date/time |
<title>
|
Defines a title for the document |
<tr>
|
Defines a row in a table |
<track>
|
Defines text tracks for madia elements (<audio> & <video>) |
<u>
|
Underlines text |
<ul>
|
Defines an unordered list |
<var>
|
Defines a variable |
<video>
|
Defines a video content |
<wbr>
|
Defines a possible line break |
Input Types
color | tel |
date | name |
datetime | time |
datetime-local | text |
password | |
url | radio |
week | checkbox |
month | submit |
number | range |
search | radio |
submit | checkbox |
Input Attributes
form | list |
max | min |
formaction | multiple |
formenctype | placeholder |
formnovalidate | required |
formtarget | step |
height | width |
autofocus | pattern |
Common Special Characters
Code | Display(output) |
---|---|
& & | Ampersand(&) |
> > | Greater than(>) |
< < | Less than(<) |
" " | Quotation marks("") |
© © | Copyright |
® ® | Registered |
™ ™ | Trademark |
  | Non-breaking space |
GET & POST
Code Sample:
<form action = "" method = "GET" or "POST">
<form action = "" method = "GET" or "POST">
GET:
The form data will be visisble in the page address.
POST:
Offers better security because submitted data is not visisble in the page address.
The <iframe>
element
It as src
and name
attributes. The src attribute can be set to a url you want to embed into your page. E.g.
<iframe sandbox src="http://somedomain.net/content"></iframe>
<iframe sandbox src="http://somedomain.net/content"></iframe>
To override restrictions, use the following values:
- allow-forms - Enables forms.
- allow-same-origin - Allows the content to be treated as being from the same origin.
- allow-scripts - Enables scripts except popups.
- allow-top-navigation - Allows content to navigate it's top-level browing content.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://somedomain.net/content"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://somedomain.net/content"></iframe>
The iframe tag has a seamless
attribute that indicates that the source content is to appear as though its part of the containing document. How to enable seamless:
<iframe seamless="seamless"> <iframe seamless=""> <iframe seamless>
<iframe seamless="seamless">
<iframe seamless="">
<iframe seamless>
Internal Links
If the link is internal, the href
will contain the hash(#) symbol followed by the id of the tag that you want to jump to. If you use only the hash(#) symbol, clicking the link will take you to the top of the HTML document. E.g.
<a href="#">Top</a> <a href="#bill_address">Go to BIlling Address</a>
<a href="#">Top</a>
<a href="#bill_address">Go to BIlling Address</a>
Sending E-mail With Hyperlinks
You can use mailto
protocol to send e-mail messages. The mailto
url accepts the following parameters: subject, cc, bcc and body. The parameters can be added in any order by adding a question mark(?) after the email address and separating the parameters with the ampersand(&).
Code Sample:
<!-- basic mailto --> <a href="mailto:sales@gmail.com">Contact Sales</a> <!-- add name, (email is wrapped with < and >:) --> <a href="mailto:Joe<sales@gmail.com>">Contact Joe in Sales</a> <!-- multiple receipients are separated by a comma --> <!-- Add carbon copy, same for bcc --> <a href="mailto:sales@gmail.com,services@gmail.com">Contact Sales</a> <!-- Adding basic mailto with message --> <a href="mailto:sales@gmail.com?body=Call me">Contact Sales</a>
<!-- basic mailto -->
<a href="mailto:sales@gmail.com">Contact Sales</a>
<!-- add name, (email is wrapped with < and >:) -->
<a href="mailto:Joe<sales@gmail.com>">Contact Joe in Sales</a>
<!-- multiple receipients are separated by a comma -->
<!-- Add carbon copy, same for bcc -->
<a href="mailto:sales@gmail.com,services@gmail.com">Contact Sales</a>
<!-- Adding basic mailto with message -->
<a href="mailto:sales@gmail.com?body=Call me">Contact Sales</a>
List Types
- Ordered lists: 1,2,3 | A,B,C | a,b,c | i,ii,iii | I,II,III
- Unordered lists: disk, square, circle
Target Attribute of <a>
tag
It specifies where to open a linked document or page. Syntax: <a target="value">
Value | description |
---|---|
_blank | Opens in a new browser window |
_parent | Open in the parent frame or window |
_self | Opens in the current window. Target is set to this value by default. |
_top | Opens in the topmost frame, thus replacing the contents of the window |
<iframe_name> | Opens in an iframe element with the matching name attribute |