Self-­‐‑Study

 Guide  for  Lab  1:    

Create  a  Blog  /  Website  
   
 
Introduction  
In  this  self-­‐‑study  guide,  you  will  be  introduced  to  creating  a  blog  using  WordPress.com.  
 
Objectives  
The   objective   of   this   self-­‐‑study   guide   is   to   introduce   you   to   one   of   the   blog   /   website  
creating   tools   –   WordPress.com,   as   well   as   some   basics   of   HyperText   Markup   Language  
(HTML).   HTML   is   a   standard   language   used   to   create   web   pages.   You   will   be   asked   to  
create  a  blog  using  WordPress.com  and  enhance  the  presentation  of  information  using  
HTML.  At  the  end  of  the  self-­‐‑study  guide,  you  should  be  able  to:  
1.   Develop  a  blog  using  WordPress.com  
2.   Enhance  the  presentation  of  information  using  HTML.  
 
Outline  
A.   Get  Started  
B.   Add  New  Post  –  Visual  and  HTML  
C.   Creating  Tables  using  HTML  
D.   Add  Media  and  External  Links  
E.   Add  New  Page  
 
Section  A.  Get  Started  
1.   To   create   your   WordPress.com   account,   visit   WordPress.com   and   click   on   the  
Create  Website  button:  
 

 
 
2.   You’ll  be  asked  to  enter  a  domain  name.  Try  to  pick  a  domain  name  that  you  can  use  
it  for  free.    
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
1  
     
 
  
 

 
 
3.   Next,  you’ll  be  asked  to  pick  a  plan.  Just  select  the  Free  Plan.  
 

 
 
 
 
 
Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  
CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
2  
     
 
4.   Create  an  account  by  using  a  valid  email  address.  This  is  to  receive  the  verification  
email  after  you  click  on  the  Create  My  Account  button.    
 

 
 
5.   Wait  for  the  verification  email  and  click  on  the  Confirm  Email  Address  button.  
 

 
 
6.   You  may  now  start  to  post  your  first  message.  To  do  this,  click  on  the  Start   a   Post  
button.  
 

 
 
Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  
CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
3  
     
 
7.   Give   your   post   a   title   and   enter   a   short   message   (e.g.   Testing   123).   You   may   then  
click   on   the   Publish   button   to   publish   your   post.   It   may   take   awhile   to   save   and  
publish  your  first  post.  
 

 
 
 
8.   To   view   you   post,   you   may   click   on   the   View   Post   button.   Another   option   is   to  
directly  access  the  home  page  of  your  blog.  This  can  be  done  by  enter  the  link  (e.g.  
computing2016.wordpress.com)  into  your  web  browser.  
 

 
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
4  
     
 
  
 
9.   When  you  click  on  the  My   Site  button,  you  will  be  able  to  bring  up  the  Dashboard  
that  allows  you  to  create  another  post  or  configure  your  blog.    
 

 
 
10.  [YOUR  TASK]  Try  to  create  another  post  in  your  blog.  
 
   

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
5  
     
 
Section  B.  Add  New  Post  –  Visual  and  HTML  
1.   To   add   a   new   post,   you   may   choose   to   do   it   in   the   Visual   mode,   or   using   HTML.   It   is  
very   easy   to   create   a   new   post   in   the   Visual   mode,   because   it   follows   the   concept   of  
what   you   see   is   what   you   get   (also   known   as   the   What   You   See   Is   What   You   Get  
(WYSIWYG)  mode).    
 

 
 
2.   HTML   stands   for   HyperText   Markup   Language.   It   is   a   standard   language   used   to  
create  web  pages.  The  browser  is  able  to  read  HTML  and  translate  them  into  visible  
web  pages.  It  is  written  in  the  form  of  HTML  elements  that  consist  of  tags  enclosed  
in   angle   brackets.   They   usually   come   in   a   pair,   with   one   indicating   the   start  
(opening  tag)  and  another  one  indicating  the  end  (closing  tag).  
 
<strong>  BOLD  THE  IMPORTANT  TITLE!  </strong>  
 
3.   If  you  know  HTML,  you  have  better  flexibility  in  formatting  your  text.  For  example,  
the   function   to   highlight   your   message   (or   some   texts)   is   not   provided   in  
WordPress.com.  But  you  can  do  it  manually  using  HTML.    
 
4.   Try   to   type   a   message   in   the   message   box.   Click   the   HTML   button   to   view   the  
message  and  the  related  HTML  tags  (known  as  HTML  mode).  
 
 

 
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
6  
     
 
  
 
5.   Add   the   HTML   tags   <span   style="background-­‐‑color:   yellow;">   and   </span>   to  
the  beginning  and  the  end  of  your  message.  You  can  choose  other  colors  if  you  want.  
All   you   need   to   do   is   to   change   the   color   specified   in   the   front   tag.   For   example,   you  
may  change  the  color  from  yellow  to  red.  
 

 
 
6.   Click   on   the   Visual   button   to   switch   back   to   the   WYSIWYG   mode.   You   can   notice  
that  the  message  is  now  highlighted.  
 

 
 
7.   Depends  on  how  you  place  your  HTML  tags,  you  can  have  only  part  of  the  message  
been  highlighted.  

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
7  
     
 
  
 

 
 
8.   Besides   the   <span  style="background-­‐‑color:  yellow;">   and   </span>   tags,   there  
are   many   other   tags   that   can   be   used.   Some   of   them   are   listed   in   table   below.   If  
you’re  interested  to  know  more,  you  may  refer  to  [1].  
 
Tags   Description  
<h1>  </h1>   Heading  1  
<h2>  </h2>   Heading  2  
<h3>  </h3>   Heading  3  
<p>  </p>   Paragraph  
   Define  subscripted  text.  
   Define  superscripted  text.  
<strong>  </strong>   Define  important  text  (similar  to  bold).  
<i>  </i>   Define  italic  text.  
 
9.   [YOUR   TASK]   Try   to   use   the   tags   above   to   create   a   new   post   that   contains   a  
heading  and  a  paragraph  with  some  emphasized  or  highlighted  text.  
 
10.  [YOUR   TASK]   You   may   also   create   a   new   post   using   the   Visual   (WYSIWYG)  
mode  and  switch  to  the  HTML  mode  later  to  observe  the  differences.  
 
   

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
8  
     
 
Section  C.  Creating  Tables  using  HTML  
1.   If  you  were  to  create  a  table  in  your  post,  you  will  have  to  do  it  using  HTML.  
 
2.   The  tags  that  can  be  used  are  listed  in  table  below.  
 
Tags   Description  
<table>    </table>   Define  a  table.  
<tr>    </tr>   Divide  a  table  into  rows.  
<td>    </td>   Divide  rows  into  data.  
 
3.   An  example  of  using  the  tags  is  shown  below.  
 
<table>   Result:  
   <tr>    
    <td>Row1-­‐Col1</td>  
Row1-­‐‑Col1          Row1-­‐‑Col2          Row1-­‐‑Col3  
          <td>Row1-­‐Col2</td>    
          <td>Row1-­‐Col3</td>  
Row2-­‐‑Col1          Row2-­‐‑Col2          Row2-­‐‑Col3          
   </tr>  
   <tr>  
          <td>Row2-­‐Col1</td>  
          <td>Row2-­‐Col2</td>    
          <td>Row2-­‐Col3</td>  
   </tr>  
</table>  
 
4.   [YOUR  TASK]  Use  the  HTML  tags  to  create  a  new  post  with  table  shown  below.  
 
Name   Test  1  (%)   Test  2  (%)   Total  
James   5   4   9  
Kenny   3   3   6  
Jennifer   5   2   7  
Patricia   4   5   9  
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
9  
     
 
Section  D.  Add  Media  and  External  Links  
1.   To  embed  a  picture  into  your  post,  click  on  the  Add  Media  button.    
 

 
 
2.   You  must  then  upload  the  picture  to  WordPress.com  before  you  could  embed  it  into  
your  post.  To  do  this,  click  on  the  Upload  Media  button  and  select  a  picture  that  you  
would  like  to  add  to  your  post.  
 

 
 
3.   To  add  an  external  link  (e.g.  to  another  blog  /  website),  highlight  the  text  where  you  
would  like  to  appear  as  an  external  link,  and  click  on  the  Insert/Edit  Link  button.    
 

 
 
 
Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  
CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
10  
     
 
4.   A  window  will  popup  for  you  to  insert  the  external  link.  
 

 
 
5.   [YOUR  TASK]  Try  to  create  a  new  post  with  two  pictures.  
 
6.   [YOUR  TASK]  Try  to  create  a  new  post  with  an  external  link  to  Google.  
 
Section  E.  Add  New  Page  
1.   Sometimes,  it  is  not  wise  to  put  all  the  information  into  one  page.  Besides  creating  
new  post,  you  can  also  create  a  new  page.  This  allows  you  to  sort  the  information  
and  put  them  in  different  pages.  
 
2.   To  do  this,  click  on  the  Add  button  beside  Pages.  
 

 
 
3.   You  may  then  enter  the  title  as  well  as  the  message  that  you  would  like  to  put  in  the  
new  page.  After  that,  just  click  on  the  Publish  button  to  publish  your  new  page.  
 
 
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
11  
     
 
4.   The   new   page   can   be   hard   to   locate   if   the   theme   that   you   have   selected   is   not  
designed  to  display  it  on  the  main  page  directly.  In  this  case,  it  would  be  better  to  
select  another  theme.  
 
5.   To  do  this,  click  on  Themes  (not  the  Customize  button)  and  pick  the  Button  theme.    
 

 
 
6.   If  you  would  like  to  further  explore  on  WordPress.com,  please  refer  to  [2].  
 
7.    [YOUR  TASK]  Try  to  add  new  pages  such  as  Company  Info,  Gallery,  etc.  
 
 
References    
[1]  w3schools,  “HTML  Tutorial”,  2015,  http://www.w3schools.com/html/default.asp  
[2]  WordPrss.com,  “Get  Started”,  2015,  https://learn.wordpress.com/get-­‐‑started/  
 
IMPORTANT:  
 
Please  remember  to  complete  the  self-­‐‑study  guide  quiz.  The  quiz  will  be  available  from  
Friday   (15th   January)   09:00   to   Saturday   (16th   January)   23:59.   It   consists   of   Five   (5)  
multiple  choice  questions.  
 
If  you  have  any  questions,  please  contact  Dr.  Chia  (waichongc@sunway.edu.my)  or  Dr.  
Yeong  (leesengy@sunway.edu.my).  
 
 

Self-­‐‑Study  Guide  for  Lab  1  (Last  Updated:  8  January  2016)  

CSC1014  –  Computer  Fundamentals  /  ITC1014  –  Business  Computing,  January  2016
12