Scribd
Upload
30 views

Introduction To HTML: Vincci Kwong

Uploaded by

Camille Jane Park Galang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
30 views

Introduction To HTML: Vincci Kwong

Uploaded by

Camille Jane Park Galang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

Introduction to HTML

Vincci Kwong

What is HTML?
Hyper Text Markup Language
A markup language designed for the
creation of web pages and other
information viewable in a browser
The basic language used to write web
pages
File extension: .htm, .html
invented by Tim Berners-Lee while at
CERN, the European Laboratory for
Particle Physics in Geneva

HTML Tags
For example: <b>, <font>,<title>, <p> etc.
Tag usually goes with pair: an open tag (<b>)
and an end tag (<\b>)
Effect

Code

Code Used

What It Does

Bold

<B>Bold</B>

Bold

Italic

<I>Italic</I>

Italic

Single tag: <hr>,<br>


Tags are NOT case sensitive

HTML Document Structure


<html>
<head>
<title> Page Title Goes Here </title>
</head>
<body>
content goes here
</body>
</html>

Background
Bgcolor
Specifies a
background-color for a
HTML page.
<body
bgcolor="#000000">
<body
bgcolor="rgb(0,0,0)">
<body
bgcolor="black">

Background
Specifies a
background-image for
a HTML page
<body
background="clouds.g
if">
<body
background="http://w
ww.w3schools.com/clo
uds.gif">

Text
Put text on a webpage
<p>Today is my first day at my new job, Im so
excited!</p>
Output: Today is my first day at my new job, Im
so excited!

Put text in center of a page


<center>Hello</center>
Output:
Hello

Put text on the right of a page


<p align=right>Hello</p>
Output:
Hello

Font
To change text size
<font size=+3>Hello</font>
Output:

Hello

Tag attribute

To change text color


<font color=red>Hello</font>
Output: Hello

Using both
<font size=+3 color=red>Hello</font>
Output:

Hello

Commonly Used Character


Entities

Result

Description

Entity Name

Non-breaking space

&nbsp;

<
>
&

Less than
Greater than
Ampersand
Quotation mark

&lt;
&gt;
&amp;
&quot;

Copyright

&copy;

Headings
There are 6 heading commands.
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>

List
Unordered list
Code:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Output:
Coffee
Milk

Ordered list
Code:
<ol>

<li>Coffee</li
>
<li>Milk</li>
</ol>
Output:
1. Coffee
2. Milk

Table
<table border=1">
<tr>
<th>Heading</th>
<th>Another
Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

Heading

Another Heading

Row 1, cell 1

Row 1, cell 2

Row 2, cell 1

Create Links
A Hypertext link
< a href=http://www.iusb.edu>IUSB
Home</a>
Output: IUSB Home

A Email link
<a href=mailto:[email protected]>
Email me</a>
Output: Email me

Image Formats
.gif
Graphics Interchange Format

.jpeg or .jpg
Joint Photographic Experts Group

.bmp
bitmap

Inserting Image
Place all images in the same
directory/folder where you web pages
are
<img src> is a single tag
<img src=image.gif>
Output:

Turn an image into a hyerlink


<a href=http://www.iusb.edu><img
src=image.gif></a>
Output:

Image Size
Computer images are made up of
pixels
<IMG HEIGHT=100" WIDTH=150"
SRC="image.gif">
Height

Width

Forms
A form is an area that can contain form
elements.
<form></form>
Commonly used form elements
includes:
Text fields
Radio buttons
Checkboxes
Submit buttons

Text Input Fields


Used when you want
Output
the user to type letters,
number, etc.
First name:
<form>
Last name:
First name: <input
type="text"
name="firstname">
<br>
Last name: <input
type="text"
name="lastname">
</form>

Submission Button
When user clicks on the
Output
Submit button, the
content of the form is
sent to another file.
Username:
<form name="input"
action="html_form_actio
n.asp" method="get">
Username: <input
type="text"
name="user">
<br>
<input type="submit"
value="Submit">
</form>

Checkboxes
Used when you want the
Output
user to select one or
more options of a limited
number of choices.
I have a bike
<form>
I have a car
<input type="checkbox"
name="bike
value=bike> I have a
bike
<br>
<input type="checkbox"
name="car
value=car> I have a
car </form>

Radio Buttons
Used when you want
the user to select one
of a limited number of
choices.
<form>
<input type="radio"
name="sex"
value="male"> Male
<br>
<input type="radio"
name="sex"
value="female">
Female </form>

Output
Male
Female

Text Box
Used when you want
to get input from user.
<form>
<p>Please provide
your suggestion in the
text box below:</p>
<textarea row=10
cols=30>
</textarea>
</form>

Output
Please provide your
suggestion in the text box
below:

Pull-down Menu
Used when you want
user to respond with
one specific answer
with choices you given.
<p>Select a fruit:</p>
<select name"Fruit">
<option selected>
Apples
<option> Bananas
< option > Oranges
</select>

Output
Select a fruit:

You might also like