Yes, that’s right – you can learn HTML in just One day. This is the most basic HTML tutorial, specially for beginners. HTML stands for Hyper Text Markup Language and it’s the main markup language for web pages. HTML is very easy to learn. In early days, HTML used to arrange document, project files, etc. But later, now days – HTML became very handy for designing web pages.
Choose your text editor first
HTML mime type
Mime type of HTML is text/html and extension is .html or .htm. HTML is coded in plain text format. Here is a example HTML document (even you’re reading this page is also a HTML).
There are bunches of HTML tags you need to remember. Tags are like braces, also works like them. There is two types of tags, called starting tags and closing tags. All Starting HTML tags starts with “<” and ends with “>“, and tag name goes in between them. All Closing HTML tags starts with “</” and ends with “>“, and tag name goes in between them. Examples of starting and closing HTML tags respectively are <html> and </html>. Generally, a HTML tag cannot be unfinished. So, if you started a tag, then you must close it properly.
There is also a different kind of tags called standalone tags. Example: <br />, <hr />. There is no need of closing these HTML tags.
HTML tags are nested one within another. You should not sort tags irrespectively. Example: <i><b>HTML Tutorial is cool.</i></b> is incorrect, but <i><b>HTML Tutorial is cool.</b></i> is correct formatted.
A HTML document should formatted like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <h1>This is a H1 heading</h1> <p>This is a <b>paragraph</b>.</p> </body> </html>
You must declare DOCTYPE at the very first of the HTML document. In browsers, the doctype helps to define the rendering mode. Doctypes are mainly for parsing and validating HTML through specific DTD mentioned. The DTD which doctype refferes, contains a machine-readable grammar specifying the permitted and prohibited content for the document.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
There are lots of doctypes available at http://www.w3.org/QA/2002/04/valid-dtd-list.html
HTML tags are also elements. Normally, there are two kind of elements, Block Level Elements and Inline Elements. Using block level elements, you cannot put other element together in the same line. But using inline elements, you can use multiple element in a single line.
Attribute declares property for correspondence tag.
For example: <p style=”color:red;”>HTML tutorial is so cool.</p>
“style” is a attribute name of the p tag and “color:red;” is value of style attribute assigned by “=” operator.
Layout – core structure of a HTML document
Any HTML document contained in a <html></html> tag. In between HTML tag, there is head tag at the top of the page. <head></head> tag generally contains information about the page and contents of head tag are not visible. After the head tag, it’s <body></body> tag. All visible portion of the document contained in the body tag. These three tags html, head, body can only be used for one time only. In head section, the <title> tag provides title of the document, the <meta> tags in contains raw information about the document like: Content-Type, Content-Language, Description, Keywords, page-icon etc. The <link> tag link-up/hook-up with external styleshets. This is the very basic layout – core structure of each and every HTML document.
There are six types of heading tag available, they are – <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. The size of heading will be bigger to smaller respectively. So, h1 heading is the biggest heading and h6 is the smallest. Headings are block level elements.
Example: <h1>This is headnig1</h1>
This is headnig1
Each <p> tag contains one paragraph. Paragraphs are also block level elements. Example: <p>This is a simple sentence.</p>
Result: This is a simple sentence.
Hyperlinks – Anchor tags
Hyperlinks are produced by anchor tags. <a> represents the anchor tag. Any text or image can be liked to URL by hyperlinking. Anchor tags has attribute named “href” which contains the value of the url is linked. Example: <a href=”http://www.google.com”>This is a link to google</a>
Result: This is a link to google
You can render an image by using <img/> tag. “src” attribute is used to specify the source of the image file located at and “alt” attribute is providing the image name as alternative. Image tag is a standalone tag. Example: <img src=”demo/images/pic1.jpg” alt=”Picture 1″/>
HTML Tables are same like MS Word, MS Excel tables. Basic table tags are <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>. Table tag is the main container of the table, caption is for table caption/title, thead is for table header, tbody is table body, tfoot is for table footer, th is for table heading, tr is for table row and td is for table data. Sorting is like below –
<table> <thead> <tr><th>Weekday</th><th>Date</th><th>User</th><th>Rs.</th></tr> </thead> <tbody> <tr><td>Mon</td><td>12/11</td><td>Tom</td><td>342</td></tr> <tr><td>Tue</td><td>12/12</td><td>Scott</td><td>234</td></tr> <tr><td>Wed</td><td>12/13</td><td>Donny</td><td>423</td></tr> <tr><td>Thu</td><td>12/14</td><td>Arp</td><td>789</td></tr> <tr><td>Fri</td><td>12/15</td><td>Frank</td><td>123</td></tr> <tr><td>Sat</td><td>12/16</td><td>David</td><td>234</td></tr> <tr><td>Sun</td><td>12/17</td><td>Paul</td><td>535</td></tr> </tbody> <tfoot> <tr><th>Total</th> <th>2680</th></tr> </tfoot> </table>
Div means division. Div tag is mainly for grouping contents. You can also make page layouts with <div> tags. Example:
This is a div.
This is looking cool.
Other HTML tags
Span tags are inline elements, used to styling texts in-line. Very useful for small amount of text. Example: some red colored text.
To make text or portion of text bold, use <b> tag. Example: some bold text.
To make text or portion of text italic, use <i> tag. Example: some italic text.
To make text or portion of text underline, use <u> tag. Example: some underlined text.
To make text or portion of text strike, use <s> tag. Example: some
Strong tags are visually similer to <b> tag, logically different. Example: some strong text.
Em or emphasis tags are visually similer to <i> tag, logically different. Example: some emphasis text.
Defination of a term. Example: Definition term
To represent raw computer codes, use <code> tag. Example:
A piece of computer code
To represent samle, use <samp>tag. Example:
Sample output from a computer program
KBD for echoing keyboard inputs. Example: Keyboard input
To represent variables, use <var> tag. Example: Variable
To represent a quotation from or reference to a book, paper, or author, esp. in a scholarly work., use <q> tag. Example:
some quoted text.
To quote, use <cite> tag. Example: Citation
br means line break. This is a standalnoe tag, to break line, use this tag. Example: This is a break here
then continues with this next line…
hr means horizontal rule. This is to draw horizontal rules anywhere in a HTML page. This is a standalone tag. Example:
There are also various kind of tags can be used. Check this on w3c official website.
<!—->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <base>, <basefont>, <bdo>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <font>, <form>, <frame>, <frameset>, <head>, <h1> – <h6>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <meta>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <param>, <pre>, <q>, <s>, <samp>, <script>, <select>, <small>, <span>, <strike>, <strong>, <style>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <title>, <tr>, <tt>, <u>, <ul>, <var>…