This tutorial includes: html tutorial, how to learn html, guide, tips tricks, tags, attributes, elements, title, paragraph, head, list, link, image, table, forms, span, div, meta tags, javascript, font, frame, CSS-HTML styles, and formatting.
- Getting Started
- Tags, Attributes and Elements
- Titles
- Paragraphs
- Headings
- Lists
- Links
- Images
- Tables
- Forms
- Span and Div
- Meta Tags
- Javascript
- Font
- Frame
- CSS-HTML styles
- Formatting
Getting Started
HTML files are just simple text files. To start writing in HTML, you need nothing more than a simple text editor, Notepad or wordpad in Windows.
Try to type "This is my test page" and save it as "test.html". Then you can double-click the file saved and you will see your webpage.
It is that simple!
Tags, Attributes and Elements
Tags
Tags are the basic structure of an HTML document. It is used to surround content and apply meaning to it.
Change your document to the following and save it again:
<html>
<body>
This is my test page
</body>
</html>
tag in the above exaple is the opening tag that kicks things off and tells the browser that everything between that and the closing tag is an HTML document. The stuff between and is the main content of the page that will appear in the browser window.
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like Test.
Elements
Tags do not tend to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Test Page</title>' is a title element.
Titles
The head element which starts with the <head> opening tag and ends with the </head> tag, appears before the body element which starting with <body> and ending with </body>, and contains information about the page. The information in the head element does not appear in the browser window. The following is an example:
<html>
<head>
<title>My first test page</title>
</head>
<body>
This is my first test page
</body>
</html>
Paragraphs
Let's look at the following example first:
<html>
<head>
<title>My first test page</title>
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>
From the above example, you can see that there is a blank line after each sentence, paragraph because we use the paragraph tags as follows:
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
You can also use <br> and </br> to separate each paragraph with a blank line.
Headings
If you have documents with genuine headings, then there are HTML tags specifically designed just for them. They are h1, h2, h3, h4, h5, and h6.
<html>
<head>
<title>My first test page</title>
</head>
<body>
<h1>This is the <h1> heading</h1>
<h2>This is the <h2> heading</h2>
<h3>This is the <h3> heading</h3>
<h4>This is the <h4> heading</h4>
<h5>This is the <h5> heading</h5>
<h6>This is the <h6> heading</h6>
</body>
</html>
Lists
There are three types of list: unordered lists, ordered lists, and definition lists.
Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers. The following is the combination of two.
<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.
<ol>
<li>Ordered list 1.</li>
<li>Ordered list 2.</li>
<li>Ordered list 3.</li>
</ol>
</li>
<li>Unordered list 3.</li>
</ul>
A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term. Let's look at example first:
<h1>Common computer terns</h1>
<dl>
<dt>HTML</dt>
<dd>Definition for HTML</dd>
<dt>Java</dt>
<dd>Definition for Java (1).</dd>
<dd>Definition for Java (2).</dd>
<dt>Java Applet</dt>
<dt>PHP</dt>
<dt>VB</dt>
<dd>Definition for VB.</dd>
The "dl" element gets the ball rolling, similar to the "ul" and "ol" elements, establishing the list. Rather than there being an "li" element though, definition lists have a "dt" element, which is the definition term, followed by a "dd" element which is a definition description associated to the "dt" element.
There doesn't have to be one "dt" followed by one "dd", there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of "dt"'s followed by one "dd". If you have one word that means various different things, there might be one "dt" followed by several "dd"'s.
Links
The 'H' and 'T' in 'HTML' stand for 'hypertext', which basically means a system of linked text. An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link. The following is an example:
<html>
<head>
<title>My first test page</title>
</head>
<body>
<h2>Where to find the HTML tutorial</h2>
<a href="http://www.edusoftmax.com/reference.html">Computer Repair Tips</a>
</body>
</html>
The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://www.edusoftmax.com/reference.html", or it can be relative to the current page like "reference.html".
A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example, <h3 id="reference"> reference</h3> , and then link to it by using something like this: <a href="#reference"> Go to Reference</a> . Selecting this link will scroll the page straight to the element with that id.
If they want to open a link in a new window, you can use the following code:
<a href="http://www.edusoftmax.com/" target="_blank" >Computer Repair</a>
Images
The img tag is used to put an image in an HTML document and the code looks like this:
<img src="http://www.edusoftmax.com/images/logo.gif" width="57" height="50" alt="logo" />
The src attribute tells the browser where to find the image. Like the a tag, this can be absolute or relative like:
<img src="images/logo.gif"...>
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Tables
There are a number of tags used in tables and it is probably the most difficult area of HTML coding.
Copy the following code into the body of your document and then we will go through what each tag is doing:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
The "table" element defines the table, the "tr" element defines a table row, and the "td" element defines a data cell. These must be enclosed in "tr" tags, as shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.
Forms
Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email, such as the one used on this website.
On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside of the remit of this website. If you use an internet service provider to host your HTML, they will be able to help you with this and will probably have clear and simple instructions on how, for example, to make a form-to-email form work.
The basic tags used in the actual HTML of forms are form, input, textarea, select and option.
"form" defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information. The following is an example:
<form action="javacode.asp" method="post"> </form>
"input" tag is the key element in the form. The following are some examples:
<input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
<input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
<input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.
<input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.
<input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.
<input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
<input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.
<input type="button" /> is a button that will not do anything without extra code added.
<input type="reset" /> is a button that when selected will reset the form fields to their default values.
<input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
Note that the input tag closes itself with a "/>" at the end.
A textarea is, a large textbox which requires a rows and cols attribute and the following is an example:
<textarea rows="5" cols="20">Text are input here</textarea>
The select tag works with the option tag to make drop-down select boxes and they work like this:
<select>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
When the form is submitted, the value of the selected option will be sent.
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the following format:
<option value="computer" selected="selected"> keyboard</option>
If you connect your form to a form-handling program, you need to add the attribute name. The example is as follows:
<input type="text" name="test" />
The following is a complete example:
<form action="contact.asp" method="post">
Name:
<input type="text" name="name" value="Your name" />
Comments:
<textarea name="comments" rows="5" cols="20">Your comments</textarea>
Are you:
<input type="radio" name="areyou" value="male" /> Male
<input type="radio" name="areyou" value="female" /> Female
<input type="submit" />
<input type="reset" />
</form>
Span and Div
The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line which is basically equivalent to having a line-break before and after it and used to group larger chunks of code.
<div id="computer">
This is <span class="pc">crazy</span>
</div>
Meta Tags
The Meta Tag provides metadata about the HTML document and Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The Meta Tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. The following is an example:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>
Javascript
Javascript is a client-side scripting language that can work in conjunction with HTML and its events can be used like attributes in HTML tags. An event is something that happens to that HTML element, such as when it is 'clicked' or when it loses focus.
<a href="#main" onclick="alert ('Be alert!')">Click here</a>
The above events that can be used as follows:
onblur (used in form elements and executed when an element loses focus)
onchange (used in form elements and executed when something is changed)
onclick (executed when a mouse is clicked on an element)
ondblclick (executed when a mouse is double-clicked on an element)
onfocus (used in form elements and executed when an element gains focus)
onkeydown (executed when a key is pressed down)
onkeypress (executed when a key is pressed and released)
onkeyup (executed when a key is released)
onload (used in the body tag and executed when the page loads)
onmousedown (executed when the button of a mouse is pressed down)
onmousemove (executed when the mouse cursor moves on an element)
onmouseout (executed when the mouse cursor moves away from an element)
onmouseover (executed when mouse cursor moves over an element)
onmouseup (executed when the button of a mouse is released)
onreset (used in form elements and executed when a form is reset)
onselect (used in form elements and executed when an element is selected)
onsubmit (used in form elements and executed when a form is submitted)
onunload (used in the body tag and executed when the user navigates away from the page)
Javascript's best uses tend to be small additions of functionality. There is a danger of seriously degrading the accessibility of a web page with Javascript, and many things that it can be used for can be replaced with server-side scripting languages such as PHP or ASP.
Font
The Font tag in HTML is deprecated. It is supposed to be removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, and use styles instead. The following is an example:
<font color = blue size="2" face="Verdana">
This is a paragraph.
</font>
Font Attributes
----------------------------------------------------------
Attribute Example Purpose
----------------------------------------------------------
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
----------------------------------------------------------
Frame
HTML frames allow you to display documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. The following is the code.
<frameset cols="25%,75%">
<frame src="frame_1.htm">
<frame src="frame_2.htm">
</frameset>
Note:
1. If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.
2. You can use "SCROLLING=NO" to make the frame non-scrolling.
3. You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags.
CSS-HTML styles
CSS, Cascading Style Sheets, is a style sheet language used to describe the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: External Style Sheet, Internal Style Sheet, and Inline Styles.
External Style Sheet
An external style sheet is the best choice to display many pages. With an external style sheet, you can change the look of an entire website by changing only one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head>
<link rel="stylesheet" type="text/css" href="samplestyle.css">
</head>
Internal Style Sheet
An internal style sheet should be used for a single document which has a unique style. You define internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Inline Styles
An inline style should be used for a unique style which is to be applied to a single occurrence of an element.
To use inline styles, you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The following example shows how to change the color and the left margin of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
Formatting
You can use the following formatting tags in your html coding:
--------------------------------------------
Tag Description
--------------------------------------------
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
<listing> Deprecated. Use <pre> instead
<plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
---------------------------------------------
