Scribd
Upload
2 views115 pages

02 - Introduction to HTML

The document provides an introduction to HTML, covering its definition as a markup language for web documents and the basic structure of HTML files. It discusses the use of HTML editors, how to write and save HTML code using text editors, and the importance of HTML elements and attributes. Additionally, it outlines various HTML tags, including headings and paragraphs, and explains how to format content for web browsers.

Uploaded by

thetajult
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views115 pages

02 - Introduction to HTML

The document provides an introduction to HTML, covering its definition as a markup language for web documents and the basic structure of HTML files. It discusses the use of HTML editors, how to write and save HTML code using text editors, and the importance of HTML elements and attributes. Additionally, it outlines various HTML tags, including headings and paragraphs, and explains how to format content for web browsers.

Uploaded by

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

INTRODUCTION TO HTML

Content
• HTML  Editors
• Basic  HTML
HTML EDITORS
HTML Editors
• HTML  can  be  edited  by  using  a  professional  
HTML  editor  like:
– Adobe  Dreamweaver
– Microsoft  Expression  Web
– CoffeeCup HTML  Editor
• However,  for  learning  HTML  a  text  editor  like  
Notepad  (PC)  or  TextEdit (Mac) is  
recommended  .
Write HTML Using Text Editor
Step  1:  Open  Notepad
• To  open  Notepad  in  Windows  7  or  earlier:
– Click  Start  (bottom  left  on  your  screen).  Click  All  
Programs.  Click  Accessories.  Click  Notepad.
• To  open  Notepad  in  Windows  8  or  later:
– Open  the  Start  Screen  (the  window  symbol  at  the  
bottom  left  on  your  screen).  Type  Notepad.
Write HTML Using Text Editor
Step  2:  Write  Some  HTML
• Write  or  copy  some  HTML  into  text  editor.

<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
My  First  HTML  page
</body>
</html>
Write HTML Using Text Editor
Step  3:  Save  the  HTML  Page
• Save  the  file  on  your  computer.
– Select  File  >  Save  as  in  the  Notepad  menu.
– Name  the  file  "[Link]"  or  any  other  name  
ending  with  html.
– UTF-­‐8  is  the  preferred  encoding  for  HTML  files.
– ANSI  encoding  covers  US  and  Western  European  
characters  only.
Write HTML Using Text Editor
Write HTML Using Text Editor
Step  4:  View  HTML  Page  in  Your  Browser
• Open  the  saved  HTML  file  in  your  favorite  
browser.  The  result  will  look  much  like  this:
Preparation for Tutorial
--- [Link]
--- [Link]
--- [Link]
A11CS0084 --- [Link]
--- [Link]

--- [Link]

audio
--- [Link]
--- [Link]
images
BASIC HTML
What is HTML?
• HTML  is  a  markup  language  for  describing  web  
documents  (web  pages).
– HTML  stands  for  Hyper  Text  Markup  Language
– A  markup  language  is  a  set  of  markup  tags
– HTML  documents  are  described  by  HTML  tags
– Each  HTML  tag  describes  different  document  
content
HTML Versions
• Since  the  early  days  of  the  web,  there  have  
been  many  versions  of  HTML:
Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2012
!
HTML Tags
• HTML  tags  are  keywords  (tag  names)  
surrounded  by  angle  brackets:
– <tagname>content</tagname>
– HTML  tags  normally  come  in  pairs  like  <p>  and  
</p>
– The  first  tag  in  a  pair  is  the  start  tag,  the  second  
tag  is  the  end  tag
– The  end  tag  is  written  like  the  start  tag,  but  with  a  
slash  before  the  tag  name
HTML Documents
HTML Example Activity

<html>
<head>
<title>Introduction   to  HTML</title>
</head>
<body>
My  First  HTML  page
</body>
</html>
Web Browsers
• The   purpose   of  a   web  browser  (Chrome,  IE,  Firefox,  Safari)  is   to   read  HTML  
documents  and  display   them.
HTML ELEMENTS AND ATTRIBUTES
HTML Elements
• HTML  documents  are  made  up  by  HTML  
elements.
• HTML  elements  are  written  with  a  start  tag,  
with  an  end  tag,   with  the  content  in  between:  
<tagname>content</tagname>
• The  HTML  element  is  everything  from  the  
start  tag  to  the  end  tag:
<p>My  first  HTML  paragraph.</p>
HTML Attributes
• HTML  elements  can  have  attributes
• Attributes  provide  additional  information  
about  an  element
• Attributes  are  always  specified  in  the  start  tag
• Attributes  come  in  name/value  pairs  like:  
name="value"
HTML Elements and Attributes
Example
<html    lang="en-­‐US">
<head>
<title>Introduction   to  HTML</title>
</head>
<body>
<h1>My  First  HTML  page</h1>
</body>
</html>
Basic HTML Elements
• Headings
• Paragraphs
• Images
• Tables
• List
• Links
• HTML  Styling
• HTML  Text  Formatting  Elements
HTML Headings
• Headings  are  defined  with  the  <h1>  to  <h6>  
tags.
• <h1>  defines  the  most  important  heading.  
<h6>  defines  the  least  important  heading.
• Use  HTML  headings  for  headings  only.  Don't  
use  headings  to  make  text  BIG  or  bold.
• Search  engines  use  your  headings  to  index  the  
structure  and  content  of  your  web  pages.
HTML Headings Example Activity

<html>
<head>
<title>Introduction   to   HTML</title>
</head>
<body>
<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>
</body>
</html>
HTML PARAGRAPHS
HTML Paragraphs
• HTML  documents  are  divided  into  paragraphs.
• The  HTML  <p>  element  defines  a  paragraph.
• Example
<p>This  is  a  paragraph</p>
<p>This  is  another  paragraph</p>
HTML Paragraphs Example Activity

<html>
<head>
<title>Introduction   to  HTML</title>
</head>
<body>
<p>This  is  a  paragraph</p>
<p>This  is  another  paragraph</p>
</body>
</html>
HTML Paragraphs Example Activity

<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
<p>
This  paragraph
contains  a  lot  of  lines
in  the  source  code,
but  the  browser  
ignores  it.
</p>

<p>
This  paragraph
contains                  a  lot  of  spaces
in  the  source                  code,
but  the                 browser  
ignores  it.
</p>
</body>
</html>
HTML Line Breaks
• The  HTML  <br>  element  defines  a  line  break.
• The  <br>  element  is  an  empty  HTML  element.  
It  has  no  end  tag.
• Use  <br>  if  you  want  a  line  break  (a   new  line)  
without  starting  a  new  paragraph:
<p>This  is<br>a  para<br>graph  with  line  
breaks</p>
HTML Line Breaks Example Activity

<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
<p>This  is<br>a  para<br>graph  with  line  
breaks</p>
</body>
</html>
The HTML <pre> Element
• The  HTML  <pre>  element  defines  a  block  of  
pre-­‐formatted  text,   with  structured  spaces  
and  lines.
• To  display  anything,   with  right  spacing  and  
line-­‐breaks,  you  must  wrap  the  text  in  a  <pre>  
element:
The HTML <pre> Element Activity

Example
<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
<p>The  pre  tag  is  needed  for  displaying  lyrics  or  poems:</p>
<pre>
Because  you  know
I'm  all  about  that  bass
'Bout  that  bass,  no  treble
I'm  all  about  that  bass
'Bout  that  bass,  no  treble
I'm  all  about  that  bass
'Bout  that  bass,  no  treble
I'm  all  about  that  bass
'Bout  that  bass
</pre>
</body>
</html>
HTML LISTS
HTML Lists
• HTML  can  have  Unordered  Lists,  Ordered  Lists,  
or  Description  Lists:

<ul> <ol> <dl>


<li>Coffee</li> <li>Coffee</li> <dt>Coffee</dt>
<li>Tea</li> <li>Tea</li> <dd>-­‐ black  hot  drink</dd>
<li>Milk</li> <li>Milk</li> <dt>Milk</dt>
</ul> </ol> <dd>-­‐ white   cold  drink</dd>
</dl>
Unordered HTML Lists Activity

• An  unordered  list  starts  with  the  <ul>  tag.  


Each  list  item  starts  with  the  <li>  tag.
• The  list  items  will  be  marked  with  bullets  
(small  black  circles).
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Lists - Activity

The Style Attribute


Disc Circle
<ul type="disc"> <ul type="circle">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>

Square None
<ul type="square"> <ul type="none">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>
Ordered HTML Lists Activity

• An  ordered  list  starts  with  the  <ol>  tag.  Each  


list  item  starts  with  the  <li>  tag.
• The  list  items  will  be  marked  with  numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - Activity

The Type Attribute


Numbers Upper case
<ol type="1"> <ol type="A">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ol> </ol>

Lower case Roman   upper case Roman   lower case


<ol type="a"> <ol type="I"> <ol type="i">
<li>Coffee</li> <li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li> <li>Milk</li>
</ol> </ol> </ol>
HTML Description Lists Activity

• A  description  list,  is  a  list  of  terms,  with  a  


description  of  each  term.
• The  <dl>  tag  defines  a  description  list.
• The  <dt>  tag  defines  the  term  (name),  and  the  
<dd>  tag  defines  the  data  (description).
<dl>
<dt>Coffee</dt>
<dd>-­‐ black  hot  drink</dd>
<dt>Milk</dt>
<dd>-­‐ white   cold  drink</dd>
</dl>
Nested HTML Lists Activity

• List  can  be  nested  (lists  inside  lists).


<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black  tea</li>
<li>Green   tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML IMAGES
HTML Images Activity

• In  HTML,  images  are  defined  with  the  <img>  


tag.
• The  <img>  tag  is  empty,  it  contains  attributes  
only,  and  does  not  have  a  closing  tag.
• The  src attribute  defines  the  location  or  url
(web  address)  of  the  image:
<img src="url"  alt="some_text">
<img src="utm-­‐[Link]"  alt=”Logo   UTM">
Image Size - Width and Height
• You  can  use  the  style attribute  to  specify  the  width  and  
height  of  an  image.
• The  values  are  specified  in  pixels  (use  px after  the  
value):  
<img src=”[Link]"  alt=”UTM  Logo"  
style="width:128px;height:128px">
• Alternatively,  you  can  use  width  and  height  attributes.
• The  values  are  specified  in  pixels  (without  px after  the  
value):
• Example
<img src="[Link]"  alt=”UTM  Logo"  width="128"  
height="128">
Images in Another Folder Activity

• If  not  specified,  the  browser  expects  to  find  


the  image  in  the  same  folder  as  the  web  page.
• However,  it  is  common  on  the  web,  to  store  
images  in  a  sub-­‐folder,  and  refer  to  the  folder  
in  the  image  name:
<img src="images/[Link]"  alt=”UTM  Logo">
• If  a  browser  cannot  find  an  image,  it  will  
display  a  broken  link  icon:
Images on Another Server
• Some  web  sites  store  their  images  on  image  
servers.
• Actually,  you  can  access  images  from  any  web  
address  in  the  world:
• Example
<img
src="[Link]
Animated Images
• The  GIF  standard  allows  animated  images:
• Example

<img src="[Link]"  alt="Computer  Man"  


style="width:48px;height:48px”>

• Note  that  the  syntax  of  inserting  animated  


images  is  no  different  from  non-­‐animated  
images.
HTML TABLES
HTML Tables
• HTML  Table  Example
Defining HTML Tables
• Tables  are  defined  with  the  <table>  tag.
• Tables  are  divided  into  table  rows  with  the  <tr>  
tag.
• Table  rows  are  divided  into  table  data  with  the  
<td>  tag.
– Table  data  <td>  are   the   data  containers  of  the  table.
– They   can  contain  all   sorts  of  HTML  elements   like  text,  
images,   lists,  other   tables,  etc.
• A  table  row  can  also  be  divided  into  table  
headings  with  the  <th>  tag.
HTML Tables Basic Activity

<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
<h1>HTML  Tables  Tutorials</h1>
<h2>Basic   HTML   Tables  (Without   setting   the   width)</h2>
<table>
<tr>     <td>Jill</td><td>Smith</td>   <td>50</td></tr>
<tr>   <td>Eve</td><td>Jackson</td>   <td>94</td></tr>
</table>
<body>
</html>
HTML Tables with Width Activity

Attribute
<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body>
<h1>HTML  Tables  Tutorials</h1>
<h2>Basic   HTML   Tables  (Without   setting   the   width)</h2>
<table  width="100%">
<tr>     <td>Jill</td><td>Smith</td>   <td>50</td></tr>
<tr>   <td>Eve</td><td>Jackson</td>   <td>94</td></tr>
</table>
<body>
</html>
An HTML Table with a Border Activity

Attribute
<h2>An  HTML  Table  with  a  Border  
Attribute</h2>
<table  border="1"  width="100%">
<tr><td>Jill</td><td>Smith</td><td>50</td><tr>
<tr><td>Eve</td><td>Jackson</td><td>94<td></tr>

</table>
HTML Table with Cell Padding
• Cell  padding  specifies  the  space  between  the  
cell  content  and  its  borders.
• If  you  do  not  specify  a  padding,  the  table  cells  
will  be  displayed  without  padding.
HTML Table with Cell Padding Activity

<h2>An  HTML  Table  with  a  Border  


Attribute</h2>
<table  border="1"  width="100%"  
cellpadding="10">
<tr><td>Jill</td><td>Smith</td><td>50</td><tr>
<tr><td>Eve</td><td>Jackson</td><td>94<td></tr>

</table>
HTML Table with Cell Spacing
• CELLSPACING  controls  the  space  between  
table  cells.  
• If  you  do  not  specify  a  padding,  the  table  cells  
will  be  displayed  without  spacing.
• Although  there  is  no  official  default,  browsers  
usually  use  a  default  of  2.  
HTML Table with Cell Spacing Activity

<h2>An  HTML  Table  with  a  Border  


Attribute</h2>
<table  border="1"  width="100%"  
cellspacing="10">
<tr><td>Jill</td><td>Smith</td><td>50</td><tr>
<tr><td>Eve</td><td>Jackson</td><td>94<td></tr>

</table>
HTML Table Headings
• Table  headings  are  defined  with  the  <th>  tag.
• By  default,  all  major  browsers  display  table  
headings  as  bold  and  centered.
HTML Table Headings 1 Activity

<h2>HTML  Table  Headings</h2>


<table  border="1">
<tr>    <th>Firstname</th><th>Lastname</th>  
<th>Age</th></tr>
<tr>  <td>Eve</td><td>Jackson</td>  
<td>94</td></tr>
</table>
HTML Table Headings 2 Activity

<h2>HTML  Table  Headings  2</h2>


<table  border="1">
<tr>
<th>Firstname</th><td>Eve</td>
</tr>
<tr>
<th>Lastname</th>   <td>Jackson</td>  
</tr>
<tr>  
<th>Age</th><td>94</td>
</tr>
</table>
Table Cells that Span Many Columns
• To  make  a  cell  span  more  than  one  column,  
use  the  colspan attribute:
Table Cells that Span Many Activity

Columns
<h2>Table   Cells   that  Span  Many   Columns</h2>
<table  border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill  Gates</td>
<td>555   77  854</td>
<td>555   77  855</td>
</tr>
</table>
Table Cells that Span Many Rows
• To  make  a  cell  span  more  than  one  row,  use  
the  rowspan attribute:
Table Cells that Span Many Activity

Rows
<h2>Table   Cells  that  Span  Many  Rows</h2>
<table  border="1">
<tr>
<th>Name:</th>
<td>Bill  Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555  77  854</td>
</tr>
<tr>
<td>555  77  855</td>
</tr>
</table>
More Complex table
• Can  you  do  it?
HTML LINKS
HTML Links - Hyperlinks
• HTML  links  are  hyperlinks.
• A  hyperlink  is  an  element,  a  text,  or  an  image  
that  you  can  click  on,  and  jump  to  another  
document.
• In  HTML,  links  are  defined  with  the  <a>  tag.
• Link  Syntax:
<a  href="url">link  text</a>
HTML Links – Hyperlinks Activity

Example
<html>
<head>
<title>Introduction   to  HTML</title>
</head>
<body>
<h1>HTML  Links   -­‐ Hyperlinks  Tutorials</h1>
<h2>HTML  Global   Link  Examples</h2>
<a   href="[Link]   to  UTM  Website</a>

</body>
</html>
Local Links
• The  previous  example  used  an  absolute URL  
(A  full  web  address).
• A  local  link  (link  to  the  same  web  site)  is  
specified  with  a  relative URL  (without  
[Link]
HTML Links – Local Links Activity

<h2>HTML   Local  Links   Examples</h2>


<ul>
<li><a  href="[Link]">Home</a></li>
<li><a  href="[Link]">HTML  Headings</a></li>
<li><a  href="[Link]">HTML  Paragraphs</a></li>
<li><a  href="[Link]">HTML  Lists</a></li>
<li><a  href="[Link]">HTML   Images</a></li>
<li><a  href="[Link]">HTML   Tables</a></li>
<li><a  href="[Link]">HTML   Links</a></li>
</ul>
HTML Links - Colors and Icons
• When  you  move  the  mouse  cursor  over  a  link,  
two  things  will  normally  happen:
– The  mouse  arrow  will  turn  into  a  little  hand
– The  color  of  the  link  element  will  change
• By  default,  links  will  appear  as  this  in  all  
browsers:
– An  unvisited  link  is  underlined  and  blue
– A  visited  link  is  underlined  and  purple
– An  active  link  is  underlined  and  red
HTML Links - Colors and Icons
• You  can  change  the  defaults,  using  styles:
<style>
a:link {color:#000000;  background-­‐color:transparent;  
text-­‐decoration:none}
a:visited {color:#000000;  background-­‐color:transparent;  
text-­‐decoration:none}
a:hover {color:#ff0000;  background-­‐color:transparent;  
text-­‐decoration:underline}
a:active {color:#ff0000;  background-­‐color:transparent;  
text-­‐decoration:underline}
</style>
HTML Links - The target Attribute
• The  target  attribute  specifies  where  to  open  
the  linked  document.
• This  example  will  open  the  linked  document  in  
a  new  browser  window  or  in  a  new  tab:
• Example

<a   href="[Link]  target="_blank">Visit   UTM!</a>


HTML Links - The target Attribute
Target Value Description

_blank Opens the linked document in a new


window or tab

_self Opens the linked document in the


same frame as it was clicked (this is
default)

_parent Opens the linked document in the


parent frame

_top Opens the linked document in the full


body of the window

framename Opens the linked document in a


named frame

!
HTML Links - The target Activity

Attribute Example
<h2>HTML  Links  -­‐ The  target  Attribute  
Examples</h2>
<ul>
<li><a  href="[Link]  target="_blank">Visit  Uncle  Google!</a></li>
<li><a  href="[Link]"  target="_self">HTML  Headings</a></li>
<li><a  href="[Link]"  target="_parent">HTML  Paragraphs</a></li>
<li><a  href="[Link]"  target="_top">HTML  Lists</a></li>

</ul>
HTML Links - Image as Link
• It  is  common  to  use  images  as  links:
• Example
<a  href=”[Link]”><img src=”[Link]"  
alt=”Main  Page"  
style="width:42px;height:42px;border:0”></a>
HTML Links - Image as Link Activity

<h2>HTML   Links  -­‐ Image  as   Link  Examples</h2>


<ul type="none">
<li><a  href="[Link]"><img src="images/[Link]"  alt="Home"  
title="Home"/></a></li>

<li><a  href="[Link]"><img src="images/[Link]"  alt="Lists"  title="HTML  Lists"  


width="128"  height="128"  border="0"/></a></li>

<li><a  href="[Link]"><img src="images/[Link]"  alt="Images"   title="HTML  


Images"  width="128"  height="128"  border="0"/></a></li>

<li><a  href="[Link]"><img src="images/[Link]"   alt="Tables"   title="HTML  


Tables"   width="128"  height="128"  border="0"/></a></li>
</ul>
HTML Links - The id Attribute
• The  id  attribute  can  be  used  to  create  
bookmarks  inside  HTML  documents.
• Bookmarks  are  not  displayed  in  any  special  
way.  They  are  invisible  to  the  reader.
HTML Links - The id Attribute
• Add  an  id  attribute  to  any  <a>  element:
<a  id="top">Top  Section</a>
• Then  create  a  link  to  the  <a>  element  (Top  
Section):
<a  href="#top">Visit  the  Top  Section</a>
• Or,  create  a  link  to  the  <a>  element  (Bottom  
Section)  from  another  page:
<a  href=”[Link]#bottom">Visit  the  Bottom  
Section  of  the  main  page</a>
HTML STYLES ATTRIBUTES
HTML Styles Attributes
• HTML  Styling  :=  Every  HTML  element  has  a  
default  style  (background  color  is  white,  text  
color  is  black,   text-­‐size  is  12px  ...)
• Changing  the  default  style  of  an  HTML  
element,  can  be  done  with  the  html  element  
attributes.  
HTML <body> bgcolor Attribute
• The  bgcolor attribute  specifies   the  background  color  of  a  document.
• Syntax:  <body  bgcolor="color_name|hex_number|rgb_number">
• Attribute  Values

Value Description

color_name Specifies the background color with a color name (like "red")

hex_number Specifies the background color with a hex code (like "#ff0000")

rgb_number Specifies the background color with an rgb code (like


"rgb(255,0,0)")

!
HTML <body> bgcolor Activity

Attribute
<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body  bgcolor="#E6E6FA">
<h1>HTML  Styling</h1>

</body>
</html>
HTML <body> bgcolor Attribute
<html>
<head>
<title>Introduction  to  HTML</title>
</head>
<body  bgcolor="#E6E6FA"  background="[Link]">>
<h1>HTML  Styling</h1>

</body>
</html>
HTML <font> color Attribute
• The  color property  defines  the  font  color  to  be  
used  for  an  HTML  element:
• Syntax:  <font  
color="color_name|hex_number|rgb_number">
<h2>HTML  &lt;font&gt;  color  Attribute</h2>
<font  color="red"><h3>This  is  a  
heading</h3></font>
<font  color="green"><p>This  is  a  
paragraph.</p></font>
HTML <font> face Attribute
• The  face property  defines  the  font  to  be  used  
for  an  HTML  element:
• Syntax:  <font  face="font_family">
<h2>HTML  &lt;font&gt;   face  Attribute</h2>
<font  face="verdana"><h3>This   is  a  heading</h3></font>
<font  face="courier"><p>This   is  a  paragraph.</p></font>
HTML Text Alignment Attribute
• The  align property  defines  the  font  to  be  used  
for  an  HTML  element:
• Syntax:  <font  
align="left|right|center|justify">
<h2>HTML  Text  Alignment  Attribute</h2>
<font  align="center"><h3>This  is  a  heading</h3></font>
<font  align="right"><p>This   is  a  paragraph.</p></font>
HTML Text Attribute All Together
• The  HTML  text  attribute  property  can  be  put  
all  together.
<h2>HTML  Text  Alignment  Attribute  All  
Together</h2>
<font  face="verdana"   align="left"  
color="red"><h3>This  is  a  heading</h3></font>
<font  face=”arial"  align="center"  
color="green"><p>This  is  a  
paragraph.</p></font>
HTML TEXT FORMATTING ELEMENTS
HTML Formatting Elements
• HTML  also  defines   special  elements,   for  defining  text  with  a  special  
meaning.
• HTML  uses  elements   like  <b>  and  <i>  for  formatting  output,  like  bold  or  
italic  text.
• Formatting  elements   were  designed  to  display  special  types  of  text:
– Bold   text
– Important  text
– Italic   text
– Emphasized   text
– Marked   text
– Small   text
– Deleted  text
– Inserted   text
– Subscripts
– Superscripts
HTML Bold and Strong Formatting Activity

• The  HTML  <b>  element  defines  bold  text,  without  


any  extra  importance.
• The  HTML  <strong>  element  defines  strong  text,  
with  added  semantic  "strong"  importance.
• Example
<h2>HTML  Bold  and  Strong  Formatting</h2>
<p>This  text  is  normal.</p>
<p><b>This  text  is  bold</b>.</p>
<p><strong>This  text  is  strong</strong>.</p>
HTML Italic and Emphasized Activity

Formatting
• The  HTML  <i>  element  defines  italic  text,  without  
any  extra  importance.
• The  HTML  <em>  element  defines  emphasized  
text,  with  added  semantic  importance.
• Example
<h2>HTML  Italic  and  Emphasized  Formatting</h2>
<p>This  text  is  normal.</p>
<p><i>This  text  is  italic</i>.</p>
<p><em>This  text  is  emphasized</em>.</p>
HTML Small Formatting Activity

• The  HTML  <small>  element  defines  small  text:


• Example
<h2>HTML  <small>Small</small>  
Formatting</h2>
HTML Marked Formatting
• The  HTML  <mark>  element  defines  marked  or  
highlighted  text:
• Example
<h2>HTML  <mark>Marked</mark>  
Formatting</h2>
HTML Deleted Formatting
• The  HTML  <del>  element  defines  deleted  
(removed)  of  text.
• Example
<h2>HTML  Deleted  Formatting</h2>
<p>My  favorite  color  is  <del>blue</del>  red.</p>
HTML Inserted Formatting
• The  HTML  <ins>  element  defines  inserted  
(added)  text.
• Example
<h2>HTML  Inserted  Formatting</h2>
<p>My  favorite  <ins>color</ins>  is  red.</p>
HTML Subscript Formatting
• The  HTML  <sub>  element  defines  subscripted  
text.
• Example
<h2>HTML  Subscript   Formatting</h2>
<p>This  is  <sub>subscripted</sub>   text.</p>
HTML Superscript Formatting
• The  HTML  <sup>  element  defines  subscripted  
text.
• Example
<h2>HTML  Superscript   Formatting</h2>
<p>This  is  <sup>superscripted</sup>  text.</p>
HTML COMMENTS
HTML Comment Tags
• You  can  add  comments  to  your  HTML  source  
by  using  the  following  syntax:
• Example
<!-­‐-­‐ Write  your  comments  here  -­‐-­‐>
• Note:  There  is  an  exclamation  point  (!)  in  the  
opening  tag,   but  not  in  the  closing  tag.
HTML Comment Tags
• Comments  are  not  displayed  by  the  browser,  
but  they  can  help  document  your  HTML.
• With  comments  you  can  place  notifications  
and  reminders  in  your  HTML:
• Example
<!-­‐-­‐ This  is  a  comment  -­‐-­‐>
<p>This  is  a  paragraph.</p>
<!-­‐-­‐ Remember  to  add   more  information  here  -­‐-­‐>
HTML Comment Tags
• Comments  are  also  great  for  debugging  HTML,  
because  you  can  comment  out  HTML  lines  of  
code,  one  at  a  time,  to  search  for  errors:
• Example
<!-­‐-­‐ Do  not   display  this   at  the   moment
<img border="0"  
src=”/images/pic_mountain.jpg"  
alt="Mountain">
-­‐-­‐>
Conditional Comments
• You  might  stumble  upon  conditional  
comments  in  HTML:
<!-­‐-­‐[if   IE  8]>
....  some  HTML  here  ....
<![endif]-­‐-­‐>
HTML FORMS
Forms
• Forms  are  user  interfaces  for  data  input
• Main  application:  to  provide  user  input  for  
– programs   and  databases   located   on   a  web   server
– local  (client-­‐side)  scripts  associated  with  the  form
• Server-­‐based  programs  may  return  data  to  the  
client  as  a  web  page
• Client-­‐side  scripts  can  read  input  data
– To   validate   the   data,  prior   to  sending   to  server
– To  use  in  local  processing  which  may  output  web  page  
content  that  is  displayed  on  the  client
Example applications
• Questionnaires  to  provide  feedback  on  a  web  site
• e-­‐commerce,  to  enter  name,  address,  details  of  
purchase  and  credit-­‐card  number
– request  brochures   from   a   company
– make  a  booking   for  holiday,  cinema  etc.
– buy   a   book,  cd,   etc
– obtain  a  map   giving   directions   to   a  shop
• Run  a  database  query  and  receive  results  (an  
important  part  of  e-­‐commerce)
Input types

• text
• checkbox
• radio (buttons)
• select (options)
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image
The method and action attributes
• The  method attribute  specifies  the  way  that  form  data  is  sent  to  the  server  
program
– GET appends  the  data  to  the  URL
– POST sends  the  data  separately
• The  action attribute  specifies  a  server  program  (e.g.  a  php program  .php
extension)  that  processes  the  form  data
• Can  also  send  an  email:  action=“[Link]

<body>
<form method="POST" action="[Link]">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
The input element: type="text"

• The  type attribute  specifies  the  type  of  user  


input
• The  name attribute  gives  an  identifier  to  the  
input  data
• The  size attribute  specifies  the  length  of  the  
input  field
• The  value attribute  specifies  an  initial  value  
for  the  text  (optional)

<form method="POST" action="[Link]">


<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>
The input element:type="checkbox"

• The  name attribute  is  used  to  define  a  set  


of  checkboxes
• The  value attribute  identifies  the  
individual  checkbox
• If  the  checked attribute  is  set  the  box  is  
initially  checked

How did you hear about this web site?<br>


A friend
<input type="checkbox" name="howdid" value="friend"><br>
Search engine
<input type="checkbox" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="radio"

• Radio  buttons  are  similar  to  


checkboxes,  but  only  one  can  be  
selected
• To  select  a  button  by  default,  use  the  
checked attribute  (for  one  button  only)

How did you hear about this web site?<br>


A friend
<input type="radio" name="howdid" value="friend"><br>
Search engine
<input type="radio" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="button"

• The  name attribute  uniquely  identifies  a  


button
• The  value attribute  gives  a  label  to  the  
button
• Actions  can  be  associated  with  buttons-­
more  later

Do you want to receive any further information:<br>


<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>
The input element:
type="submit/reset"

• type="submit"
– clicking  this  button  sends  the  form  data  
to  the  program  (URL)  specified  in  the  
action attribute  of  the  form
• type="reset"
– clicking  this  button  clears  all  data  
entered  so  far

Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
The input element:
type="password/file/hidden"
• type="password"
– similar  to  type="text" except  that  the  input  is  
echoed  with  asterisks  (so  not  visible)
• type="file"
– provides  a  file  dialogue  box  to  specify  a  file  that  
is  sent  to  the  server
• type="hidden"
– similar  to  text  input,  but  the  value attribute  is  
used  to  specify  data  that  is  to  be  sent  to  the  
server.  Nothing  appears  on  the  screen.
– The  data  might  be  set  by  a  server  program  to  
keep  track  of  the  details  of  a  particular  
transaction.
The textarea element

• Used  for  multi-­line  text  input


• The  size  of  the  input  area  is  specified  
with  the  cols and  rows attributes
• Any  text  placed  inside  the  element  
appears  in  the  input  area  (this  can  be  
deleted).

Please write your comments:<br>


<textarea name="comments" rows="5" cols="20">
put text here
</textarea>
The select element

• The  select element  provides  a  menu  of  


options  
• An  option  can  be  selected  by  default  
using  the  selected attribute  (otherwise  
the  first  in  the  list  is  initially  selected)

How do you rate this site?<br>


<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>

You might also like