Basic HTML

Getting Started With HTML
What is HTML?
• HTML, stands for Hyper Text Markup Language,
• Hyper Text Markup Language (HTML) is the encoding scheme

used to create and format a web document.
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags(HTML tags)
• HTML uses markup tags to describe web pages
What You Need?
To begin using HTML, you will need to have a few things. Here is the big list of
items you need to have to get started:
1. You will need to have a computer that is running. Most likely you have this
already, since you are reading this page.
2. You will need a text editor of your choice. If you have windows, Notepad
will do the trick. If you have a Mac, you can use BBEdit. To find
Notepad/BBEdit on your computer:
3. You will need a Web browser of your choice. If you possibly can, use the
latest version of Firefox, Netscape Navigator, or Microsoft Internet
Explorer.
4. You will need a place to save your work. You can use your hard drive, a
floppy disk, or your Web server. You don't have to work online, you can
write the HTML and use your Web browser offline on your own computer.
We will get to that shortly, in the next tutorial.
Using Your Materials
A quick look at Notepad and Web Browsers Okay, to begin

using HTML you will want to familiarize yourself with the software you will be
using. So, to get started, open Notepad (or your text editor). You should see a
Page 1 NADISHAN MAYURA

(SCJP,SCWCD,HNDE(ELECTRONIC),BIT(colombo))
completely blank page. Now, type in the text below. We will make use of it later
with the Web browser.
Type the following:
<html>
<head>
<title>Test Page</title>
</head>
<body>
Hi there, you have just written your first Web page! I am Mayura from
Sri
Lanka..
</body>
</html>
Once you have finished, go to the "File" menu and click on "Save As". This will
prompt you to create a name for your file. In the box, type in: test.htm
At the bottom of the prompt you should see a space that says "Save file as Type"
or "Save as Type". The default is .txt, so you will need to change it. Click on the
down arrow on the right side of the input box. You should be able to highlight All
Files(*.*) . Click on this to make the change. You should see something similar
to the picture below:
This is an example using Windows xp. The text was enlarged so you could see
the part we are interested in at this point. Now you may choose the drive and

directory to save to, and click on "Save". You can use this routine each time you
create a new HTML file.
If you do not get the option to save the file as the type All Files(*.*) , then
select the plain text file type (usually shown as Text Documents, Text Files
(*.txt), or something similar in the dialogue box). Be careful not to save it just yet
though if you are using Windows. Windows will save it as test.htm.txt by
default.
If you have a Mac, the way to do this will depend on your text editor.
Something similar to the methods above should work for you. If someone
with a Mac would like to write up something in more detail about this (as I
don't have a Mac), feel free to send it to me.
Now you can see above given text.html file on the desktop.
Double click on it.
Once the page is displayed, you will see something like the following:

I know, it's not much yet, but you have written your first Web
page. You are now prepared to use HTML to build a Web page! Let's move
on to Basic formatting..
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the
.html extension.
HTML Titles Examples
<html>
<head>
<title>Hello Mayura!!!!!!!</title>
</head
<body>
</body>
</html>
HTML Headings Examples

HTML headings are defined with the <h1> to <h6> tags.
<html>
<body>
<h1>This is a heading</h1>
</body>
</html>
HTML Paragraphs Examples
HTML Images Examples

• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, which means that it contains attributes

only and it has no closing tag.

• To display an image on a page, you need to use the src attribute.
Src stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
• The syntax of defining an image:
<img src="url" />
<html>
<body>
<img src="scooby-doo.jpg" width="104" height="142" />
</body>
</html>
HTML Links
• HTML links are defined with the <a> tag.
<html>
<body>
<a href="http://www.google.com">This is a link</a>
</body>
</html>

• In web terms, a hyperlink is a reference (an address) to a resource on the
web.
• Hyperlinks can point to any resource on the web: an HTML page, an
image, a sound file, a movie, etc.
• An anchor is a term used to define a hyperlink destination inside a
document.
• The HTML anchor element <a>, is used to define both hyperlinks
and anchors.
• We will use the term HTML link when the <a> element points to a
resource, and the term HTML anchor when the <a> elements defines an
address inside a document..
HTML Comments
Comments can be inserted in the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:

<html>
<body>

<p>We are learning HTML</p>

</body>
</html>

HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a
new paragraph:
<html>
<body>
<p>We are learning<br/>HTML<br/>Do You Like it??</p>
</body>
</html>
The <br /> element is an empty HTML element. It has no end tag.
HTML Form and Input Examples

1. How to create input fields
<html>
<body>
<form action="hello">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

</body>
</html>
2. Password fields
<html>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the
browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
3. Checkboxes
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle"
value="Bike"><br />
I have a car:

value="Car"><br />
I have an airplane:
value="Airplane">
</form>
</body>
</html>
4.Radiobuttons
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked" name="Sex"
value="male"><br>
Female:
<input type="radio" name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked,
and all other buttons with the same name become unchecked
</p>
</body>

</html>
5. Simple drop-down box (a selectable list)
<html>
<body>
<form action="">
<select name="names">
<option value="mayura">Mayura</option>
<option value="nadishan">Nadishan</option>
<option value="lakmal">Lakmal</option>
<option value="dinesha">Dinesha</option>
</select>
</form>
</body>
</html>
6. Textarea (a multi-line text input field)

<html>
<body>
<p>
This example cannot be edited because our editor uses a textarea
for input, and your browser does not allow a textarea inside a
textarea.
</p>

<textarea rows="10" cols="40"> I am learning HTML. </textarea>
</body>
</html>
7. Create a button
<html>
<body>
<form action="">
<input type="submit" value="SUBMIT"> <br/>
<input type="button" value="Click Me!">
</form>
</body>
</html>
<html>
<body>
<form action="hello">
input your Name :<input type="text" name="mayura">
<br/>
Input your Password :<input type="password"
name="password"><br/>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

8. Draw a border with a caption around data
<html>
<body>
<fieldset>
<legend>
Your Information:
</legend>
<form action="">
Name <input type="text" size="2">
Address <input type="text" size="3">
Age <input type="text" size="4">
E-mail <input type="text" size="5">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>
9. Form with an input field and a submit button

<html>
<body>
<form name="input" action="HelloWorld.html" >

Input your Name :<input type="text" name="mayura"size="12">
<br/>
Input your Password :<input type="password" name="password"
size=
"12"><br/>
<input type="submit" value="SUBMIT">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page
called HelloWorld.html.
</p>
</body>
</html>
10. HTML Form Email

Now we will add the submit functionality to your form.
Generally, the button should be the last item of your form and have its name
attribute set to "Send" or "Submit". Name defines what the label of the button
will be. Here is a list of important attributes of the submit:
In addition to adding the submit button, we must also add

a destination for this information and specify how we want it to travel to that
place. Adding the following attributes to your <form> will do just this.
• method - We will only be using the post functionality of method, which

sends the data without displaying any of the information to the visitor.
• action - Specifies the URL to send the data to. We will be sending our
information to a fake email address.
<html>
<body>

<form method="POST"
action="mailto:mayurafernando@gamil.com">
Name: <input type="text" size="10" maxlength="40"
name="name"> <br />
Password: <input type="password" size="10"
maxlength="10"
name="pas
sword"><br />
<input type="submit" value="Send">
</form>
</body>
</html>
11. HTML Upload Forms
An upload form consists of three basic parts. The first

being a hidden field. This hidden field does nothing more than limit the
allowed file size of our uploaded file. The second part is the input field
itself. In this field, the user has the option to type in the full local URL of
the file or he/she may click the browse button to thumb through directory
after directory. HTML codes this automatically when we place the
type="file" attribute within the input tag.
<html>
<body>
<FORM METHOD=POST ENCTYPE="multipart/form-data"
action="A.Html">
File to upload: <INPUT TYPE=FILE NAME="upfile"><br/>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
</body>
</html>

Don’t use “Google Chrome” web-browser to check that..
• If you use “Google Chrome” to check it out you may see following
figure.
HTML Table Examples

1.Simple tables with different borders..
<html>
<body>
<p>
Each table starts with a table tag. Each table row starts with a
tr tag. Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>

<table border="5">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>

<table border="8">
<tr>
<td>100</td>
<td>200</td>

<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
2. Headings in a table
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>

<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Nadishan Mayura</td>
<td>0775139875</td>
<td>0775139876</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Nadishan</td>
</tr>
<tr>
<th>Telephone:</th>
<td>0775139875</td>
</tr>
<tr>
<th>Telephone:</th>
<td>0775139876</td>
</tr>
</table>
</body>
</html>

3.Table with a caption
<html>
<body>
<h4>
This table has a caption,and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
4. Table cells that span more than one row/column

<html>
<body>
<h4>Cell that spans two columns:</h4>

<table border="1">
<tr>

<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>0775139875</td>
<td>0775139876</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>0775139875</td>
</tr>
<tr>
<td>0775139876</td>
</tr>
</table>
</body>
</html>

5. Tags inside a table
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>
6.
Cell padding (control the white space between cell
content and the borders
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>

<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
7.Cell spacing (control the distance between cells)

<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

8.Add a background color or a background image to a
table
<html>
<body>
<h4>A background color:</h4>

<table border="1"
bgcolor="pink">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>

<table border="1"
background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

Note: “bgdesert.jpg” and html file must be same folder
9.Add a background color or a background image to a

table cell
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

10.
Align the content in a table cell
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

</body>
</html>
11
The frame attribute
<html>
<body>
<p>
If you see no frames around the tables in these examples, your browser is too
old, or does not support it.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>

<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>

</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>

</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

12.The frame and border attributes
<html>
<body>
<p>
If you see no frames around the tables in these examples, your browser does not
support the frame attribute.
</p>
<table frame="hsides" border="3">

<tr>
<td>First row</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>First row</td>
</tr>
</table>
</body>
</html>

Basic HTML

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Basic HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Getting Started With HTML

• HTML, stands for Hyper Text Markup Language,

• Hyper Text Markup Language (HTML) is the encoding scheme

• HTML documents contain HTML tags and plain text

• HTML documents are also called web pages

• HTML is not a programming language, it is a markup language

• A markup language is a set of markup tags(HTML tags)

• HTML uses markup tags to describe web pages

What You Need?

Using Your Materials

A quick look at Notepad and Web Browsers Okay, to begin

Page 1 NADISHAN MAYURA

Type the following:

Page 2 NADISHAN MAYURA

Double click on it.

Page 3 NADISHAN MAYURA

HTM or HTML Extension?

HTML Titles Examples

HTML Headings Examples

HTML Paragraphs Examples

HTML Images Examples

• The <img> tag is empty, which means that it contains attributes

Page 5 NADISHAN MAYURA

• The syntax of defining an image:

<img src="url" />

<img src="scooby-doo.jpg" width="104" height="142" />

<a href="http://www.google.com">This is a link</a>

Page 6 NADISHAN MAYURA

Comments are written like this:

<p>We are learning HTML</p>

Page 7 NADISHAN MAYURA

<p>We are learning<br/>HTML<br/>Do You Like it??</p>

HTML Form and Input Examples

Page 8 NADISHAN MAYURA

Page 9 NADISHAN MAYURA

Page 10 NADISHAN MAYURA

5. Simple drop-down box (a selectable list)

6. Textarea (a multi-line text input field)

Page 11 NADISHAN MAYURA

Page 12 NADISHAN MAYURA

9. Form with an input field and a submit button

<form name="input" action="HelloWorld.html" >

10. HTML Form Email

In addition to adding the submit button, we must also add

• method - We will only be using the post functionality of method, which

Page 14 NADISHAN MAYURA

11. HTML Upload Forms

An upload form consists of three basic parts. The first

Page 15 NADISHAN MAYURA

HTML Table Examples

<h4>One row and three columns:</h4>

<h4>Two rows and three columns:</h4>

Page 16 NADISHAN MAYURA

Page 17 NADISHAN MAYURA

Page 18 NADISHAN MAYURA

4. Table cells that span more than one row/column

<h4>Cell that spans two columns:</h4>

Page 19 NADISHAN MAYURA

<h4>Cell that spans two rows:</h4>

Page 20 NADISHAN MAYURA

Page 21 NADISHAN MAYURA