Scribd
Upload
17 views

Introduction To HTML: Vincci Kwong

Uploaded by

Camille Jane Park Galang
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
17 views

Introduction To HTML: Vincci Kwong

Uploaded by

Camille Jane Park Galang
Copyright
© © All Rights Reserved
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