HTML Tutorial – Learn HTML in One Day – for Beginners

arp14 HTML, Tutorial Tags: , , 2

HTML Tutorial - Learn HTML in One Day

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

Before we start learning HTML, choose your favorite text editor. For windows users, I recommend notepad++ or Komodo Edit. Mac users can try BBEdit or textmate

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).

HTML Tags

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>

HTML Doctypes

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

Element Type

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.

Tag Attribute

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.

Headings

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>

result:

This is headnig1

Paragraphs

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

Images

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″/>

Result: Result

HTML Tables

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>

Result:

WeekdayDateUserRs.
Mon12/11Tom342
Tue12/12Scott234
Wed12/13Donny423
Thu12/14Arp789
Fri12/15Frank123
Sat12/16David234
Sun12/17Paul535
Total2680

Divs

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>

Span tags are inline elements, used to styling texts in-line. Very useful for small amount of text. Example: some red colored text.

<b>

To make text or portion of text bold, use <b> tag. Example: some bold text.

<i>

To make text or portion of text italic, use <i> tag. Example: some italic text.

<u>

To make text or portion of text underline, use <u> tag. Example: some underlined text.

<s>

To make text or portion of text strike, use <s> tag. Example: some striked text.

<strong>

Strong tags are visually similer to <b> tag, logically different. Example: some strong text.

<em>

Em or emphasis tags are visually similer to <i> tag, logically different. Example: some emphasis text.

<dfn>

Defination of a term. Example: Definition term

<code>

To represent raw computer codes, use <code> tag. Example: A piece of computer code

<samp>

To represent samle, use <samp>tag. Example:

Sample output from a computer program

<kbd>

KBD for echoing keyboard inputs. Example: Keyboard input

<var>

To represent variables, use <var> tag. Example: Variable

<q>

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.

<cite>

To quote, use <cite> tag. Example: Citation

<br />

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>

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>…

2 thoughts on “HTML Tutorial – Learn HTML in One Day – for Beginners

Leave a Reply

Note: Your email address will not be published. Required fields are marked *